Build a daily habit tracker app

[ibuzzardo]

Overview

Build a clean, modern daily habit tracker as a Next.js 15 App Router application with TypeScript and Tailwind CSS. The app lets users define habits and check them off each day, with a weekly streak view.

Requirements

Core Features

1. Habit List — display all habits with today's completion status (checkbox toggle)
2. Add Habit — form/modal to create a new habit with name and optional emoji icon
3. Weekly View — 7-day grid showing which days each habit was completed (dots or checkmarks)
4. Streak Counter — show current streak count next to each habit
5. Delete Habit — remove a habit with confirmation

Data Storage

• Use browser localStorage for persistence (no backend needed)
• Store habits as JSON: { id, name, emoji, completions: { [date]: boolean } }

UI/UX

• Single-page app, no routing needed (just app/page.tsx)
• Clean dark theme with Tailwind utility classes
• Responsive: works on mobile and desktop
• Smooth transitions when checking/unchecking habits
• Empty state message when no habits exist

Tech Stack

• Next.js 15 App Router
• TypeScript (strict mode)
• Tailwind CSS (utility classes only — do NOT use @apply with non-utility classes like 'dark' or 'border-border')
• No external UI libraries

File Structure

src/app/layout.tsx        — root layout with dark theme via className="dark" on html element
src/app/page.tsx          — main page component
src/app/globals.css       — tailwind imports only, no @apply directives
src/components/HabitList.tsx     — renders list of habits with checkboxes
src/components/AddHabitForm.tsx  — form to create new habit
src/components/WeeklyView.tsx    — 7-day completion grid
src/components/HabitItem.tsx     — single habit row with streak
tailwind.config.ts        — standard tailwind config with darkMode: 'class'
next.config.ts            — minimal config, output: 'standalone'

Acceptance Criteria

• Can add a new habit with name and emoji
• Can toggle today's completion for any habit
• Weekly view shows last 7 days of completion data
• Streak counter accurately reflects consecutive days
• Can delete a habit
• Data persists across page refreshes via localStorage
• Dark theme applied correctly via Tailwind utility classes
• No TypeScript errors
• Responsive on mobile and desktop

Edge Cases

• Empty habit list shows helpful message
• Streak resets properly when a day is missed
• Date handling uses UTC to avoid timezone issues
• localStorage gracefully handles missing or corrupt data