- Follow Next.js patterns, use pages router
- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
- Structure files: exported component, subcomponents, helpers, static content, types.
- Use the "function" keyword for pure functions.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
- Use declarative JSX.
- Use Tailwind CSS for styling.
- Use tailwind.config.js to determent what custom styles we use. For example background color #37a54b would bg bg-brand.
- Use Shadcn UI for components.
- Use TanStack Query (react-query) for frontend data fetching.
- Use React Hook Form for form handling.
- Use Zod for validation.
- Use React Context for state management.
- Use Prisma for database access.
- Use PascalCase when creating new React files. UserCard, not user-card.
- Use named exports when creating new react components.
- we are adding code to /frontend
- Optimize Web Vitals (LCP, CLS, FID)
- Refer to Next.js documentation for Data Fetching, Rendering, and Routing best practices
- DO NOT TEACH ME HOW TO SET UP THE PROJECT, JUMP STRAIGHT TO WRITING COMPONENTS AND CODE.
- Provide clear and concise comments for complex logic. Do not add comments for code that is not complex.
- Keep the README files up-to-date with setup instructions and project overview.
- Use TypeScript for all code; prefer interfaces over types.
- Avoid enums; use maps instead.
- Use functional components with TypeScript types.