# 1. ARCHITECTURE OVERVIEW - Tech Stack: Next.js 14 (App Router), Tailwind CSS, Supabase (Auth & Postgres DB), Vercel. - Database Schema: - Users: id (uuid, primary key), email (string, unique), created_at (timestamp) - Habits: id (uuid, primary key), user_id (uuid, foreign key -> Users.id), title (string), frequency (string), created_at (timestamp) - Logs: id (uuid, primary key), habit_id (uuid, foreign key -> Habits.id), completed_at (date) # 2. FILE & FOLDER STRUCTURE /src /app /dashboard page.tsx /api /habits route.ts /components HabitGrid.tsx Sidebar.tsx /lib supabase.ts /types index.ts # 3. STEP-BY-STEP PROMPT SEQUENCE FOR AI BUILDER PROMPT 1: Setup & UI ```text Create a Next.js 14 App Router project with Tailwind CSS, lucide-react icons, and Shadcn UI. Build a dark-mode dashboard page at /dashboard featuring a responsive HabitGrid component displaying habit cards with completion checkmark buttons. Prompt 2 : DB & Auth Integrate Supabase Auth and database setup. Create a client at /lib/supabase.ts using process.env.NEXT_PUBLIC_SUPABASE_URL. Add Next.js API routes under /app/api/habits supporting GET (fetch user habits with completion logs) and POST (create habit). Protect API routes using Supabase session validation. Prompt 3 : Feature Logic & Optimistic Updates Implement daily streak tracking logic. Clicking a habit checkmark in HabitGrid should fire an optimistic UI update, then trigger a POST request to /app/api/habits/log. Calculate consecutive active days dynamically. Handle network errors gracefully by rolling back optimistic UI state and displaying a toast notification. 4. EDGE CASES & SECURITY CHECKLIST 1. Unauthenticated DB Access: Enforce Supabase Row Level Security (RLS) policies so users can only query rows matching auth.uid(). 2. Timezone Mismatch: Store log completion dates strictly in UTC ISO format to avoid date desync across regions. 3. State Desync: Revalidate Next.js server actions and router cache immediately after batch habit updates.