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