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: [ Ссылка ]
🚀 Full Source Code on Github + Free cheatsheet to accompany the tutorial with all the links and visuals: [ Ссылка ]
⭐️ Sign up for the Premium Next.js Course Waitlist:
[ Ссылка ]
👉 FREE Next.js Best Practices Course:
[ Ссылка ]
Discord for questions/help from others: [ Ссылка ]
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: [ Ссылка ]
🔗 RESOURCES:
💌 Frontend Newsletter:
Frontend Snacks 🍿 [ Ссылка ]
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: [ Ссылка ]
☎️ Book a 1:1 coaching session with me
Opened a few coaching calls, grab them before they are gone: [ Ссылка ]
🐤 Find me here
Twitter: [ Ссылка ]
LinkedIn: [ Ссылка ]
Credits:
@joshtriedcoding @codewithantonio and @t3dotgg for Thumbnail inspiration!
This video is kindly sponsored by Clerk.
