Today is a special day because with this video I am releasing my biggest and most comprehensive course/tutorial ever. In this video, we will build a complete LMS course platform from absolute scratch. We will build everything from a beautiful landing page to display all of the available courses, continue with an admin dashboard to create courses, edit courses, track your success with analytics, and much more, and then we will move on to a breathtaking customer dashboard that allows the customer to track their video course progress, watch the videos individually, read the descriptions, mark lessons as completed, and much more. This is probably one of the most comprehensive videos/tutorials on all of YouTube. Trust me, this is a video you don’t want to miss. This full-stack tutorial covers everything from start to finish. Enjoy!

🔐Arcjet: https://launch.arcjet.com/BSFyrhW

📸 Screen Recording Software: https://dub.sh/eDa47SO

👨🏻‍💻 GitHub Repo: https://www.marshalcode.com/free-tutorials/create-a-lms-course-platform-with-nextjs-arcjet-better-auth-tailwind-stripe
🌍 My Website: https://marshalcode.com
👋🏻 Discord: https://discord.gg/ZzGqgpmd24
✅ Follow me on X: https://x.com/janmarshaldev
📧 Business ONLY: jan@alenix.de


Features: 
🌐 Next.js 15
🎨 Tailwind CSS & Shadcn UI
🔒 Authentication with Better-Auth (Email OTP & GitHub OAuth)
🛡️ Arcjet Security
Protects against XSS, SQL injection, and other common attacks.
📈 Progress Tracking
🧑‍💼 Admin Dashboard
👤 Customer Dashboard
🚫 Rate Limiting
🎥 Custom Video Player
📊 Beautiful Analytics
📁 File Uploads with S3 (Presigned URLs)
✅ Lesson Completion Tracking
⭐ Custom Dropzone
💳 Stripe Payment Integration
🖱️ Course Structure with Drag & Drop
📝 Custom Rich Text Editor
🧮 Neon Postgres DB
💾 Prisma ORM
🚀 Deployed on Vercel

Additional Features:
✅ Fully responsive design.
✅ Performance-optimized architecture.
✅ Clean and maintainable codebase.
✅ DAL

Installation Command for Shadcn/UI:
pnpm dlx shadcn@latest add alert-dialog avatar badge breadcrumb button card chart checkbox collapsible dialog drawer dropdown-menu form input-otp input label progress select separator sheet sidebar skeleton sonner table tabs textarea toggle-group toggle tooltip

Rescourses used: 
Next.js: https://nextjs.org
Arcjet: https://launch.arcjet.com/BSFyrhW
Tailwind.css: https://tailwindcss.com
Shadcn/UI: https://ui.shadcn.com
Prisma: https://prisma.io
Neon: https://neon.tech/
Tigirs: https://www.tigrisdata.com/
Vercel: https://vercel.com/.
Zod: https://zod.dev/
Better-Auth: https://www.better-auth.com/

Timestamps: 
00:00 Intro  
05:30 Setup Project  
20:00 Create Login UI  
45:00 Setup Authentication & Database  
01:50:00 Email Auth OTP  
02:20:00 Secure Application (Arcjet)  
03:00:00 Create Landing Page  
03:40:00 Customize Design  
03:50:00 Create Admin Dashboard  
04:28:00 Course Creation  
05:24:00 Create Custom Rich Text Editor  
06:12:00 Create Custom File Drag-and-Drop Zone  
06:58:00 Uploads with S3 and Presigned URLs  
07:37:00 Progress Tracking  
08:00:00 File Deletion  
08:25:00 Create Mutation Layer  
08:45:00 Protect Endpoints  
09:25:00 Display Courses  
10:00 Edit Course  
10:20 Create Course Structure (Drag and Drop)  
11:40 Middleware

Reinier

Next.js

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

A comprehensive tutorial for building a complete Learning Management System (LMS) using Next.js 15, Better Auth for authentication, Prisma with Neon database, and Stripe for payments. The guide covers setting up the project structure, implementing authentication with GitHub OAuth and email OTP, creating a responsive UI with Tailwind CSS and shadcn/ui components, configuring dark mode, and establishing database connections. Part 1 focuses on the foundational setup including project initialization, authentication system implementation, and database configuration.

Create an LMS Course Platform with Next.js, Arcjet, Better-Auth, and Stripe (Part 1/2)