1️⃣ Get Started with Sanity 👉 https://www.sanity.io/sonny?utm_sourc...
2️⃣ Get Started with Clerk 👉 https://go.clerk.com/84o4rVF
❗️Get the Full Source Code for FREE here 👉 https://www.papareact.com/class-booki...
🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course
🛠️ Looking for the Code for my other builds? (Plus over 55+ others!)
https://links.papareact.com/github
Join me as I show you how to build an AI Powered Class Booking SaaS Platform from scratch with the latest Next.js 16 - This comprehensive tutorial covers everything you need to create an AI Powered Class Booking SaaS Platform!
🎯 What You'll Learn:
✅ Next.js 16 with App Router & React 19 Server/Client Components
✅ Server Actions for form handling and mutations
✅ Clerk authentication with subscription billing (PricingTable)
✅ 3-tier subscription system (Basic, Performance, Champion)
✅ Sanity real-time CMS with SDK React
✅ shadcn/ui + Tailwind CSS v4 for beautiful, responsive UI
✅ Vercel AI Gateway + AI SDK 6.0 Beta integration
✅ ToolLoopAgent for AI-powered fitness assistant
✅ Geographic filtering with bounding box + Haversine formula
✅ Leaflet maps + Mapbox address autocomplete
✅ Zustand state management
✅ User onboarding flow with location setup
✅ Class booking with tier-based access control
✅ Attendance confirmation system
✅ Admin dashboard for venue & activity management
✅ TypeScript + Zod for type-safe development
✅ Vercel deployment with production best practices
✅ Mobile-responsive design throughout
🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter
🕐 TIMESTAMPS:
0:00 Introduction
1:12 Build Demo & Explanation
12:01 Explaining the Sanity Backend
19:08 Why Use Clerk for Authentication & Billing
20:36 Build Tech Stack Breakdown
27:58 Initialising the Build
31:09 Setting Up Clerk & Sanity with our Special Links
47:12 Explaining the Mapbox Integration in Sanity
50:09 Customizing Sanity Studio
57:56 Implementing Shadcn
1:04:39 Building the Landing Page
1:14:07 Building the Header Section
1:20:51 Implementing Sanity Queries with Groq
1:25:13 Implementing Sanity TypeGen
1:30:56 Implementing the Onboarding Flow
1:49:43 Building the Classes Page (with Search, Filter & Map Functionality)
2:18:37 Explaining the Subscription Functionality
2:20:01 Implementing the Booking Functionality (with Live Debugging)
2:36:49 Configuring Plans with Clerk Billing
2:42:45 Building the Bookings Page
2:51:56 Building the Profile Page
3:01:12 Explaining & Implementing Zustand
3:09:02 Implementing the AI Agent Functionality w/ Vercel AI SDK
3:48:56 Explaining & Implementing Sanity’s App SDK
3:57:28 Building the Activities Page in App SDK
4:22:14 Building the Venues Page in App SDK
4:26:15 Listen Up!
4:27:58 Explaining the Deployment Steps
4:29:35 Final Build Demo & Outro
Let’s get it PAPAFAM 🔥.
DISCLAIMER: This video is sponsored by Sanity and Clerk. This video is made for informational and educational purposes only. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes.
#nextjs #ai #saas #openai #booking #mapbox #sanity #webapp #clerk #learning #stripe #coding #tutorial #beginner #programming
