Build a Habit Tracker with AI: Step-by-Step Project Tutorial

What You're Building

Imagine opening a clean dashboard every morning. Your habits are listed — exercise, read for 20 minutes, drink 8 glasses of water, no phone before 9 AM. A single tap marks each one done. A flame icon shows your current streak. A calendar grid shows which days you were consistent this month.

That's what you're building. Here's the full feature list:

• Habit list with daily check-ins — tap to mark a habit done for today, tap again to unmark it
• Streak counter — shows your current consecutive-day streak and your all-time best
• Habit creation and management — add new habits, set a goal frequency (daily, weekdays only, custom days), archive habits you've dropped
• Monthly calendar grid — a GitHub-style contribution graph showing which days each habit was completed
• Weekly summary dashboard — completion rate per habit for the past 7 days, best streak, and a motivational message based on your performance
• Data persistence — your check-in history survives page refreshes (local storage) or device switches (SQLite/database)

This project is a step up in complexity from a basic to-do app — you'll deal with dates, time-based logic, and visualizing historical data. But it's still well within what AI can generate on the first prompt. And unlike a to-do app, you'll actually use this one every day.

The Tech Stack (and Why AI Chose It)

When you ask AI to build a habit tracker, it usually reaches for one of two stacks depending on how you frame the request. Here's what each one is and when to pick it:

Stack	Best For	Setup Time	Data Persists?
Next.js + Local Storage	Personal use, quick prototype	5 minutes	Same browser only
Next.js + SQLite	Long-term use, data export	15 minutes	Yes, on your machine
Next.js + Supabase	Multi-device, sharing with others	30 minutes	Yes, any device

This guide uses Next.js with local storage first, then shows you how to upgrade to SQLite in Step 4. The reason to start with local storage: you get a working app in minutes, with no accounts or config needed. The reason to upgrade later: local storage disappears when you clear your browser cache, and you can't access your data on your phone.

Step 1: Setting Up the Project

Start with this prompt. It creates the entire project scaffold — folder structure, dependencies, a working Next.js app, and a placeholder for your habit tracker:

Run the setup commands AI gives you (npx create-next-app@latest, npm install, npm run dev) and you should see a blank dark-themed app at localhost:3000. If you hit errors, paste the exact error message back to AI and ask it to fix the setup.

Step 2: Building the Core Feature — Habit Tracking with Streaks

This is the heart of the app. Paste this into AI after your scaffold is working:

After this step, you'll have a working habit tracker. Add a few test habits, check them in, and verify the streak counts look right. Here's what AI generated for the streak logic — it's worth understanding because it's where bugs usually hide:

// lib/habits.ts — streak calculation
export function getCurrentStreak(habitId: string): number {
  const checkIns = getCheckIns(habitId);
  if (checkIns.length === 0) return 0;

  const today = formatDate(new Date()); // 'YYYY-MM-DD'
  const yesterday = formatDate(subDays(new Date(), 1));

  // If checked in today, start counting from today
  // If not checked in today, start counting from yesterday
  const startDate = checkIns.some(c => c.date === today)
    ? today
    : yesterday;

  let streak = 0;
  let current = startDate;

  while (true) {
    const hasCheckIn = checkIns.some(c => c.date === current);
    if (!hasCheckIn) break;
    streak++;
    current = formatDate(subDays(parseDate(current), 1));
  }

  return streak;
}

What this does: Walks backward from today (or yesterday, if today hasn't been checked in yet) counting consecutive days with a check-in. The moment it finds a gap — a day with no check-in — the streak ends. The formatDate and subDays helpers handle the date math. JavaScript date arithmetic is notoriously tricky, so AI wraps it in helpers to avoid timezone bugs.

Step 3: Adding the Dashboard — Weekly and Monthly Views

A habit tracker without history isn't much better than a sticky note. This step adds the views that make long-term tracking valuable:

The calendar grid is the piece that makes this app feel polished and real. Here's the core logic AI generates for it:

// components/CalendarGrid.tsx — building the grid data
function buildMonthGrid(year: number, month: number, checkIns: CheckIn[]) {
  const daysInMonth = getDaysInMonth(new Date(year, month));
  const firstDayOfWeek = getDay(new Date(year, month, 1)); // 0 = Sunday
  const today = formatDate(new Date());

  // Pad the start with empty cells so the grid aligns to the correct weekday
  const cells = Array(firstDayOfWeek).fill(null);

  for (let day = 1; day <= daysInMonth; day++) {
    const date = formatDate(new Date(year, month, day));
    const isCompleted = checkIns.some(c => c.date === date);
    const isFuture = date > today;
    const isToday = date === today;

    cells.push({ date, day, isCompleted, isFuture, isToday });
  }

  return cells;
}

What this does: Builds an array of "cell" objects for every day in the month. The Array(firstDayOfWeek).fill(null) part adds empty placeholder cells at the start so day 1 falls on the correct column (if March 1st is a Wednesday, the grid needs two empty cells before it). Each cell knows whether it was completed, is in the future, or is today — the component uses this to decide which color to render.

This pattern — building a data structure first, then rendering it — is used everywhere in dashboards. Once you understand it here, you'll recognize it in every calendar, heatmap, and schedule UI you see. If you go on to build a full analytics dashboard with AI, you'll use the exact same approach.

Step 4: Local Storage or Database — Persisting Your Data

Your habit tracker now works. But if you clear your browser cache, everything disappears. This step is about making your data permanent.

Option A: Keep Local Storage (Recommended to Start)

Local storage is already in place from Step 2. It's fine for personal use on a single device. The data survives page refreshes and even closing the browser — it only disappears if you explicitly clear your browser data. For most people building their first habit tracker, this is good enough. Skip to Step 5 if this is you.

Option B: Upgrade to SQLite (Recommended for Long-Term Use)

If you want your data to survive browser cache clears and be exportable, upgrade to SQLite. It stores data in a file on your machine — lightweight, no account needed, and your data is genuinely permanent.

Here's what the database layer looks like — notice how much simpler the queries are compared to manually searching arrays in local storage:

// lib/db.ts — SQLite operations
import Database from 'better-sqlite3';
const db = new Database('./habits.db');

// Initialize tables
db.exec(`
  CREATE TABLE IF NOT EXISTS habits (
    id TEXT PRIMARY KEY,
    name TEXT NOT NULL,
    emoji TEXT DEFAULT '✅',
    frequency TEXT NOT NULL DEFAULT 'daily',
    created_at TEXT NOT NULL,
    archived_at TEXT
  );
  CREATE TABLE IF NOT EXISTS check_ins (
    id TEXT PRIMARY KEY,
    habit_id TEXT NOT NULL REFERENCES habits(id),
    date TEXT NOT NULL,
    completed_at TEXT NOT NULL,
    UNIQUE(habit_id, date)
  );
`);

export function toggleCheckIn(habitId: string, date: string) {
  const existing = db.prepare(
    'SELECT id FROM check_ins WHERE habit_id = ? AND date = ?'
  ).get(habitId, date);

  if (existing) {
    db.prepare('DELETE FROM check_ins WHERE habit_id = ? AND date = ?')
      .run(habitId, date);
    return { checked: false };
  } else {
    db.prepare(
      'INSERT INTO check_ins (id, habit_id, date, completed_at) VALUES (?, ?, ?, ?)'
    ).run(crypto.randomUUID(), habitId, date, new Date().toISOString());
    return { checked: true };
  }
}

What this does: Checks if a check-in exists for this habit and date. If it does, delete it (un-check). If it doesn't, create it (check in). The UNIQUE(habit_id, date) constraint in the schema means the database itself prevents duplicate check-ins — even if two requests arrive simultaneously, only one will succeed.

This is also a great moment to understand why databases beat local storage for anything real. The UNIQUE constraint is a guarantee the database enforces. With local storage, you'd have to write that check yourself in JavaScript — and if your code has a bug, you get duplicates. Databases handle integrity for you.

Step 5: Polish and Deploy

You have a working habit tracker. Now make it feel like something you actually want to open every morning.

Once npm run build passes cleanly, you're ready to deploy. The easiest path is Vercel — connect your GitHub repo, and Vercel deploys automatically on every push. See our step-by-step guide on deploying to Vercel with AI if you haven't done this before.

What AI Gets Wrong About Habit Trackers

AI builds habit trackers well, but there are four specific places where it consistently fumbles. Know these before you test:

What to Build Next

Your habit tracker is live. Here's how to keep leveling it up — each is a single prompt:

🔔 Daily Reminder Notifications

A push notification at 9 PM: "You haven't checked in yet today. 3 habits remaining." Prompt: "Add browser push notifications. At 9 PM each day, if any habits haven't been completed, send a notification listing them. Ask the user for notification permission when they first open the app."

📊 Habit Insights with AI

Use Claude to analyze your check-in history and surface patterns. Prompt: "Add an AI insights feature. Send the last 30 days of check-in data to the Claude API and ask it to identify patterns: which habits I stick to best, which day of the week I'm most consistent, and one specific suggestion for improvement."

👥 Accountability Partner

Share a read-only view of your habits with a friend. Prompt: "Add a 'share my habits' feature. Generate a unique shareable link that shows a read-only view of my habit streaks for the past 30 days — no editing or check-in ability, just a public progress page."

🎯 Habit Templates

Pre-built habit packs for common goals (morning routine, fitness, learning). Prompt: "Add a habit template system. Create 5 templates: Morning Routine, Fitness, Learning, Mindfulness, and Productivity. Each template has 4-6 pre-configured habits. Show a template picker when the user has zero habits."

📤 Export Your Data

Export your full check-in history to CSV for analysis in Excel or Google Sheets. This is the same pattern used in the expense tracker project — once you learn it once, you can add it to any app. Prompt: "Add a CSV export button on the stats page. Export all check-ins for all habits: columns are date, habit name, completed (true/false). Include only the past 90 days by default, with an option to export all time."

Frequently Asked Questions