Cursor rule

1---
2globs: apps/frontend/**/*.tsx,apps/frontend/**/*.ts
3---
4 
5# Next.js Frontend Conventions
6 
7## App Router Structure
8 
9Follow Next.js 14 App Router in [apps/frontend/src/app/](mdc:apps/frontend/src/app/):
10 
11- **Route Groups**: Use parentheses `(auth)`, `(dashboard)`
12- **Dynamic Routes**: Use brackets `[lang]`, `[id]`
13- **Layouts**: `layout.tsx` for shared layouts
14- **Pages**: `page.tsx` for route components
15 
16## Component Organization
17 
18Structure components in [apps/frontend/src/components/](mdc:apps/frontend/src/components/):
19 
20- **Common**: Shared UI components
21- **Forms**: Form-related components
22- **Layout**: Page layout components
23- Use PascalCase for component files
24 
25## API Integration
26 
27- **API Helpers**: [apps/frontend/src/api/](mdc:apps/frontend/src/api/)
28- **Types**: [apps/frontend/src/types/](mdc:apps/frontend/src/types/)
29- **Hooks**: [apps/frontend/src/hooks/](mdc:apps/frontend/src/hooks/)
30 
31## Styling
32 
33- **Tailwind CSS**: Utility-first approach
34- **Responsive**: Mobile-first design
35- **Theme**: Custom configuration in `tailwind.config.js`
36 
37## Data Fetching
38 
39- Use Server Components for initial data
40- Client Components for interactivity
41- Proper error boundaries and loading states
42- Type-safe API calls with generated types
43 
44## Internationalization
45 
46- Multi-language support with `[lang]` routes
47- Configuration in [apps/frontend/i18n-config.ts](mdc:apps/frontend/i18n-config.ts)
48- Middleware for language detection
49 
50## Testing
51 
52- **Unit Tests**: Jest with React Testing Library
53- **E2E Tests**: Cypress in [apps/frontend/cypress/](mdc:apps/frontend/cypress/)
54- **Fixtures**: Test data in `cypress/fixtures/`