{"id":19269240,"url":"https://github.com/gvozdenkov/space-food","last_synced_at":"2026-04-11T12:47:21.300Z","repository":{"id":154846474,"uuid":"612638001","full_name":"gvozdenkov/space-food","owner":"gvozdenkov","description":"Burger shop / frontend","archived":false,"fork":false,"pushed_at":"2024-07-16T07:24:19.000Z","size":9626,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-23T20:12:26.279Z","etag":null,"topics":["dnd-kit","docker","i18next","react","react-hook-form","react-router-dom-v6","redux-toolkit","scss","tanstack-query","typescript","zod"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gvozdenkov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-11T14:45:20.000Z","updated_at":"2024-07-16T07:24:22.000Z","dependencies_parsed_at":"2024-07-16T09:57:45.298Z","dependency_job_id":null,"html_url":"https://github.com/gvozdenkov/space-food","commit_stats":null,"previous_names":["gvozdenkov/space-food"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gvozdenkov/space-food","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvozdenkov%2Fspace-food","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvozdenkov%2Fspace-food/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvozdenkov%2Fspace-food/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvozdenkov%2Fspace-food/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gvozdenkov","download_url":"https://codeload.github.com/gvozdenkov/space-food/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvozdenkov%2Fspace-food/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31681201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T08:18:19.405Z","status":"ssl_error","status_checked_at":"2026-04-11T08:17:08.892Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dnd-kit","docker","i18next","react","react-hook-form","react-router-dom-v6","redux-toolkit","scss","tanstack-query","typescript","zod"],"created_at":"2024-11-09T20:19:02.924Z","updated_at":"2026-04-11T12:47:21.270Z","avatar_url":"https://github.com/gvozdenkov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"https://feature-sliced.design/ru/docs/get-started/overview\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Feature--Sliced-Design?style=flat\u0026labelColor=262224\u0026color=F2F2F2\u0026logoWidth=18\u0026logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAACXBIWXMAAALFAAACxQGJ1n/vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA/SURBVHgB7dKxCgAgCIThs/d/51JoNQIdDrxvqMXlR4FmFs92KDIX/wI7JSdDN+eHtkxIycnQvMNW8hN/crsDc5QgGX9NvT0AAAAASUVORK5CYII=\" /\u003e\n\u003c/a\u003e\n\n# Космический Бургер\n\nУчебный проект фронтенда футуристической бургерной. Я пошёл сильно дальше учебного брифа. В работе\nиспользовал самые новые инструменты и подходы.\n[Макет figma](\u003chttps://www.figma.com/file/ocw9a6hNGeAejl4F3G9fp8/React-_-%D0%9F%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%BD%D1%8B%D0%B5-%D0%B7%D0%B0%D0%B4%D0%B0%D1%87%D0%B8-(3-%D0%BC%D0%B5%D1%81%D1%8F%D1%86%D0%B0)_external_link?node-id=849%3A1315\u0026t=LLydQv2OA4D4NX2L-0\u003e)\n\n\u003cvideo controls src=\"https://github.com/user-attachments/assets/9e3cad75-9249-457f-ba85-abd0f42b73b8\" title=\"Демонстрация работы фронтенда\"\u003e\u003c/video\u003e\n\n![stellar burger main screen](README_static/home-burger.png)\n\n|                                                         |                                                       |                                                     |\n| :-----------------------------------------------------: | :---------------------------------------------------: | :-------------------------------------------------: |\n| ![reverse string](README_static/ingredient-details.png) |     ![fibonacci sequence](README_static/drag.png)     | ![array sort methods](README_static/home-order.png) |\n|        ![reverse string](README_static/feed.png)        | ![fibonacci sequence](README_static/profile-feed.png) |   ![array sort methods](README_static/login.png)    |\n\n## Крутые решения\n\n:boom: Использовал [Data API](https://reactrouter.com/en/main/start/overview#data-loading)\n`React router v6.4` для загрузки данных на уровне роутера, а не на уровне компонентов. Это\nосвобождает компонент от обслуживания загрузки и отслеживания состояния. Компонент начинает сразу же\nрендериться, все данные ему предоставляет роутер. И это ускоряет загрузку для вложенных роутов.\n\n:boom: [`TanStack Query`](https://tanstack.com/query/latest) (бывший React Query) для асинхронного\nстейт менеджмента загружаемых данных на уровне роутера. Он оказался прозрачнее, чем Redux Toolkit\nQuery при использовании с Data API роутера.\n\n:boom: Redux только для синхронного стейт менеджмента - для обслуживания корзины\n\n:boom: Впервые опробовал архитектурную методологию проектирования фронтеда\n[FSD](https://feature-sliced.design/ru/docs). Очень вдохновил подход по структуризации проекта.\nСтало сильно понятнее, где что искать, когда проект стал большим. У ребят вышел линтер по\nметодологии, который ещё не успел опробовать.\n\n:boom: К проекту была\n[библиотека компонентов](https://www.npmjs.com/package/@ya.praktikum/react-developer-burger-ui-components),\nно меня она не устроила гибкостью и семантичностью вёрстки. Поэтому все компоненты пересобрал сам,\nиспользуя лучшую семантику. Например, компонент `Tab` был свёрстан через простой `\u003cdiv\u003e`, но лучшая\nпрактика - это `\u003cbutton\u003e` для лучшей доступности.\n\n:boom: Поработал с i18n. Использовал пакеты `i18next`, `i18next-browser-languagedetector` и\n`i18next-http-backend`. Но не успел вывести смену языка фронтенда на кнопку. Пока работает только\nкак квери запрос. Переводы приходят в виде `json` файла Доступа к бэкенду не было, поэтому\nлокализовать ингредиенты не вышло, но знаю, как сделать это на стороне сервера. Есть опыт.\n\n\u003cvideo controls src=\"https://github.com/user-attachments/assets/52236756-ea50-4113-bf91-fe45fb3e6673\" title=\"i18n\"\u003e\u003c/video\u003e\n\n:boom: Использую [`Zod`](https://zod.dev/) и [`React Hook Form`](https://www.react-hook-form.com/)\nдля валидации и отправки форм. Мощные и гибкие инструменты. `React Hook Form` понравился больше, чем\n`Formic`.\n\n\u003cvideo controls src=\"https://github.com/user-attachments/assets/24666a44-68eb-4cc7-b968-1346d3f36c24\" title=\"Zod \u0026 React Hook Form\"\u003e\u003c/video\u003e\n\n:boom: Попробовал современный пакет для Drag \u0026 Drop [`dnd kit`](https://dndkit.com/). Много\nнастроек, красивый визуал получается.\n\n## Планы по развитию\n\n1. Добавить отдельное приложение для мобильной версии, потому что вёрстка очень сильно оличается.\n   Дотюнить тач скрин Drag \u0026 drop.\n2. Создать монорепозиторий на основе `Nx`, чтобы вынести общие типы и компоненты в отдельные пакеты\n   и переиспользовать в приложениях.\n3. Внедрить [линтер FSD](https://github.com/feature-sliced/steiger) и дотюнить структуру проекта.\n4. Внедрить [`Storybook`](https://storybook.js.org/) для библиотеки компонентов\n5. Внедрить [`Cypress Component Testing`](https://docs.cypress.io/guides/component-testing/overview)\n   для тестирования и разработки компонентов\n\n## Local Development with Docker\n\n```sh\ngit clone git@github.com:gvozdenkov/space-food.git\n\ncd space-food\n\ncp .env.example .env\n\ndocker compose -f compose.dev.yaml up --build\n# or with Makefile\nmake run-dev\n\n# view app on http://localhost:8081/\n\n# create a new branch, commit in it and then create PR to main\n```\n\n## Tech stack\n\n- React with TS\n- Redux (for local state management)\n- TanStack (for server state management)\n- React router v6 (new features: actions and loaders)\n- React hook form and Zod to control forms\n- SCSS\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgvozdenkov%2Fspace-food","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgvozdenkov%2Fspace-food","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgvozdenkov%2Fspace-food/lists"}