Учебный фронтенд-проект, выполненный в рамках курса «Фронтенд-разработчик» от Яндекс Практикума .
«Stellar Burgers» — это интерактивное веб-приложение для заказа космических бургеров. Приложение сочетает в себе интерактивный конструктор бургеров с функцией Drag-and-Drop, авторизацию пользователей, оформление заказов, просмотр истории личных заказов и интерактивную ленту всех заказов в реальном времени через протокол WebSockets.
Проект выполнен с архитектурным упором на строгую типизацию TypeScript, централизованное управление состоянием через Redux Toolkit, гибкую маршрутизацию, а также покрытие кода юнит- и E2E-тестами (Jest и Cypress).
- Разработка полнофункционального SPA-приложения на React и TypeScript.
- Организация глобального состояния с использованием Redux Toolkit (слайсы, асинхронные Thunk-экшены).
- Реализация интерактивного конструктора бургеров с перетаскиванием компонентов (библиотека
react-dnd). - Построение системы аутентификации пользователей (JWT-токены, refresh/access, восстановление пароля) и защита роутов (
ProtectedRoute). - Интеграция WebSockets через кастомный Redux Middleware для получения ленты заказов в реальном времени.
- Реализация глубокой маршрутизации модальных окон (Deep Linking / background location).
- Покрытие приложения автоматическими юнит-тестами (Jest) и сквозными E2E-тестами (Cypress).
- Интерактивный конструктор бургеров:
- Просмотр списка доступных ингредиентов с фильтрацией по категориям (булки, соусы, начинки).
- Перетаскивание ингредиентов в конструктор с помощью Drag-and-Drop.
- Изменение порядка добавленных ингредиентов внутри конструктора.
- Подсчет итоговой стоимости бургера в реальном времени.
- Оформление заказа: отправка скомпонованного бургера на сервер с получением и отображением модального окна с номером заказа.
- Аутентификация и личный кабинет:
- Регистрация, авторизация и восстановление/сброс пароля.
- Профиль пользователя с возможностью редактирования личных данных.
- Автоматическое обновление access-токена при истечении его срока действия.
- Лента заказов (Feed) и WebSockets:
- Просмотр общей ленты всех заказов в режиме реального времени через подключение по WebSockets.
- Отображение текущего статуса заказов (готов / в работе) и счетчиков созданных заказов.
- История заказов пользователя: персональный список оформленных заказов в личном кабинете.
- Модальные окна с прямыми ссылками: просмотр деталей ингредиентов и заказов в модальных окнах с сохранением фонового состояния страницы при переходах по URL.
- React (функциональные компоненты, хуки, Context API)
- TypeScript (строгая типизация данных, пропсов, Redux-стора, экшенов и сетевых ответов)
- Redux Toolkit (Slices,
createAsyncThunk, кастомныйmiddlewareдля WebSockets) - React Router DOM v6 (маршрутизация, защищенные роуты, фоновые локации
location.state) - React DnD (реализация Drag-and-Drop)
- WebSockets API (двусторонний обмен данными реального времени)
- Jest & React Testing Library (юнит-тестирование редьюсеров и асинхронных экшенов)
- Cypress (сквозное E2E-тестирование интерфейса и сценариев заказа)
- CSS Modules (изолированная стилизация компонентов)
- Netlify — хостинг и автоматический деплой приложения
src/
├── components/ # UI-компоненты (BurgerIngredients, BurgerConstructor, Modal, Header, ...)
├── services/ # Redux-стор:
│ ├── slices/ # Слайсы (ингредиенты, конструктор, авторизация, заказы)
│ ├── middleware/ # Кастомный middleware для работы с WebSockets
│ └── store.ts # Конфигурация Redux Store
├── pages/ # Страницы приложения (Home, Login, Register, Profile, Feed, OrderInfo)
├── hooks/ # Пользовательские хуки (useForm, useAction)
├── utils/ # API-клиент, константы, токены, форматирование дат
├── types/ # Интерфейсы и типы TypeScript
├── __tests__/ # Юнит-тесты Jest
├── cypress/ # E2E-тесты Cypress
├── index.tsx # Точка входа приложения
└── README.md # Этот файл
- Централизованное состояние (Redux Toolkit): Построила масштабируемое хранилище данных, распределенное по изолированным слайсам, и отработала написание асинхронных
thunk-экшенов для взаимодействия с REST API`. - Интерактивный Drag-and-Drop: Реализовала удобный интерфейс сборки бургеров с возможностью перетаскивания ингредиентов и сортировки их порядка внутри конструктора.
- Безопасность и авторизация: Настроила полноценный цикл авторизации пользователей (JWT-токены, механизм автоматического обновления токенов) и создала гибкий компонент
ProtectedRouteдля защиты приватных страниц. - WebSockets в Redux: Написала кастомный Redux-middleware для обработки WebSocket-подключений, что позволило органично связать данные реального времени со стором приложения.
- **Продвинутый роутинг и модальные окна: Реализовала паттерн отображения модальных окон поверх текущих страниц с поддержкой прямой адресации (Deep Linking) через фоновые локации
react-router-dom. - Тестирование и деплой: Написала юнит-тесты на Jest для проверки работы редьюсеров и экшенов, сквозные E2E-тесты на Cypress, и развернула проект на платформе Netlify.
- Установленный Node.js (версии 18.x или выше)
- Менеджер пакетов npm
- Клонируйте репозиторий на свой ПК:
git clone git@github.com:afanassk/stellar-burgers.git- Перейдите в директорию проекта:
cd stellar-burgers- Установите зависимости и запустите проект в режиме разработки:
npm install
npm run start| Команда | Назначение |
|---|---|
npm run start |
Запускает локальный сервер разработки |
npm run build |
Собирает production-версию проекта |
npm run storybook |
Запускает изолированную среду Storybook для просмотра UI-компонентов |
npm run stylelint |
Запускает линтер для стилей |
npm run lint |
Запускает ESLint для проверки кода |
npm run format |
Автоматически форматирует код с помощью Prettier |
npm run test |
Запускает юнит-тесты Jest |
npm run cypress:open |
Запускает графический интерфейс Cypress для E2E-тестов |