Проектная работа "Stellar Burger"

Stellar Burgers — приложение космической бургерной, в котором пользователь может собрать свой бургер из предлагаемых ингредиентов, оформить заказ, проследить за ним в ленте заказов, а также посмотреть свои прошлые заказы в истории заказов.

Проект представляет из себя React-приложение. Реализован в несколько этапов:

Этап 1 - CRA-заготовка и вёрстка главной Stellar Burger

На этом этапе было осуществлено:

• создание основной структуры папок приложения;
• вёрстка главной страницы приложения и всех старниц, кроме доступных по динамическим роутам (использовалась готовая библиотека UI-компонентов);
• написание JSX для сверстанных страниц.

Часть функциональности (отображение информации об оформленном заказе, просмотр детальной информации об ингредиенте, просмотр детального состава заказа) реализована посредством модальных окон с использованием порталов (рендеринг вне корневого элемента, React.createPortal()).

Этап 2 - Практика Redux и React DnD

Реализованы следующие задачи:

• хранение данных приложения с применением библиотеки Redux;
• возможность сборки бургера путем перетаскивания ингредиентов (drag-n-drop с применением библиотеки React DnD).

Этап 3 - Роутинг и авторизация

Осуществлено:

• вёрстка всех недостающих экранов (динамические маршруты);
• реализация функциональности для регистрации и авторизации;
• реализация роутинга внутри приложения посредством React-router;
• для части запросов к api реализовано websocket-соединение (лента заказаов, история заказов).

Этап 4 - Типизация компонентов и хранилища

На предыдущих этапах код проекта был написан на javascript.

В рамках данного этапа задачей был рефакторинг.

Весь код переписан на Typescript.