18 april 2026

Overzicht

Cookbook is een AI-first metgezel voor recepten. In plaats van de gebruikelijke "eindeloze scroll door iemand anders' foodblog" vertrekt Cookbook van de gebruiker: wat er al in de keuken ligt, welk dieet die volgt, hoeveel tijd die heeft en voor wie die kookt. Die context wordt in enkele seconden een persoonlijk recept dat je kan bewaren en afdrukken. Het product komt als webapp (getcookbook.app) met een bijhorende mobiele build, en ik nam het volledig voor mijn rekening — gebruikersonderzoek, IA, visueel ontwerp, front-end engineering, backend en release.

UX-onderzoek

• Probleemafbakening: gesproken met een mix van gewone thuiskoks, ouders en mensen met een dieetbeperking (vegetarisch, glutenvrij, diabetes) om de echte pijnpunten te vinden. Het terugkerende patroon was niet "ik ken geen recepten", maar beslissingsmoeheid en verspilling van ingrediënten.
• Jobs-to-be-done in kaart gebracht: drie dominante jobs kwamen bovendrijven — "gebruik wat ik al heb", "geef deze persoon vanavond te eten" en "leer een bepaalde keuken koken". Het product moest alle drie bedienen zonder de ene achter de andere te verstoppen.
• Contentaudit van hoe mainstreamreceptsites een recept opbouwen, wat een lange lijst opleverde van wat gebruikers echt overslaan (levensverhalen, SEO-vulling, advertentieblokken) tegenover waar ze naar inzoomen (ingrediënten, timing, vervangingen).
• Prototypetests: low-fidelity Figma-flows voorgelegd aan echte gebruikers om te valideren dat een conversationele instap als "vertel me wat je hebt" het haalt van een klassieke zoekbalk. Dat deed die, overtuigend.

UI-richting

• Een rustige, editorial esthetiek — royale witruimte, een warm en foodvriendelijk neutraal palet en een typesysteem dat long-form receptinhoud respecteert.
• Recept als document: elk recept is opgemaakt als een goed ontworpen kookboekpagina, niet als een webpagina. Afdrukken naar PDF is een volwaardige functie (via jspdf), want in echte keukens wordt nog steeds geprint.
• Mobile-first layout: het belangrijkste gebruiksgeval is iemand die aan het aanrecht staat met één hand vrij. Grote tapdoelen, een stappenmodus met scroll-lock en leesbare tekst op armlengte.
• Toegankelijk contrast en semantische koppen doorheen de hele app — want dieetfilters, allergenen en stapsgewijze begeleiding zijn echt veiligheidsrelevant.
• Micro-interacties waar ze duidelijkheid toevoegen (ingrediënten afvinken, voortgang per stap) en nergens anders.

Kernfuncties

• AI-receptgeneratie op basis van wat je in huis hebt: beschrijf wat je hebt en krijg een echt recept op maat.
• Dieet- en huishoudprofielen: onthoud dat je voor twee kookt, van wie één glutenvrij eet.
• Bewaren, ordenen en afdrukken: een persoonlijke kookboekbibliotheek met export naar PDF.
• Slimme vervangingen: door AI voorgestelde alternatieven wanneer een ingrediënt ontbreekt.
• Deelbare receptpagina's met nette URL's en correcte social previews.

Galerij

Gebruikte technologieën

• Front-end: React 18, Vite, TypeScript, Tailwind CSS, React Router, react-helmet-async voor metadata per recept, lucide-react + Heroicons voor de iconografie.
• PDF-export: jspdf voor drukklare weergave van recepten.
• Backend / data: Firebase (Auth, Firestore, Cloud Functions, Storage), Firebase Data Connect met een gegenereerde getypeerde client, Firestore-securityregels met de hand geschreven en nagekeken op least-privilege toegang.
• AI-laag: receptgeneratie op basis van een LLM met structured-output prompting, zodat de UI betrouwbaar kan renderen en niet op goed geluk.
• Observability: Sentry voor foutopsporing in de front-end en prestatiemonitoring.
• Mobiel: een bijhorende mobiele build die dezelfde API en design tokens deelt.
• Hosting: Firebase App Hosting.

Uitdagingen en lessen

• Ontwerpen rond probabilistische output: een LLM is een niet-deterministisch ingrediënt. De UI moest gedeeltelijk gevormde antwoorden sierlijk opvangen, het schema op de server afdwingen en de gebruiker nooit een recept tonen dat onveilig zou zijn om te koken.
• Latentie als UX-probleem: receptgeneratie duurt een paar seconden. Het antwoord streamen en een laadstatus ontwerpen die aanvoelt als anticipatie in plaats van wachten, was even belangrijk als het antwoord zelf.
• Dieetnauwkeurigheid: "glutenvrij" is geen stilistische keuze. De constraintpipeline valideert ingrediënten tegen gestructureerde allergeendata voor een recept wordt getoond — een geval waarin technische nauwkeurigheid de gebruiker rechtstreeks beschermt.
• Print-first in een web-first wereld: PDF-output krijgen die eruitziet als het recept op het scherm, over talen en lange ingrediëntenlijsten heen, kostte meer iteraties dan de rest van de app samen.

Resultaat

Een opgeleverd, live product op getcookbook.app dat een AI-capaciteit omzet in een echt nuttig dagelijks hulpmiddel — een waarbij het onderzoek, de interface en de engineering dezelfde gok versterken: de beste receptenapp is degene die van jou vertrekt, niet van een zoekindex.