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.
Goal
Create a responsive web app that generates recipes from user-provided ingredients using Anthropic API, with a simple frontend and working serverless backend on Netlify. The focus was on making the app functional, reliable, and enjoyable to use.
Response Handling
Claude's responses are conversational, not structured data. I had to parse the text response and handle various formatting inconsistencies with React Markdown.
Loading States
AI responses take 3-8 seconds, so I added a simple loading state to prevent the "is this working?" confusion.
Real-world deployment
The app is live on Netlify, with environment variables securely handled in production. It’s lightweight but fully functional, showing how small projects can scale into polished portfolio pieces.
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 (you can type "random access memories")
• 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.
I’m not much of a backend person, but with enough persistence (and some AI assistance), I figured it out. Now, it’s a tool I use and a project that makes me smile.
Role: Front-end Developer / Designer
Timeline: March - April 2025
View Live Site View Code
React
JavaScript
Netlify
Anthropic API