A production-oriented full-stack e-learning platform designed to connect students, instructors, and administrators through a secure, scalable, and interactive learning experience.
StackVerseHub is a full-stack Learning Management System (LMS) built to provide a complete digital learning environment for students, instructors, and administrators.
The platform supports the complete learning lifecycle — from authentication and course management to payments, live classes, real-time communication, notifications, and certificate generation.
The project focuses on implementing real-world backend architecture, role-based authorization, secure authentication, third-party integrations, and real-time application features.
- JWT-based authentication
- Google OAuth integration
- OTP-based verification
- Secure password handling
- Role-Based Access Control (RBAC)
- Protected API routes
- Separate workflows for Admin, Instructor, and Student
- Browse and explore courses
- Enroll in courses
- Secure course payments
- Access enrolled learning content
- Track learning progress
- Participate in live classes
- Real-time communication
- Receive notifications
- Generate course certificates
- Create and manage courses
- Manage course content
- Manage enrolled students
- Conduct live classes
- Communicate with students
- Monitor course activity
- Manage users
- Manage instructors
- Manage courses
- Monitor platform activity
- Manage platform-level operations
- Role-based administrative access
- Real-time chat using Socket.IO
- Real-time notifications
- Live classes using WebRTC
- Audio and video communication
- Screen sharing
- Razorpay payment gateway
- Secure payment workflow
- Course enrollment after successful payment
- React.js
- JavaScript (ES6+)
- Redux
- Tailwind CSS
- Axios
- Formik
- Yup
- Node.js
- Express.js
- REST APIs
- JWT
- Google OAuth
- OTP Authentication
- Nodemailer
- Socket.IO
- WebRTC
- MongoDB
- Mongoose
- AWS EC2
- Vercel
- Nginx
- PM2
- GitHub Actions
- Git & GitHub
- Postman
- Git
- GitHub
- Axios
┌──────────────────────┐
│ Client │
│ React.js │
└──────────┬───────────┘
│
│ HTTP / HTTPS
▼
┌──────────────────────┐
│ REST API │
│ Node.js + Express │
└──────────┬───────────┘
│
┌─────────────────┼─────────────────┐
│ │ │
▼ ▼ ▼
┌──────────┐ ┌────────────┐ ┌────────────┐
│ MongoDB │ │ Socket.IO │ │ WebRTC │
│ Database │ │ Real-Time │ │ Live Class │
└──────────┘ └────────────┘ └────────────┘
│
▼
┌────────────┐
│ Razorpay │
│ Payments │
└────────────┘
| Role | Responsibilities |
|---|---|
| Admin | Manage users, instructors, courses, and platform operations |
| Instructor | Create courses, manage content, conduct live classes |
| Student | Enroll in courses, learn, attend classes, communicate |
User
│
▼
Authentication
│
├── Student
│ ├── Browse Courses
│ ├── Purchase Course
│ ├── Learn
│ ├── Attend Live Class
│ └── Receive Certificate
│
├── Instructor
│ ├── Create Course
│ ├── Manage Content
│ ├── Manage Students
│ └── Conduct Live Class
│
└── Admin
├── Manage Users
├── Manage Courses
└── Monitor Platform
StackVerseHub implements multiple layers of application security:
- JWT authentication
- Protected API endpoints
- Role-based authorization
- Password hashing
- OTP verification
- OAuth authentication
- Environment-based configuration
- CORS configuration
- Server-side validation
- Secure payment verification
Security-sensitive credentials and environment variables are never committed to the repository.
stackversehub/
│
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ ├── pages/
│ │ ├── redux/
│ │ ├── services/
│ │ ├── hooks/
│ │ └── utils/
│ └── package.json
│
├── backend/
│ ├── controllers/
│ ├── models/
│ ├── routes/
│ ├── middleware/
│ ├── services/
│ ├── utils/
│ └── package.json
│
├── .gitignore
├── README.md
└── package.json
StackVerseHub follows a modular REST API architecture.
Example API modules:
/api/auth
/api/users
/api/courses
/api/admin
/api/instructors
/api/students
/api/payments
/api/chat
/api/live
The API layer is responsible for:
- Authentication
- Authorization
- Course management
- User management
- Enrollment
- Payments
- Communication
- Live-class functionality
StackVerseHub uses Socket.IO for real-time application functionality.
Client
│
│ WebSocket
▼
Socket.IO Server
│
├── Chat
├── Notifications
└── Real-Time Events
This allows users to receive events without continuously polling the server.
Live classroom functionality is implemented using WebRTC.
Supported functionality includes:
- Video communication
- Audio communication
- Screen sharing
- Real-time peer communication
The system combines WebRTC with signaling mechanisms to establish real-time connections between participants.
Student
│
▼
Select Course
│
▼
Create Payment Order
│
▼
Razorpay Checkout
│
▼
Payment Verification
│
▼
Enrollment
│
▼
Course Access
The frontend can be deployed using platforms such as:
- Vercel
The backend can be deployed using:
- AWS EC2
- PM2
- Nginx
Example production architecture:
Internet
│
▼
Nginx
│
▼
PM2
│
▼
Node.js / Express
│
▼
MongoDB
Create environment files for both frontend and backend.
Example:
PORT=5000
MONGO_URI=your_mongodb_connection
JWT_SECRET=your_jwt_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
RAZORPAY_KEY_ID=your_razorpay_key
RAZORPAY_KEY_SECRET=your_razorpay_secretNever commit
.envfiles or production credentials to GitHub.
git clone https://github.com/your-username/stackversehub.git
cd stackversehubnpm installIf frontend and backend are separate applications:
cd frontend
npm install
cd ../backend
npm installCreate the required .env files and add your configuration.
npm run devnpm run devThe application will then be available locally.
StackVerseHub was built with a focus on real-world full-stack development practices, including:
- Modular backend architecture
- RESTful API design
- Authentication and authorization
- Role-based access control
- Database modeling with Mongoose
- Third-party API integrations
- Real-time communication
- WebRTC-based functionality
- Payment integration
- Cloud deployment
- Reverse proxy configuration
- Process management with PM2
- Git-based development workflow
Planned improvements include:
- Automated testing
- API documentation with Swagger/OpenAPI
- Advanced monitoring and logging
- Redis caching
- Improved CI/CD pipeline
- Rate limiting
- Advanced analytics dashboard
- Recommendation system
- Improved scalability and performance
- Containerized deployment with Docker
Add application screenshots here to showcase the major parts of the platform.
docs/
└── screenshots/
├── landing-page.png
├── student-dashboard.png
├── instructor-dashboard.png
├── admin-dashboard.png
├── course-page.png
└── live-class.png
Building StackVerseHub provided practical experience in designing and developing a complete full-stack application.
Key areas of learning included:
- Designing REST APIs
- Implementing secure authentication
- Managing multiple user roles
- Building scalable backend services
- Working with MongoDB and Mongoose
- Integrating payment gateways
- Implementing real-time communication
- Understanding WebRTC
- Deploying applications to cloud infrastructure
- Debugging production and networking issues
MERN Stack Developer
Focused on building scalable web applications using modern JavaScript technologies and production-oriented development practices.
- GitHub: @your-username
- LinkedIn: Fathima Rinsha
This project is licensed under the MIT License.
Built as a full-stack engineering project to explore real-world application architecture, authentication, payments, real-time communication, and cloud deployment.