Проект представляет собой страницу оформления заказа в бургерной Stellar Burgers. Страница выполнена в виде приложения-конструктора, позволяющего пользователю самостоятельно выбрать ингредиенты для бургера.
В хэдере располагается панель навигации c ссылками для перехода в другие разделы сайта. Основной раздел страницы представлен 2 секциями: список доступных ингредиентов и состав заказа.
Список доступных ингредиентов разделен на категории, которые соответствуют их типам. В случае, если список не может быть полностью отображен в выделенной для него части интерфейса, сбоку компонента появляется полоса прокрутки. При нажатии на карточку ингридиента открывается модальное окно с крупным изображением и информацией о пищевой ценности. Вкладки в верхней части списка могут позволяют автоматически прокрутить его до нужной категории. Во время ручной прокрутки подсвечивается вкладка, соответствующая просматриваемому разделу.
В секции состав заказа отображаются все добавленные пользователем позиции. Их добавление происходит по принципу Drag-and-drop при переносе ингредиентов мышью из описанного выше общего списка ингредиентов. В случае отсутствия достаточного места для полного отображения всех включенных в заказ позиций в разделе появляется полоса прокрутки. Первый и последний ингредиент находятся за пределами прокручиваемой области, всегда видны и не могут быть перемещены на другие места. Другие составляющие заказа меняются между собой местами при передвижении их мышкой. В нижней части компонента отображается итоговая стоимость составленного набора. Рядом расположена кнопка оформления заказа. Нажатие на кнопку приводит к открытию модального окна с подтверждением оформления и номером заказа.
- Шаблон приложения развернут с помощью create-react-app
- Использована библиотека UI-компонентов Яндекс.Практикум.Реакт
- Frontend приложения написан с использованием библиотеки React
- Хранилище данных в браузере разработано на Redux
- Лента заказов отражается при помощи Web Sockets
- Для верстки использовался flex, css размещен в виде CSS Modules
- Для тестирования приложения использовани Jest и Cypress
В качестве основы проекта применяется JavaScript библиотека для создания пользовательских интерфейсов React. Среди использованных в реализации компонентов имеются как специального созданные, так и уже готовые. Благодаря использованию технологии flexbox страница приложения подстраивается под размер окна браузера. Для хранения глобального состояния применяется хранилище Redux с расширением Thunk. Функционал Drag-and-drop реализован с применением библиотеки React DnD.
Проект запускается локально по адресу http://localhost:3000/ путем клонирования данного репозитория и последовательного запуска команд в терминале (должны быть установлены программы Git, NodeJS и менеджер пакетов npm): git clone https://github.com/SASMUS12/react-burger.git
cd react-burger
npm install
npm run start
npm test //для тестирования:
npm run cypress:open //для тестирования:
Этот проект был запущен с Create React App.
В каталоге проекта вы можете запустить:
Создает приложение для производства в папке "build".
Он правильно связывает React в рабочем режиме и оптимизирует сборку для достижения наилучшей производительности.
[Мой сайт доступен по адресу] (https://sasmus12.github.io/react-burger/)