Family recipe website
An interactive family recipe website with search, cooking checklists and scaling.
Built by David Vinkenroye in Geneva.
The story
Our family recipes were in a cookbook saved as a PDF. I wanted them somewhere we can search them and cook from them on a phone, so I built an interactive family recipe website.
You can browse by category or search, and each recipe has its story, difficulty and times. On the recipe page you can scale the servings from half to triple, tick off ingredients and steps as you cook and print the recipe. The ticks are saved in the browser, so you can put the phone down and pick up where you were.
Only the family can log in. To add a recipe, you type a title and can add a photo of the dish, and Claude writes a first draft that you check and edit. Saving it adds the recipe as a file to the site's GitHub repo. There is also a page for family events with photo albums. The site is private, so I don't link to it here.
What was built
- Browse by category and search
- Servings scaling from half to triple
- Ingredient and step checklists saved in the browser
- A print view for every recipe
- Family-only login
- Recipe drafts written by Claude from a title and an optional photo
- New recipes saved as files in the GitHub repo
- Family event pages with photo albums
Stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- Supabase
- Claude API
- MDX
- GitHub API
- Vercel
Themes
AI agents
I wanted a personal AI assistant that can do everything online for me, and it can even make phone calls. I build them with whichever models and tools fit best: Claude, OpenAI, Gemini, open models and plenty of plain code.
For the family
Some of what I build is for home. Babytalk tells bedtime stories in a parent's voice, and I built a birth announcement site to share the news in one place. I also built an interactive family recipe website so we can cook from our own recipes.