Stellar Burgers — Single Page Application для космической бургерной: пользователь собирает бургер из ингредиентов, оформляет заказ, отслеживает заказы в реальном времени и управляет профилем.
Проект выполнен как итоговая работа по теме Redux-хранилище + роутинг + авторизация.
-
Repository: https://github.com/AlliumPro/stellar-burgers
- Сборка бургера из ингредиентов
- Отображение данных, полученных с сервера
- Оформление заказа только для авторизованных пользователей
- Публичные и защищённые маршруты
- Вложенные динамические маршруты
- Корректная активность ссылок в навигации (включая вложенные страницы)
- Ингредиент открывается как modal route:
- при клике — модальное окно
- при прямом переходе — полноценная страница
- Аналогично для деталей заказа из ленты и истории
- Регистрация / вход / восстановление пароля
- Защищённый доступ к профилю и истории заказов
- Поток токенов (access/refresh) и запросы к API
/feed— публичная лента заказов в реальном времени/profile/orders— история заказов пользователя (только авторизованным)- Подсчёт стоимости заказа на основе ингредиентов
- Статусы: «Отменён», «Готовится», «Выполнен»
/— конструктор бургера/feed— лента заказов (real-time)/ingredients/:id— страница ингредиента (или модалка при переходе из приложения)*— 404
/profile— профиль пользователя (редактирование данных)/profile/orders— история заказов/profile/orders/:number— детали заказа (страница/модалка)
/login/register/forgot-password/reset-password
- Профиль пользователя:
- поля формы заполняются данными пользователя
- при изменении данных появляются кнопки «Отмена» и «Сохранить»
- «Сохранить» отправляет запрос с изменёнными данными
- «Отмена» откатывает значения к исходным и скрывает кнопки
- Модальные маршруты:
- переход по клику открывает модалку и меняет URL
- прямой переход по URL открывает страницу
- Лента заказов:
- обновляется в реальном времени
- показывает статистику: всего заказов и за день
- История заказов:
- доступна только авторизованным
- обновляется в реальном времени, отображает статусы и стоимость
- React + TypeScript
- Redux Toolkit (slices, selectors, async thunks)
- React Router
- REST API (получение ингредиентов, создание заказов, профиль)
- WebSocket (лента заказов / история заказов)
src/pages— страницы приложения (роуты)src/components— переиспользуемые компоненты и UIsrc/services/src/store— Redux store, slices, thunks, selectors (в зависимости от структуры репозитория)src/utils/burger-api.ts— методы работы с API (заготовлены в проекте)
Для корректной работы запросов к серверу необходимо добавить переменную окружения:
BURGER_API_URL— URL API
Ссылка/пример находится в .env.example.
npm installСоздай .env на основе .env.example c BURGER_API_URL.
npm startnpm run build- Проект реализован как SPA с упором на:
- структурированное глобальное состояние (Redux Toolkit)
- корректную маршрутизацию (protected + dynamic + modal routes)
- real-time обновления заказов (WebSocket)
- авторизацию и защиту приватных разделов
- Ivan Murzin (AlliumPro)
- Telegram: https://t.me/alliumpro