The Modern LMS Platform is a scalable, full-stack education marketplace designed to bridge the gap between content creators and students. It features a robust Next.js 15 frontend optimized for performance and SEO, coupled with a real-time Sanity CMS backend that allows for instant content propagation without rebuilds.
This platform handles the entire e-learning lifecycle: from course creation and rich-text lesson editing to secure student authentication, payment processing, and granular progress tracking.
- Course Discovery: Searchable and filterable course catalog with category-based browsing.
- Seamless Checkout: Integrated Stripe Checkout for secure, one-time course purchases.
- Interactive Dashboard: Real-time progress tracking (0-100%) as lessons are marked complete.
- Multimedia Lessons: Support for diverse content types including YouTube embeds, Loom videos, and rich text.
- Sanity Studio Integration: A fully customized CMS dashboard to manage Courses, Modules, Lessons, and Instructors.
- Real-Time Preview: "Presentation Mode" allows admins to edit content and see live previews on the production site before publishing.
- Student Analytics: View enrolled students, revenue generated, and individual completion statuses directly from the backend.
- Problem: Syncing TypeScript interfaces with a headless CMS schema is often manual and error-prone.
- Solution: I implemented Sanity TypeGen to automatically generate TypeScript definitions from my GROQ queries. This ensures that the frontend strictly adheres to the database schema, eliminating runtime errors caused by mismatched data shapes.
- Problem: Relying on client-side redirects for payment confirmation is insecure and unreliable.
- Solution: I architected a robust webhook handler (
/api/webhook/stripe) that verifies the Stripe signature on the server. It performs asynchronous reconciliation, unlocking course access in the database only after a cryptographic verification of the payment success event.
- Problem: Static sites often serve stale content until a rebuild is triggered.
- Solution: By utilizing Sanity Live and Next.js Server Actions, the platform achieves sub-second data propagation. When an instructor publishes a new lesson or fixes a typo, the change is reflected on the student's dashboard instantly via optimistic updates, without a page refresh.
- Frontend: Next.js 15 (App Router), React 19, Shadcn UI, Lucide React.
- Backend / Content Lake: Sanity.io (Structure Tool, Vision).
- Authentication: Clerk (Middleware protected routes).
- Payments: Stripe (Checkout Sessions & Webhooks).
- Styling: Tailwind CSS.
- Node.js (v18+)
- Stripe Account
- Sanity Account
- Clerk Account
-
Clone the repository:
git clone [https://github.com/yourusername/modern-lms-platform.git](https://github.com/yourusername/modern-lms-platform.git) cd modern-lms-platform -
Install dependencies:
npm install # or pnpm install -
Setup Environment Variables: Create a
.env.localfile and add the following keys:# Next.js NEXT_PUBLIC_BASE_URL=http://localhost:3000 # Clerk Auth NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_... CLERK_SECRET_KEY=sk_test_... # Sanity CMS NEXT_PUBLIC_SANITY_PROJECT_ID=... NEXT_PUBLIC_SANITY_DATASET=production SANITY_API_TOKEN=... # Stripe Payments NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_... STRIPE_SECRET_KEY=sk_test_... STRIPE_WEBHOOK_SECRET=whsec_...
-
Run the Development Server:
npm run dev
-
Access the App:
- LMS Frontend:
http://localhost:3000 - Admin Studio:
http://localhost:3000/studio
- LMS Frontend:
To process payments locally, you need to forward Stripe events to your local API route.
- Listen to webhooks:
(Note: For production, ensure the webhook endpoint is set to
stripe listen --forward-to localhost:3000/api/stripe-checkout/webhook
https://your-domain.com/api/stripe-checkout/webhook)
Manage content and view enrollments directly from the Sanity Studio.
Admins can edit course content and preview changes live on the site without touching code.
Contributions are welcome! Please feel free to submit a Pull Request.
Built with ❤️ by Adithya Cherukuri