This chapter shows you how building a complete feature plays out, minute by minute. The example: a publishing streak system to motivate users to post regularly on a content-generation SaaS. Reading time: 10 minutes.
The context
You're building a SaaS for freelancers that helps them publish on LinkedIn. The problem you noticed after 3 weeks of beta: 68% of your users create 1 or 2 pieces of content then drop off. You want to motivate them to publish regularly with a streak system (consecutive series), without being punitive.
Minute 0-5, brainstorm
What you type:
"Brainstorm a publishing streak system. Freelancers publish 1-2 times then give up. I want to motivate them to publish regularly without being punitive. Context: Next.js 16 + Supabase, auth and dashboard already in place."
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. Supabase table, Server Action, dashboard component, tests."
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 supabase/migrations/20260420_create_streaks.sql, streaks table (user_id, current_streak, best_streak, last_publication_date, updated_at) + RLS policy + index
Task 2: Regenerate TypeScript types to src/types/database.types.ts
Task 3: Server Action src/lib/actions/streak.ts, getStreak() and updateStreakAfterPublish()
Task 4: UI component src/components/dashboard/publishing-streak.tsx, animated flame with Framer Motion + counter
Task 5: Integration into src/app/(app)/dashboard/page.tsx
Task 6: Unit tests tests/unit/actions/streak.test.ts, 4 scenarios
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. What happens in the chat:
Task 1, SQL migration
Claude creates supabase/migrations/20260420_create_streaks.sql:
streakstable with the 5 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 in 340ms.
Task 2, TypeScript types
It regenerates the types from the database with npx supabase gen types typescript --local > src/types/database.types.ts. The TypeScript code now knows about the 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 streakupdateStreakAfterPublish(): called after every publication- Logic: if the last publication is less than 14 days old, streak++; otherwise, streak = 1.
best_streakupdates when the current one passes it.
It runs npm run typecheck && npm run lint, everything passes.
Minute 25-40, execution (tasks 4-6)
Task 4, UI component
Claude creates src/components/dashboard/publishing-streak.tsx:
- Flame icon (
lucide-reactFlame) that grows with the streak - "3 weeks in a row" counter
- Personalized encouragement message
- Subtle entrance animation via Framer Motion
It runs npm run typecheck, all clear.
Task 5, dashboard integration
It edits src/app/(app)/dashboard/page.tsx to place the streak component at the top of the grid, next to the "Content published this month" widget.
Task 6, unit tests
It creates tests/unit/actions/streak.test.ts with:
- Test for normal calculation (streak +1 when last publi < 14 days)
- Test for broken streak (reset to 1 after 14 days)
- Test for best streak (personal record preserved)
- Test for first streak (new user, no existing row)
It runs npm run test streak, 4/4 tests pass in 180ms.
Minute 40-50, visual test and iteration
You open localhost:3000/dashboard in your browser and see the result.
What you notice:
- The streak counter shows up correctly in the dashboard, OK
- 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 who never published)
Claude applies the suggestion by adding a ?? { current_streak: 0, best_streak: 0 } in getStreak(). Then:
/commit
Claude creates the commit: feat(dashboard): 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.