Dinner Inspo

Type Personal Project
Year 2026
Platform Web App / PWA
Stack Next.js · Claude Haiku
Overview

Deciding what to cook for dinner is a daily exercise in decision fatigue. Most people open the fridge, stare at its contents, and end up ordering takeaway. Existing meal planning apps don't help - they're either too rigid (weekly meal plans you'll never follow), too generic (no awareness of what you actually have at home), or too complex for casual home cooks who just want something good tonight. There's a specific, solvable friction at the centre of it: you have food, but no idea what to make with it.

Dinner Inspo is a bold, opinionated PWA that solves the dinner decision loop. It learns your tastes through a short onboarding, tracks what you always have in your pantry, and uses AI to generate personalised recipe ideas based on what's actually in your fridge right now. No recipe database. No login. No generic suggestions. Every recipe is generated fresh by Claude Haiku, personalised to the user's diet, skill level, cuisine preferences, and what they have at home.

Live App
How It Works
  • Onboarding: 7 questions set diet, cuisine tastes, cooking confidence, and household size - stored in localStorage and injected into every AI call as permanent context
  • Pantry: users toggle staple items they always keep stocked. A Pantry Score (0 - 10) reflects versatility, with AI suggestions on what to add next and what it unlocks
  • Tonight: a fridge grid pre-populates with pantry staples - deselect what you don't have today, hit "Find recipes", and Claude returns 5 - 8 illustrated recipe cards
  • Recipe cards: anime-style illustration, name, cook time, difficulty, and a one-line pitch. Yes saves and opens the full recipe. No skips to the next
  • Your Recipes: every "Yes" stored permanently, browsable by cuisine, recency, or cook count. Made recipes separated from "Saved for later"
  • Big Shop: select how many meals to plan, get AI suggestions weighted to what you already have, then a consolidated shopping list grouped by supermarket section
  • Inspire: ignores cuisine preferences and surfaces recipes needing only 2 - 4 ingredients beyond your current pantry
Research

Before a line of code was written, five parallel research agents validated the product approach across distinct domains. Every major architectural and UX decision traces to a finding in one of these documents.

Agent 1
Pantry Science - What Makes a Versatile Kitchen
▾
  • 18 synergy clusters map ingredient combinations to cuisines - holding ≥70% of a cluster's items "unlocks" that cuisine. The pantry score measures real versatility against this framework
  • Pantry score must calculate client-side from a scoring matrix, not via an AI call - the delight of the score ticking up when you toggle fish sauce must happen instantly, not after a 2 - 3 second API wait
  • Fish sauce, miso paste, tahini, and harissa/gochujang are the four "depth unlock" items with the highest recipe-unlocking power per dollar - the primary AI suggestion targets for users scoring 5 - 7
  • Production-ready unlock copy pattern: "Add fish sauce → unlocks Thai, Vietnamese, and SE Asian cooking - you could make pad Thai, larb, and nuoc cham"
  • Calibration point: a typical well-stocked kitchen scores ~5.75, confirming the scoring framework rewards genuine breadth without penalising a normal pantry
Agent 2
Card UX & Gamification - Making Dinner Decisions Fun
▾
  • Yes/No buttons win over swipe: better discoverability, safer PWA implementation (horizontal swipe is non-trivial to distinguish from scroll), and equal emotional satisfaction delivered through animation
  • 5 - 8 cards per batch is the right range - matches decision fatigue research (Baumeister & Tierney); beyond 8 decisions, satisfaction with the chosen outcome drops
  • Pantry Score is "competence gamification" - measures genuine capability users build over time. Far more durable than arbitrary points or streak mechanics
  • No streak mechanics - wrong cadence for a 3 - 4 meals/week use case. Duolingo's own research showed high streak anxiety; streaks create pressure in the wrong place
  • Emoji for ingredient grid: icon recognition at ~150ms vs text reading at ~300ms. Zero asset cost, fully consistent, and actually faster to scan than small illustrations
Agent 3
AI Recipe Generation - Prompting for Dinner
▾
  • Role + persona framing outperforms bare instruction: "You are an enthusiastic home cook who has been cooking for 15 years" produces more consistent tone and better editorial judgment than a neutral system prompt
  • One-shot examples reduce schema deviation by ~60 - 80% vs schema-only instructions - a single complete example recipe in the prompt is the single highest-ROI prompt improvement
  • Ingredient lists must be hard constraints, not soft suggestions - the prompt must explicitly state that every ingredient in the recipe must appear in the fridge list, pantry list, or a separate extrasNeeded array
  • visualCategory taxonomy expanded from 18 to 20 categories - add seafood and dumplings - covering ~92% of home meals vs ~87% with 18
  • Claude Haiku confirmed: 2 - 4s TTFB, under $0.01/request at typical usage, structured JSON reliability ~97% with schema + one-shot example
Agent 4
Competitor Landscape - The Gap in the Market
▾
  • No existing app combines (a) ingredient-based recipe matching, (b) AI-generated personalised suggestions, and (c) a game-like discovery UX - the combination is genuinely differentiated
  • Supercook does (a) without (b) or (c) - the ingredient-matching premise is proven, the UX around it is the weakness
  • Yummly does (b) and (c) without (a) - personalisation is sophisticated but has no pantry awareness
  • Whisk does (a) partially, without (b) or (c) - ingredient matching is buried, not the hero feature
  • AI market encroachment is the biggest long-term risk - the AI-generated recipes differentiator has a 12 - 18 month window before it becomes table stakes. More durable moats: pantry optimisation, cooking history flywheel, UX delight
Agent 5
PWA & Technical Implementation
▾
  • Skip next-pwa (legacy, real App Router friction) - a manual manifest.json is the cleanest approach for a MVP that doesn't need offline caching
  • themeColor must go in the viewport export, not the metadata export - the most common App Router PWA mistake, silently broken with no error
  • PostCSS config must be .mjs not .js with modern Next.js ("type": "module" in package.json requires this)
  • Tailwind v4: no tailwind.config.ts - all customisation goes in the CSS @theme block. Most tutorials covering v3 config are now wrong
  • localStorage: ~500KB worst-case (recipes + preferences + pantry) is well within the 5MB limit - the right call for a single-household MVP with no auth requirement
Build Process
  • Phase 1 - Foundation: Next.js 14 project scaffold with TypeScript strict mode. Design system established (tokens, global CSS, mobile-first layout). Core library files written before any UI - storage, types, prompts, and AI client all defined upfront
  • Phase 2 - Section-by-section build: Onboarding flow, Pantry with score ring, Tonight with fridge grid and card swipe UI, Your Recipes collection, Big Shop with shopping list generation, Inspire mode, and Account with editable preferences
  • Phase 3 - UX Audit: a rigorous user journey review across all 7 stages identified friction points - post-onboarding redirect fixed, Yes now auto-saves before opening RecipeDetail, shopping list complete state improved, Lock → Confirm language throughout Shop
  • Phase 4 - PWA and Deployment: custom PWA icons generated, manifest configured, ANTHROPIC_API_KEY added as Railway environment variable. Confirmed working as an installed PWA on iPhone in standalone mode with no browser chrome
Key Decisions
  • No database - localStorage only. For a single-household MVP with no auth requirement, localStorage is sufficient and eliminates backend complexity entirely. All reads and writes go through lib/storage.ts - never raw localStorage calls
  • No recipe database - AI-generated every time. Claude Haiku generates every recipe fresh from the user's current context. Every suggestion is personalised by default, and there's no content maintenance overhead
  • All prompts in lib/prompts.ts. No inline prompt strings anywhere in the codebase - this makes prompt iteration and debugging straightforward, and ensures consistent context injection across all AI calls
  • All AI calls go through a single API route. User context is assembled client-side from localStorage and sent with every request. The AI never sees raw data - it receives a structured prompt, always
  • Rate limiting applied at the API route for MVP - basic, no auth required. Keeps the app open and frictionless while protecting against abuse
Tooling
Next.js 14 TypeScript Tailwind CSS v4 Claude Haiku Anthropic SDK Railway PWA Claude Code GitHub