Stellar Burgers

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

Проект создан в процессе обучения на Яндекс Практикуме.

Готовый проект можно посмотреть по ссылке.

---

Реализованные страницы

1. Главная страница (перетаскивание ингредиентов в конструктор, перетакивание ингредиентов внутри конструктора, создание заказа).
2. Авторизация (регистрация, вход, восстановление пароля).
3. Профиль (изменение своих данных, просмотр своих заказов, выход из профиля).
4. Лента заказов (все заказы).
5. Модальные окна (одного ингредиента, номера заказа, деталей заказов).

---

Основные технологии проекта

1. HTML и CSS. Соблюдается корректная семантика тегов и продвинутая стилизация, адаптивная верстка для больших экранов.
2. React (React-router, React-dnd). Компонентная сборка, реализовано открытие и закрытие модальных окон, авторизация, роутинг (в т.ч. с динамическим url), drag-n-drop.
3. Redux (Thunk). Используется хранилище Redux для хранения данных с API и работы с глобальным контекстом.
4. Typescript. Весь код протипизован, в т.ч. и Redux хранилище.
5. Jest, Cypress. Основная бизнес-логика (Redux) протестирована с помощью юнит-тестов Jest, главная страница протестирована с помощью функциональных тестов Cypress.
6. WebSocket. Лента заказов обновляется по сокету.
7. JWT Tokens. Работа с токенами: авторизация, сохранение токена в cookies и его удаление.
8. Деплой. Реализован с помощью виртуальной машины Яндекс Облака, настройки nginx и SSL (временно не работает, можно посмотреть альтернативный деплой на gh-pages).

---

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

Проект создан с помощью Create React App

Проект запускается локально по адресу http://localhost:3000/ путем клонирования данного репозитория и последовательного запуска команд в терминале.

Предварительно должны быть установлены программы Git, NodeJS и менеджер пакетов npm.

// clone repo
git clone /~https://github.com/snurnisyan/react-stellar-burger

// go to dir
cd react-stellar-burger

// install dependencies
npm install

// build project
npm run build

// run dev mode
npm run dev

// run prod mode
npm run start

// run tests (Jest)
npm run test

// run tests in Cypress
npm run cypress

---

Планы по доработке

• Улучшить адаптивную верстку (для маленьких экранов)
• Добавить экраны загрузки

---

Контакты

Если вы заметили какой-то баг или просто хотите поделиться мыслями по поводу этого (и не только) проекта, можете написать мне сюда:

• Telegram: @snurnisyan
• Email: snurnisyan@gmail.com