Учебный проект: "Stellar Burgers"

Оглавление

1. Описание проекта
2. Стек технологий
3. Установка и запуск приложения в локальном репозитории
4. Процесс создания
5. Функционал
6. Статус

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

"Stellar Burgers" - приложение (SPA) с регистрацией и авторизацией пользователей, в котором можно собрать и заказать свой личный бургер (без доставки на дом). Выполнен в рамках углубленной образовательной программы по библиотеке "React" Яндекс Практикума.

Ссылки на проект
Макет:
https://www.figma.com/file/zFGN2O5xktHl9VmoOieq5E/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_external_link?node-id=0%3A1
Чек-листы:
https://code.s3.yandex.net/react/checklists-pdf/checklist-1.pdf
https://code.s3.yandex.net/react/checklists-pdf/checklist-2.pdf
https://code.s3.yandex.net/react/checklists-pdf/checklist-3.pdf
https://code.s3.yandex.net/react/checklists-pdf/checklist-4.pdf
https://code.s3.yandex.net/react/checklists-pdf/checklist-5.pdf

* - проект прошел код-ревью

(к оглавлению)

2. Стек технологий

(к оглавлению)

3. Установка и запуск приложения в локальном репозитории

1. git clone https://github.com/elrouss/react-burger.git - клонировать репозиторий (HTTPS)
2. npm i - установить зависимости (предварительно проверить наличие Node.js командой node -v, а также - NPM командой npm -v; в случае необходимости скачать и установить Node.js по этой ссылке)
3. npm run prepare - установить husky
4. npm run start - запустить приложение

(к оглавлению)

4. Процесс создания

Работа разделена на 6 этапов. Выполнены следующие:

1. Верстка на десктоп (1920px);
2. Перенос проекта на Redux Toolkit и написание бизнес-логики (см. функционал)
3. Добавление роутов
4. Переписывание проекта на TypeScript
5. Завершение бизнес-логики приложения: подключение ленты заказов с помощью WebSocket

(к оглавлению)

5. Функционал

• Регистрация и авторизация пользователей, восстановление пароля
• Редактирование личных данных
• Drag and Drop (перенос ингредиентов в конструктор с возможностью внутренней сортировки и удаления ненужных)
• Счетчики ингредиентов и цены
• Подсветка активных табов в списке ингредиентов при скролле
• Открытие и закрытие модальных окон по кнопке, оверлею и клавише Escape с сохранением открытого состояния после обновления страницы (также открытие информации об ингредиенте на отдельной странице при копировании ссылки в адресную строку новой вкладки/нового окна браузера)
• Лента заказов, обновляющаяся в режиме реального времени

(к оглавлению)

6. Статус

На этапе разработки

Требуется улучшить:

• Выведение ошибок с сервера под инпутами в формах
• Оптимизация ререндеров (на данном этапе функционал компонентов постоянно меняется, поэтому логично выполнить задачу на финальном этапе проекта)

(к оглавлению)