A Full Stack Online Learning Platform built with the MERN stack, enabling instructors to create and manage courses, and learners to access quality education from anywhere.
StudyHub is a fully functional ed-tech platform that enables instructors to create, manage, and deliver courses, and allows students to browse, enroll, and track their learning journey. The platform is built using the MERN stack (MongoDB, Express, React, Node.js) and aims to provide:
- A seamless and interactive learning experience for students, making education more accessible and engaging.
- A platform for instructors to showcase their expertise and connect with learners across the globe.
In the following sections, we will cover the technical details of the platform, including:
- System Architecture: High-level overview of the platform's components.
- Front-end: Description of the front-end architecture, UI design, features, frameworks, and tools.
- Back-end: Description of the back-end architecture, features, frameworks, libraries, tools, data models, and database schema.
- API Design: List of API endpoints, their functionalities, and sample requests and responses.
- Deployment: Overview of the deployment process, hosting environment, and infrastructure.
- Testing: Testing process, types, frameworks, and tools used.
- Future Enhancements: Potential future improvements to the platform.
StudyHub follows a client-server architecture, consisting of the following components:
The platform's frontend is built using React.js, providing a dynamic and responsive user interface. It communicates with the back end via RESTful APIs to handle user actions such as course browsing and enrollment.
Built with Node.js and Express.js, the back end serves APIs for functionalities such as user authentication, course management, and content delivery. The server logic handles the processing and storing of course data and user information.
MongoDB stores unstructured and semi-structured data, including course content (videos, PDFs, images) and user data. Its flexibility allows for easy scalability and efficient management of dynamic content.
Here is a high-level diagram that illustrates the architecture of the StudyHub ed-tech platform:
- Instructor Registration/Login
- Course creation with title, description, and video content
- Video uploads using Cloudinary
- Dashboard to manage courses and view enrolled students
- Student Registration/Login
- Browse and enroll in courses
- Stream course videos
- View enrolled courses and track progress
- JWT-based authentication
- Role-based access control (Instructor & Student)
- Responsive and clean UI using Tailwind CSS
- Modular and scalable codebase
| Layer | Technology |
|---|---|
| Frontend | React.js, Redux Toolkit, Tailwind CSS, Axios |
| Backend | Node.js, Express.js, Mongoose |
| Database | MongoDB Atlas (Cloud-hosted NoSQL DB) |
| Authentication | JWT, bcrypt.js, Google OAuth 2.0 |
| Cloud Storage | Cloudinary |
| Payments | Razorpay |
| Email Service | Nodemailer with SMTP (e.g., Gmail) |
| Dev Tools | Postman, VS Code, GitHub, ESLint, Prettier |
| Environment Config | dotenv |
| Build & Deploy | Vite (Frontend), Vercel (Frontend Hosting), Vercel (Backend Hosting) |
StudyHub/
├── Client/ # Frontend React app
│ ├── .env # Frontend environment variables
│ ├── index.html # Main HTML file
│ ├── package.json # Frontend dependencies and scripts
│ ├── vite.config.js # Vite config for frontend build
│ ├── public/ # Static assets
│ └── src/ # Source code
│ ├── App.jsx # App root component
│ ├── main.jsx # Entry point
│ ├── index.css # Global styles
│ ├── assets/ # Images, icons, banners, logos
│ ├── components/ # Reusable UI components
│ │ ├── Authentication/ # Login, signup, Google button, etc.
│ │ ├── Common/ # Shared UI elements (Navbar, Footer, etc.)
│ │ ├── Core/ # Course-related views and logic
│ │ ├── Dashboard/ # Student & Instructor dashboards
│ │ └── Home/ # Homepage sections
│ ├── data/ # JSON/static mock data
│ ├── pages/ # Route-based pages (Home, Login, Signup, etc.)
│ ├── redux/ # Redux store and feature slices
│ ├── services/ # API connectors and operations
│ └── utils/ # Utility functions
│
├── Server/ # Backend Express app
│ ├── .env # Backend environment variables
│ ├── server.js # Server entry point
│ ├── package.json # Backend dependencies and scripts
│ ├── Configurations/ # DB, Cloudinary, Razorpay setup
│ ├── Controllers/ # API logic and route handlers
│ ├── Extra/ # File upload handling, additional logic
│ ├── Middlewares/ # Custom middleware
│ │ ├── Authentication/ # JWT auth middleware
│ │ └── Authorization/ # Role-based access control
│ ├── Models/ # MongoDB models/schemas
│ ├── Routes/ # Route definitions
│ ├── Templates/ # Email templates and assets
│ │ ├── Controllers/ # Mail preview images
│ │ └── Mails/ # Email HTML/JS templates
│ └── utils/ # Utility functions (e.g., fileUploader, mailSender)
│
├── LICENSE # License file
└── README.md # Main documentation file
git clone https://github.com/aayanofficial5/StudyHub.git
cd StudyHub# For frontend
cd Client
npm install
# For backend
cd Server
npm installCreate a .env file inside the /Server folder with the following configuration:
# Server Configuration
PORT=4000
BACKEND_URL=<your_backend_url_here>/api/v1 # (e.g., http://localhost:4000/api/v1)
FRONTEND_URL=<your_frontend_url_here> # (e.g., http://localhost:5173)
DATABASE_URL=<your_database_connection_url_here>
# JWT Secret for Authentication
JWT_SECRET=<your_jwt_secret_here>
# Cloud Storage (e.g., Cloudinary) Configuration
CLOUD_NAME=<your_cloud_name_here>
API_KEY=<your_api_key_here>
API_SECRET=<your_api_secret_here>
FOLDER_NAME=<your_folder_name_here>
# Mail Service Configuration
MAIL_HOST=<your_mail_host_here>
MAIL_USER=<your_mail_user_here>
MAIL_PASS=<your_mail_password_here>
# Razorpay Payment Gateway Configuration
RAZORPAY_ID=<your_razorpay_id_here>
RAZORPAY_SECRET=<your_razorpay_secret_here>
# Google Signup/Login Configurations
GOOGLE_CLIENT_ID = <your_google_client_id>
GOOGLE_CLIENT_SECRET = <your_google_client_secret>Create a .env file inside the /Client folder with the following configuration:
# Vite API URL (to connect with the backend API)
VITE_API_URL=<your_backend_url_here>/api/v1 # (e.g., http://localhost:4000/api/v1)
# Razorpay Payment Gateway Configuration
VITE_RAZORPAY_ID=<your_razorpay_id_here>
# Google Signup/Login Configurations
VITE_GOOGLE_CLIENT_ID = <your_google_client_id># Start backend in a terminal with the following commands:
cd Server
npm run dev
# Start frontend in another terminal with the following commands:
cd Client
npm run dev- Chat or forum feature for learners
- Admin dashboard for platform management
Contributions, issues and feature requests are welcome!
Feel free to check the issues page.
Developed with ❤️ by Aayan Patel
📬 Email: aayanofficial5@gmail.com
This project is licensed under the MIT License.