# 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 — без него при навигации страница остаётся на том же скролле.