Build MERN Stack Projects: Beginner to Advanced Tutorials - Build a Full-Stack AI Recipe Generator App | PERN Stack, React, Node.js, PostgreSQL

Master MERN with AI-Powered Apps: Transform Ideas into Reality!

4.0 (1)

10 learners

What you'll learn

Develop and integrate AI-powered features using the MERN stack
Create dynamic, full-stack web applications with React and Node.js
Utilize Express to handle server-side logic and routing efficiently
Implement MongoDB for scalable database solutions in applications

This course includes

63.5 hours of video
Certificate of completion
Access on mobile and TV

Summary

Keywords

PERN Stack AI Recipe Generator React Node.js PostgreSQL React AI Recipe App Full-Stack AI Recipe Generator App

Full Transcript

In this video, we'll build a Full-Stack AI Recipe Generator App using the PERN (PostgreSQL, Express, React, Node.js) stack, styled with Tailwind CSS v4, and powered by Google Gemini AI. 👉 Neon: https://get.neon.com/QsF3Crf Get Source Code: https://buymeacoffee.com/timetoprogram/e/511340 🔥 Complete Web Developer Bundle Includes 100+ React Components, 12 Full Stack Projects, 5 Cheat Sheets & 500+ Interview Q&As 👉 Get it here: https://buymeacoffee.com/timetoprogram/e/474148 👉 Get Frontend UI Boilerplate code: https://github.com/time-to-program/ai-recipe-generator-ui-boilerplate-code Functionalities Implemented: 1. User Authentication – JWT login & signup with bcryptjs 2. Pantry Management – Track ingredients with expiry alerts & low-stock badges 3. AI Recipe Generation – Generate recipes from pantry items via Google Gemini 2.5 Flash 4. Dietary & Cuisine Filters – Vegetarian, Vegan, Keto, Paleo, Gluten-Free & 10+ cuisines 5. Recipe View – Ingredients, step-by-step instructions, nutrition info & AI cooking tips 6. Recipe Collection – Save, search & filter recipes by cuisine and difficulty 7. Meal Planner – Weekly Breakfast, Lunch & Dinner calendar with week navigation 8. Shopping List – Check off items & add directly to pantry in one click 9. User Preferences – Set default dietary & cuisine settings to pre-fill the recipe generator 10. PostgreSQL Schema – Normalized relational tables hosted on Neon 11. Responsive UI – Modern design with Tailwind CSS v4 00:00 Demo of AI Recipe Generator App 16:50 Cloning Frontend UI Boilerplate 20:19 Backend Setup & Project Structure 22:40 PostgreSQL Database Setup 32:44 User & Preferences Models 35:46 Authentication APIs (Login, Register, Profile) 47:18 Pantry, Recipe, Meal Plan & Shopping List Models 1:01:34 Pantry, AI Recipe, Meal Plan & Shopping List APIs 1:23:45 Frontend API Integration Also, check out: Build a Stunning React Portfolio Website https://youtu.be/UQVB8fe_b4E Build an AI-Powered eBook Creator https://youtu.be/BPREcQoPo3g #mernstack #ailearning #reactjs #nodejs #aiproject #googlegemini Follow us on : Instagram: https://www.instagram.com/timetoprogram/ For more updates, subscribe to your channel: https://www.youtube.com/channel/UCy6osK_bBJgvfeu8R1GGucw Please like, share, and subscribe for more videos like this. Thank You.