This chapter shows you exactly how building a complete feature plays out, minute by minute. The example: a publishing streak system to motivate users to post regularly. Reading time: 10 minutes.
The context
You're building a SaaS for freelancers. The problem you've noticed: your users create 1-2 pieces of content then drop off. You want to motivate them to publish regularly with a streak system (consecutive series).
Minute 0-5, brainstorm
What you type:
"Brainstorm a publishing streak system. Freelancers post 1-2 times then give up. I want to motivate them to publish regularly without being punitive."
What Claude proposes:
Option 1, daily streak (Duolingo style)
Simple but punitive. One missed day means you lose everything. Not a fit for freelancers who don't post every day.
Option 2, weekly streak (recommended)
More flexible. "Publish at least 1 piece per week" means the streak goes up. 14 days without publishing and the streak resets. Forgiving on the days, strict on regularity.
Option 3, points and levels
Full gamification but it risks pulling focus from the main goal (creating quality content).
What you reply:
"Let's go with the weekly streak. Good instinct on the 14-day tolerance."
Minute 5-15, planning
What you type:
"Write the implementation plan for the weekly streak."
What Claude produces:
A plan with 6 numbered tasks, and for each one:
- The file to create or modify
- What the task actually does
- The verification command
Task 1: SQL migration, streaks table (user_id, current_streak, best_streak, last_publication_date)
Task 2: Regenerate TypeScript types
Task 3: Server Action, calculate the current streak
Task 4: UI component, animated flame and counter
Task 5: Integration into the dashboard
Task 6: Unit tests
What you check:
- Is the order logical? Yes: DB, types, logic, UI, integration, tests
- Is anything missing? No, it's complete
- Is the scope reasonable? Yes, about 30-40 minutes of execution
What you reply:
"The plan is good. Run it."
Minute 15-25, execution (tasks 1-3)
Claude works autonomously. Here's what happens in the chat:
Task 1, SQL migration
Claude creates the file supabase/migrations/20260301_streaks.sql:
streakstable with the columns- RLS policy (security: each user only sees their own streak)
- Index on
user_idfor performance
It runs npx supabase migration up --local → ✅ migration applied.
Task 2, TypeScript types
It regenerates the types from the database. Now the TypeScript code knows about the new streaks table and its columns.
It runs npm run typecheck → ✅ no errors.
Task 3, Server Action
It creates src/lib/actions/streak.ts with the business logic:
getStreak(): fetches the current streakupdateStreak(): called after every publication- Logic: if the last publication was less than 14 days ago, streak++; otherwise, streak = 1
It runs npm run typecheck && npm run lint → ✅ all good.
Minute 25-40, execution (tasks 4-6)
Task 4, UI component
Claude creates src/components/dashboard/publishing-streak.tsx:
- Flame icon that grows with the streak
- "3 weeks in a row 🔥" counter
- Personalized encouragement message
- Subtle entrance animation
It runs npm run typecheck → ✅
Task 5, integration into the dashboard
It edits src/app/app/page.tsx to integrate the streak component into the dashboard, positioned nicely alongside the other widgets.
Task 6, unit tests
It creates tests/unit/actions/streak.test.ts with:
- Test for normal calculation (streak +1)
- Test for broken streak (14 days without publishing)
- Test for best streak (personal record)
- Test for first streak (new user)
It runs npm run test → ✅ 4/4 tests pass.
Minute 40-50, visual test and iteration
You open localhost:3000 in your browser and see the result.
What you notice:
- The streak counter shows up correctly in the dashboard → ✅
- The flame is a bit small, needs fixing
- The encouragement message is generic, needs improvement
What you type:
"The counter is too small. I'd like a bigger flame (48px instead of 24px), and a different encouragement message depending on the number of weeks: 1 week = 'Here we go!', 2-3 = 'Nice pace!', 4+ = 'Unstoppable! 🔥'"
Claude adjusts in 2 minutes. You refresh the browser, perfect.
Minute 50-60, review and commit
What you type:
/review
Claude re-reads all the modified code and flags:
- ✅ No bugs detected
- ✅ RLS correctly configured (security OK)
- ✅ Types consistent
- 💡 Suggestion: add a fallback if the table is empty (new user)
Claude applies the suggestion. Then:
/commit
Claude creates the commit: feat: add weekly publishing streak with animated flame
Timing summary
| Phase | Duration | Who |
|---|---|---|
| Brainstorm | 5 min | Claude proposes 3 options, you choose |
| Planning | 10 min | Claude writes the plan, you validate |
| Execution | 25 min | Claude codes 6 tasks, you watch |
| Test + iteration | 10 min | You test, you request adjustments |
| Review + commit | 10 min | Claude re-reads and saves |
| Total | 60 min | Full feature: DB + logic + UI + tests |
Full feature in 1 hour. Database, business logic, interface, unit tests, clean commit. Not a single line of code written by you. Your contribution: the product vision, the choice of approach, and the visual tweaks.