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