A modern, feature-rich Learning Management System built with Next.js 15, Sanity CMS, Clerk, and Stripe. Features real-time content updates, course progress tracking, and secure payment processing.
- 📚 Access to comprehensive course content
- 📊 Real-time progress tracking
- ✅ Lesson completion system
- 🎯 Module-based learning paths
- 🎥 Multiple video player integrations (YouTube, Vimeo, Loom)
- 💳 Secure course purchases
- 📱 Mobile-friendly learning experience
- 🔄 Course progress synchronization
- 📝 Rich content management with Sanity CMS
- 📊 Student progress monitoring
- 📈 Course analytics
- 🎨 Customizable course structure
- 📹 Multiple video hosting options
- 💰 Direct payments via Stripe
- 🔄 Real-time content updates
- 📱 Mobile-optimized content delivery
- 🚀 Server Components & Server Actions
- 👤 Authentication with Clerk
- 💳 Payment processing with Stripe
- 📝 Content management with Sanity CMS
- 🎨 Modern UI with Tailwind CSS and shadcn/ui
- 📱 Responsive design
- 🔄 Real-time content updates
- 🔒 Protected routes and content
- 🌙 Dark mode support
- 🎯 Modern, clean interface
- 🎨 Consistent design system using shadcn/ui
- ♿ Accessible components
- 🎭 Smooth transitions and animations
- 📱 Responsive across all devices
- 🔄 Loading states with skeleton loaders
- 💫 Micro-interactions for better engagement
- 🌙 Dark/Light mode toggle
Create a .env.local
file with:
# Sanity
NEXT_PUBLIC_SANITY_PROJECT_ID=your-project-id
NEXT_PUBLIC_SANITY_DATASET=production
# Read Token
SANITY_API_TOKEN=your-sanity-read-token
# Full Access Admin Token
SANITY_API_ADMIN_TOKEN=your-sanity-admin-token
# For Sanity Studio to read
SANITY_STUDIO_PROJECT_ID=your-project-id
SANITY_STUDIO_DATASET=production
# Next.js
NEXT_PUBLIC_BASE_URL=http://localhost:3000
# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key
STRIPE_SECRET_KEY=your-stripe-secret-key
STRIPE_WEBHOOK_SECRET=your-stripe-webhook-secret
# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-clerk-publishable-key
CLERK_SECRET_KEY=your-clerk-secret-key
# Clone the repository
git clone https://github.com/yourusername/lms-platform
# Install dependencies
npm install
# Start the development server
npm run dev
# In a separate terminal, start Sanity Studio
npm run sanity:dev
- Create a Sanity account
- Create a new project
- Install the Sanity CLI:
npm install -g @sanity/cli
- Initialize Sanity in your project:
sanity init
- Deploy Sanity Studio:
sanity deploy
- Create a Clerk application
- Configure authentication providers
- Set up redirect URLs
- Add environment variables
- Create a Stripe account
- Set up webhook endpoints
- Configure payment settings
- Set up webhook forwarding for local development:
stripe listen --forward-to localhost:3000/api/stripe-checkout/webhook
-
Courses
- Title
- Description
- Price
- Image
- Modules
- Instructor
- Category
-
Modules
- Title
- Lessons
- Order
-
Lessons
- Title
- Description
- Video URL
- Content (Rich Text)
- Completion Status
-
Students
- Profile Information
- Enrolled Courses
- Progress Data
-
Instructors
- Name
- Bio
- Photo
- Courses
-
Course Management System
- Content creation and organization
- Module and lesson structuring
- Rich text editing
- Media integration
-
Progress Tracking
- Lesson completion
- Course progress calculation
- Module progress visualization
-
Payment Processing
- Secure checkout
- Course enrollment
- Stripe integration
-
User Authentication
- Clerk authentication
- Protected routes
- User roles
- Access Sanity Studio
- Create course structure with modules and lessons
- Add content and media
- Publish course
- Browse available courses
- Purchase and enroll in courses
- Access course content
- Track progress through modules
- Mark lessons as complete
- View completion certificates
/app # Next.js app directory
/(dashboard) # Dashboard routes
/(user) # User routes
/api # API routes
/components # React components
/sanity # Sanity configuration
/lib # Sanity utility functions
/schemas # Content schemas
/lib # Utility functions
- Next.js 15
- TypeScript
- Sanity CMS
- Stripe Payments
- Clerk Auth
- Tailwind CSS
- Shadcn UI
- Lucide Icons
- Flexible course structure with modules and lessons
- Rich text editor for lesson content
- Support for multiple video providers
- Course pricing and enrollment management
- Progress tracking across all enrolled courses
- Lesson completion status
- Continue where you left off
- Course navigation with sidebar
- URL Video Player
- Loom Embed Support
- Responsive video playback
- Secure Stripe checkout
- Course access management
- Webhook integration
- Payment status tracking
- User registration and login
- Protected course content
- Role-based access control
- Secure session management
- Modern, responsive design
- Loading states and animations
- Progress indicators
- Toast notifications
- Modal dialogs
Built with ❤️ using Next.js, Sanity, Clerk, and Stripe