How to Build Habit tracker with V0

1// Paste this prompt into V0's AI chat:
2// Build a habit tracking app. Create a Supabase schema with:
3// 1. habits: id (uuid PK), user_id (uuid FK to auth.users), name (text), description (text), icon (text), color (text default '#22c55e'), frequency (text check in 'daily','weekdays','weekly' default 'daily'), target_per_day (int default 1), position (int), is_archived (boolean default false), created_at (timestamptz)
4// 2. completions: id (uuid PK), habit_id (uuid FK to habits), date (date), count (int default 1), created_at (timestamptz), unique(habit_id, date)
5// 3. streaks: id (uuid PK), habit_id (uuid FK to habits), current_streak (int default 0), longest_streak (int default 0), last_completed_date (date)
6// Add RLS: users see only their own habits and completions.
7// Create a trigger that auto-creates a streaks row when a new habit is inserted.

1// Paste this prompt into V0's AI chat:
2// Build a habit tracker homepage at app/page.tsx as a 'use client' component.
3// Requirements:
4// - Today's date prominently displayed at top
5// - List of active habits as Card components, each with:
6//   - Checkbox for completion toggle (optimistic UI)
7//   - Habit name and icon
8//   - Badge showing current streak with fire emoji
9//   - Color indicator matching the habit's color
10// - Weekly overview below: 7-day row per habit showing filled/empty circles
11// - Overall completion rate for today (e.g., "4/6 habits done")
12// - "Add Habit" Button linking to /habits
13// - When Checkbox is toggled, call a Server Action that upserts into completions
14//   and recalculates the streak in the streaks table
15// - Use Card for each habit and Badge for streak count

1// Paste this prompt into V0's AI chat:
2// Build a Server Action at app/actions/habits.ts for toggling habit completion.
3// Requirements:
4// - toggleCompletion(habitId: string, date: string) Server Action
5// - If completion exists for that habit+date, delete it. Otherwise upsert with count=1.
6// - After toggling, recalculate the streak:
7//   Query completions for this habit ordered by date DESC
8//   Count consecutive days backwards from today (break on first missing day)
9//   Update streaks table: current_streak = calculated value
10//   If current_streak > longest_streak, update longest_streak too
11// - Use Zod to validate habitId (uuid) and date (string)
12// - revalidatePath('/') after the update
13// - Also create addHabit and updateHabit Server Actions with Zod validation

1// Paste this prompt into V0's AI chat:
2// Build a stats page at app/stats/page.tsx.
3// Requirements:
4// - Completion heatmap: a 365-day CSS grid (like GitHub contribution graph)
5//   Each cell colored by completion count for that day:
6//   0 = gray-100, 1 = green-200, 2 = green-400, 3+ = green-600
7//   Wrap the heatmap in a 'use client' component, keep page as Server Component
8// - Month labels above the heatmap grid
9// - Streak leaderboard: Card for each habit showing current and longest streak
10//   sorted by current streak DESC, with Badge for streak count
11// - Overall stats Cards: total completions, current longest streak, best day, completion rate this month
12// - Select to filter heatmap by specific habit or show all habits combined
13// - Use Card for stat containers and Badge for streak indicators

1// Paste this prompt into V0's AI chat:
2// Build a habits management page at app/habits/page.tsx.
3// Requirements:
4// - List all active habits in a reorderable list (drag handle icon)
5// - Each habit row: icon, name, frequency Badge, color circle, edit Button, archive Switch
6// - "Add Habit" Button opening Dialog with:
7//   Input for name, Input for description, Select for icon (emoji picker),
8//   color picker (6 preset color buttons), Select for frequency (daily/weekdays/weekly)
9// - Edit: same Dialog pre-filled with existing values
10// - Archive toggle: Switch that sets is_archived=true, habit disappears from today page
11// - Archived section at bottom (collapsed by default) showing archived habits with restore Button
12// - Server Actions for create, update, reorder (update position), and archive
13// - Use Dialog for the form, Switch for archive toggle, Badge for frequency