Интернет-магазин редких моделей обуви

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

Проект представляет собой интернет-магазин, предоставляющий пользователям возможность просматривать редкие модели обуви. Вдохновением для дизайна и структуры послужили магазины Off-White и GOAT. Основная цель — создать легкий и интуитивно понятный интерфейс с использованием современных технологий.

🚀 Основные функции

• Каталог товаров: отображение списка обуви с фильтрацией по категориям и брендам.
• Поиск товаров: возможность быстрого поиска по названию и характеристикам.
• Карточка товара: информация о модели, включая фото, описание и цену.
• Сортировка: возможность сортировать товары по цене и другим критериям.

🛠️ Стек технологий

Проект разработан с использованием следующих технологий:

• TypeScript (используется для статической типизации и улучшения качества кода)
• React.js (основа для построения пользовательского интерфейса)
• Next.js (для SSR и оптимизации производительности проекта)
• Redux-toolkit (для управления состоянием приложения)
• SCSS (модульный подход) (стилизация компонентов с поддержкой вложенности и переменных)
• API mokky.dev (используется в качестве базы данных для получения данных о товарах)

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

jk/
│-- public               # Публичные ресурсы
│   │-- img/             # Изображения
│-- lib/                 # Дополнительные библиотеки или вспомогательный код
│   │-- features/        # Redux-срезы и логика для состояний
│   │   │-- bag/
│   │   │   │-- selectors.ts    # Селекторы для работы с состоянием
│   │   │   │-- slice.ts        # Создание среза состояния (redux toolkit)
│   │   │   │-- types.ts        # Типизация для bag
│   │   │-- filter/             # Аналогичные структуры для фильтрации
│   │   │-- ...
│-- app/
│   │-- bag/             # Страница с отображением корзины
│   │   │-- page.tsx
│   │-- checkout/        # Страница оформления заказа
│   │   │-- page.tsx
│   │-- components/      # Переиспользуемые компоненты React
│   │   │-- BestChoiceCard/
│   │   │   │-- BestChoiceCard.module.scss
│   │   │   │-- index.tsx        # Компонент
│   │   │-- ButtonCustom/    # Кастомная кнопка
│   │   │-- CardProduct/     # Карточка товара
│   │   │-- Filters/         # Компонент для фильтрации
│   │   │-- Header/          # Шапка сайта
│   │   │-- Footer/          # Подвал сайта
│   │   │-- ...
│   │-- hooks/           # Кастомные хуки
│   │   │-- useScrollDirection.tsx  # Хук для отслеживания направления прокрутки
│   │   │-- useWindowSize.tsx       # Хук для отслеживания размера окна
│   │-- layouts/         # Глобальные и локальные макеты
│   │-- providers/       # Провайдеры состояния и контекста
│   │-- sneakers/        # Страницы каталога кроссовок
│   │   │-- [slug]/      # Динамическая страница товара
│   │-- styles/          # Глобальные стили
│   │   │-- _animations.scss  # Анимации
│   │   │-- _variables.scss   # Глобальные переменные
│   │-- utils/           # Вспомогательные функции
│   │   │-- getRandomMinMax.tsx  # Генерация случайных значений в диапазоне
│   │-- constants.tsx    # Константы проекта
│   │-- globals.scss     # Глобальный SCSS файл
│   │-- layout.tsx       # Главный layout проекта
│   │-- page.tsx         # Главная страница приложения
│-- package.json         # Зависимости проекта
│-- README.md            # Описание проекта
│-- tsconfig.json        # Конфигурация TypeScript

🎨 Макет и UI/UX

• Дизайн: адаптирован под минималистичный стиль платформ Off-White и GOAT.
• Адаптивность: проект корректно отображается на любых устройствах благодаря современному подходу к вёрстке.

🌐 Деплой

Проект доступен по следующей ссылке: vanya1254.github.io/jk.

🔧 Установка и запуск проекта

1. Клонирование репозитория

   git clone https://github.com/vanya1254/jk.git
   cd jk

2. Установка зависимостей

   npm install

3. Запуск проекта

   npm start

4. Открыть проект
   Проект запустится по адресу: http://localhost:3000

📦 Артефакты и ссылки

• GitHub репозиторий: Ссылка на репозиторий
• Деплой проекта: vanya1254.github.io/jk

🧪 Оригинальность

Проект разработан с нуля, учитывая современные тренды и принципы веб-разработки.