✓ Game Keys Store | Магазин цифровых товаров Source

Game Keys Store​

Основные возможности​

• Главная страница с каталогом товаров
• Слайдер популярных товаров (выбор товаров и включение слайдера настраивается в админке)
• Поиск по товарам
• Фильтрация по категориям
• Страница отдельного товара с подробной информацией и рейтингом
• Адаптивный дизайн (Tailwind CSS)
• Админ-панель для управления товарами и категориями
• Рейтинг товаров (отображение и редактирование)
• Простая авторизация для админки

Страницы​

• / — Главная страница (каталог + слайдер популярных)
• /product/:id — Страница товара
• /categories — Категории товаров
• /search — Поиск по товарам
• /admin — Админ-панель (добавление/редактирование/удаление товаров и категорий, настройка слайдера)
• /auth — Страница авторизации для админки
• 404 — Страница не найдена

Слайдер популярных товаров​

• Включается/выключается глобально в админке (чекбокс "Включить слайдер на главной")
• Для каждого товара можно указать, показывать ли его в слайдере (чекбокс "Показывать в слайдере")
• В слайдере отображаются только отмеченные товары, сортировка по рейтингу

Админка​

• Добавление, редактирование, удаление товаров
• Управление категориями
• Редактирование рейтинга товара
• Чекбокс для отображения товара в слайдере
• Глобальный чекбокс для включения/выключения слайдера
• Авторизация по паролю (по умолчанию: admin123)

Требования​

• Node.js >= 16
• npm >= 8
• Локальный REST API (например, json-server, порт 4000, структура как в services/api.js)

Установка и запуск​

1. Установите зависимости:
   npm install
   
   
2. Запустите dev-сервер:
   npm start
   
   
3. (Опционально) Запустите mock API (например, json-server):
   npx json-server --watch db.json --port 4000
   
   Пример структуры db.json:
   
   Код:

   {
     "products": [
       { "id": 1, "title": "Game", "price": 10, "description": "Desc", "category": "Action", "image": "url", "rating": 4.5, "showInSlider": true }
     ],
     "categories": [
       { "id": 1, "name": "Action" }
     ]
   }

   
   
4. Откройте http://localhost:3000 в браузере.

Технологии​

• React
• Tailwind CSS
• Swiper (слайдер)
• Heroicons
• json-server (для mock API)