Jan 16
Loading video player...
1️⃣ Get Started with Inngest 👉 https://innge.st/sonny-2 2️⃣ Get Started with Clerk 👉 https://go.clerk.com/C2RaFji 3️⃣ Get Started with CodeRabbit 👉 https://coderabbit.link/sonny-nov ❗️Get the Full Source Code for FREE here 👉 https://www.papareact.com/ai-podcast-saas-build-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 Podcast SaaS App from scratch with the latest Next.js 16 - This comprehensive tutorial covers everything you need to create an AI Podcast SaaS App! 🎯 What You'll Learn: ✅ Next.js 16 with App Router & Server/Client components and Server Actions! ✅ Clerk authentication & billing for feature gating & subscriptions ✅ Convex real-time database ✅ shadcn/ui + Tailwind CSS for beautiful UI ✅ Mobile-responsive design with modern layouts ✅ Inngest durable workflow orchestration for parallel AI job processing ✅ AssemblyAI transcription with speaker diarization ✅ OpenAI GPT for AI content generation ✅ Vercel Blob file storage for storing/uploading files ✅ AI-generated summaries, social posts, transcript, key moments, hashtags + more! ✅ Plan-based upload limits (file size, duration, project count) ✅ Real-time UI updates (no polling!) ✅ Durable workflows with automatic retries ✅ Speaker diarization & YouTube timestamps on Ultra membership tier! + 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:14 Build Demo & Explanation (1/2) 9:20 Why Use CodeRabbit 10:09 Build Demo & Explanation (2/2) 14:55 Using Clerk for Billing & Authentication 16:57 Build Tech Stack Breakdown 22:18 Why Use Clerk for Billing & Authentication 23:22 SKIP 30:10 Initialising the Build 31:28 Setting Up Clerk for Authentication 34:21 Setting Up Inngest 35:55 Setting Up & Implementing CodeRabbit 41:23 Setting Up Convex 47:10 Linking Convex & Clerk 53:08 Implementing Inngest 58:30 Implementing Shadcn 1:02:30 Building the Header Section 1:12:17 Building the Hero Section 1:13:23 Building the Features Section 1:14:44 Building the Pricing Section with Clerk Billing 1:24:57 Building the CTA & Footer Sections 1:26:15 Using CodeRabbit for the Landing Page 1:27:45 Implementing Inngest Functions 1:30:22 Creating the Podcast Uploader Component 1:31:26 Checking CodeRabbit’s Code Review 1:34:30 Implementing the Podcast Uploader Functionality w/ Vercel Blob 1:50:52 Implementing Server Actions 1:53:20 Implementing Convex & Helper Functions 2:09:03 Building the Podcast Uploader Component 2:20:46 Building the Project Detail Page 2:33:41 Explaining the Podcast Content Generation 2:35:51 Building the Podcast Processor Inngest Function 2:41:26 Implementing AssemblyAI API 2:47:45 Testing AssemblyAI’s Transcribing Feature 2:52:14 Explaining How the AI Content Generation Works in Parallel 2:55:56 Building the Generate Hashtags Feature 3:01:16 Implementing OpenAI API 3:03:15 Implementing Zod Schemas 3:04:42 Explaining the Key Moments Feature 3:05:11 Explaining the Social Posts Feature 3:07:47 Explaining the Summary Feature 3:09:30 Explaining the Titles Feature 3:09:52 Explaining the YouTube Timestamps Feature 3:12:18 Explaining How Convex Saves the Generated Content 3:13:56 Testing the Podcast Content Generation Feature 3:19:42 Implementing the Delete Functionality for Projects 3:21:15 Building the Processing Flow Functionality 3:29:17 Building the Project Status Card Component 3:32:47 Building the Content Tabs in Project Detail Page 3:37:17 Explaining How Retry Jobs Work In Inngest 3:44:01 Explaining Generate Missing Card & Features Component 3:48:22 Implementing All the Podcast Content Tabs 3:53:26 Testing the Podcast Content Generation 3:58:11 Building the Upgrade Page 4:00:22 Building the Projects Page 4:06:42 Building the Upload Page 4:07:25 Testing the Final Build (1/2) 4:13:10 Build Tech Stack Summary 4:21:29 Testing the Final Build (2/2) 4:23:11 Outro Let’s get it PAPAFAM 🔥. DISCLAIMER: This video is sponsored by Inngest, CodeRabbit and Clerk. 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 #inngest #openai #react #react19 #saas #webapp #clerk #podcast #aiagents #learning #coding #tutorial #beginner #programming