React sneakers

Описание

React-sneakers — интернет-магазин кроссовок. Этот проект я написал для того, чтобы закрепить свои знания по React и попрактиковаться с React-router-dom. Также я впервые использовал React Skeleton и IntersectionObserver.

Функционал

• доступен на мобильных устройствах,
• у всех интерактивных элементов есть анимация,
• регистрация и авторизация пользователя (стейт с заказами, кроссовками в закладках и корзине общий для всех пользователей),
• отображение попапов при успешной и не очень регистрации,
• отображение попапа с ошибкой при неудачном входе,
• тексты ошибок в попапы прилетают с сервера,
• валидация форм,
• после авторизации в шапке отображается почта текущего пользователя,
• вся информация о товарах (ссылки на фото, название, цена) подгружаются с сервера,
• закладки, оформленные заказы, товары в корзине также сохраняются на сервере,
• на сайте присутствует корзина, в которой можно увидеть итоговую сумму (цена товаров + доставка 5%), из нее также можно удалять товары
• покупка кроссовок,
• при оформлении заказа (его номер сохраняется), корзина очищается и он добавляется в соответствующий раздел,
• при удалении/добавлении товара в корзину обновляется соответствующая кнопка на карточке, общая сумма в корзине и в шапке сайта,
• при удалении всех закладок появляется сообщение с рандомным эмодзи (1 из 10),
• сортировка товаров по цене,
• поиск товаров по названию,
• если поиск не дал результатов, то также появляется сообщение с рандомным эмодзи. Если продолжить вводить текст в строку поиска, то на каждый символ будет отображаться новый эмодзи,
• при прокрутке до нижней части экрана автоматически происходит подгрузка новой порции товаров. Так будет происходить, пока товары не закончатся (всего их 100 шт.),
• использование прелоадеров,
• при клике на фото товара открывается попап с увеличенной фотографией.

Технологии

• React,
• React Router,
• React Skeleton,
• Хуки (useState, useEffect, useContext, useRef),
• использование кастомных хуков (валидация форм, блокировка скролла, хук для подсчета суммы заказа),
• использование локального хранилища,
• работа с API (mockapi),
• HOC-компоненты,
• Intersection Observer API,
• БЭМ,
• контроль версий в Git с использованием веток.

Инструкция

Чтобы запустить проект, нужно сделать несколько простых шагов.

• Создайте папку и перейдите в неё:

cd <Имя-папки>

• Склонируйте этот репозиторий:

git clone https://github.com/famovkin/react-sneakers.git

• Установите все зависимости:

yarn или npm install

• Теперь можете запустить проект:

npm start или yarn start

Системные требования

Для запуска потребуется Node.js версии 16.13.0.

Планы по доработке

• Заменить селект сортировки на попап,
• Добавить тёмную тему, для этого нужно заменить некоторые svg-кнопки и фото кроссовок, так как они не png.

Ссылка на GitHub Pages

https://famovkin.github.io/react-sneakers/