https://github.com/margo-yunanova/react-burger
Stellar burgers - одностраничное приложение бургерной
https://github.com/margo-yunanova/react-burger
react typescript websocket
Last synced: about 2 months ago
JSON representation
Stellar burgers - одностраничное приложение бургерной
- Host: GitHub
- URL: https://github.com/margo-yunanova/react-burger
- Owner: margo-yunanova
- Created: 2022-12-26T16:21:45.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-17T16:24:25.000Z (over 2 years ago)
- Last Synced: 2025-06-09T11:02:19.661Z (about 1 year ago)
- Topics: react, typescript, websocket
- Language: TypeScript
- Homepage: https://margo-yunanova.github.io/react-burger/
- Size: 2.12 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Главная страница "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](https://margo-yunanova.github.io/react-burger/)
2. [Ссылка на макет в Figma](https://www.figma.com/file/ocw9a6hNGeAejl4F3G9fp8/React-_-%D0%9F%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%BD%D1%8B%D0%B5-%D0%B7%D0%B0%D0%B4%D0%B0%D1%87%D0%B8-(3-%D0%BC%D0%B5%D1%81%D1%8F%D1%86%D0%B0)_external_link?node-id=724%3A414&t=Nvfz9N3rrvFsdqPJ-0>)
3. [Чек лист первого этапа](https://code.s3.yandex.net/web-plus/checklists/checklist_pdf/checklist_7.pdf)
4. [Чек лист второго этапа](https://code.s3.yandex.net/web-plus/checklists/checklist_pdf/checklist_8.pdf)