⭐️ Github Source code: https://bit.ly/ai-saas-template-sourc... ⭐️
🆓 Free Cheatsheet with all links & resources I share: https://bit.ly/ai-saas-cheatsheet
🤝 Discord for help: https://bit.ly/ankita-discord-community
Hey! In this 9-hour long AI SaaS course, you'll learn to create a Full stack AI SaaS from scratch called Sommaire that allows you to transform your PDF's into beautiful visual summaries reel like Instagram.
👉 Note: This is a $0 Tech Stack as everything used is FREE. If you run of Open AI credits, we switch to Gemini AI which is also free.
Application Features:
📝 Clear, structured summaries with key points and insights
🎨 Beautiful, interactive summary viewer with progress tracking
🔒 Secure file handling and processing
🔐 Protected routes and API endpoints
💰 Flexible pricing plans (Basic and Pro)
🪝 Webhook implementation for Stripe events
📊 User dashboard for managing summaries
📱 Responsive design for mobile and desktop
🔄 Real-time updates and path revalidation
🚀 Production-ready deployment
🔔 Toast notifications for upload status, processing updates, and error handling
📈 Performance optimizations
🔍 SEO-friendly summary generation
🗂️ Markdown Export that can be converted into a blog post
Here's what you'll learn:
Core Technologies:
🚀 Next.js 15 App Router for server-side rendering, routing, and API endpoints with Server Components and Server Actions
⚛️ React 19 for building interactive user interfaces with reusable components
🔑 Clerk for secure authentication with Passkeys, Github, and Google Sign-in
🤖 GPT-4 powered summarization with contextual understanding and emoji-enhanced output
🧠 Langchain for PDF parsing, text extraction, and document chunking
🎨 ShadcN UI for accessible, customizable React components
💾 NeonDB (PostgreSQL) for serverless database storage of summaries and user data
📤 UploadThing for secure PDF uploads (up to 32MB) and file management
💳 Stripe course for subscription management, cancellations and secure payment processing
🔔 Toast notifications for user feedback
📜 TypeScript for static typing and enhanced development experience
💅 TailwindCSS 4 for utility-first, responsive styling (also learn to upgrade to Tailwind v4)
🚀 Deployment on Vercel
#nextjs #ai #saas #react #typescript #javascript
⏰ Timeline
00:00 Introduction
3:28 Demo
13:05 Tech Stack
24:56 Project Setup
54:06 Navigation
01:13:32 Landing Page
2:10:39 Authentication
2:26:33 Upload Page
2:36:44 Upload Service Architecture
2:54:02 File Uploads and API Routes
3:13:48 PDF Extraction and Parsing
3:32:12 AI using Open AI
3:43:15 Gemini AI Summary Extraction
3:54:15 Database Architecture
3:59:23 Saving PDF Uploads to the Database
4:22:40 Summary List Page
5:17:56 Individual Summary Page
6:13:59 Payments using Stripe
7:05:39 Payment UI Complex Scenarios
7:39:18 Animations using Motion
8:07:30 Skeleton Pages
8:27:11 Protecting our Routes
8:47:08 Deployment
9:18:49 Next Steps
🔗 Next Steps:
🔥 FREE Course on Next.js Hot Tips: https://bit.ly/nextjshottips
👉 Join the Next.js Course Waitlist: https://bit.ly/nextjscourse
🐤 Find me here
Twitter: / kulkarniankita9
LinkedIn: / kulkarniankita
Смотрите видео Build and Deploy a Full Stack AI SaaS with Next.js 15, React, Stripe, Tailwind | Full Course (2025) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Ankita Kulkarni 11 Март 2025, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 14,470 раз и оно понравилось 992 людям.