diff --git a/.cursorrules b/.cursorrules index c791ff0..e66373a 100644 --- a/.cursorrules +++ b/.cursorrules @@ -48,5 +48,26 @@ 4. Consistency and Readability: • Maintain uniform naming across the project to ensure clarity and ease of maintenance. +## Group 3 – Frontend & React Best Practices + +1. Use of Functional Components & TypeScript: + • Build all components as functional components. + • Leverage TypeScript for static type checking and enforce strict prop and state types. + • Name components using PascalCase and define clear prop interfaces (e.g., WebSiteHeaderProps). + +2. Effective Use of React Hooks: + • Utilize useState and useEffect appropriately with proper dependency arrays. + • Create custom hooks to encapsulate shared logic (e.g., useAppSelector). + • Optimize performance with useCallback and useMemo where necessary. + +3. Component Composition & Separation of Concerns: + • Separate presentational (stateless) components from container components managing logic. + • Use layout components (e.g., LayoutGuest) to encapsulate common page structures. + • Keep components small, focused, and reusable. + +4. Code Quality & Readability: + • Maintain consistent formatting and adhere to Prettier and ESLint rules. + • Use descriptive names for variables, functions, and components. + • Document non-trivial logic with inline comments and consider implementing error boundaries where needed. • New code must adhere to these conventions to avoid ambiguity. • Use descriptive names that reflect the purpose and domain, avoiding abbreviations unless standard in the project.