🔸 Приложение "Stellar Burgers"
Проектная работа на курсе в Яндекс Практикум
Stellar Burgers - это приложение вымышленного ресторана, с помощью которого можно ознакомиться с ассортиментом, собирать и заказывать бургеры.
На главной странице находится меню с ингредиентами, которые можно перетаскивать в конструктор с помощью способа Drag'n'Drop, а также менять местами ингредиенты в самом конструкторе - эти возможности реализованы с помощью библиотеки react-dnd. В меню есть категории ингредиентов, быстро перейти к каждому из них можно с помощью табов, а также, таб, соответствующий категории, которая находится в видимой области, становится активным.
Маршрутизация реализована с помощью react-router-dom, присутствуют защищенные маршруты. Для оформления заказа требуется регистрация. При попытке перейти на маршруты, доступные только авторизованным пользователям произойдет перенаправление на страницу входа.
В личном кабинете можно изменять данные пользователя, просматривать историю заказов и производить выход из учетной записи.
Взаимодействие с сервером происходит с помощью REST API (получение списка ингредиентов, регистрация, авторизация, изменение данных о пользователе и отправка заказа) и WebSocket-соединения (общая лента заказов, статус и история заказов пользователя).
Хранение состояний реализуется с помошью библиотеки Redux Toolkit.
Верстка адаптивно-отзывчивая. Приложение адаптировано под экраны с шириной от 320 до 1280 пикселей, но великолепно смотрится на всех разрешениях!
Приложение частично покрыто тестами - хранилище с использованием Jest и конструктор бургеров с использованием Cypress.
Используемые технологии:
- ✔️ HTML5
- ✔️ CSS3 (Препроцессор SCSS)
- ✔️ TypeScript
- ✔️ React.js
- ✔️ Redux Toolkit
🔗 Открыть веб-сайт приложения (Для деплоя был использован Yandex Cloud)
🔗 Открыть макет в Figma
