Track, trend, and react to your pet's bloodwork over time — so you can catch issues early and act with confidence.
Vets run panels. You get a printout. Three months later there’s a new number — but was it different from last time? You can’t tell.
PetBloodwork is a health tracking companion that fixes this. Upload your lab reports, log 50+ biomarkers, and watch how your pet’s values trend across visits. Get alerts when something drifts outside the healthy range or a follow-up is due.
Core features:
Stack: Next.js 14, Tailwind, shadcn/ui, Prisma, NextAuth, Supabase, Claude API
As a product designer, I always start with a sitemap. It’s how I get the overview and understand the overall function of the product. I always used to do it in Figjam — but this time I tried asking Claude to build one for me.
What came back was surprisingly thorough: pet-centric routing under /pets/:petId, separate sections for Records (structured data) vs Reports (uploaded PDFs and vet notes), Trends as its own standalone page, and customisable reference ranges in Settings. The structure made sense.
I reviewed it the way I’d review a junior designer’s homework — comment by comment, one at a time. Then I told Claude what I’d change.
I pushed back on almost everything:
I noticed Claude hadn’t mentioned any medical standards in the plan. So I provided additional context — IDEXX laboratories — and asked it to research the reference ranges online. Claude asked my permission before fetching, to confirm it was looking at the right source. I said yes. It pulled from both IDEXX and the Merck Veterinary Manual and came back with the full CBC and Chemistry panel tables for Dog and Cat.
With other designers, I worry about being too prescriptive, forcing my ideas on someone else’s work. With Claude, I acted like a manager who loves micromanagement — with no regret.
After confirming the structure, Claude broke the build into 10 coding tasks and started scaffolding: Next.js 14 with Tailwind and shadcn/ui, Prisma schema, NextAuth, all the pages.
Then I hit a wall. Every time I logged in, I got a page error. I tried screenshotting and asking Claude to check the logs. It kept pointing me to the wrong place and suggesting the wrong action.
Eventually I gave up and decided to sleep and fix it tomorrow.
I opened Claude and asked it to recheck the whole codebase. After more testing, I had a feeling it was database-related.
Following a new round of instructions, I checked my Supabase linkage and the .env file. Found it: one letter in the Supabase key was wrong — or maybe the version was wrong.
After updating it, the whole product just appeared in front of me.
Hapiiiii.
The first version worked. It also looked exactly like what it was: AI-generated. Plain, boring, with some strange UX flows that made me uncomfortable.
I’m a visual person. I couldn’t stop wanting to fix button styles, label spacing, colour hierarchy. But I knew if I just sent Claude corrections one at a time, we’d go back and forth forever.
So I asked Claude to study some large brands that publish their design systems publicly — Uber, Apple, Microsoft, Anthropic — and build a design.md file before touching anything. Then make all the changes as a branch.
The insight: Claude doesn’t fully copy a design style. It still needs a human to point out the key patterns — background colour leveling, CTA hierarchy, what “primary” means in context. The AI gets it fast once you explain it. It just doesn’t infer it on its own.
After setting the design direction, I spent around 8 hours going through the product and adding the human touch:
Each of these was a UX decision I made as a designer. Claude executed them. But I had to know what to ask for — that’s still the human job.
At some point I remembered the core thing I actually wanted to build: PDF to data automation. Instead of manually entering every marker after a vet visit, you upload the lab report and the app extracts everything.
I bought $5 of Claude API credits, added the key to my .env file, and asked Claude to wire it up.
There were bugs. Data type mismatches. Invisible invalid inputs. Each time: copy the error log, paste it to Claude, ask it to fix it.
Eventually it worked. Upload a PDF → data extracted → markers auto-filled → trend chart updated.
Then, the most expensive feature released! (5 usd!!!)
Add updates newest-first as you keep building.