Most recipe apps assume you already have a full kitchen.
But during college and hostel life, the reality is usually:
onion + potato + maggi + random masalas 😭
That simple problem became the idea behind ChefMate.
I wanted to build something where users could simply select the ingredients they already had available and instantly generate quick Indian-style recipes instead of endlessly searching YouTube or recipe blogs.
🚀 What is ChefMate?
ChefMate is a full-stack AI-powered recipe and meal planning platform built using the MERN stack.
Users can:
- generate recipes using available ingredients
- use a guided Cook Mode
- save recipes
- create meal plans
- share recipes using public links
- browse additional recipes using TheMealDB API
The focus was making the experience simple and practical for students, hostel residents, and bachelors living alone.
🛠️ Tech Stack
Frontend
- React
- Vite
- Tailwind CSS
- React Router
- Axios
- React Hot Toast
- React GA4
Backend
- Node.js
- Express
- MongoDB
- Mongoose
- JWT Authentication
- Express Rate Limit
- Zod Validation
AI & APIs
- OpenRouter API
- Gemini / Llama / Mistral models
- TheMealDB API
✨ Features I Added
🤖 AI Recipe Generator
Users select ingredients and preferences like:
- vegetarian/vegan
- cooking time
- dietary preferences
The app then generates structured recipes with:
- ingredients
- cooking steps
- health benefits
- estimated cooking time
🍳 Cook Mode
One feature I personally liked building was Cook Mode.
Instead of showing a giant recipe paragraph, the app guides users step-by-step while cooking.
I also added:
- progress tracking
- timers
- step navigation
to make the cooking experience smoother.
📅 AI Meal Planner
Users can generate meal plans for multiple days based on:
- calorie goals
- diet preferences
- number of days
🔗 Shareable Recipes
Users can generate public recipe links and share them directly through WhatsApp or browser sharing APIs.
Shared recipes can be opened without login.
⚡ Biggest Challenges
1. Making AI responses consistent
LLM outputs are unpredictable.
Sometimes responses came as:
- JSON
- markdown
- incomplete text
- broken formatting
So I had to build normalization and validation logic to structure responses properly.
2. UI/UX Problems
One thing I learned quickly:
good functionality alone is not enough.
Early feedback made me realize:
- the UI felt too “AI-generated”
- layouts were inconsistent
- some flows were confusing
I spent a lot of time refining:
- spacing
- typography
- visual hierarchy
- loading states
- mobile responsiveness
3. Public Feedback & Distribution
I recently started sharing the project publicly and learned that distribution is honestly harder than coding sometimes 😭
Posting on communities taught me:
- how people perceive AI products
- how important positioning is
- how to communicate projects naturally instead of sounding overly promotional
That was a surprisingly valuable learning experience.
🔒 Security Improvements
One important issue I discovered after feedback:
the AI endpoints initially had no proper rate limiting.
Since LLM APIs cost credits, users could theoretically spam requests.
I fixed this using Express Rate Limit to protect expensive endpoints.
📈 What I Learned
Building ChefMate taught me much more than just coding:
- shipping real products
- handling user feedback
- improving UX
- API security
- analytics integration
- authentication flows
- real-world deployment
It also made me realize:
building something usable is much harder than just making something functional.
🔮 Future Plans
Some things I’d like to improve:
- recipe images/videos
- grocery list generation
- better onboarding
- stronger personalization
- social/community features
🌐 Live Demo
ChefMate:
https://chefmate-frontend.vercel.app
GitHub:
https://github.com/mayurCoder2004/chefmate
Would genuinely love feedback from other developers/builders on:
- UI/UX
- product direction
- architecture
- ideas for improvement 🙌
Top comments (0)