Loading video player...
1️⃣ Get Started with MongoDB 👉 https://fandf.co/48QTwh2 2️⃣ Get Started with Clerk 👉 https://go.clerk.com/sonny ❗️Get the Full Source Code for FREE here 👉 https://www.papareact.com/ai-newsletter-saas-form 🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course 🛠️ Looking for the Code for my other builds? (Plus over 55+ others!) https://links.papareact.com/github Join me as I show you how to build an AI Powered Newsletter SaaS App from scratch with the latest Next.js 16 - This comprehensive tutorial covers everything you need to create an AI Newsletter SaaS App with Subscriptions & Payments! 🎯 What You'll Learn: - Next.js 16 with React 19 - MongoDB + Prisma - Clerk authentication & billing - OpenAI GPT-4o integration - RSS feed aggregation - Vercel AI SDK streaming - AI newsletter generation with customizable models - Smart 3-hour caching system - Article deduplication - Plan-based feature gating - Newsletter history - Real-time streaming UI + SO MUCH MORE! 🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST? Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter 🕐 TIMESTAMPS: 0:00 Introduction 1:00 Build Demo 11:03 MongoDB Atlas & Clerk 14:07 Build Tech Stack Breakdown 18:25 MongoDB Myths Debunked 22:40 Build Plan 25:50 Initialising the Build 32:30 Setting Up MongoDB Atlas 38:02 Setting Up Clerk for Authentication 42:41 Setting Up Clerk Billing 43:58 Setting Up Shadcn 46:04 Setting Up & Explaining Prisma 51:57 Connecting MongoDB Atlas 53:27 Building the Database Schema with Prisma 1:05:49 Implementing Prisma 1:09:22 Building the Landing Page (1/2) 1:17:14 Implementing Clerk Billing in the Landing Page 1:19:57 Building the Landing Page (2/2) 1:22:31 Building the Pricing Cards in the Landing Page 1:24:13 Creating the Starter & Pro Pricing Plans with Clerk Billing 1:32:36 Creating the Dashboard Page 1:36:46 Building the Dashboard Header Section 1:51:18 Building the Rest of the Dashboard Page 1:55:24 Implementing the RSS Feed(s) Feature (1/2) 2:02:49 Creating Server Actions 2:11:45 Implementing the RSS Feed(s) Feature (2/2) 2:16:43 Implementing Delete Functionality for RSS Feed(s) 2:18:23 Explaining the Smart 3-Hour Caching System for RSS Feed(s) 2:22:35 Explaining the RSS Parser Library 2:26:03 Testing the RSS Feed(s) Feature 2:31:07 Building the Newsletter Form Component 2:38:37 Implementing the Newsletter Generation Functionality (1/2) 2:40:54 Setting Up & Implementing Vercel AI SDK 2:43:22 Explaining Zod 2:44:09 Implementing the Newsletter Generation Functionality (2/2) 2:58:43 Explaining the Complete Newsletter Generation Prompt 3:08:22 Building the Newsletter Display Component 3:14:07 Creating API Endpoints in Next.js 16 3:18:42 Testing the Newsletter Generation Functionality 3:23:20 Building the Newsletter History Functionality 3:30:38 Building the Settings & Account Pages 3:37:32 Final Build Demo 3:41:34 Build Summary & Outro Let’s get it PAPAFAM 🔥. DISCLAIMER: This video is sponsored by MongoDB. This video is made for informational and educational purposes only. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes. #nextjs #ai #mongodb #openai #react #react19 #webdevelopment #webapp #clerk #newsletter #saas #learning #coding #tutorial #beginner #programming