Skip to content

Latest commit

 

History

History
97 lines (68 loc) · 7.27 KB

README.md

File metadata and controls

97 lines (68 loc) · 7.27 KB
Raw

Интернет-магазин

Пэт проект интернет-магазин с витриной и админкой на React, Redux-Toolkit, TypeScript.

Кратко

  • В админке можно добавлять товары/категории/бренды. На витрине это все динамически рендерится. Можно оформлять заказы и просматривать их в админке.

Деплой

https://flourishing-tartufo-ae4f52.netlify.app/

Функционал

Админка

Страница заказов

  • На странице отображаются все оформленные заказы. По клику на заказ можно увидеть его состав и другую информацию

Страница товаров

  • Кнопка Добавить товар не активна если нет ни одной категорий или ни одного бренда
  • В форме создания нового товара обязательные поля отмечены звездочками. Поля валидируются на пустое значение. Поле Изображение валидируется по регулярному выражению на соответствие прямой ссылке
  • По клику на кнопку Сохранить товар уходит POST запрос на сервер
  • Уже созданные товары можно редактировать и удалять. На сервер уходят запросы PATCH и DELETE.
  • Если при выполнении запроса с сервера возвращается ошибка, то рендерится всплывающее уведомление.
  • В списке товаров есть два фильтра: по категориям и брендам. Фильтры связаны и работают в обе стороны: если в фильтре по категориям выбрать категорию, то в фильтре по брендам будут отображаться только те бренды, у которых есть соответствующие категории. И наоборот, если сначала выбрать бренд, то в фильтре по категориям будут только категории соответствующего бренда. Список товаров на странице отображается в соответствии с выбранными значениями фильтров
  • Акционные товары с соответствующим бейджем

Страница настроек

  • Можно добавлять, изменять или удалять категории и бренды (запросы GET, POST, PATCH, DELETE)
  • В карточках отображается количество товаров и количество товаров со скидкой у категорий и брендов
  • Категорию или бренд нельзя удалить если к ним привязаны товары. При попытке удалить рендерится уведомление
  • При изменении названия бренда или категории, актуальные данные отображаются на странице товаров в фильтрах и в самих товарах, а так же при создании нового товара.
  • Поля формы создания новой категорий или бренда валидируются на пустое значение
  • Если при выполнении сервер вернул ошибку, то рендерится уведомление

Витрина

Товары добавленные в Избранные и в корзину сохраняются в LS. При добавлении рендерится уведомление с ссылкой для перехода на соответствующую страницу.

Шапка

  • Меню динамическое. В нем отображаются созданные в админке категории

Роутинг

  • Главная страница — акционные товары (скидку можно задать в карточке товара в админке)
  • Страница категорий — динамический роутинг. Адрес страницы имеет следующий вид site.com/:url. Url можно задать в админке в настройках категории, таким образом ссылки получаются такими site.com/jeans
  • Карточка товара — вложенный динамический роутинг site.com/:url/:id
  • 404 страница для несуществующих роутов
  • Страница успешного оформления заказа с таймером обратного отсчета и редиректом на главную

Каталог товаров

  • При рендере страницы товары сортируются по цене в возрастающием порядке
  • Порядок сортировки можно изменить по клику на Сначала показывать
  • Блок категорий товаров формируется исходя из категорий, которые были созданы в админке
  • Фильтр по брендам
  • Пагинация Показать еще
  • Описание категории рендерится если его указать в настройках категории
  • Товары можно добавить/удалить в Избранные
  • У карточек товаров рендерятся бейджи: размер скидки (если есть), производитель и категория

Карточка товара

  • При добавлении товара в корзину рендерится уведомление с ссылкой для перехода в корзину
  • Товар можно добавить/удалить из Избранного

Корзина

  • Можно изменить количество товара, добавить в Избранное или удалить. Можно удалить товар из корзины
  • В блоке Итого рассчитывается общая сумма заказа и вес (цену, скидку и вес можно указать в админке в карточке товара)
  • Поля формы валидируются на пустое значение

Стек

  • React
  • Redux-Toolkit
  • TypeScript
  • Firebase
  • Адаптивная верстка

Установка

Для запуска на локальной машине необходимо:

  1. Установить npm зависимости:
npm install
  1. Запустить в режиме разработки:
npm run start

Если все прошло успешно, проект будет запущен на http://localhost:3000