Тестовое задание, Акцент на результат
Задачи:
- Необходимо адаптивную страницу со списком товаров, фильтром по брендам. Список товаров находится в файле /assets/products.json, список брендов в файле /assets/brands.json
- Дизайн на свое усмотрение, примерный вид отображены в схемах desktop.png, mobile.png
- Также на странице должна быть иконка корзины, со счетчиком товаров в корзине. По клику на иконку должен совершаться переход на страницу корзины.
- Должна быть пагинация, по 6 товаров на страницу
- Должна быть возможность отправлять товары в корзину. Счетчик должен обновляться без перезагрузки страницы. Фильтрация товаров должна проходить без перезагрузки.
- На странице корзины должен быть список товаров, с ценой, переключателем количества, автоматическим пересчетом итоговый цены, должна быть поля имя, телефон и кнопка «Оформить заказ».
- При оформлении заказа должен отправиться POST-запрос на адрес https://app.aaccent.su/js/confirm.php с json-данными о заказе в свободном формате.
- Запрос вернет JSON-ответ “{“result”:”ok”}” , по возвращению этих данных должно всплыть модальное окно об успешном оформлении, при нажатии на кнопку «закрыть» корзина должна очищаться и переадресовываться на главную страницу
Адаптив
Адаптив сделан
Стэк
- TypeScript
- React
- Redux-Toolkit
Библиотеки
- MaterialUI
Скачать пакет зависимостей
npm i
Запустить проект в прод
npm run build
Запустить в режиме разработки
npm start
Деплой на Netlify:
website
UPD: ↑ изменил ссылку на актуальную.