Stellar Burgers

React-приложение бургерной, с конструктором бургеров и лентой заказов.

макет

Деплой

• netlify
• docker образ:
  • скачать / обновить образ:
    docker pull ghcr.io/ha308ing/stellar-burgers:latest
  • запустить
    docker run --rm -p 80:80 ghcr.io/ha308ing/stellar-burgers:latest

Скрипты

• npm start - dev-сервер
• npm run build - сборка в директорию build
• npm run start:build - сервер продуктовой сборки

тесты:

• npm run test - тестирование хранилища, api
  • npm run test:watch - запустить тесты в watch-режиме
  • npm run test:coverage - с отображением покрытия
  • npm run test:verbose - с подробным логом
• npm run test:ui - тестирование ui (параллельно запускает dev-сервер приложения и cypress, нужно убедиться, что приложение запущено)
  • npm run cypress:build - тестирование продуктовой сборки приложения (параллельно запускает сервер папки build и cypress)
  • npm run cypress:run - тестирование без интерфейса cypress (предварительно нужно запустить приложение)

линтеры, форматтеры:

• npm run lint - запустить все линтеры параллельно
  • npm run eslint
  • npm run stylelint
  • npm run prettier

Спринт 6. Тестирование и деплой

Задачи

• тестирование хранилища
  • экшены, изменение состояния слайсов
• тестирование ui
  • сборка и оформление заказа
  • взаимодействие с модальными окнами
• тестирование контроллера api
• деплой: netlify
  • github action для сборки docker образа packages

Спринт 5. Лента заказов

Задачи

• добавить ленту заказов и историю заказов пользователя
  • получать данные через WebSocket
  • обновлять слайсы с лентой и историей с помощью middleware для redux хранилища
  • информация о заказе в модальном окне при навигации из приложения, на отдельной странице при навигации извне

Демо

Ссылка на гифку

Спринт 4. Typescript

Миграция на typescript

Спринт 3. Роутинг и авторизация

Задачи

• настроить роутинг и авторизацию
  • авторизованный пользователь не может открыть: логин, регистрацию, восстановление пароля
  • неавторизованный пользоатель не может открыть страницу профиля и её дочерние страницы
  • страница с восстановлением пароля доступна только при переходе со страницы с запросом почты для кода
  • при клике на ингридиент открывается модальное окно и меняется адрес, при переходе на этот адрес напрямую открывается отдельная страница с ингридиентом
  • если сохранён актуальный токен доступа, восстанавливать доступ без авторизации

Демо

Ссылка на гифку

Спринт 2. Redux хранилище и drag & drop

Задачи

• использовать redux хранилице
  • получение ингредиентов
  • конструктор бургера
  • отправка заказа
  • активный ингредиент
• использовать drag & drop для перемещения ингридиентов
• активировать заголовок группы ингридиентов при скролле

Демо

Спринт 1. Шаг 2. Функциональные компонентыи модальные окна

Задачи

• переписать компоненты на классах в функциональные
• получать данные ингридиентов через api
• модальные окна
  • информация об ингредиенте (клик по ингридиенту)
  • информация о заказе (клик по кнопке "Оформить заказ")

Демо

Спринт 1. Шаг 1.

Задачи

• инициализация проекта
• сверстать основные компоненты главного экрана (конструктора бургеров)
  • AppHeader
    
  • BurgerIngredients
    
  • BurgerConstructor
    

Что используется

• create-react-app (css-modules, eslint) (npx create-react-app stellar-burgers --template typescript)
• ui библиотека
• sass
• prettier (eslint-config)
• stylelint (конфиги: sass, idiomatic-order, css-modules)
• lefthook (pre-commit, commit-msg)
• commitlint (conventional commit specs, config)
• redux toolkit
• jest
• cypress
• utils:
  • npm-run-all to run scripts
  • serve to start server from dir
  • cross-env to set env for scripts