Building a Full-Stack Habit Tracker with Claude Code - Pa...

Building a Full-Stack Habit Tracker with Claude Code - Part 2: Polish, Testing & Deployment

Taking the habit tracker from MVP to production-ready with categories, analytics, comprehensive testing, and Vercel deployment

Welcome Back!

In [Part 1], we built a fully functional habit tracker MVP in about 6-8 hours using Claude Code as our AI pair programmer. We had:

✅ Basic CRUD operations for habits
✅ Date-based tracking
✅ Dark/light theme toggle
✅ localStorage persistence
✅ Simple analytics

So continuing my learning journey with Claude as I will be covering below topics and how I used claude to plan and work on them

Improving the Site An 8-category organization system
Improving the Site Real-time summary cards with progress bars
Improving the Site Advanced analytics with streak tracking
Improving the Site Smart category filtering
Testing of the App using Playwright 170+ automated test cases
Deployment of the app Production deployment to Vercel

Let's ship this! 🚢

Phase 9: The Category System (Organization FTW)

After using the app for a few days, I realized tracking "Morning workout" and "Finish quarterly report" in the same list felt... wrong. They're completely different types of habits.

I asked Claude: "Help me add a category system to organize habits better."

Step 1: Define the Categories

Claude suggested creating a constants file:

// src/constants/categories.js
export const CATEGORIES = [
  { id: 'health', name: 'Health & Fitness', emoji: '💪' },
  { id: 'work', name: 'Work & Productivity', emoji: '💼' },
  { id: 'learning', name: 'Learning & Growth', emoji: '📚' },
  { id: 'personal', name: 'Personal Care', emoji: '🧘' },
  { id: 'social', name: 'Social & Family', emoji: '👥' },
  { id: 'finance', name: 'Finance & Money', emoji: '💰' },
  { id: 'hobbies', name: 'Hobbies & Fun', emoji: '🎨' },
  { id: 'other', name: 'Other', emoji: '📌' }
];

Why this approach?

Centralized: One source of truth
Extensible: Easy to add more categories later
Type-safe: Could convert to TypeScript easily
Visual: Emojis make categories instantly recognizable

Step 2: Category Selector Component

// src/components/CategorySelector.js
import { CATEGORIES } from '../constants/categories';

function CategorySelector({ value, onChange }) {
  return (
    <div className="form-group">
      <label htmlFor="category">Category</label>
      <select
        id="category"
        value={value}
        onChange={onChange}
        className="form-select"
      >
        {CATEGORIES.map(cat => (
          <option key={cat.id} value={cat.name}>
            {cat.emoji} {cat.name}
          </option>
        ))}
      </select>
    </div>
  );
}

export default CategorySelector;

Step 3: Update the Data Model

Our habit objects now include category:

{
  id: "1712345678901",
  habit: "Morning workout",
  date: "2026-04-08",
  category: "Health & Fitness",  // NEW!
  status: "Completed"
}

Step 4: Category Filtering on Home Page

Here's where it got fun. I wanted users to filter habits by category:

// src/pages/Home.js
import { CATEGORIES } from '../constants/categories';

function Home({ habits, onAddHabit, onUpdateHabit, onDeleteHabit }) {
  const [selectedCategory, setSelectedCategory] = useState('All');

  // Filter habits based on selected category
  const filteredHabits = selectedCategory === 'All'
    ? habits
    : habits.filter(h => h.category === selectedCategory);

  return (
    <div className="home-page">
      {/* Add Habit Form */}
      <HabitForm onAddHabit={onAddHabit} />

      {/* Category Filter Buttons */}
      <div className="category-filter">
        <h3>Filter by Category:</h3>
        <div className="filter-buttons">
          <button
            className={selectedCategory === 'All' ? 'active' : ''}
            onClick={() => setSelectedCategory('All')}
          >
            🌐 All
          </button>

          {CATEGORIES.map(cat => (
            <button
              key={cat.id}
              className={selectedCategory === cat.name ? 'active' : ''}
              onClick={() => setSelectedCategory(cat.name)}
            >
              {cat.emoji} {cat.name}
            </button>
          ))}
        </div>
      </div>

      {/* Habit List (now filtered) */}
      <HabitList
        habits={filteredHabits}
        onEdit={onUpdateHabit}
        onDelete={onDeleteHabit}
      />
    </div>
  );
}

The UX touches that made it feel polished:

Active button gets a different background color
Smooth transitions between filter states
Count updates automatically when filtering
Empty state shows helpful message

💡 Learning #6: Small UX touches (active states, smooth transitions) make a huge difference in perceived quality.

Phase 10: Summary Cards (At-a-Glance Progress)

I wanted users to see their progress immediately when opening the app. Claude helped me create a beautiful summary system.

The Vision

Four cards showing:

📅 Today's Progress (completed/total)
📊 This Week's completion rate
🔥 Active streaks count
🎯 Total unique habits

Step 1: Analytics Utility

// src/utils/homeSummaryAnalytics.js

// Get today's habits and completion
export const getTodayProgress = (habits) => {
  const today = new Date().toISOString().split('T')[0];
  const todayHabits = habits.filter(h => h.date === today);
  const completed = todayHabits.filter(h => h.status === 'Completed').length;

  return {
    completed,
    total: todayHabits.length,
    percentage: todayHabits.length > 0
      ? Math.round((completed / todayHabits.length) * 100)
      : 0
  };
};

// Get this week's completion rate
export const getWeekProgress = (habits) => {
  const now = new Date();
  const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);

  const weekHabits = habits.filter(h => {
    const habitDate = new Date(h.date);
    return habitDate >= weekAgo && habitDate <= now;
  });

  const completed = weekHabits.filter(h => h.status === 'Completed').length;

  return weekHabits.length > 0
    ? Math.round((completed / weekHabits.length) * 100)
    : 0;
};

// Count habits with active streaks
export const getActiveStreaks = (habits) => {
  // Group habits by name
  const grouped = groupHabitsByName(habits);

  // Count how many have current streaks > 0
  let activeStreaks = 0;

  for (const habitName in grouped) {
    const streak = calculateCurrentStreak(grouped[habitName]);
    if (streak > 0) activeStreaks++;
  }

  return activeStreaks;
};

// Count unique habit names
export const getTotalUniqueHabits = (habits) => {
  const uniqueNames = new Set(
    habits.map(h => h.habit.toLowerCase())
  );
  return uniqueNames.size;
};

Step 2: StatCard Component

// src/components/StatCard.js
function StatCard({ icon, value, label, children }) {
  return (
    <div className="stat-card">
      <div className="stat-icon">{icon}</div>
      <div className="stat-content">
        <div className="stat-value">{value}</div>
        <div className="stat-label">{label}</div>
        {children}
      </div>
    </div>
  );
}

Step 3: Progress Bar Component

For today's progress, I wanted a visual bar:

// src/components/ProgressBar.js
function ProgressBar({ percentage }) {
  return (
    <div className="progress-bar-container">
      <div
        className="progress-bar-fill"
        style={{ width: `${percentage}%` }}
      >
        <span className="progress-percentage">{percentage}%</span>
      </div>
    </div>
  );
}

export default ProgressBar;

With some beautiful CSS:

/* src/styles/progress-bar.css */
.progress-bar-container {
  width: 100%;
  height: 24px;
  background: var(--bg-secondary);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 8px;
  border: 1px solid var(--border-color);
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a90e2 0%, #63b3ed 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.5s ease;
  min-width: 30px;
}

.progress-percentage {
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

Step 4: Putting It All Together

// src/components/SummaryCards.js
import StatCard from './StatCard';
import ProgressBar from './ProgressBar';
import {
  getTodayProgress,
  getWeekProgress,
  getActiveStreaks,
  getTotalUniqueHabits
} from '../utils/homeSummaryAnalytics';

function SummaryCards({ habits }) {
  const todayProgress = getTodayProgress(habits);
  const weekProgress = getWeekProgress(habits);
  const activeStreaks = getActiveStreaks(habits);
  const totalHabits = getTotalUniqueHabits(habits);

  return (
    <div className="summary-cards">
      <StatCard
        icon="📅"
        value={`${todayProgress.completed}/${todayProgress.total}`}
        label="Today's Progress"
      >
        <ProgressBar percentage={todayProgress.percentage} />
      </StatCard>

      <StatCard
        icon="📊"
        value={`${weekProgress}%`}
        label="This Week"
      />

      <StatCard
        icon="🔥"
        value={activeStreaks}
        label="Active Streaks"
      />

      <StatCard
        icon="🎯"
        value={totalHabits}
        label="Total Habits"
      />
    </div>
  );
}

The Result:

Users now see their progress the instant they open the app. No scrolling, no clicking - just immediate feedback.

💡 Learning #7: Summary metrics should answer the question "How am I doing?" in under 2 seconds.

Phase 11: Restructuring for Deployment

After building all these features, my project structure was getting messy. Claude suggested reorganizing:

# Before: Everything in a subdirectory
habit-tracker/
  habit-tracker/
    src/
    public/
    package.json
  README.md

# After: Clean root structure
habit-tracker/
  src/
  public/
  package.json
  README.md
  vercel.json    # NEW!

Why? Deployment platforms like Vercel expect your project at the repository root.

The migration:

# Move everything up one level
mv habit-tracker/* .
mv habit-tracker/.gitignore .
rmdir habit-tracker

# Commit the restructure
git add .
git commit -m "Restructure repository for easier deployment"

💡 Learning #8: Plan your folder structure with deployment in mind from day one.

Phase 12: Deploying to Vercel

Time to ship! 🚀

Step 1: Create vercel.json

This crucial file tells Vercel how to handle React Router:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

Why is this needed?

Single-page apps (SPAs) need all routes to point to index.html so React Router can handle them. Without this, direct navigation to /trends would 404.

Step 2: Deploy via Vercel CLI

# Install Vercel CLI
npm install -g vercel

# Login to Vercel
vercel login

# Deploy!
vercel

# Follow the prompts:
# - Set up new project? Yes
# - Link to existing project? No
# - Project name: habit-tracker
# - Which directory? ./
# - Override settings? No

# Deploy to production
vercel --prod

30 seconds later: My app was live at habit-tracker.vercel.app 🎉

Step 3: Configure Auto-Deploy

Connected my GitHub repo to Vercel:

Went to vercel.com dashboard
Connected GitHub account
Imported the repository
Set build settings:
- Build Command: npm run build
- Output Directory: build
- Install Command: npm install

Now every push to main automatically deploys. Every PR gets a preview URL. Magic! ✨

💡 Learning #9: Vercel's free tier is ridiculously good for React apps. No excuses not to ship!

Phase 13: Comprehensive Testing with Playwright MCP

Here's where things got really interesting. I wanted to make sure the app actually worked before sharing it with the world.

I asked Claude: "Help me create a comprehensive testing strategy for this app."

What is Playwright MCP?

Playwright is a browser automation tool, and MCP (Model Context Protocol) integrates it directly with Claude Code. This means Claude can:

Navigate the actual running app in a browser
Take screenshots and accessibility snapshots
Interact with UI elements
Capture console logs and network requests
Generate detailed test reports

The Testing Process

# Start the dev server
npm start
# App running at http://localhost:3001

# Claude Code connects via Playwright MCP
# Opens browser, starts analyzing...

Claude methodically:

✅ Navigated to every page
✅ Tested every form input
✅ Checked all filters
✅ Verified localStorage persistence
✅ Tested theme switching
✅ Validated responsive design
✅ Checked accessibility

The Generated Test Report

Claude produced UI_TEST_REPORT.md - a 2,270-line comprehensive test plan documenting:

170+ test cases across 14 functional areas
Priority levels (High/Medium/Low)
Detailed test steps and expected results
Recommended testing strategies
Automation guidelines

Here's a sample:

**TC-FORM-013:** Verify habit is added when form is submitted with valid data
**Priority:** High | **Type:** Functional | **Automation:** Yes

**Steps:**
1. Enter "Morning workout" in habit field
2. Select category "Health & Fitness"
3. Select status "Completed"
4. Click "Add Habit"

**Expected Result:** Habit is created and appears in habit list

---

**TC-STORAGE-003:** Verify habits persist after page refresh
**Priority:** High | **Type:** Integration | **Automation:** Yes

**Steps:**
1. Add multiple habits
2. Press F5 to refresh
3. Verify all habits still appear

**Expected Result:** Habits remain after refresh

Test Coverage Summary

Feature Area	Test Cases	Priority
Navigation	7	High
Theme Toggle	7	Medium
Add Habit Form	20	High
Habit List Display	18	High
Summary Cards	12	High
Category Filter	10	High
Edit Habit	11	High
Delete Habit	6	High
LocalStorage	8	High
Trends Page	14	Medium
Accessibility	7	High
Integration/E2E	6	High

Total: 170+ test cases

Generated Artifacts

Claude created a .playwright-mcp/ directory with:

Page snapshots (accessibility trees)
Console log captures
Network request logs
Screenshots at various breakpoints

💡 Learning #10: AI-powered testing can generate comprehensive test plans faster than any human.

Phase 14: Documentation

The final piece: making the project maintainable and shareable.

README.md

Claude helped me create a comprehensive README covering:

Features overview - What the app does
Tech stack - What it's built with
Development journey - How we built it (perfect for blog posts!)
Getting started - Installation and running
Deployment guide - How to ship it
Testing strategy - How to validate it
Project structure - Where everything lives
Future enhancements - What's next

CLAUDE.md

I also created project-specific instructions for future Claude Code sessions:

# CLAUDE.md

This file provides guidance to Claude Code when working with this repository.

## Project Structure
- React 19 with Create React App
- Client-side routing with React Router DOM
- localStorage for persistence (no backend)
- CSS custom properties for theming

## Key Conventions
- Components use functional components with hooks
- Styles use CSS modules, NOT Tailwind or styled-components
- Date format: ISO (YYYY-MM-DD)
- Always update Navigation.js when adding new pages

## Testing
- 170+ test cases documented in UI_TEST_REPORT.md
- Use React Testing Library for unit tests
- Playwright for E2E tests

## Deployment
- Vercel auto-deploys from main branch
- vercel.json is required for React Router support

Why this matters: Future Claude sessions (or human developers!) can understand the project instantly.

💡 Learning #11: Good documentation is a gift to your future self.

The Final Stats

After two days of development with Claude Code:

What We Built:

✅ Full-featured habit tracker
✅ 8-category organization system
✅ Real-time analytics and trends
✅ Summary cards with progress bars
✅ Category filtering
✅ Dark/light themes
✅ 100% responsive design
✅ localStorage persistence
✅ Production deployment
✅ 170+ documented test cases
✅ Comprehensive documentation

The Numbers:

Lines of Code: ~3,500
Components: 15
Pages: 3
Test Cases Documented: 170+
Files Created: 47
Time Spent: ~12-15 hours total
Time Saved vs Solo: Estimated 70-80%

Repository Structure:

habitTracker/
├── .playwright-mcp/          # Test artifacts
├── public/                   # Static assets
├── src/
│   ├── components/          # 15 reusable components
│   ├── constants/           # Category definitions
│   ├── hooks/               # Custom hooks (theme)
│   ├── pages/               # 3 route pages
│   ├── styles/              # 4 CSS files
│   └── utils/               # Analytics functions
├── CLAUDE.md                # AI instructions
├── README.md                # Comprehensive docs
├── UI_TEST_REPORT.md        # 170+ test cases
├── blog-part-1.md           # This blog post!
├── blog-part-2.md           # This blog post!
└── vercel.json              # Deployment config

Key Takeaways: Working with Claude Code

After building this entire app with AI pair programming, here are my insights:

✅ What Claude Code Excelled At

Boilerplate Elimination: No more typing import React from 'react' a hundred times
Architecture Suggestions: Claude's patterns were consistently better than my first instincts
Comprehensive Testing: Generated 170+ test cases I wouldn't have thought of
Documentation: Created better docs than I would have written alone
Learning Tool: Every suggestion came with explanations

⚠️ Where I Still Had to Think

Product Decisions: What features to build and when
UX Design: The "feel" of the app
Code Review: Reading and validating everything
Architecture Strategy: High-level decisions about structure
Debugging Edge Cases: Some bugs required human intuition

🎯 The Optimal Workflow

I found this rhythm worked best:

1. Describe what I want ("Add a progress bar to today's stats")
2. Let Claude write initial implementation
3. Review and test the code
4. Ask questions about anything unclear
5. Request refinements ("Make the animation smoother")
6. Validate the final result
7. Move to next feature

Time ratio:

30% describing what I want
10% waiting for Claude to write code
40% reviewing and testing
20% refining and polishing

Real Talk: Is AI Replacing Developers?

What used to be:

80% writing code
20% thinking about architecture

Is becoming:

30% writing code
70% thinking about architecture, UX, and product decisions

Claude Code didn't replace my job as a developer. It elevated it. I spent more time on:

User experience decisions
Feature prioritization
Design polish
Testing strategy
Documentation quality

And less time on:

Typing boilerplate
Looking up syntax
Fighting with CSS
Writing repetitive tests

The result? A better app, built faster, with more thorough testing.

Resources & Links

Tools Used:

Claude Code - AI pair programming
React - UI framework
React Router - Client-side routing
Vercel - Deployment platform
Playwright - Browser automation

With Claude Code, I:

✅ Built a production app in 2 days instead of 2 weeks
✅ Learned new React patterns and best practices
✅ Generated comprehensive testing documentation
✅ Created better docs than I would have alone
✅ Shipped a polished product I'm proud of

But I also:

✅ Made every product decision
✅ Designed the user experience
✅ Reviewed every line of code
✅ Tested everything thoroughly
✅ Brought the creative vision to life

What did you think of this series? Drop a comment below!

Want to see more builds like this? Follow me for future AI-powered projects.

Questions about the code or process? Ask away - I'll respond to everyone!

Thank you for reading! 🙏

If you found this valuable:

❤️ Leave a reaction
💬 Share your thoughts in the comments
🔖 Bookmark for later
📱 Share with your dev friends

Happy coding! 💻

AI #React #WebDev #Testing #Deployment #ClaudeCode #ProductivityTools #Tutorial

Built with Claude Code, deployed on Vercel, documented for the community. This is the way. ✨

推荐订阅源

DEV Community