https://github.com/gvozdenkov/space-food
Burger shop / frontend
https://github.com/gvozdenkov/space-food
dnd-kit docker i18next react react-hook-form react-router-dom-v6 redux-toolkit scss tanstack-query typescript zod
Last synced: 4 months ago
JSON representation
Burger shop / frontend
- Host: GitHub
- URL: https://github.com/gvozdenkov/space-food
- Owner: gvozdenkov
- Created: 2023-03-11T14:45:20.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-16T07:24:19.000Z (12 months ago)
- Last Synced: 2025-01-05T12:42:34.414Z (6 months ago)
- Topics: dnd-kit, docker, i18next, react, react-hook-form, react-router-dom-v6, redux-toolkit, scss, tanstack-query, typescript, zod
- Language: TypeScript
- Homepage:
- Size: 9.18 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Космический Бургер
Учебный проект фронтенда футуристической бургерной. Я пошёл сильно дальше учебного брифа. В работе
использовал самые новые инструменты и подходы.
[Макет figma]()
| | | |
| :-----------------------------------------------------: | :---------------------------------------------------: | :-------------------------------------------------: |
|  |  |  |
|  |  |  |
## Крутые решения
:boom: Использовал [Data API](https://reactrouter.com/en/main/start/overview#data-loading)
`React router v6.4` для загрузки данных на уровне роутера, а не на уровне компонентов. Это
освобождает компонент от обслуживания загрузки и отслеживания состояния. Компонент начинает сразу же
рендериться, все данные ему предоставляет роутер. И это ускоряет загрузку для вложенных роутов.
:boom: [`TanStack Query`](https://tanstack.com/query/latest) (бывший React Query) для асинхронного
стейт менеджмента загружаемых данных на уровне роутера. Он оказался прозрачнее, чем Redux Toolkit
Query при использовании с Data API роутера.
:boom: Redux только для синхронного стейт менеджмента - для обслуживания корзины
:boom: Впервые опробовал архитектурную методологию проектирования фронтеда
[FSD](https://feature-sliced.design/ru/docs). Очень вдохновил подход по структуризации проекта.
Стало сильно понятнее, где что искать, когда проект стал большим. У ребят вышел линтер по
методологии, который ещё не успел опробовать.
:boom: К проекту была
[библиотека компонентов](https://www.npmjs.com/package/@ya.praktikum/react-developer-burger-ui-components),
но меня она не устроила гибкостью и семантичностью вёрстки. Поэтому все компоненты пересобрал сам,
используя лучшую семантику. Например, компонент `Tab` был свёрстан через простой `
`, но лучшая
практика - это `` для лучшей доступности.
:boom: Поработал с i18n. Использовал пакеты `i18next`, `i18next-browser-languagedetector` и
`i18next-http-backend`. Но не успел вывести смену языка фронтенда на кнопку. Пока работает только
как квери запрос. Переводы приходят в виде `json` файла Доступа к бэкенду не было, поэтому
локализовать ингредиенты не вышло, но знаю, как сделать это на стороне сервера. Есть опыт.
:boom: Использую [`Zod`](https://zod.dev/) и [`React Hook Form`](https://www.react-hook-form.com/)
для валидации и отправки форм. Мощные и гибкие инструменты. `React Hook Form` понравился больше, чем
`Formic`.
:boom: Попробовал современный пакет для Drag & Drop [`dnd kit`](https://dndkit.com/). Много
настроек, красивый визуал получается.
## Планы по развитию
1. Добавить отдельное приложение для мобильной версии, потому что вёрстка очень сильно оличается.
Дотюнить тач скрин Drag & drop.
2. Создать монорепозиторий на основе `Nx`, чтобы вынести общие типы и компоненты в отдельные пакеты
и переиспользовать в приложениях.
3. Внедрить [линтер FSD](https://github.com/feature-sliced/steiger) и дотюнить структуру проекта.
4. Внедрить [`Storybook`](https://storybook.js.org/) для библиотеки компонентов
5. Внедрить [`Cypress Component Testing`](https://docs.cypress.io/guides/component-testing/overview)
для тестирования и разработки компонентов
## Local Development with Docker
```sh
git clone [email protected]: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