Проект Burger-Stellar является полноценным фронтенд приложением-магазином, с возможностью регистрации, создания заказа и просмотра как всех заказов, так и каждого заказа по отдельности. Так же есть возможность редактировать свои данные в личном кабинете пользователя.
Для написания проекта использовалась библиотека React, в основе проекта лежит сборка Create React App с флагом -template ts для возможности компиляции файлов компонентов с разметкой и простых файлов с JS в TypeScript.
- В качестве основной стилевой библиотекой использовалась react-developer-burger-ui-components - библиотека с UI компонентами, иконками и др. графическими элементами.
- Для написания структуры стилей использовалась БЭМ методология, стили написаны на SCSS, который предлагает более удобный и интуитивно понятный синтаксис для понимания и реализации адаптивности на разных расширениях. Решено не использовать modules для уменьшения импортов в компоненты и невозможностью написания полноценных селекторов по БЭМ.
- Приложение имеет каскадную структуру компонентов с разметкой, где головной компонент App рендерится в корневой блок div .
- Для реализации функционала модальных окон использовался функционал React-Create portal, который позволяет наложить содержимое модальных окон поверх основного div.
- В приложении реализован роутинг. В качестве библиотеки компонентов роутинга использовался react-router-dom 5 версии. В качестве вспомогательных хуков для осуществления полноценного роутинга использовались:
useLocation позволяет возвращать объект с url, state, и других свойств текущего компонента для управления програмным роутингом.
useParams позволяет осуществлять динамический роутинг относительно какого либо пути pathname на любом уровне приложения. И отображать содержимое компонента в зависимости от переданного свойства, например id карточки.
useHistory за счет того что хук возвращает объект history с методами, позволяет осуществлять манипуляции с историей перемещений и реализует паттерн go back. Когда пользователь заполнил корзину, но не вошел в систему, происходит редирект на предыдущую страницу с которой пользователь ушел и доофомить заказ. - Использовалась библиотека react-dnd для интерактивного перемещения покупных элементов и формирования корзины.
- Для управления состоянием приложения использовался React Redux Toolkit с использованием функции createSlice для автоматического создания экшенов и их последующей удобной типизации. Для удобства стор был абстрактно разделен на 4 части редюсеров: user - для управлением данными пользователя, data - для управления и хранения данных получаемых с бэкенда, modal - для управления модальными окнами, constructor - для управления элементами корзины и формирования заказа.
- Для осуществления непрерывного потока данных заказов с бэкенда реализован Websocket, который позволяет получать заказы и просматривать их статусы в режиме реального времени.
- Реализован функционал accessToken и refreshToken в паре при аутентификации. При регистрации и входе выдаются оба токена. accessToken служит для автоматического входа в приложение при перезагрузке страницы. refreshToken служит для обновления предыдущего в случае если он истек.
Главная страница условно разделена на 2 части:
- Левая: Список всех ингредиентов в виде карточек, доступных для оформления заказа. Для удобного переключения типов ингредиентов реализованы табы.
- Правая: Список ингредиентов помещенных в корзину. Для оформления и выдачи номера заказа необходимо войти в систему, а так же выбрать булку к бургеру в качестве основы заказа.
Для осуществления заказа, как говорилось выше, необходимо войти в личный кабинет нажав на ссылку 'войти' или 'Личный кабинет' в правом верхнем углу. После оформления заказа будет выдан номер и откроется модальное окно.
Можно просматривать все заказы в разделе 'Лента заказов', в нем находятся все заказы пользователей. Так же можно помотреть собственные заказы в личном кабинете.
Имеется возможность управления данными пользователя в разделе 'Профиль' Личного кабинета.
Так же в данном приложении доступна возможность восстановления пароля. В этом случае необходимо ввести email аккаунта. На указанный ящик придет код восстановления пароля, его можно ввести в окне подтверждения смены пароля совместно с новым паролем.
Проект, развернутый на Github: GitHub Pages
- Установка зависимостей:
npm install - Режим разработки:
npm run dev - Сформировать проект для последующего размещения на ресурсах:
npm run build - Сформировать заново проект для отображения на GitHub pages:
npm run deploy
