Projects
Cookbook — An AI-powered recipe app
- Problem framing: interviewed a mix of everyday cooks, parents, and dietary-restricted users (vegetarian, gluten-free, diabetic) to find the real pain points. The recurring pattern wasn't "I don't know recipes" — it was decision fatigue and ingredient waste.
- Jobs-to-be-done mapping: three dominant jobs emerged — "use what I already have", "feed this specific person tonight", and "learn to cook a specific cuisine". The product had to serve all three without hiding one behind the others.
- Content audit of how mainstream recipe sites structure a recipe, which surfaced a long list of what users actually skim past (life stories, SEO filler, ad breaks) versus what they zoom into (ingredients, timing, substitutions).
- Prototype testing: low-fidelity Figma flows put in front of real users to validate that a conversational "tell me what you have" entry point beat a traditional search bar. It did, decisively.
- A calm, editorial aesthetic — generous whitespace, a food-friendly warm neutral palette, and a type system that respects long-form recipe content.
- Recipe-as-document: each recipe is laid out like a well-designed cookbook page, not a webpage. Print-to-PDF is a first-class feature (via
jspdf) because real kitchens still print.
- Mobile-first layout: the primary use case is someone standing at the counter with one hand free. Large tap targets, scroll-lock step mode, and readable type at arm's length.
- Accessible contrast and semantic headings throughout — because dietary filters, allergens, and step-by-step guidance are genuinely safety-relevant content.
- Micro-interactions where they add clarity (ingredient check-offs, step progress) and nowhere else.
- AI recipe generation from pantry input: describe what you have, get a real recipe tailored to it.
- Dietary and household profiles: remember that you cook for two, one of whom is gluten-free.
- Save, organize, and print: personal cookbook library with export to PDF.
- Smart substitutions: AI-suggested swaps when an ingredient is missing.
- Shareable recipe pages with clean URLs and proper social previews.
- Frontend: React 18, Vite, TypeScript, Tailwind CSS, React Router,
react-helmet-async for per-recipe metadata, lucide-react + Heroicons for iconography.
- PDF export:
jspdf for print-ready recipe rendering.
- Backend / data: Firebase (Auth, Firestore, Cloud Functions, Storage), Firebase Data Connect with a generated typed client, Firestore security rules hand-written and reviewed for least-privilege access.
- AI layer: LLM-backed recipe generation with structured-output prompting so the UI can render reliably, not best-effort.
- Observability: Sentry for frontend error tracking and performance monitoring.
- Mobile: companion mobile build sharing the same API and design tokens.
- Hosting: Firebase App Hosting.
- Designing around probabilistic output: an LLM is a non-deterministic ingredient. The UI had to gracefully handle partially-formed responses, enforce schema on the server, and never show the user a recipe that would be unsafe to cook.
- Latency as a UX problem: recipe generation takes a few seconds. Streaming the response and designing a loading state that feels like anticipation rather than waiting was as important as the response itself.
- Dietary accuracy: "gluten-free" is not a stylistic choice. The constraint pipeline validates ingredients against structured allergen data before presenting a recipe — a case where engineering rigor directly protects the user.
- Print-first in a web-first world: getting PDF output that looks like the on-screen recipe, across locales and long ingredient lists, took more iteration than the rest of the app combined.
A shipped, live product at getcookbook.app that turns an AI capability into a genuinely useful daily tool — one where the research, the interface, and the engineering all reinforce the same bet: the best recipe app is the one that starts from you, not from a search index.
