Космический Бургер

Учебный проект фронтенда футуристической бургерной. Я пошёл сильно дальше учебного брифа. В работе использовал самые новые инструменты и подходы. Макет figma

video.mp4

Крутые решения

💥 Использовал Data API React router v6.4 для загрузки данных на уровне роутера, а не на уровне компонентов. Это освобождает компонент от обслуживания загрузки и отслеживания состояния. Компонент начинает сразу же рендериться, все данные ему предоставляет роутер. И это ускоряет загрузку для вложенных роутов.

💥 TanStack Query (бывший React Query) для асинхронного стейт менеджмента загружаемых данных на уровне роутера. Он оказался прозрачнее, чем Redux Toolkit Query при использовании с Data API роутера.

💥 Redux только для синхронного стейт менеджмента - для обслуживания корзины

💥 Впервые опробовал архитектурную методологию проектирования фронтеда FSD. Очень вдохновил подход по структуризации проекта. Стало сильно понятнее, где что искать, когда проект стал большим. У ребят вышел линтер по методологии, который ещё не успел опробовать.

💥 К проекту была библиотека компонентов, но меня она не устроила гибкостью и семантичностью вёрстки. Поэтому все компоненты пересобрал сам, используя лучшую семантику. Например, компонент Tab был свёрстан через простой <div>, но лучшая практика - это <button> для лучшей доступности.

💥 Поработал с i18n. Использовал пакеты i18next, i18next-browser-languagedetector и i18next-http-backend. Но не успел вывести смену языка фронтенда на кнопку. Пока работает только как квери запрос. Переводы приходят в виде json файла Доступа к бэкенду не было, поэтому локализовать ингредиенты не вышло, но знаю, как сделать это на стороне сервера. Есть опыт.

i18n.mp4

💥 Использую Zod и React Hook Form для валидации и отправки форм. Мощные и гибкие инструменты. React Hook Form понравился больше, чем Formic.

react-hook-form.mp4

💥 Попробовал современный пакет для Drag & Drop dnd kit. Много настроек, красивый визуал получается.

Планы по развитию

1. Добавить отдельное приложение для мобильной версии, потому что вёрстка очень сильно оличается. Дотюнить тач скрин Drag & drop.
2. Создать монорепозиторий на основе Nx, чтобы вынести общие типы и компоненты в отдельные пакеты и переиспользовать в приложениях.
3. Внедрить линтер FSD и дотюнить структуру проекта.
4. Внедрить Storybook для библиотеки компонентов
5. Внедрить Cypress Component Testing для тестирования и разработки компонентов

Local Development with Docker

git clone git@github.com:gvozdenkov/space-food.git

cd space-food

cp .env.example .env

docker compose -f compose.dev.yaml up --build
# or with Makefile
make run-dev

# view app on http://localhost:8081/

# create a new branch, commit in it and then create PR to main

Tech stack

• React with TS
• Redux (for local state management)
• TanStack (for server state management)
• React router v6 (new features: actions and loaders)
• React hook form and Zod to control forms
• SCSS