A production-ready Learning Management System (LMS) built using the MERN Stack with secure authentication, online course management, instructor and student dashboards, integrated payments, cloud media management, and a comprehensive Admin Panel.
StudyNotion – Advanced MERN EdTech Platform is a modern full-stack Learning Management System (LMS) developed using the MERN Stack. It provides an interactive learning experience by connecting Students, Instructors, and Administrators on a single platform.
The application enables instructors to create and manage professional online courses, while students can browse, purchase, and complete courses through an intuitive learning dashboard. A dedicated administrator panel provides complete control over platform activities including user management, course moderation, and contact message handling.
This project follows modern software development practices with secure authentication, RESTful APIs, cloud-based media storage, responsive design, and integrated online payments.
Unlike a basic learning platform, this implementation extends the original concept with several production-ready enhancements, improved architecture, additional administrative capabilities, optimized APIs, and a significantly improved user experience.
- 🎓 Complete Learning Management System (LMS)
- 🔐 Secure JWT Authentication
- 📧 OTP Based Email Verification
- 👨🎓 Student Dashboard
- 👨🏫 Instructor Dashboard
- 👨💼 Dedicated Admin Dashboard
- 📚 Dynamic Course Management
- 🎥 Video Lectures with Progress Tracking
- 💳 Razorpay Payment Integration
- ☁️ Cloudinary Media Storage
- ⭐ Course Ratings & Reviews
- 📩 Contact Support System
- 🚫 User Block / Unblock Functionality
- 📊 Platform Analytics
- 📱 Fully Responsive User Interface
- 📧 Beautiful Email Templates
- ⚡ Optimized REST APIs
- 🔒 Secure Role-Based Authorization
- 🌐 Production Deployment
Online education has transformed the way people learn. StudyNotion aims to provide a complete digital learning ecosystem where instructors can effortlessly publish educational content while students enjoy a seamless and engaging learning experience.
The platform focuses on:
- Providing an intuitive learning experience.
- Simplifying online course creation.
- Secure online course purchasing.
- Efficient instructor management tools.
- Comprehensive administrative controls.
- Scalable backend architecture.
- Responsive design across all devices.
- Cloud-based media management.
- Production-ready deployment.
- Register & Login
- Email OTP Verification
- Browse Courses
- Search Courses
- Purchase Courses
- Razorpay Payment
- Watch Video Lectures
- Track Learning Progress
- Rate & Review Courses
- Update Profile
- Reset Password
- Contact Support
- Instructor Dashboard
- Create Courses
- Upload Course Content
- Organize Sections & Lectures
- Edit Courses
- Publish / Unpublish Courses
- Track Student Enrollments
- View Revenue Analytics
- Admin Dashboard
- Platform Analytics
- Manage Users
- Block / Unblock Users
- Manage Courses
- Manage Categories
- View Contact Messages
- Delete Contact Messages
- About The Project
- Project Highlights
- Why StudyNotion?
- Features
- System Architecture
- Technology Stack
- Folder Structure
- Installation Guide
- Environment Variables
- Running The Project
- Database Architecture
- Authentication Flow
- Payment Workflow
- Admin Module
- API Documentation
- Screenshots
- Future Enhancements
- Contributing
- License
- Author
- Acknowledgements
StudyNotion follows a modern three-tier architecture consisting of a React-based frontend, a RESTful backend API, and a cloud-hosted MongoDB database. The application integrates multiple third-party services such as Cloudinary for media storage, Razorpay for secure online payments, and Nodemailer for transactional email notifications.
The architecture is designed to be modular, scalable, and easy to maintain by separating responsibilities across different layers.
┌─────────────────────────────┐
│ End Users │
│ │
│ 👨🎓 Students │
│ 👨🏫 Instructors │
│ 👨💼 Administrators │
└─────────────┬───────────────┘
│
▼
┌────────────────────────────────────────────┐
│ React.js + Vite Frontend │
│ │
│ • Authentication │
│ • Student Dashboard │
│ • Instructor Dashboard │
│ • Admin Dashboard │
│ • Course Management │
│ • Payment Interface │
│ • Responsive UI │
└─────────────────┬──────────────────────────┘
│
Axios REST API Requests
│
▼
┌──────────────────────────────────────────────┐
│ Node.js + Express Backend │
│ │
│ • Authentication APIs │
│ • User Management │
│ • Course Management │
│ • Category Management │
│ • Payment APIs │
│ • Review APIs │
│ • Contact APIs │
│ • Admin APIs │
└───────────────┬─────────────┬────────────────┘
│ │
│ │
▼ ▼
MongoDB Atlas Cloudinary
Collections Images/Videos
│
▼
Razorpay API
│
▼
Nodemailer (SMTP)
Every request follows a structured flow to ensure maintainability and security.
User
│
▼
React Component
│
Axios Request
│
Express Route
│
Authentication Middleware
│
Controller
│
MongoDB Database
│
Business Logic
│
JSON Response
│
React UI Update
The course enrollment process consists of multiple secure backend validations before granting access to purchased content.
Student
│
Select Course
│
Buy Now
│
Backend Creates Razorpay Order
│
Razorpay Checkout
│
Payment Success
│
Payment Verification
│
Course Enrollment
│
Course Progress Created
│
Confirmation Email Sent
│
Student Dashboard Updated
The Admin Panel provides centralized control over the platform.
Admin Dashboard
│
├──────────────► Manage Users
│ │
│ Block / Unblock Users
│
├──────────────► Manage Courses
│
├──────────────► Delete Courses
│
├──────────────► Contact Messages
│
└──────────────► Platform Analytics
| Technology | Purpose |
|---|---|
| React.js | User Interface |
| Vite | Build Tool |
| Redux Toolkit | State Management |
| React Router DOM | Routing |
| Tailwind CSS | Styling |
| Axios | API Communication |
| React Hook Form | Form Handling |
| React Hot Toast | Notifications |
| React Icons | Icons |
| Technology | Purpose |
|---|---|
| Node.js | Runtime Environment |
| Express.js | REST API Framework |
| JWT | Authentication |
| bcrypt | Password Encryption |
| Nodemailer | Email Service |
| Express File Upload | File Uploads |
| Mongoose | MongoDB ODM |
| dotenv | Environment Variables |
| Technology | Purpose |
|---|---|
| MongoDB Atlas | Cloud Database |
| Mongoose | Database Modeling |
| Service | Purpose |
|---|---|
| Cloudinary | Media Storage |
| Razorpay | Payment Gateway |
| Gmail SMTP | Email Delivery |
| Vercel | Application Deployment |
StudyNotion/
│
├── frontend/
│ ├── public/
│ ├── src/
│ │ ├── assets/
│ │ ├── components/
│ │ ├── data/
│ │ ├── hooks/
│ │ ├── pages/
│ │ ├── reducer/
│ │ ├── services/
│ │ ├── slices/
│ │ ├── utils/
│ │ ├── App.jsx
│ │ └── main.jsx
│ │
│ ├── package.json
│ └── vite.config.js
│
├── Server/
│ ├── config/
│ ├── controllers/
│ ├── mail/
│ ├── middleware/
│ ├── models/
│ ├── routes/
│ ├── utils/
│ ├── package.json
│ └── server.js
│
└── README.mdThe application is built following modern software engineering principles:
- Modular Folder Structure
- Separation of Concerns
- Reusable Components
- RESTful API Design
- MVC Backend Architecture
- Role-Based Authorization
- Secure Authentication
- Responsive User Interface
- Cloud-Based Media Management
- Production-Ready Deployment
- Clean Code Practices
- Scalable Project Architecture
StudyNotion is designed to deliver a complete Learning Management System (LMS) experience for Students, Instructors, and Administrators. Each user role has a dedicated dashboard with features tailored to their responsibilities, ensuring a seamless and secure experience across the platform.
The Student Module is designed to provide an engaging learning experience, enabling students to explore, purchase, and complete courses efficiently.
- Secure Sign Up
- Login & Logout
- Email OTP Verification
- Forgot Password
- Reset Password
- JWT Authentication
- Protected Routes
Students can effortlessly discover courses through an intuitive browsing experience.
- Browse Available Courses
- View Course Details
- Course Categories
- Course Information
- Instructor Details
- Ratings & Reviews
- Student Enrollment Count
- Responsive Course Cards
Students can purchase courses securely through Razorpay.
- Add Course to Cart
- Remove Course from Cart
- Buy Individual Course
- Buy Multiple Courses
- Secure Razorpay Checkout
- Payment Verification
- Automatic Enrollment
After successful enrollment, students gain access to a personalized learning dashboard.
- View Enrolled Courses
- Continue Learning
- Video Lectures
- Course Progress Tracking
- Completed Videos
- Learning Percentage
- Course Completion Status
Students can provide valuable feedback after completing courses.
- Submit Rating
- Write Review
- View Other Reviews
- Average Rating Calculation
Students have complete control over their personal information.
- Update Personal Information
- Upload Profile Picture
- Change Password
- Delete Account
- Edit Contact Information
- View Account Details
The Instructor Module empowers educators to create, manage, and publish professional online courses.
The dashboard provides valuable insights into teaching performance.
- Total Revenue
- Total Students
- Published Courses
- Instructor Analytics
- Course Statistics
Instructors can build complete courses with structured content.
- Create Course
- Edit Course
- Delete Course
- Publish Course
- Unpublish Course
- Upload Thumbnail
- Update Course Details
Each course can be organized into multiple sections and lectures.
- Create Sections
- Edit Sections
- Delete Sections
- Create Subsections
- Upload Videos
- Replace Videos
- Delete Videos
- Arrange Course Structure
Track course performance using real-time statistics.
- Total Enrollments
- Revenue Generated
- Student Count
- Course Popularity
One of the biggest enhancements introduced in this project is the fully functional Admin Dashboard.
Unlike the original implementation, administrators now have centralized control over platform activities.
Provides an overview of platform statistics.
- Dashboard Overview
- Platform Analytics
- User Statistics
- Course Statistics
- Contact Statistics
Administrators can efficiently manage platform users.
- View All Users
- Block Users
- Unblock Users
- User Details
- Role Information
- Enrollment Information
Administrators can moderate every course on the platform.
- View All Courses
- Instructor Information
- Enrollment Count
Administrators can manage messages submitted through the Contact Us page.
- View Contact Messages
- Read Complete Message
- Delete Messages
- Contact Details
- User Information
The Admin Panel ensures platform integrity through moderation features.
- Role-Based Access Control
- User Restrictions
- Course Visibility Control
- Administrative Monitoring
This project significantly extends the original StudyNotion concept with numerous production-ready improvements.
| Original StudyNotion | Advanced StudyNotion (This Project) |
|---|---|
| Student Dashboard | ✅ Enhanced Student Dashboard |
| Instructor Dashboard | ✅ Improved Dashboard UI |
| Course Management | ✅ Advanced Course Builder |
| Ratings & Reviews | ✅ Enhanced Review System |
| Razorpay Integration | ✅ Improved Payment Workflow |
| Email Templates | ✅ Professionally Designed Email Templates |
| Responsive Design | ✅ Improved Mobile Responsiveness |
| Authentication | ✅ Better Validation & Security |
| Profile Management | ✅ Enhanced User Experience |
| Basic LMS | ✅ Production-Ready LMS |
- ✅ Complete Admin Panel
- ✅ User Block / Unblock
- ✅ Contact Message Management
- ✅ Admin Analytics
- ✅ Platform Monitoring
- ✅ Enhanced Footer
- ✅ Modern Email Templates
- ✅ Better Mobile Experience
- ✅ Improved Error Handling
- ✅ Optimized Backend APIs
- ✅ Production Deployment
- ✅ Better Folder Organization
- ✅ Cleaner REST API Structure
Security has been considered throughout the application.
- JWT Authentication
- Password Encryption using bcrypt
- Protected Routes
- Role-Based Authorization
- OTP Verification
- Secure Password Reset
- Account Protection
- Session Validation
- Environment Variables
- Secure API Endpoints
- Request Validation
- MongoDB Data Validation
- Razorpay Signature Verification
- Secure Payment Validation
- Automatic Enrollment Verification
The project incorporates several optimizations for better performance.
- Lazy Component Loading
- Optimized Database Queries
- Modular Backend Architecture
- Reusable React Components
- Efficient State Management
- Cloud Media Storage
- Optimized API Calls
- Responsive UI Rendering
- Clean Folder Structure
- Scalable Codebase
Follow the steps below to set up the project locally.
Before running the project, ensure the following software is installed on your system.
- Node.js (v18 or above)
- npm
- Git
- MongoDB Atlas Account
- Cloudinary Account
- Razorpay Account
- Gmail Account (App Password Enabled)
git clone https://github.com/saurav-09/StudyNotion
cd StudyNotioncd frontend
npm installcd ../Server
npm installCreate a .env file inside the Server directory.
PORT=
MONGODB_URL=
JWT_SECRET=
CLOUD_NAME=
API_KEY=
API_SECRET=
FOLDER_NAME=
MAIL_HOST=
MAIL_USER=
MAIL_PASS=
RAZORPAY_KEY=
RAZORPAY_SECRET=
FRONTEND_URL=Create another .env inside the frontend directory.
VITE_APP_BASE_URL=
VITE_RAZORPAY_KEY=cd Server
npm startBackend runs on
http://localhost:4000
cd frontend
npm run devFrontend runs on
http://localhost:5173
The application has been successfully deployed.
| Service | Platform |
|---|---|
| Frontend | Vercel |
| Backend | Vercel |
| Database | MongoDB Atlas |
| Media Storage | Cloudinary |
| Payment Gateway | Razorpay |
StudyNotion/
├── frontend/
│
│── public/
│
│── src/
│ │
│ ├── assets/
│ │ Images
│ │ Icons
│ │
│ ├── components/
│ │ Reusable UI Components
│ │
│ ├── pages/
│ │ Application Pages
│ │
│ ├── services/
│ │ API Integration
│ │
│ ├── slices/
│ │ Redux Toolkit Slices
│ │
│ ├── utils/
│ │ Helper Functions
│ │
│ ├── App.jsx
│ └── main.jsx
│
├── Server/
│
│── config/
│
│── controllers/
│
│── middleware/
│
│── mail/
│
│── models/
│
│── routes/
│
│── utils/
│
│── server.js
│
└── README.md
The backend is organized using the MVC architecture.
Contains:
- MongoDB Connection
- Cloudinary Configuration
- Razorpay Configuration
Responsible for handling business logic.
Includes controllers for:
- Authentication
- Profile
- Course
- Category
- Section
- SubSection
- Payment
- Rating & Review
- Contact
- Admin
Database models include:
- User
- Profile
- OTP
- Course
- Category
- Section
- SubSection
- RatingAndReview
- CourseProgress
- Contact
REST APIs are grouped into:
- Auth Routes
- Profile Routes
- Course Routes
- Payment Routes
- Contact Routes
- Admin Routes
The frontend is built using reusable React components.
Major modules include:
- Authentication
- Home
- About
- Contact
- Catalog
- Course Details
- Student Dashboard
- Instructor Dashboard
- Admin Dashboard
- Settings
- Profile
- Cart
The platform is optimized for multiple screen sizes.
- Desktop
- Laptop
- Tablet
- Mobile
Responsive layouts are implemented using Tailwind CSS.
The application automatically sends email notifications for:
- OTP Verification
- Password Reset
- Password Updated
- Course Enrollment
- Successful Payment
- Contact Form Confirmation
All email templates are custom-designed using HTML and inline CSS.
StudyNotion uses MongoDB Atlas as its cloud-hosted NoSQL database. The application follows a relational approach using MongoDB references to efficiently connect users, courses, instructors, and learning progress.
The application consists of the following collections:
| Collection | Description |
|---|---|
| User | Stores authentication details and account information |
| Profile | Stores additional user information |
| OTP | Stores OTPs for email verification |
| Course | Stores complete course information |
| Category | Stores available course categories |
| Section | Stores course sections |
| SubSection | Stores lectures inside each section |
| RatingAndReview | Stores course ratings and reviews |
| CourseProgress | Tracks student learning progress |
| Contact | Stores Contact Us messages |
User
│
┌───────────────┼─────────────────┐
│ │ │
▼ ▼ ▼
Profile CourseProgress RatingAndReview
│
│
▼
Enrolled Courses
│
▼
Course
│
├──────────────► Category
│
├──────────────► Instructor (User)
│
▼
Section
│
▼
SubSection
Authentication is implemented using JWT (JSON Web Tokens) combined with encrypted passwords and protected backend routes.
User
│
Register
│
Generate OTP
│
Verify Email
│
Create Account
│
Login
│
JWT Generated
│
JWT Stored in Cookie / Client
│
Protected Routes Accessible
- User Registration
- Email OTP Verification
- Secure Login
- JWT Authentication
- Password Encryption using bcrypt
- Forgot Password
- Password Reset
- Protected Routes
- Role-Based Authorization
The platform supports three different user roles.
| Role | Permissions |
|---|---|
| Student | Purchase and learn courses |
| Instructor | Create and manage courses |
| Admin | Manage platform users, courses, and contact messages |
Authorization middleware ensures that users can only access features permitted for their role.
- Purchase Courses
- Access Enrolled Courses
- Watch Lectures
- Submit Reviews
- Update Profile
- Create Courses
- Edit Courses
- Delete Courses
- Publish Courses
- Manage Course Content
- View Dashboard
- Manage Users
- Block / Unblock Users
- Manage Courses
- View Contact Messages
- Delete Contact Messages
The backend follows REST architecture where each module is exposed through dedicated API routes.
POST /api/v1/auth/sendotp
POST /api/v1/auth/signup
POST /api/v1/auth/login
POST /api/v1/auth/reset-password-token
POST /api/v1/auth/reset-password
GET /api/v1/profile/getUserDetails
PUT /api/v1/profile/updateProfile
DELETE /api/v1/profile/deleteProfile
GET /api/v1/profile/getEnrolledCourses
GET /api/v1/profile/instructorDashboard
POST /api/v1/course/createCourse
PUT /api/v1/course/editCourse
DELETE /api/v1/course/deleteCourse
POST /api/v1/course/createSection
PUT /api/v1/course/updateSection
DELETE /api/v1/course/deleteSection
POST /api/v1/course/createSubSection
PUT /api/v1/course/updateSubSection
DELETE /api/v1/course/deleteSubSection
GET /api/v1/course/getFullCourseDetails
GET /api/v1/course/showAllCategories
GET /api/v1/course/getCategoryPageDetails
GET /api/v1/course/getInstructorCourses
GET /api/v1/course/getAllCourses
POST /api/v1/course/createRating
GET /api/v1/course/getAverageRating
GET /api/v1/course/getReviews
POST /api/v1/payment/capturePayment
POST /api/v1/payment/verifyPayment
POST /api/v1/payment/sendPaymentSuccessEmail
POST /api/v1/reach/contact
GET /api/v1/admin/dashboard
GET /api/v1/admin/users
PATCH /api/v1/admin/blockUser
PATCH /api/v1/admin/unblockUser
GET /api/v1/admin/courses
PATCH /api/v1/admin/publishCourse
PATCH /api/v1/admin/unpublishCourse
DELETE /api/v1/admin/deleteCourse
GET /api/v1/admin/contacts
DELETE /api/v1/admin/deleteContact
Note: API endpoints may vary slightly depending on future project updates.
Course purchases are processed securely using Razorpay.
Student
│
Clicks "Buy Now"
│
Backend Creates Razorpay Order
│
Order Returned to Frontend
│
Razorpay Checkout Opens
│
Student Completes Payment
│
Backend Verifies Signature
│
Student Enrolled Automatically
│
Course Progress Created
│
Payment Success Email Sent
Automated emails are sent for important user actions.
| Event | |
|---|---|
| User Registration | OTP Verification |
| Forgot Password | Password Reset Link |
| Password Updated | Confirmation Email |
| Course Purchase | Enrollment Confirmation |
| Successful Payment | Payment Receipt |
| Contact Form | Contact Confirmation |
Cloudinary is used for storing all uploaded media files.
Supported uploads include:
- Course Thumbnails
- Course Videos
- User Profile Images
Cloudinary helps optimize media delivery while reducing server storage requirements.
Below are screenshots showcasing different modules and features of the StudyNotion platform.
The landing page introduces the platform, highlights featured courses, and provides quick access to the main sections of the application.
Displays complete information about a course including instructor details, pricing, ratings, description, and enrollment options.
Students can review selected courses before securely completing the payment process.
Secure online payment gateway integrated using Razorpay.
Students can monitor enrolled courses, learning progress, and manage their account.
Provides instructors with insights into course performance, revenue, and enrolled students.
Manage all created courses from a centralized dashboard.
Provides administrators with a complete overview of platform statistics.
Administrators can view, block, and unblock users.
Administrators can create, update, and organize course categories.
View and manage all Contact Us submissions from users.
Browse courses category-wise for a better learning experience.
Users can send queries, feedback, or support requests directly from the platform.
Although the platform is fully functional, several enhancements can further improve the overall learning experience.
- 📜 Course Completion Certificates
- 📈 Advanced Dashboard Analytics
- 🔍 Advanced Course Search & Filters
- ❤️ Wishlist Functionality
- 🔔 In-App Notifications
- 🌍 Multi-Language Support
- 🌙 Dark / Light Theme Toggle
- 📱 Progressive Web App (PWA)
- 📊 Instructor Revenue Charts
- 📝 Student Notes
- 🎯 Personalized Learning Recommendations
The following features have been manually tested throughout development.
| Module | Status |
|---|---|
| User Authentication | ✅ |
| OTP Verification | ✅ |
| Password Reset | ✅ |
| Student Dashboard | ✅ |
| Instructor Dashboard | ✅ |
| Admin Dashboard | ✅ |
| Course Creation | ✅ |
| Course Editing | ✅ |
| Course Enrollment | ✅ |
| Payment Integration | ✅ |
| Cloudinary Upload | ✅ |
| Ratings & Reviews | ✅ |
| Contact Form | ✅ |
| Responsive Design | ✅ |
Contributions are always welcome.
If you'd like to improve this project:
- Fork the repository.
- Create a new feature branch.
- Commit your changes.
- Push to your branch.
- Open a Pull Request.
Please ensure your code follows clean coding practices and maintains the existing project structure.
This project is licensed under the MIT License.
You are free to use, modify, and distribute this project for educational and personal purposes.
This project was developed as an enhanced Learning Management System inspired by the original StudyNotion concept.
Special thanks to the creators and educators whose work inspired the foundation of this project.
This implementation extends the original idea with additional functionality, improved architecture, enhanced UI/UX, administrative features, and production-ready deployment.
Full Stack MERN Developer
Passionate about building scalable web applications with modern JavaScript technologies and continuously improving problem-solving skills through Data Structures & Algorithms.
- 💼 LinkedIn: https://www.linkedin.com/in/saurav-dev
- 💻 GitHub: https://github.com/saurav-09
- 📧 Email: saurav9906@gmail.com
If you found this project helpful, consider giving it a ⭐ on GitHub.
Your support motivates continued learning and the development of more open-source projects.