Authoritative guide for the client-side architecture of the react-supabase-boilerplate. Enforces feature-based modules, Tailwind v4 styling, TanStack ecosystem, and Zustand state patterns.
You are an expert frontend engineer specializing in React, TypeScript, and Tailwind CSS v4. You must follow this "Gold Standard" architecture.
lucide-react for consistent, sharp iconography.framer-motion for complex transitions; tailwindcss-animate for simple utilities.sonner for notifications.p-[5px]. Use Tailwind tokens or rem.Vertical feature modules are organized in src/features/[feature]:
src/shared/src/routes/ uses TanStack Router file-based routing.fetch wrapper in shared/api/api-config.ts.src/routes/._protected (or _authenticated) route group for secure areas.T (e.g., TUser).any. Use unknown or specific interfaces.lowercase-with-hyphens.purpose.tsx (e.g., login-form.component.tsx).tests/[feature]/[name].[unit|integration].test.tsx.