Главная страница "Stellar burgers"

Stellar burgers — проек для изучения TypeScript, React, Drag-and-drop (react-dnd), Redux и ReactRouter, Websocket.

Описание проекта

Stellar burgers представляет собой одностраничное приложение, которое позволяет пользователям создавать, заказывать и отслеживать статус заказа в режиме реального времени.

Установка

Для запуска проекта выполните следующие шаги:

• Запуск проекта: npm start
• Сборка проекта: npm run build

Этапы разработки

Первый этап - Вёрстка первого экрана

• Создание компонентов React:
  • AppHeader — шапка приложения;
  • BurgerIngredients — список ингредиентов;
  • BurgerConstructor — текущий состав бургера.
  • Modal и ModalOverlay - модальные окна для оформления заказа, детальной информации об ингредиенте и состава заказа.

Второй этап - Redux и React DND

• Создание хранилища для управления:
  • списком ингредиентов;
  • составом бургера;
  • объектами ингредиента и заказа.
• Реализация Drag-and-drop с помощью библиотеки react-dnd.
• Работа с экшенами и редьюсерами для управления данными.
• Подсчёт стоимости бургера и создание заказа.

Третий этап - Роутинг и авторизация

• Создание страниц для авторизации, регистрации и личного кабинета.
• Взаимодействие с сервером: регистрация, авторизация, обновление токена, получение информации о пользователе.
• Настройка перехода между страницами.

Четвертый этап - Лента заказов

• Создание сокет-соединения для отслеживания реального времени появления новых заказов и изменения статусов заказов.

Полезные ссылки

1. Мой проект на Github Pages
2. Ссылка на макет в Figma
3. Чек лист первого этапа
4. Чек лист второго этапа