f05dac5acd
- Mark all Phase 1-3 tasks as complete - Update Phase 4 status (dark mode, responsive done) - Add progress table with all commit hashes - Document technical lessons: Vite ESM, Tailwind 4, React Router 7 Co-authored-by: Cursor <cursoragent@cursor.com>
2.4 KiB
2.4 KiB
Lessons Learned — Опыт разработки
Этот файл фиксирует важные уроки, решения и инсайты, полученные в ходе разработки.
2026-02-11 — Старт проекта
Выбор стека
- Vite + React + TS выбран вместо Astro/Next.js: проект интерактивный (поиск, фильтры, BMI калькулятор), Astro избыточен для SPA, Next.js избыточен без SSR.
- Tailwind CSS 4 — utility-first, быстрая стилизация, отличная поддержка dark mode.
- React Router 7 — client-side routing для SPA, нет нужды в серверном роутинге.
Решения по архитектуре
- Данные хранятся как TS-модули (не JSON) — это даёт типизацию на уровне данных.
- localStorage для пользовательских настроек (тема, закладки) — достаточно для статического приложения.
as constобъекты вместо enum — лучше tree-shaking и удобнее в использовании с типами.
Проблемы и решения
- Vite create cancelled:
npm create vite@latest .отказывается работать в непустой директории. Решение: ручная инициализация проекта. __dirnameв ESM: Вvite.config.tsнельзя использовать__dirname(CommonJS). Решение:fileURLToPath(new URL("./src", import.meta.url)).- Tailwind CSS 4: Использует
@import "tailwindcss"вместо@tailwindдиректив. Кастомные цвета через@theme {}. - React Router 7:
NavLinkсendпропом для exact matching. Безendна/он будет активен на всех роутах.
UX решения
- Тема: 3 режима (light/dark/system) — system слушает
prefers-color-schemeи реагирует на изменения. - Мобильное меню закрывается при навигации —
onClick={() => setMobileOpen(false)}. ScrollToTopкомпонент обязателен для SPA — без него при навигации страница остаётся на том же скролле.