Учебный проект - "Stellar Burger"

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

Stellar Burger - это учебный проект, разработанный в рамках курса "Web-разработчик +" от Яндекс Практикум. Проект охватывает ключевые темы веб-разработки, включая основы React, Redux, управление состоянием, роутинг, авторизацию и TypeScript.

Проект состоит из нескольких этапов, включающих организацию инфраструктуры, создание и структурирование компонентов, работу с Redux для управления состоянием приложения, реализацию функциональности перетаскивания ингредиентов и сортировки, взаимодействие с сервером через API для аутентификации и управления заказами, настройку роутинга и защищенных маршрутов, а также внедрение сокет-соединения для обновления данных в реальном времени.

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

Stellar Burger отличается отличной типизацией, включая использование TypeScript для всех компонентов, утилитарных функций, экшенов, редьюсеров, хранилища и хуков. Это обеспечивает надежность и чистоту кода, а также облегчает разработку и поддержку проекта.

Данный проект позволяет студентам закрепить полученные знания и навыки в области веб-разработки, а также понять основные принципы построения современных веб-приложений.

Проект создан на основе учебного шаблона репозитория в котором уже были реализованы:

Начальная файловая структура в соответствии с Create React App
Ui компоненты

Для сдачи проекта необходимо было реализовать:

1 этап

Организовать инфраструктуру проекта:
- Создать новый проект и установить дополнительные пакеты;
- инициализировать git-репозиторий;
Layout главной страницы:
- AppHeader — шапка приложения
- BurgerIngredients — список ингредиентов
- BurgerConstructor — текущий состав бургера
- организовать проверки типов данных propTypes

2 этап

Обновление инфраструктуры приложения для интеграции Redux и react-dnd:
- Установка необходимых пакетов для Redux-хранилища и DnD.
- Изменение структуры приложения для использования Redux.
Подготовка хранилища Redux:
- Подготовка начального состояния и создание редьюсеров.
- Подключение хранилища к приложению.
Создание первых экшенов и редьюсеров:
- Описание функциональности для работы с ингредиентами и заказами.
- Использование redux-thunk для асинхронных действий.
Навигация по ингредиентам с помощью react-intersection-observer:
- Создать переключатели в BurgerIngredients для навигации с подсветкой по текущей группе ингредиентов.
Сортировка и перетаскивание ингредиентов с помощью react-dnd:
- Реализовать перетаскивать ингредиенты из BurgerIngredients в BurgerConstructor с изменением счетчика и динамическим расчётом стоимости бургера.
- Перетаскивание ингредиентов внутри BurgerConstructor.
Взаимодействие с API:
- Отправка запроса к API для создания заказа и получения номера.
Layout модальных окон:
- детали ингредиента
- детали заказа

3 этап

Layout страниц:
- авторизации и регистрации
- восстановления и сброса пароля
- профиля пользователя
Запросы к API:
- авторизация и обновление токена
- выход из системы
- получение и обновление информации о пользователе
Настройка роутинга:
- Установка пакетов для роутинга,
- создание компонентов BrowserRouter, Router и Routes в App.
- Создание директории /pages и маршрутов страниц
- Настройка переходов для кнопок на страницах авторизации и регистрации.
- настроить защищённые маршруты в приложении

4 Этап

Layout страниц:
- Лента заказов
- История заказов
- Добавление страниц для отдельного просмотра деталей ингредиента и заказа
Сокет-соединение с авторизацией
- Получение и актуализация ленты и истории заказов при каждом обновлении списка заказов на сервере
- обновление информации о заказе

5 Этап

Рефакторинг-типизация проекта:
- Перевести все компоненты и утилитарные функции с PropTypes на TypeScript.
- Типизировать экшены, редьюсеры, хранилище и хуки
- типизировать DnD и react-intersection-observer
Проверить что всё работает ну или почти всё работает :)

Используемые инструменты и технологии

Языки: HTML CSS JavaScript TypeScript
Инструменты управления проектом: Git GitHub GitHub Pages
Инструменты для разработки и сборки проекта: Node.js Webpack NPM React Create React App React Router Redux
Взаимодействие с API: WebSockets API requests
Дополнительные библиотеки: React DnD react-intersection-observer

Запуск проекта

Склонируйте репозиторий.
Установите зависимости с помощью команды

npm install

Запустите проект с помощью

npm start

Ссылки

Автор