Build and Deploy a Full Stack AI SaaS with Next.js, TypeScript, ShadCN, Stripe | Full Course 2025
Hi all 👋 In this 5 hour tutorial, you will learn how to create an end-to-end full stack AI SaaS app that converts your video into a Blog Post in seconds with the power of AI! This app is built with the Next.js 14 App Router, Clerk for Auth - with Passkeys, Github and Google Sign in, React, OpenAI - Whisper API, ShadCN UI library for components, React Markdown, NeonDb for databases, UploadThing, Stripe for payments, Webhooks, TypeScript, TailwindCSS and more.
🌟 Be sure to checkout Clerk here: https://go.clerk.com/5qOWrFA
🚀 Full Source Code on Github + Free cheatsheet to accompany the tutorial with all the links and visuals: https://bit.ly/speakeasyai-saas-app
⭐️ Sign up for the Premium Next.js Course Waitlist:
https://bit.ly/nextjscourse
👉 FREE Next.js Best Practices Course:
https://bit.ly/nextjshottips
Discord for questions/help from others: / discord
Key features:
🌐 Next.js 14 App Router & Server Actions
🤖 OpenAI API for audio transcription and blog post generation
🔐 Authentication with Clerk (Passkeys, Github, and Google Sign-in)
📝 AI-powered blog post generation based on audio transcription
💳 Stripe integration for payments and subscription management
💾 NeonDb for database management
📤 UploadThing for file uploads
🎙️ Audio and video file processing (up to 25MB)
📜 TypeScript for type safety
💅 TailwindCSS for styling
🎨 ShadCN UI library for beautiful components
🔒 Secure file handling and processing
🪝 Webhook implementation for Stripe events
💰 Stripe integration for custom pricing table, payment links, and subscriptions
📊 User dashboard for managing blog posts
🖋️ Markdown editor for blog post editing
📱 Responsive design for mobile and desktop
🔄 Real-time updates and path revalidation
🚀 Deployment-ready (likely for Vercel)
🔔 Toast notifications for user feedback
📈 Performance optimizations
🔍 SEO-friendly blog post generation
📊 Recent blog posts display
🔐 Protected routes and API endpoints
📱Full mobile responsiveness
🛬 Landing page 🛬
🚀 Deployment on Vercel
#nextjs #react #javascript #ai #typescript #saas
⏰ Timeline
00:00 - What will you learn?
2:36 - App Demo
9:12 - Landing Page Build
1:12:53 - Complete Authentication with Clerk
1:38:51 - Payments and Checkout experience using Stripe
2:05:00 - Building a Serverless Database with NeonDb
2:18:05 - Connecting Next.js to NeonDb
3:11:06 - Mastering File Uploads with UploadThing
3:19:21 - Transcribing Audio and Generating Blog post with OpenAI
4:56:12 - SEO implementation
4:59:51 - Get your app ready for Prod & App Deployment
🙏 How to Support this channel
One way to thank me is to Buy me a coffee: https://buymeacoffee.com/kulkarniankita
🔗 RESOURCES:
💌 Frontend Newsletter:
Frontend Snacks 🍿 https://bit.ly/fesnacks
If you liked this video, you will also love my newsletter Frontend Snacks. You will learn a new topic each week with cool visuals and snippets, the latest frontend news and behind-the-scenes exclusive updates that I don't share anywhere else.
✨ FREE Goodies: https://kulkarniankita.com/goodies
☎️ Book a 1:1 coaching session with me
Opened a few coaching calls, grab them before they are gone: https://bit.ly/30mins-coaching-with-a...
🐤 Find me here
Twitter: / kulkarniankita9
LinkedIn: / kulkarniankita
Credits:
@joshtriedcoding @codewithantonio and @t3dotgg for Thumbnail inspiration!
This video is kindly sponsored by Clerk.
Watch video Build and Deploy a Full Stack AI SaaS with Next.js, TypeScript, ShadCN, Stripe | Full Course 2025 online without registration, duration hours minute second in high quality. This video was added by user Ankita Kulkarni 02 September 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 34,284 once and liked it 1.4 thousand people.