React Sneakers

📋 Описание проекта

React Sneakers — это современный интернет-магазин кроссовок, разработанный с использованием React. Приложение предоставляет удобный интерфейс для просмотра каталога товаров, добавления их в корзину и оформления заказов.

✨ Функциональные возможности

• Каталог товаров — просмотр всех доступных моделей кроссовок
• Поиск — фильтрация товаров по названию
• Корзина — добавление товаров, изменение количества, удаление
• Избранное — возможность добавить товары в закладки
• Заказы — история оформленных заказов
• Локальное хранение данных — сохранение корзины, избранного и заказов в localStorage
• Темная тема — переключение между светлой и темной темой оформления
• Адаптивный дизайн — корректное отображение на мобильных устройствах и планшетах
• Управление количеством — выбор количества товаров при добавлении в корзину

🛠️ Технологии

• React — библиотека для создания пользовательского интерфейса
• React Router — маршрутизация в приложении
• Context API — управление глобальным состоянием
• SCSS/SASS — стилизация компонентов
• React Content Loader — скелетон-загрузка для улучшения UX
• LocalStorage API — хранение данных на стороне клиента
• CSS Grid — адаптивная сетка для отображения товаров
• Media Queries — адаптация интерфейса под различные устройства

📦 Структура проекта

react-sneakers/
├── public/                # Статические файлы
│   ├── img/               # Изображения
│   │   ├── sneakers/      # Фотографии товаров
│   │   └── ...            # Иконки и другие изображения
│   └── index.html         # HTML шаблон
├── src/                   # Исходный код
│   ├── components/        # React компоненты
│   │   ├── Card/          # Карточка товара
│   │   ├── Drawer/        # Корзина (боковая панель)
│   │   ├── Header.js      # Шапка сайта
│   │   ├── ThemeSwitch.jsx # Переключатель темы
│   │   └── Info.jsx       # Информационный компонент
│   ├── hooks/             # Пользовательские хуки
│   │   └── useCart.js     # Хук для работы с корзиной
│   ├── pages/             # Страницы приложения
│   │   ├── Favorites.jsx  # Страница избранного
│   │   ├── Home.jsx       # Главная страница
│   │   └── Orders.jsx     # Страница заказов
│   ├── App.js             # Основной компонент приложения
│   ├── context.js         # Контекст приложения
│   ├── index.js           # Точка входа
│   └── index.scss         # Глобальные стили
└── package.json           # Зависимости и скрипты

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

Предварительные требования

• Node.js (версия 14.x или выше)
• npm или yarn

Шаги по установке

1. Клонировать репозиторий:

   git clone <url-репозитория>
   cd react-sneakers

2. Установить зависимости:

   npm install
   # или
   yarn install

3. Запустить приложение в режиме разработки:

   npm start
   # или
   yarn start

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

🔧 Сборка для продакшена

npm run build
# или
yarn build

Собранные файлы будут находиться в директории build/.

📱 Особенности интерфейса

Главная страница

• Отображение всех доступных товаров
• Поиск по названию
• Сортировка (товары в корзине отображаются первыми)
• Возможность добавить товар в корзину с указанием количества
• Возможность добавить товар в избранное
• Адаптивная сетка товаров (4 колонки на десктопе, 3 на планшете, 2 на маленьком планшете, 1 на мобильном)

Корзина

• Просмотр добавленных товаров
• Изменение количества товаров
• Удаление товаров
• Расчет общей стоимости и налога с округлением до копеек
• Оформление заказа
• Закрытие корзины при клике вне её области

Избранное

• Просмотр товаров, добавленных в закладки
• Возможность удалить товар из избранного

Заказы

• История оформленных заказов
• Просмотр товаров в каждом заказе

Темная тема

• Переключатель темы в шапке сайта
• Сохранение выбранной темы в localStorage
• Адаптированные стили для всех компонентов в темной теме

🔄 Управление состоянием

В приложении используется Context API для управления глобальным состоянием:

• Список товаров
• Корзина
• Избранное
• Поиск
• Тема оформления

Данные сохраняются в localStorage браузера, что позволяет сохранять состояние приложения между сессиями.

🎨 Стилизация

В проекте используются:

• SCSS/SASS для стилизации компонентов
• CSS-модули для изоляции стилей
• CSS Grid для адаптивной сетки товаров
• Media queries для адаптации под различные устройства
• Библиотека macro-css для удобных утилитарных классов

📝 Дополнительная информация

Проект использует mock-данные для демонстрации функциональности, так как API больше не доступен. Все операции с данными (добавление в корзину, оформление заказа и т.д.) выполняются локально с использованием localStorage.

📈 Возможности для улучшения

• Добавление авторизации пользователей
• Интеграция с реальным бэкендом
• Добавление системы отзывов
• Реализация фильтрации по категориям и ценам
• Добавление пагинации для большого количества товаров
• Дальнейшая оптимизация для мобильных устройств
• Добавление анимаций для улучшения пользовательского опыта