Учебный проект - "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
Екатерина Кочкина студентка курса "Web-разработчик +", кагортa 25-aquamarune, 2024г.