Пэт проект интернет-магазин с витриной и админкой на 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
- Адаптивная верстка
Для запуска на локальной машине необходимо:
- Установить npm зависимости:
npm install- Запустить в режиме разработки:
npm run startЕсли все прошло успешно, проект будет запущен на http://localhost:3000