React + Vite

# React + Vite Development

## Setup Commands

- Install deps: `npm install` or `pnpm install`
- Start dev server: `npm run dev` or `pnpm dev`
- Build for production: `npm run build` or `pnpm build`
- Preview production build: `npm run preview` or `pnpm preview`
- Run tests: `npm test` or `pnpm test`

## Code Style

- TypeScript strict mode enabled
- Single quotes for strings, no semicolons (or opposite - check `.eslintrc`)
- Use functional components with hooks
- Organize components by feature, not type
- Keep components small and focused (< 200 lines)

## Component Patterns

- Use named exports for components
- Props interfaces should be defined above the component
- Use React.FC or explicit return types
- Destructure props in function signature
- Use custom hooks for shared logic

## State Management

- Use `useState` for local component state
- Use `useContext` for shared state across components
- Consider Zustand or Jotai for complex global state
- Keep state as local as possible

## Build Considerations

- Vite uses ES modules - no CommonJS
- Dynamic imports for code splitting: `const Component = lazy(() => import('./Component'))`
- Environment variables: Use `import.meta.env.VITE_*` prefix
- Assets in `public/` are copied as-is; assets imported in code are hashed

## Testing Instructions

- Unit tests with Vitest (Vite-native test runner)
- Component tests with React Testing Library
- Run `npm test` to execute all tests
- Add tests for new components and hooks
- Aim for > 80% code coverage on business logic

## Common Issues

- HMR not working: Check if component is properly exported
- Build errors: Ensure all imports use correct file extensions
- Slow dev server: Check for circular dependencies
- Type errors: Run `npx tsc --noEmit` to see all TypeScript errors

## PR Instructions

- Run `npm run lint` and `npm test` before committing
- Ensure build succeeds: `npm run build`
- Check bundle size: large increases should be justified
- Update component documentation if public API changed