Chapter-1
The itch
Chapter-1 began as a set of design mockups. Four screens for a GLP-1 (Zepbound) weight-loss tracker, drawn in Claude Design on a house visual system called "Industry": steel-blue on a pale blueprint ground, square hairline cards with small + registration marks in the corners, a faint 45-degree hatch. The itch was to make them real. Not a screenshot of a tracker but a working one, with the charts actually computing from data and the whole thing behaving, on exactly that design system rather than an approximation of it.
What it does
Chapter-1 tracks the full picture for someone on a GLP-1 medication: weight and body measurements over time, a waist-to-hip ratio read against the WHO risk bands, a blood-work panel with reference ranges, and the medication itself, with doses logged against a titration ladder. The Today screen leads with the current weight, a trend line and a projection toward the goal, the next shot, and the milestones. A reports view, a dedicated weight log, a labs page and a settings surface fill in the rest. Logged data persists in the browser and shows up across every screen, though it stays single-user and local, with no account and no server.
It's a prototype, and honest about being one. The seed is mock data, but the math sitting on top of it is the real thing.
How it works
The app is Next.js with the App Router, React and TypeScript, and no Tailwind or chart library at all. The Industry design system's CSS is ported into globals.css verbatim, and each screen is a near-mechanical translation of its mockup's logic class.
The charts are hand-built SVG with the mockup's geometry reproduced exactly rather than handed to a library: a least-squares trend with a projection split, and a roughly five-day-half-life model for the drug's blood level between shots. Logged data lives in a small localStorage-backed store that every screen reads. It keeps only the user's deltas and re-derives the full series from the seed on each read, so editing the seed later isn't frozen out by whatever an old browser happened to save.
What got hard along the way
The chart labels caused the most trouble, and the fix became a rule for the whole project. Text set inside an SVG scales with the viewBox, so a wide chart that shrinks to fit a phone drags its labels down to something unreadable. Every chart label is plain HTML instead, positioned absolutely over the SVG by percentage of the viewBox, so the geometry can scale while the type stays at a real, legible size.
The store was the other one. Persisting the derived series directly would freeze it: edit the mock seed later and an old browser's saved copy wins. So the store keeps only what the user actually logged and rebuilds everything from the seed on each read. Server rendering added a twist, since localStorage doesn't exist on the server. The store hands the server the pure seed and only re-reads localStorage after mount, which keeps the first client render identical to the server's and sidesteps a hydration mismatch without reaching for an effect.
Where it stands
The prototype is complete and deployed with no protection, so anyone with the link can open it and click around. All six screens work, logging persists, weight units switch between kilograms and pounds, and the optional measurement and blood-work trackers stay hidden until there's data to show. It's still a prototype in the ways that matter: single-user, browser-local, no account, no backend. If it became a real product the next steps are per-entry editing and a server behind it, but as a faithful, living version of the original design, it does what it set out to do.