İlla Burger

To avoid technical debt and ensure long-term maintainability: 1. Component Strategy (Server vs. Client) Server Components (Default): Always start with Server Components for data fetching and layout structure. This ensures maximum performance and SEO. Client Components ("use client"): Use only when interactivity (hooks like useState, useEffect) or browser-only APIs are required. Keep these as deep in the component tree as possible. 2. State Management (Zustand) Global Store: Use Zustand for cross-cutting concerns (Cart, Auth, Theme). Immutability: Always follow immutable update patterns. Selective Subscription: Use selectors to prevent unnecessary re-renders (e.g., const cartItems = useCartStore(state => state.items)). 3. Styling & Consistency Design Tokens: Use CSS variables in app/globals.css for brand colors and spacing. Naming: Follow a consistent naming convention for Tailwind classes. Responsiveness: Always build with a Mobile-First approach. 4. Continuous Quality Type Safety: Avoid using any. Every Sanity query result should be mapped to a formal TypeScript interface in lib/types. Linting: Ensure npm run lint passes before every commit to catch errors early.