Personal Finance Overview

Senior product designer + React engineer. Build a personal finance overview that answers three questions in five seconds: what do I have, what's coming, what's leaking.

React + TypeScript + Tailwind CSS + Framer Motion. Charts hand-rolled SVG (no chart library).

Grid: left column (2fr) — net-worth headline card with 12-month sparkline, cash-flow bar card (in vs out per month, 6 months). Right column (1fr) — upcoming bills list (next 14 days, amount + day), subscription audit card (recurring charges sorted by yearly cost, "unused?" flags). All amounts tabular-nums; currency chosen once in settings.

Net worth: 2.5rem/700 tabular. Card titles: 0.9rem/600 uppercase tracking wide muted. Rows: 0.95rem.

--background: 220 25% 97%; --card: 0 0% 100%; --foreground: 222 30% 12%; --primary: 222 80% 55%; --in: 150 60% 40%; --out: 350 70% 55%; --muted-foreground: 220 12% 42%; --border: 220 20% 90%.

Grid gap 1.25rem; card padding 1.5rem; radius 1.25rem; container max-w-6xl.

Numbers count up on first view (0.8s, tabular so no jitter). Bars grow from baseline staggered. No animation on subsequent renders. Reduced motion: instant values.

<lg: single column — net worth, bills, cash-flow, subscriptions in that order; sparkline keeps 12 points.

"Net worth $48,210 (+2.1% this month)"; Bills: "Rent — $1,200 — on the 1st"; "Electricity — ~$86 — on the 9th"; Audit: "Music streaming — $132/yr — not opened in 60 days".