🛒 "Sultan" Online Store web Application

Layout Figma

🔗 Github Pages

DEPLOY Live link

📸 Screenshots

🖥 Desktop

📱 Mobile

🛠 Commands

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

📑 Реализованные задачи [RU]:

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 и форма для удаления выбранного товара.

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

⚙️ Реализованы unit-тесты компонентов (12):

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