Food Client - PWA-приложение для просмотра рецептов различных блюд.
Проект имеет адаптивный дизан, что позволяет комфортно пользоваться сервисом как с ПК, так и с телефона или планшета. Приложение состоит из 5 страниц:
- Страница списка рецептов;
- Страница подробной информации о рецепте;
- Страница сохраненных рецептов;
- Страница авторизации;
- Страница регистрации.
Страница списка рецептов содержит фильтры, определяющие параметры подборки блюд, а такж сам список рецептов. При изменении фильтров, их значения сохраняются в query-параметрах, что позволяет сохранять состояния фильтров и делиться ссылками без потери контекста. При рендере списка рецептов используется виртуализация с бесконечным скроллом, позволяющая хранить в DOM только те рецепты, которые видны на странице в данный момент, что существенно оптимизирует работу приложения.
Страница рецепта содержит подробную информацию о рецепте.
Страница сохраненных рецептов хранит рецепты, выбранные пользователем, в LocalStorage.
- Проект написан на связке React + TypeScript, в качестве сборщика используется Vite;
- Food Client - это PWA, поэтому его можно скачать, как приложение, на телефон или компьютер и использовать даже в оффлайне;
- Для хранения состояния был выбран стейт-менеджер MobX;
- Стили написаны на SCSS Modules;
- В проекте используется yarn в качестве пакетного менеджера;
- Для отправки запросов к API использовал axios;
- Для написания виртуализованного списка с бесконечным скроллом использовал react-window;
- Проект задеплоен на GitHub Pages.
- Склонировать репозиторий;
- Установить зависимости командой
yarn install; - Запустить приложение командой
yarn dev; - Проект будет запущен на http://127.0.0.1:8000/.
- Склонировать репозиторий;
- Установить зависимости командой
yarn install; - Собрать приложение командой
yarn build; - Перейти в директорию
dist; - Запустить сервер с приложением командой
http-server; - Проект будет запущен на http://127.0.0.1:8080/