Для запуска приложения нужно перейти по ссылке: https://antis85.github.io/ra-diplom
- Html (предоставлена готовая реализация)
- CSS (предоставлена готовая реализация)
- Javascript: React, -Router, Redux, -Thunk, -Toolkit
- Backend Nodejs (предоставлена готовая реализация)
- CI/CD: Appveyor+GitHub Pages+Heroku
- Разметка и стили: https://github.com/Antis85/ra16-diploma/tree/master/html
- Бэкенд: https://github.com/Antis85/ra-diplom-server
- JS:
- Основной компонент приложения - App - глобальное состояние корзины и роутинг по страницам
- Компоненты страниц приложения - Components
- Кастомный хук для работы с глобальным состоянием корзины - useStorage
- Управление состоянием приложения (store, reducers, actions) - Redux Toolkit
- Взаимодействие с сервером через Redux Thunk middleware - API
Приложение содержит следующие страницы:
- Главная страница
- Открывается при первом запуске приложения
- Содержит блоки "Хиты продаж" и "Каталог"
- Каталог товаров
- Доступен как с главной страницы, так и при переходе через отдельный пункт меню
- Позволяет осуществлять поиск товаров по ключевым словам(название, тип обуви, цвет и т.д.), включать фильтр по категории товара, переходить на страницу товара при нажатии кнопки "Заказать", отображать следующие 6 элементов каталога при нажатии кнопки "Загрузить ещё"
- О магазине
- Контакты
- Страница товара
- Отображается при нажатии кнопки "Заказать" в карточке товара
- Для добавления в корзину, нужно выбрать один размер(при наличии нескольких размеров) и количество товара, затем нажать кнопку "В корзину"
- Корзина
- Отображает товары, находящиеся в корзине, при нажатии кнопки "В корзину" на странице товара или при нажатии на иконку корзины в шапке страницы
- Виджет корзины в шапке отображает количество позиций в корзине, одной позицией считается пара товар + размер
- После успешного оформления заказа все данные корзины очищаются
- Страница 404
- На всех страницах в шапке и футере присутствуют виджет поиска, виджет корзины, навигационное меню и баннер