## Frontend
### Guidelines for REACT 
#### NEXT.JS
- Use App Router and Server API routes for improved performance and SEO 
- Implement route handlers for API endpoints instead of the pages/api directory 
- Use server actions for form handling (Use React Hook Form for form handling) and data mutations from Server Components 
- Leverage Next.js Image component with proper sizing for core web vitals optimization 
- Implement the Metadata API for dynamic SEO optimization in public pages
- Use API routes for {{data_fetching_operations}} (Server Side) to reduce client-side JavaScript.
- Use the new Link component without requiring a child <a> tag.
- Leverage parallel routes for complex layouts and parallel data fetching - Implement intercepting routes for modal patterns and nested UIs.
- Instead of building new components from scratch, use Material UI (@mui/material) for components. Do not rewrite existing components, unless specifically asked to refactor.
- Follow AirBnB style guide for code formatting. 
- Use named exports when creating new react components.
#### REACT_QUERY
- Use TanStack Query (formerly React Query) with appropriate staleTime and gcTime based on data freshness requirements 
- Implement the useInfiniteQuery hook for pagination and infinite scrolling 
- Use optimistic updates and isLoading with Skeleton MUI component for mutations to make the UI feel more responsive 
- Leverage queryClient.setQueryDefaults to establish consistent settings for query categories. Check if it is not already implemented
- Use the select option to transform and extract specific data from query results 
- Use Query Keys structuring pattern ([entity, params]) for better organization and automatic refetching 
- Implement query invalidation strategies to keep data fresh after mutations
#### ZUSTAND
- Create separate stores for distinct state domains instead of one large store 
- Use immer middleware for complex state updates to maintain immutability when dealing with nested data 
- Implement selectors to derive state and prevent unnecessary re-renders 
- Leverage the persist middleware for automatic state persistence in localStorage or other storage 
- Use TypeScript with strict typing for store definitions to catch errors at compile time 
- Prefer shallow equality checks with useShallow for performance optimization in component re-renders 
- Combine stores using composition for sharing logic between stores 
- Implement subscriptions to react to state changes outside of React components 
- Create custom hooks to encapsulate store access and related business logic