Intermediate1h 51m

Full Stack AI Recipe Generator App with PERN Stack

Build a full-stack AI-powered Recipe Generator using PostgreSQL, Express, React, and Node.js. Uses Google Gemini 2.5 Flash to generate recipes from your pantry ingredients with dietary and cuisine filters. Features pantry management with expiry alerts and low-stock badges, a weekly meal planner, a shopping list with one-click pantry add, a saved recipe collection, and user preference settings — a complete food planning SaaS built on a normalised PostgreSQL schema hosted on Neon.

PostgreSQLExpressReactNode.jsJWTGemini APITailwind
Get Source Code — $10Watch on YouTube
Full Stack AI Recipe Generator App with PERN Stack tutorial
1h 51m

What You'll Build

User login & sign-up with JWT and bcryptjs password hashing
Pantry management — track ingredients with expiry alerts and low-stock badges
AI recipe generation from pantry items via Google Gemini 2.5 Flash
Dietary filters — Vegetarian, Vegan, Keto, Paleo, Gluten-Free
Cuisine filters — 10+ international cuisines
Recipe view — ingredients, step-by-step instructions, nutrition info, and AI cooking tips
Recipe collection — save, search, and filter by cuisine and difficulty
Weekly meal planner — Breakfast, Lunch & Dinner calendar with week navigation
Shopping list — check off items and add directly to pantry in one click
User preferences — set default dietary and cuisine settings to pre-fill the recipe generator
Normalised PostgreSQL schema hosted on Neon
Fully responsive across desktop, tablet, and mobile

What You'll Learn

PERN stack project setup — PostgreSQL, Express, React, Node.js
Normalised relational PostgreSQL schema design with foreign keys
Hosting and connecting to a PostgreSQL database on Neon
JWT auth with bcryptjs password hashing in Express
AI recipe generation with Google Gemini 2.5 Flash
Pantry management with expiry date tracking and stock level logic
Dietary and cuisine filter parameter passing to Gemini prompts
Weekly meal planner calendar UI with week navigation in React
Shopping list with checkbox state and one-click pantry integration
User preference settings for pre-filling form defaults
Frontend UI boilerplate cloning and integration workflow
Full API integration across a multi-feature React app

Video Chapters

0:00Demo of AI Recipe Generator AppChapter 1
16:50Cloning frontend UI boilerplateChapter 2
20:19Backend setup & project structureChapter 3
22:40PostgreSQL database setup on NeonChapter 4
32:44User & preferences modelsChapter 5
35:46Authentication APIs — login, register, profileChapter 6
47:18Pantry, recipe, meal plan & shopping list modelsChapter 7
1:01:34Pantry, AI recipe, meal plan & shopping list APIsChapter 8
1:23:45Frontend API integrationChapter 9

Tech Stack

PostgreSQLNormalised relational schema hosted on Neon — tables for users, preferences, pantry items, recipes, meal plans, and shopping lists with proper foreign key relationships.
ExpressPowers the REST API — auth, pantry CRUD, AI recipe generation, meal plan management, shopping list, and user preferences endpoints.
ReactDrives the full UI — pantry dashboard with expiry alerts, recipe generator form, recipe collection, weekly meal planner calendar, and shopping list.
Node.jsServer runtime handling all API requests, PostgreSQL connection via Neon, and secure Gemini API proxy calls from the backend.
JWTSecures all protected routes with bcryptjs password hashing; token-based session management across the full app.
Gemini APIGoogle Gemini 2.5 Flash generates recipes from pantry ingredients, applies dietary and cuisine filters, and produces AI cooking tips per recipe.
TailwindTailwind CSS v4 used across the pantry dashboard, recipe cards, weekly meal planner calendar, and shopping list UI.
💬

Frequently Asked Questions

What is the PERN stack and how is it different from MERN?

PERN stands for PostgreSQL, Express, React, and Node.js. The only difference from MERN is the database — PostgreSQL is a relational SQL database with strict schemas and foreign key relationships, whereas MongoDB is a flexible document database. This project is a great introduction to SQL-based full-stack development for developers already familiar with MERN.

What is Neon and do I need to pay for it?

Neon is a serverless PostgreSQL hosting platform with a generous free tier — no credit card required. The tutorial covers the full Neon setup and connection from scratch at 22:40, making it straightforward to get a live PostgreSQL database running in minutes.

How does the AI recipe generation work with pantry items?

Your current pantry ingredients are sent to the Express backend along with your chosen dietary and cuisine filters. The backend constructs a structured prompt and calls Google Gemini 2.5 Flash, which returns a full recipe with ingredients, step-by-step instructions, nutrition info, and cooking tips — all tailored to what you already have at home.

How does the shopping list to pantry workflow work?

Items on your shopping list have a one-click "Add to Pantry" button. Clicking it sends a request to the pantry API that creates a new pantry entry for that ingredient — no manual re-entry needed. You can also check off items as you shop to track what you have picked up.

What prior knowledge do I need?

Familiarity with React and Express is recommended. Prior MERN experience translates directly — the main new concept is PostgreSQL and Neon instead of MongoDB. SQL basics (SELECT, INSERT, JOIN) will help but are not strictly required as the models are built from scratch in the tutorial.

What is included in the source code?

You get the full React frontend, Express backend, PostgreSQL schema files, all AI utility functions, a .env.example with all required keys (including the Neon connection string), and a README with local setup and deployment instructions.