Midsprint

Каталог фильмов. Основан на неофициальном АПИ Кинопоиска.

Превью: https://midsprint.vercel.app

Команды для разработки

Запустить дев-сервер:

pnpm install
pnpm dev

Собрать и развернуть локально билд:

pnpm preview

Обновить зависимости:

pnpx npm-check-updates
pnpm install

Файловая структура

Архитектурная методология — FEOD. Код поделён на директории core, pages, modules и common; директории поделены на сегменты api, config, lib, ui.

Документация FEOD

Стек

Категория	Технологии
Фреймворк	TypeScript, React, Vike, MSW
Состояние	TanStack Query, Zustand
Стили	PostCSS, CSS Modules, UnoCSS
Тулинг	Lefthook, Oxc, Commitlint

Технологии

Стейт. Клиентское состояие хранится в Zustand, серверное состояние — в Tanstack Query и +data-хуках Vike.

Кодогенерация. Типы для работы с бэкендом генерируются из OpenAPI-схемы. См. openapi-ts.config.ts и @/common/api/codegen.

SSR. Работает серверный рендеринг с HTML-стримингом.

Стили. Используется PostCSS и UnoCSS. UnoCSS настроен в стиле Tailwind. Утилитарные стили применяются для простой вёрстки и задания внешнего позиционирования.

Моки. Чтобы не превысить лимит использования АПИ, на деве работает Mock Service Worker. Настроен на генерацию по OpenAPI-схеме. Есть возможность настроить моки с помощью кассет — снапшотов реальных ответов АПИ. Для этого запишите в девтулах файл .har с историей запросов и добавьте в конфиг с помощью fromTraffic.

Тестируем вызовы API с помощью кассет. Кирилл Мокевнин