MENU

Fun & Interesting

🔴 Let's build a Course Platform LMS with Admin Dashboard! (NEXT.JS 15, Sanity, Stripe, Clerk, TS)

Sonny Sangha 415,033 2 months ago
Video Not Working? Fix It Now

1️⃣ Get Started with Sanity 👉 https://www.sanity.io/sonny?utm_source=youtube&utm_medium=video&utm_content=LMS 2️⃣ Get Started with Clerk 👉 https://go.clerk.com/41SVl5y ❗️Get the Complete Source Code for FREE 👉 https://www.papareact.com/lms-build-form 🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course 🛠️ Looking for the Code for this build? (Plus over 50+ others!) https://links.papareact.com/github Join me as I show you how to build a Professional LMS (Learning Management System) Platform from scratch with Next.js 15 - This comprehensive tutorial covers everything you need to create a modern, feature-rich learning platform! 🎯 What You'll Learn: 👉 Full-Stack Development with Next.js 15 - Server Components & Server Actions for optimal performance - Modern app router architecture - TypeScript for type safety and better development experience 👉 Content Management with Sanity CMS - Flexible course, module, and lesson management - Rich text editor for lesson content - Custom schemas and content types - Real-time content updates 👉 Advanced Features - Multiple video player integrations (YouTube, Vimeo, Loom) - Course progress tracking system - Module-based learning paths - Real-time lesson completion status - Beautiful course cards with progress indicators 👉 Authentication & User Management - Secure authentication with Clerk - User profiles and progress tracking - Role-based access control - Protected routes and content 👉 Payment Integration - Complete Stripe payment flow - Course enrollment system - Webhook integration for payment processing - Secure checkout process 👉 Modern UI/UX - Responsive design with Tailwind CSS - Beautiful components with Shadcn UI - Custom animations and transitions - Loading states and skeletons - Dark mode support 👉 Professional Features - Course catalog with filtering - Student dashboard - Progress tracking and analytics - Instructor profiles - Beautiful course landing pages 🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST? Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter 🕐 TIMESTAMPS: 0:00 Introduction 01:05 Build Demo 11:47 Initialising the Build 24:34 Build Tech Stack & Breakdown 34:22 Building the Home Page (1/2) 40:43 Creating the Header Component 48:14 Implementing Light / Dark Mode with Shadcn 55:44 Building the Header Component 1:04:09 Building the Search Input Component 1:14:35 Building the Home Page (2/2) 1:19:46 Setting Up Sanity Studio 1:27:02 Building the Student Type Sanity Schema 1:33:10 Creating Other Sanity Schemas 1:43:53 Building the Admin Panel using Sanity’s Structure Tool 1:55:42 Implementing Sanity TypeGen 1:59:04 Deploying the Sanity Studio 2:03:52 Showcasing the Power of Sanity Create 2:15:20 Implementing Email Authentication with Clerk 2:19:19 Building the Course Grid Section 2:30:053 Building the Course Card Component 2:45:09 Creating the Course Progress Component 2:47:34 Implementing the Search Functionality 3:02:55 Building the Course Product Page 3:15:38 Implementing the Enroll to Course Functionality 3:24:05 Implementing Stripe for Payment Processing 3:30:26 Implementing Stripe Checkout for Payments 3:46:58 Implementing Stripe Webhooks for Enrollments 3:57:50 Live Debugging 4:06:53 Building the My Courses Page & Course Progress Functionality 4:21:47 Building the Course Dashboard 4:32:39 Building the Sidebar Section in the Course Dashboard 4:54:57 Building the Lesson Section in the Course Dashboard 5:00:45 Building the Video Section in the Course Dashboard 5:07:41 Implementing the Lesson Completed Functionality 5:24:36 Implementing Sanity’s Presentation Mode 5:37:38 Implementing Loading States 5:45:55 Deploying to Vercel 5:58:22 Final Deployed Build Demo 6:02:44 Outro Let’s get it PAPAFAM 🔥. DISCLAIMER: 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 educational purposes. #nextjs15 #ai #reactjs #sanity #javascript #cms #clerk #lms #learning #coding #tutorial #beginner #programming

Comment