Build a comprehensive full-stack AI SaaS web application in this 4.5-hour tutorial that guides through implementing user authentication with Clerk, payment processing with Stripe, and modern web development using NextJS 15, TypeScript, and TailwindCSS. Master essential development concepts including database integration with Prisma and Neon, API endpoint creation, subscription management, AI meal plan generation, and responsive UI design. Progress from setting up the development environment through creating a navbar component, implementing authentication flows, integrating Stripe payments, building an AI-powered meal planning system, and developing a complete user profile management system. Learn practical skills in handling webhook events, managing subscription states, creating interactive calendars, and implementing toast notifications while following professional development practices and modern web architecture patterns.

Syllabus

00:00:00 Introduction & Overview
00:03:12 Create Navbar Component
00:04:40 Setup File & Folder Structure
00:08:05 Test Routes & Navbar UI
00:10:07 Setup Navigation & Logo Link
00:10:31 Clerk Authentication Setup
00:12:03 Create Clerk App Instance
00:13:03 Configure Env & Middleware
00:15:10 Wrap App with Clerk Provider
00:16:26 Expand Signup Route
00:17:47 Test Signup Component
00:20:06 Modify Navbar for Auth State
00:24:10 Display User Profile Image
00:28:05 Setup Signed-Out Navbar Links
00:32:09 Center Signup Page UI
00:33:06 Set Redirect After Signup
00:33:47 Update Homepage Content
00:35:00 Paste Landing Page HTML
00:36:04 Change Theme to Light Mode
00:37:03 Test "Get Started" Redirection
00:41:01 Middleware: Logging & Checks
00:43:00 Define Public Routes
00:44:04 Redirect Unauthenticated Users
00:47:15 Stripe Integration Overview
00:48:18 Track Subscription Status
00:49:01 Setup Neon Database & Prisma
00:50:04 Initialize Prisma Setup
00:52:08 Review Prisma Schema
00:53:03 Define User Profile Model
00:54:02 Migrate Database Schemas
00:59:05 Create Profile API Endpoint
01:01:00 Handle Profile Creation Request
01:05:00 Use React Query for API
01:09:00 Setup Stripe Checkout API
01:14:00 Create Stripe Checkout Session
01:18:00 Handle Stripe Webhook Events
01:24:00 Update Database Post-Checkout
01:29:00 Build Subscription Flow Logic
01:33:00 React Query: Checkout Mutation
01:37:00 Test Stripe Checkout Process
01:41:00 Integrate Toast Notifications
01:45:00 Verify Stripe Payment Success
01:50:00 Generate AI Meal Plan
01:55:00 Build Meal Plan Form & UI
02:00:00 Submit Meal Plan Request
02:05:00 Display AI Meal Plan Results
02:10:00 Build Weekly Meal Calendar
02:15:00 Profile Page Overview
02:20:00 Display User Profile Info
02:25:00 Show Subscription Details
02:30:00 Change Subscription Plan
02:35:00 Implement Plan Update API
02:40:00 Test Plan Update Mutation
02:45:00 Unsubscribe Functionality
02:50:00 Confirm Unsubscription Flow
02:55:00 Final Profile Page Updates
03:00:00 Generate Final AI Meal Plan & UI Adjustments
03:05:00 Review Meal Plan Display & Calendar Layout
03:10:00 Refine Meal Plan Styling & Data Presentation
03:15:00 Test Meal Plan Generation Across Days
03:20:00 Integrate UI Feedback Spinner, Toasts
03:25:00 Finalize Weekly Calendar Navigation
03:30:00 Profile Page: Update & Change Plan Flow
03:35:00 Test Subscription Plan Update & Redirects
03:40:00 Validate Unsubscription & Final Profile Cleanup
03:45:00 Finalize React Query & Toast Integration on Profile
04:15:00 Wrap-Up: Next Steps & Recommendations
04:20:00 Final Review of Project Functionality