PRD Example 14: Habit Tracker with Streaks

Difficulty: Intermediate | Project Type: Web App | Time: 6-8 hours

---

Overview

What	A web app for tracking daily habits and maintaining streaks
Who	Anyone building new habits who wants visual streak motivation
Why	Simple habit tracking focused on streak visualization to maintain motivation

---

Core Features (MVP)

1. Add Habit: Create habit with name and target frequency (daily)
2. Mark Complete: Check off habits for today
3. View Streaks: See current streak count for each habit
4. Calendar View: Monthly view showing completed days
5. Delete Habit: Remove habits with streak warning

---

Non-Goals

Will NOT build:

• User accounts or authentication
• Habit reminders or notifications
• Weekly/monthly habits (daily only)
• Habit categories or grouping
• Statistics or analytics beyond streaks
• Data export
• Mobile app
• Social features or sharing

Will NOT use:

• Backend server (client-side only)
• External APIs
• Database (use localStorage)
• Date libraries (use native Date)

---

Technical Constraints

Language	TypeScript
Framework	Next.js 14 (App Router, static export)
Styling	Tailwind CSS
Data Storage	localStorage
Testing	Jest, React Testing Library
Deploy	Static export to Vercel

---

Success Criteria

• [ ] Can create habits with name
• [ ] Can mark habits complete for today
• [ ] Streak count increases on consecutive days
• [ ] Streak resets if day is missed
• [ ] Calendar shows completed days (green) vs missed (red)
• [ ] Delete warns if streak > 7 days
• [ ] All tests pass
• [ ] Deploys to Vercel as static site

---

Implementation Phases

Phase 1: Project Setup & Data Model

Goal: Set up Next.js project and habit storage

Tasks:

1. Create Next.js project with App Router
2. Configure for static export (output: 'export')
3. Define Habit type: \{id, name, completedDates[], createdAt\}
4. Create localStorage hooks

Verification:

npm run dev
# Opens http://localhost:3000

npm run build
# Creates static export in /out

Deliverables: Project structure, types, storage

---

Phase 2: Habit CRUD & Daily Tracking

Goal: Create habits and track daily completion

Tasks:

1. Build AddHabit form
2. Build HabitCard with today's checkbox
3. Implement toggle completion for today
4. Calculate and display current streak

Verification:

1. Add habit "Exercise"
2. Check today's checkbox → streak shows "1 day"
3. Refresh page → completion persists
4. (Simulate) Check yesterday → streak shows "2 days"

Deliverables: Habit cards with streak display

---

Phase 3: Calendar View

Goal: Monthly calendar showing habit history

Tasks:

1. Build Calendar component
2. Show current month with day cells
3. Color completed days green, missed days red
4. Navigate between months (prev/next)

Verification:

1. Click habit to expand calendar
2. See green cells for completed days
3. See red cells for missed days after creation
4. Navigate to previous month → shows history

Deliverables: Calendar component

---

Phase 4: Delete & Deploy

Goal: Complete app and deploy

Tasks:

1. Implement delete with streak warning
2. Write tests for streak calculation
3. Deploy to Vercel
4. Test on deployed URL

Verification:

# Delete habit with 10-day streak:
"Are you sure? You'll lose your 10-day streak!"

npm test
# All tests pass

vercel --prod
# Deploys successfully

Deliverables: Complete app deployed to Vercel

---

Streak Calculation Logic

function calculateStreak(completedDates: string[]): number {
  // Sort dates descending
  // Count consecutive days from today backwards
  // If today not completed, start from yesterday
  // Return count
}

---

Agent Rules

Always	Ask First	Never
Store dates as ISO strings (YYYY-MM-DD)	Before changing streak logic	Use backend or database
Warn before deleting habits with streaks	Before adding new features	Send notifications
Persist immediately on completion toggle	Before changing calendar design	Add authentication
Handle timezone correctly for "today"		Use date libraries