# React Component Standards

## Purpose
Ensure consistent React component patterns across the frontend codebase.

## Priority
High

## Instructions
- Use functional components with TypeScript
- Define props interfaces above the component
- Use React.FC only when children are expected
- Colocate styles using CSS Modules (*.module.css)
- Extract hooks into separate files when reused
- Memoize expensive computations with useMemo
- Use React.lazy for route-level code splitting

# Project Name

> TypeScript + React monorepo. Deployed on Vercel.

## Code Style

- TypeScript strict mode — no `any`, no `ts-ignore`
- Named exports only (no default exports)
- Prefer functional patterns: map/filter/reduce over for-loops
- Error handling: use Result<T, E> from `src/lib/result.ts`

## Architecture

- `src/routes/`   — Route handlers (thin layer, delegates to services)
- `src/services/`  — Business logic, one file per domain entity
- `src/db/`        — Drizzle ORM schema and query helpers
- `src/lib/`       — Shared utilities (logger, result type, validation)

## Commands

```bash
pnpm install          # Install dependencies
pnpm dev              # Start dev server (port 3000)
pnpm test             # Run Vitest suite
pnpm test:e2e         # Run Playwright tests
pnpm lint             # ESLint + Prettier check
pnpm db:migrate       # Run pending Drizzle migrations
```

## Git Conventions

- Conventional Commits: `feat:`, `fix:`, `chore:`, `docs:`
- Branch naming: `feat/short-description`, `fix/issue-number`
- Squash merge to main; delete branches after merge

## Notes

- The `src/legacy/` directory is being migrated. Do not add new code there.
- All dates are stored as UTC. Never use local time.

@docs/api-patterns.md
@docs/database-conventions.md