Перейти к содержимому
Сергей Артамонов
  • Frontend

Космическая бургерная

Интернет-магазин с конструктором бургеров, авторизацией, профилем пользователя и лентой заказов

  • React
  • TypeScript
  • Redux Toolkit
  • React Router
  • Playwright

Задача и назначение

Нужно было собрать клиентскую часть приложения целиком: маршрутизацию, глобальное состояние и авторизацию без перезагрузки страницы.

Что реализовано

  • Конструктор бургера: выбор булки, добавление, удаление и перестановка ингредиентов
  • Лента общих заказов и история заказов пользователя
  • Авторизация с защищёнными маршрутами и обновлением токена
  • Модальные окна ингредиента и заказа с отдельными URL

Особенности реализации

Состояние разнесено по слайсам Redux Toolkit, запросы к API вынесены в createAsyncThunk, презентационные компоненты отделены от контейнеров, а доступ к закрытым разделам ограничен отдельным компонентом ProtectedRoute. Для проверки логики написаны юнит-тесты редьюсеров и интеграционные тесты пользовательских сценариев с моками сети.

Результат

Работающее SPA с конструктором бургера, лентой заказов и личным кабинетом, покрытое юнит- и интеграционными тестами.