Интернет-магазин цифровых товаров

Скрины

Описание

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

• Главная страница с каталогом товаров
• Слайдер популярных товаров (выбор товаров и включение слайдера настраивается в админке)
• Поиск по товарам
• Фильтрация по категориям
• Страница отдельного товара с подробной информацией и рейтингом
• Адаптивный дизайн (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

   Код

   npm install

2. Запустите dev-сервер:
   
   npm start

   Код

   npm start

3. (Опционально) Запустите mock API (например, json-server):
   
   
   npx json-server --watch db.json --port 4000
   

   Код

   
   
   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" }
   ]
   }

   Код

   {
   
    "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)

Делалось все на коленке под пивас
мне он не нужен так что забирайте мб кому то пригодится

GitHub