cursor ruiles #3

.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.