데브허브 | DEVHUB | 🔴 Let’s build an AI Podcast SaaS with NEXT.JS 16! (Inngest, Clerk, CodeRabbit, Convex, Stripe)
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-...
🚨 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
