Build a Full Stack AI SaaS with Next.js, TypeScript, ShadCN, Payments | Full Course 2024

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: https://discord.gg/R96qCSyf3A

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-ankita

🐀 Find me here
Twitter: https://twitter.com/kulkarniankita9/
LinkedIn: https://www.linkedin.com/in/kulkarniankita/

Credits:
@joshtriedcoding @codewithantonio and @t3dotgg for Thumbnail inspiration!

This video is kindly sponsored by Clerk.