A-Store

Онлайн-магазин мерча для Альфа-Банка

Такой магазин A-Store уже есть, но сделан на Tilda, поэтому реализует только предопределенную функциональность и не использует стандартную для Альфа-Банка библиотеку визуальных элементов.

Этот проект сделан как итоговый/выпускной при обучении в Альфа-Кампусе на JavaScript-факультете.

👀 Демо a-store.novvember.tk

Функциональность - возможности существующего магазина мерча

• статичные страницы с информацией: Главная, Контакты
• страницы со списками/группами товаров: Сделано в Альфе, Свой дизайн
• страницы с подробной информацией о товаре
  • информация
  • галерея картинок
  • форма выбора размеров/опций
  • добавление в корзину
• выезжающая панель с меню сайта
• корзина в товарами
  • fab-кнопка при непустой корзине для доступа к содержимому
  • корзина отрывается в выезжающей панели
  • товары в корзине можно изменять/удалять
  • содержимое корзины сохраняется в браузере и доступно при повторном посещении сайта
• большая форма оформления заказа
  • личные данные покупателя
  • различные сочетания параметров заказа и оплаты
  • логика указания и проверки промокода
  • расчет итоговой стоимости
  • валидация формы перед отправкой на сервер

Стек

• Alfa Core Components
• Create React App
• Typescript
• React
• Custom Hooks
• React Router
• React Hook Form
• Redux
• Redux Toolkit
• Async Thunks
• React Testing Library

API

Базовый url: http://qa-games.ru/astore/

• /made-in-alfa – возвращает товары для для страницы Сделано в Альфе (GET)
• /your-design – возвращает товары для для страницы Свой дизайн (GET)
• /product/:id – возвращает описание конкретного товара (GET)
• /create-order – оформление заказа (POST)

Задание на разработку

Описание

В рамках проекта вам предстоит реализовать свой интернет-магазин мерча для Альфа-Банка. Строгих ограничений по тому, как должен выглядеть итоговый вариант, нет. Есть только ограничения по необходимому рабочему функционалу. При реализации можете либо полностью скопировать текущий боевой вариант дизайна магазина, либо проявить фантазию и импровизировать.

Необходимая функциональность

По итогу должны быть реализованы следующие страницы:

1. Главная страница. Должна содержать в себе ссылки на страницы с товарами.
2. Страница Сделано в Альфе. Должна содержать список с товарами.
3. Страница Свой дизайн. Всё аналогично предыдущей странице, но товары разбиты по группам.
4. Страница Товара. Галерея с картинками, описание, форма добавления в корзину.
5. Страница Контакты. Галерея с картинками, описание, форма добавления в корзину.
6. Страница Корзины. Форма оформления заказа.

Каждая страница должна содержать в себе хэдер с выезжающим меню и футер. Если в корзине лежит какой-то товар, также должна отображаться иконка с корзиной. Не забывайте об адаптивном дизайне.

Стек

При реализации проекта вам необходимо использовать следующий стэк:

• React, TypeScript и Redux Toolkit (thunk или sagas на выбор, без использования RTK Query);
• Инструменты тестирования Jest и react testing library;
• Библиотеку для роутинга React Router v6;
• Библиотеку компонентом Core Components;
• Библиотека для работы с формами: Fromik и react-hook-form.

Статус разработки

✅ Завершено