Product Design · Vibe Coding
Time Tracker.
Problem statement
We budget money down to the dollar but almost no one budgets time. Where does your time actually go — and can you see it clearly enough to spend it on what matters?
Role
Product partner — set the concept, the four life pillars, and the "spec first" approach; Claude Code built to the spec.
Platform
Web app
Timeline
March 2026 — spec first, then built to it
4
life pillars
1
categorization rule
0
databases in V1 — on purpose
Hero image — to come
The concept
Budget your time the way you budget money
A budget app breaks your spending into categories so you can see where the money goes. Time Tracker does the same thing with your week. Four life pillars — Family, Self-Care, Socialization, Career — each with a target share of your time. The app shows you the actual breakdown next to the one you intended.
The primary view puts each pillar next to its target as a bar — where you went over, where you came up short — exactly like a budget flags the category you blew past. On top of it sits a plain-English balance read: Balanced, On track, Drifting, or Off balance, so the numbers resolve into a single judgment. And you can drop into any week to see the actual sessions that filled it. The point isn't to track for tracking's sake — it's to make an invisible thing visible enough to act on.
Each pillar carries its own target, so the dashboard always has something to measure against:



The decision
One rule keeps the whole thing honest
The hardest part of any tracker isn't the chart — it's categorization. The moment one event is allowed to count toward two things, the data turns to mush and the donut stops meaning anything. So I made a single rule and held it: who you're with decides the pillar.
A hike with your kids is Family, not Self-Care — even though it's good for you. Self-Care is strictly solo: just you, recharging. One event, one pillar, no splitting. It sounds almost too simple, but that constraint isthe product. It's what makes the breakdown trustworthy instead of negotiable.
“Who you're with determines the pillar. A hike with your kids is Family, not Self-Care. Self-Care is strictly solo time.”




Evolution
The donut was the first cut, not the final one
V1 proved the concept on a realistic fake week — deep work blocks, a family hike, coffee with a friend, morning runs — all local, all dummy data, no account and no backend. The bet: if the dashboard doesn't feel useful with clean hand-made data, real calendar data won't save it.
It led with a donut. Pretty, and good at answering “what was the shape of my week” — but weak at the question that actually matters: am I on target? Comparing a slice to a goal means eyeballing two arcs. The one thing V1 nailed was the plain-English read — “Career led the way… Self-Care was a little quieter than you'd hoped” — because a number is information but a sentence is a nudge.
V2 kept the sentence and promoted the goal-versus-actual bar to the primary view, then added an explicit balance state on top. Same data, a read you don't have to decode. Here's where it started:



What I learned
The bottleneck is the decisions, not the code
Writing the spec first changed the whole build. The time I spent wasn't on implementation — Claude handled that. It was on the decisions: what counts as Self-Care, whether to split events across pillars (no), what to refuse to build yet. Vibe coding's bottleneck isn't typing. It's judgment — and judgment is easier to apply consistently when you've written it down.
V2 earned its way to more surface area — the month calendar and the session-level “where your time went” breakdown — by proving the core read first. What's still deliberately ahead is the infrastructure: real Google Calendar sync, auto-categorizing live events into pillars with a manual override for the calls the algorithm gets wrong, and a database to replace localStorage. But only now, because the dummy-data version earned it.
Built with
Claude Code · Next.js 14 · TypeScript · Tailwind CSS · Recharts · shadcn/ui