Layout Figma

DEPLOY Live link

Install packages:

npm install

Run the project:

npm run dev 

Build for production.

npm run build

Locally preview production build.

npm run preview

Deploy to Github Pages.

npm run deploy

Run tests.

npm run test

1. Подготовлен JSON набор данных. На удаленном сервере развернута mongoBD и API для работы приложения. В базе данных хранятся сведения о продуктах. Набор данных о продукте:

   • id
   • Наименование
   • Цена
   • Описание
   • Url изображения
   • Единица измерения
   • Значение единицы измерения
   • Штрихкод
   • Происзодитель
   • Бренд
   • Описание
   • Список соответсвующих категорий (для фильтра)

2. Реализована страница Каталога товаров.

   2.1. Обеспечена адаптивная верстка.

   2.2. Для списка товаров создана возможность сортировки:

   • По алфавиту (возрастание)
   • По алфавиту (убывание)
   • По цене (возрастание)
   • По цене (убывание)

   2.3. Добавлены в топе страницы каталога фильтры по категориям товаров, заполняемые автоматически всеми категорийми представленными в полученных по API продуктах.

   2.4. Создан компонент sidebar на странице каталогая для применения фильтров к списку товара.

   Предусмотрены:

   • фильтр по цене

   • фильтр по производителю

   • фильтр по категории (аналогичный 2.4 - выбранное значение в боковой панели фильтров отражается в компоненте в топе страницы)

   2.5. Добавлена пагинация и кнопки постраничного перехода соответсвенно.

   2.6. Карточка товара в каталоге - является ссылкой на страницу товара.

3. Страница карточки товара.

   Каждый товар должен открывается по своему url (используя id продукта)

   Компонент страницы товара содержит такие компоненты, как:

   • Навигационная цепочка - breadcrumbs. (Например, Главная - Каталог - Название товара)

   • Изображение

   • Блок с информацией о товаре, полученной по API.

   • Кнопка "В корзину" и счетчик количества товаров в корзине.

4. Корзина.

   4.1. Ссылка на козину в шапке показывает текущее количество товаров в корзине, и обную сумму.

   4.2. Для элемента корзины присутсвуют счетчик количества товара, возможность его изменитть или удалить товар.

   4.3 В козине после нажатия "оформить" появляется модальное окно с подтверждение заказа.

5. Предусмотрена минимальная панель администратора для управления данными.

   Реализованы:

   • POST запрос к API и форма для создания нового товара.

   • PUT запрос к API и форма для редактирования выбранного товара.

   • DELETE запрос к API и форма для удаления выбранного товара.

   • обавление списка категорий товара происходит строкой, где категории разделены запятой.

1. AddButton
   • Тест вызова действия добавления товара.
   • Тест рендера количества добавленных товаров на кнопке.
2. CartItem
   • Тест рендера переданных данных товара.
   • Тест вызова действия удаления товара
3. Counter
   • Тест рендера текущего количества товара.
   • Тест вызова действия добавления товара
   • Тест вызова действия уменьшения товара
4. ProductItem
   • Тест рендера переданных данных товара.
5. Products
   • Тест рендера списка товаров с сортировкой по цене (возрастание).
   • Тест рендера списка товаров с сортировкой по цене (убывание).
   • Тест рендера списка товаров с сортировкой по алфавиту (возрастание).
   • Тест рендера списка товаров с сортировкой по алфавиту (убывание).