Yess, chef!
An AI-powered recipe app that suggests meals based on ingredients you already have, built with Anthropic's Claude API.
Overview
Yess, Chef! is a playful web app that takes a list of ingredients from the user and generates recipe ideas using Anthropic API. I designed and developed it as a small but complete app — from setting up the frontend in React to integrating with Anthropic API and deploying it on Netlify. The goal wasn’t just to practice technical skills, but to create something delightful and genuinely useful in daily life. It’s a mix of creativity, functionality, and my love for food.
How it Works
• user types ingredients
• Netlify serverless function calls Claude
• Claude returns a recipe suggestion
• UI renders formatted output via react-markdown
Key Design & Engineering Decisions
Handling AI unpredictability: Claude responses aren’t guaranteed to be structured. Displaying them as markdown was more robust than forcing JSON/arrays.
Clear async states: AI takes ~3–8s to respond → loading states are essential for perceived reliability.
Real deployment: Production keys stored in Netlify env vars — proving a solo developer can ship API-driven apps securely and quickly.
Challenges
Since I'm more focused on frontend work, setting up a backend flow with serverless functions and API integrations was new territory for me. Getting the app to communicate with Anthropic API, manage environment variables securely, and handle deployment on Netlify required a lot of trial, error, and debugging.
Another challenge was making the responses render cleanly in the UI — I integrated react-markdown to properly display Claude's formatted recipes. Each roadblock pushed me to explore concepts I hadn't worked with before, and solving them gave me more confidence working beyond the frontend.
What I Learned
AI Integration: Working with AI APIs is more about handling unpredictability than complex prompt engineering. Most of the challenge is in parsing and displaying variable response formats.
React State for Async Operations: Managing loading, success, and error states for API calls. Used a simple pattern with useState rather than over-engineering with reducers.
Practical vs. Perfect: Initially tried to parse recipes into structured data (ingredients array, steps array, etc.) but Claude's conversational responses work better displayed as-is. Sometimes simple text rendering beats complex parsing.
Current Limitations
• No ingredient validation
• No recipe saving or history
• Single recipe per request (no alternatives)
• No dietary restrictions or preferences
👋🏻 Personal Notes
I love building apps that me and my friends actually use in everyday life. Yess, Chef! is one of those. The name, of course, comes from the infamous show The Bear. I’m a foodie at heart: I love cooking, eating, and experimenting with new flavors. The real reason I worked so hard to make this app actually function was simple — I wanted it for myself.
Role: UX Designer / React Developer
Timeline: March - April 2025
View Live Site View Code
React
JavaScript
Netlify
Anthropic API