E-LEARNING WEBSITE

A
PROJECT REPORT

“Submitted In Partial Fulfillment of the Requirement for the Award of the

Degree of the Bachelor of Technology in Computer Science & Engineering
to
Rajasthan Technical University, Kota”

SUBMITTED BY

Chhote Lal Meena (22CS020)

Chandraprakash Saini (22CS018)

UNDER THE GUIDANCE OF

Dr. Nitesh Kaushik

Assistant Professor
(Computer Science & Engineering)

Department of Computer Science and Engineering

2025-26
 Acknowledgment

It is a great pleasure and privilege for us to present this project report entitled “E-Learning

Website”, submitted in partial fulfillment of the requirement for the award of the degree of

the Bachelor of Technology in Computer Science & Engineering to Rajasthan Technical

University, Kota.

We express our sincere thanks to Mr. Dharmendra Kumar, HOD, Computer Science &

Engineering of our college for his kind co-operation and valuable suggestions.

We are very much thankful to Dr. Nitesh Kaushik, Project Guide of our projects for

his encouragement and inspiration at every step to a great extent. This project would not

have been possible without the support and able guidance of our project Guide. He was

very supportive throughout the given period in sharing their knowledge and technical

aspects.

Finally, we express earnest and sincere thanks to the whole “Computer Science &

Engineering Department” for the generous help and co-operation in every possible

manner.

Name of Students: College ID

1. Chhote Lal Meena 22CS020
2. Chandraprakash Saini 22CS018

i
 Candidate’s Declaration

I hereby declare that the work, which is being presented in the project report, entitled

“E-Learning Website” submitted in partial fulfillment of the requirement for the

award of the degree of the Bachelor of Technology in Computer Science &

Engineering to Rajasthan Technical University, Kota is a record of my project carried

under the Guidance of Dr. Nitesh Kaushik, Assistant Professor, Anand

International College of Engineering, Jaipur.

Chhote Lal Meena

College ID.: 22CS020

Chandraprakash Saini

College ID.: 22CS018

Signature

Dr. Nitesh Kaushik

Assistant Professor,
Anand International College of Engineering, Jaipur

ii
 Abstract

In the present digital era, online education has become an essential mode
of learning, providing easy access to educational resources anytime and
anywhere. This project titled “E-Learning Website” has been developed to
provide a user-friendly, efficient, and secure online learning platform to
facilitate digital education for students and instructors.
The system is designed to allow users to register, log in, access courses,
view learning materials, and manage educational content efficiently. It
also provides features such as user authentication, role-based access,
course management, and content delivery. The platform aims to improve
the learning experience by offering a structured, interactive, and easily
accessible environment.
The project is developed using modern web development technologies
including HTML, CSS, JavaScript for the front end, and [Link] with
[Link] for the server-side development. MongoDB is used as the
database to store user information and course data. The system also
implements JWT authentication to enhance security and provide safe
access to the platform.
This E-Learning Website demonstrates how web technologies can be
effectively utilized to build a scalable and secure learning management
system. The project highlights the importance of digital learning
platforms in modern education and illustrates their role in improving
accessibility, flexibility, and effectiveness in the learning process.

iii
 List of Figurs

1. User Interface …..….………………………………….................................…........…........ 5

2. Modules …..…………………………………………..................................................…..... 6
3. Files Structure …..…………………………………….................................…........……..... 7
4. Server Routes …............................................…………………………………………….... 19

iv
 Contents

Acknowledgement ..................................................................................................... i

Candidate Declaration ................................................................................................ ii

Abstract ................................................................................................................... iii

List of Figures ............................................................................................................. iv

Chapter 1: Introduction .............................................................................................. 1

Chapter 2: Objective ..................................................................................................... 2

Chapter 3: Technologies Used ...................................................................................... 3

Chapter 4: System Architeeture & UI ........................................................................... 5

Chapter 5: System Modules …...................................................................................... 6

Chapter 6: Implementation …...................................................................................... 7

Chapter 7: Results & Discussion ……………………………………………………….... 20

Chapter 8: Advantages & Limitations …..……………………………………………..... 21

Chapter 9: Conclusion & Future Scope ….…………………………………………….... 22

Chapter 10: References ........................….…………………………………………….... 23

v
 CHAPTER 1 : INTRODUCTION

The advancement of information technology has brought significant changes in the

education sector. Traditional classroom learning is now supported and enhanced by
digital platforms that provide students with easy access to learning materials, online
courses, and interactive educational content. E-learning systems enable learners to study
anytime and from anywhere without geographical limitations.
An E-learning platform provides a centralized system where users can register, log in,
browse courses, and access learning resources. Such systems are useful for students as
well as institutions, as they reduce manual effort, increase automation, and improve
accessibility.
The E-Learning Website developed in this project is a web-based application designed to
provide users with online learning access through a secure and user-friendly interface.
The system allows users to register, sign in, view available courses, and manage personal
learning activities efficiently.
This website is developed using modern web development technologies including [Link]
for the frontend, [Link] and [Link] for the backend, and MongoDB for storing data.
JWT authentication ensures secure login and access control for registered users.
The purpose of this project is to create a digital learning environment that improves the
quality of education by providing an easy-to-use platform for students and learners. The
system not only makes learning more accessible but also reduces dependency on physical
infrastructure.

1
 CHAPTER 2: OBJECTIVES

The main objective of this project is to develop a dynamic and secure web-based E-learning
system that delivers online course content effectively while ensuring ease of use and
reliability.

2.1 Major Objectives

1. To provide an online platform for learning through web-based access.
2. To develop a secure login and registration system using authentication techniques.
3. To allow users to browse and access different courses conveniently.
4. To reduce manual educational processes through automation.
5. To provide a user-friendly and interactive interface for learners.

2.2 Technical Objectives

1. To implement frontend using [Link] for better user interaction.
2. To develop backend services using [Link] and [Link].
3. To store user and course data securely using MongoDB.
4. To apply JWT authentication for secure access management.
5. To integrate APIs to connect frontend and backend efficiently.
6. To deploy the application for online access.

2.3 Project Outcome Expectations

After completion, the system is expected to:
• Provide a reliable learning platform for students.
• Enable secure user authentication.
• Improve access to educational resources.
• Simplify course management.
• Support scalable development for future features.

2
 CHAPTER 3: TECHNOLOGIES USED

The E-Learning Website is developed using modern web technologies that ensure scalability,
performance, and security. The system follows the MERN architecture, integrating frontend,
backend, and database efficiently.

3.1 Frontend Technologies

3.1.1 [Link]
[Link] is used to build the user interface of the application. It allows component-based
development, making the website fast, reusable, and interactive.
Features:
Dynamic rendering of pages
Single Page Application (SPA) behavior
Reusable UI components
Faster performance using Virtual DOM

3.1.2 HTML5 & CSS3

Used for structuring and styling pages.
Features:
Responsive design
User-friendly layout
Cross-browser support

3.2 Backend Technologies

3.2.1 [Link]
[Link] is used to execute JavaScript on the server side. It provides a scalable backend
environment.
Features:
Non-blocking input/output
High performance
Server-side logic
API handling

3.2.2 [Link]
A lightweight framework for building APIs and routes.
Features:
Routing system
Middleware support
Secure API endpoints
Request handling

3
3.3 Database Technology
3.3.1 MongoDB
A NoSQL database used for storing user and course data.
Features:
Flexible schema
Fast access
High scalability
JSON-style document storage

3.4 Authentication & Security

3.4.1 JWT Authentication
JSON Web Token is used to authenticate users securely.
Features:
Secure login
Token-based authorization
Prevents unauthorized access

3.5 Development Tools

VS Code – Code editor
Git & GitHub – Version control
Browser Developer Tools – Debugging
MongoDB Compass – Database management
Postman – API testing

4
CHAPTER 4: SYSTEM ARCHITECTURE & USER INTERFACE

The system follows a three-layer architecture to separate presentation, logic, and data
handling for better performance and maintenance.

4.1 System Architecture Overview

4.1.1 Frontend Layer (Presentation Layer): This layer provides the user interface and handles
user interaction with the system.
4.1.2 Backend Layer (Business Logic Layer): This layer processes requests, manages business
logic, and controls data flow between frontend and database.
4.1.3 Database Layer (Data Layer): This layer stores user credentials, course information, and
learning data securely.

4.2 User Interface Screens

4.2.1 Home Page: Displays platform overview and available courses.
4.2.2 Registration Page: Allows new users to create an account.
4.2.3 Login Page: Authenticates users securely using credentials.
4.2.4 Course Page: Displays all available courses and learning materials.
4.2.5 Dashboard: Shows user profile and enrolled course details.
4.2.6 Admin Panel (Future Scope): Allows administrators to update courses and manage users.

5
 CHAPTER 5: SYSTEM MODULES

The system is divided into modules to ensure efficient working and easier maintenance.

5.1 User Authentication Module: Handles secure user login, registration, and session
management.
5.2 Course Management Module: Manages course creation, update, and display.
5.3 Student Module: Allows users to enroll, view materials, and track learning.
5.4 Admin Module: Controls course upload and user access management.
5.5 Database Module: Handles data storage, retrieval, and backup.
5.6 Dashboard Module: Displays user activity and performance.

6
 CHAPTER 6: IMPLEMENTATION

This chapter describes development tools and execution steps.

6.1 Development Environment

Frontend: [Link]
Backend: [Link], [Link]
Database: MongoDB
Editor: VS Code
Version Control: GitHub
Testing: Browser & API tools

6.2 Step-by-Step Implementation

Step 1: Project Setup: Initialize MERN stack and configure folder structure.
Step 2: Frontend Development: Design UI for registration, login, and course pages.
Step 3: Backend Development: Create REST APIs for user and course operations.
Step 4: Database Integration: Connect MongoDB and define schemas for data storage.
Step 5: Authentication Setup: Implement JWT for secure user login.
Step 6: Testing: Test each module for errors and performance.
Step 7: Deployment: Deploy website for public access.

Code and Files:

7
File name: [Link]

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { hydrateFromStorage } from "./redux/userSlice";

import AdminLayout from "./admin/AdminLayout";

import AdminDashboard from "./admin/pages/Dashboard";
import AdminUsers from "./admin/pages/Users";
import AdminCourses from "./admin/pages/Courses";
import AdminTeachers from "./admin/pages/Teachers";

import Home from "./pages/Home";

import About from "./pages/About";
import Courses from "./pages/Courses";
import CourseDetails from "./pages/CourseDetails";
import News from "./pages/News";
import Contact from "./pages/Contact";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Dashboard from "./pages/Dashboard";
import MyCourses from "./pages/MyCourses";

import Navbar from "./components/Navbar";

import Footer from "./components/Footer";
import ProtectedRoute from "./components/ProtectedRoute";

function App() {
const dispatch = useDispatch();

useEffect(() => {
dispatch(hydrateFromStorage());
}, [dispatch]);

8
<Route index element={<AdminDashboard />} />
<Route path="users" element={<AdminUsers />} />
<Route path="courses" element={<AdminCourses />} />
<Route path="teachers" element={<AdminTeachers />} />
</Route>
</Route>
{/* Public routes */}
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/courses" element={<Courses />} />
<Route path="/courses/:id" element={<CourseDetails />} />
<Route path="/news" element={<News />} />
<Route path="/contact" element={<Contact />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
{/* Student dashboard routes */}
<Route element={<ProtectedRoute roles={["student"]} />}>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/dashboard/my-courses" element={<MyCourses />} />
</Route>
</Routes>
<Footer />
</Router>
);
}
export default App;

File name: [Link]

import React from "react";

import ReactDOM from "react-dom/client";
import App from "./App";
import "./[Link]";
import { Provider } from "react-redux";
import { store } from "./redux/store";

9
File name: src/pages/[Link]

import { useState } from "react";

import { useDispatch, useSelector } from "react-redux";
import { loginUser } from "../redux/userSlice";
import { Link, useNavigate } from "react-router-dom";

export default function Login() {

const dispatch = useDispatch();
const navigate = useNavigate();
const { status, error } = useSelector((s) => [Link]);

const [form, setForm] = useState({

email: "",
password: "",
});

const handleChange = (e) => {

setForm({ ...form, [[Link]]: [Link] });
};

const handleSubmit = async (e) => {

[Link]();
try {
await dispatch(loginUser(form)).unwrap();
navigate("/dashboard"); // redirect after login
} catch (err) {
[Link]("Login failed:", err);
}
};

return (
<div className="min-h-screen flex items-center justify-center bg-gray-100 px-4">
<div className="bg-white shadow-lg rounded-lg p-8 w-full max-w-md">
<h2 className="text-2xl font-bold text-center text-blue-600 mb-6">
Welcome Back 👋
</h2>

10
label className="block text-gray-700 mb-1">Email</label>
<input
type="email"
name="email"
value={[Link]}
onChange={handleChange}
required
className="w-full border border-gray-300 px-3 py-2 rounded focus:outline-none focus:ring-
2 focus:ring-blue-500"
placeholder="Enter your email"
/>
</div>
<div>
<label className="block text-gray-700 mb-1">Password</label>
<input
type="password"
name="password"
value={[Link]}
onChange={handleChange}
required
className="w-full border border-gray-300 px-3 py-2 rounded focus:outline-none focus:ring-
2 focus:ring-blue-500"
placeholder="Enter your password"
/>
</div>
<button
type="submit"
disabled={status === "loading"}
className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition
disabled:opacity-50"
>
{status === "loading" ? "Logging in..." : "Login"}
</button>
</form>

11
File name: src/pages/[Link]

import { useState } from "react";

import { useDispatch, useSelector } from "react-redux";
import { registerUser } from "../redux/userSlice";
import { Link, useNavigate } from "react-router-dom";

export default function Register() {

const dispatch = useDispatch();
const navigate = useNavigate();
const { status, error } = useSelector((s) => [Link]);

const [form, setForm] = useState({

name: "",
email: "",
password: "",
});

const handleChange = (e) => {

setForm({ ...form, [[Link]]: [Link] });
};

const handleSubmit = async (e) => {

[Link]();
try {
await dispatch(registerUser(form)).unwrap();
navigate("/login"); // registration success -> login page
} catch (err) {
[Link]("Register failed:", err);
}
};

return (
<div className="min-h-screen flex items-center justify-center bg-gray-100 px-4">
<div className="bg-white shadow-lg rounded-lg p-8 w-full max-w-md">
<h2 className="text-2xl font-bold text-center text-blue-600 mb-6">
Create Account 🚀
</h2>

12
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-gray-700 mb-1">Name</label>
<input
type="text"
name="name"
value={[Link]}
onChange={handleChange}
required
className="w-full border border-gray-300 px-3 py-2 rounded focus:outline-none focus:ring-
2 focus:ring-blue-500"
placeholder="Enter your name"
/>
</div>
<div>
<label className="block text-gray-700 mb-1">Email</label>
<input
type="email"
name="email"
value={[Link]}
onChange={handleChange}
required
className="w-full border border-gray-300 px-3 py-2 rounded focus:outline-none focus:ring-
2 focus:ring-blue-500"
placeholder="Enter your email"
/>
</div>
<div>
<label className="block text-gray-700 mb-1">Password</label>
<input
type="password"
name="password"
value={[Link]}
onChange={handleChange}
required
/>

13
</button>
</form>
<p className="text-center text-sm text-gray-600 mt-4">
Already have an account?{" "}
<Link to="/login" className="text-blue-600 hover:underline">
Login here
</Link>
</p>
</div>
);
}

File name: src/pages/Redux/[Link]

import { configureStore } from "@reduxjs/toolkit";

import userReducer from "./userSlice";

export const store = configureStore({

reducer: { user: userReducer },
});

File name: src/redux/[Link]

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

import { api } from "../utils/api/client";

const saved = (() => {

try {
const raw = [Link]("auth");
return raw ? [Link](raw) : null;
} catch {
return null;
}
})();

14
const slice = createSlice({
name: "user",
initialState,
reducers: {
logout(state) {
[Link] = null;
[Link] = null;
[Link]("auth");
},
hydrateFromStorage(state) {
const raw = [Link]("auth");
if (raw) {
const { user, token } = [Link](raw);
[Link] = user;
[Link] = token;
}
},
},
extraReducers: (builder) => {
builder
// register
.addCase([Link], (s) => {
[Link] = "loading";
[Link] = null;
})
.addCase([Link], (s) => {
[Link] = "succeeded";
})
.addCase([Link], (s, a) => {
[Link] = "failed";
[Link] = [Link] || [Link];
})

export const { logout, hydrateFromStorage } = [Link];

export default [Link];

15
Backend Source Code:-
File name: Server/[Link]

const express = require("express");

const mongoose = require("mongoose");
const dotenv = require("dotenv");
const cors = require("cors");
const authRoutes = require("./routes/authRoutes");
const courseRoutes = require("./routes/courseRoutes");
const enrollRoutes = require("./routes/enrollRoutes");
const contentRoutes = require("./routes/contentRoutes");
const adminRoutes = require("./routes/adminRoutes");
const userRoutes = require("./routes/userRoutes");

[Link]();
const app = express();

// Middleware
[Link]([Link]());
[Link](cors());

// Routes
[Link]("/api/admin", adminRoutes);
[Link]("/api/auth", authRoutes);
[Link]("/api/users", userRoutes);
[Link]("/api/courses", courseRoutes);
[Link]("/api/courses", contentRoutes);
[Link]("/api/courses", enrollRoutes);

// Root
[Link]("/", (req, res) => {
[Link]("E-Learning API is running...");
});

16
File name: Server/routes/[Link]

const express = require("express");

const {
createTeacher,
getAllUsers,
deleteUser,
createCourse,
updateCourse,
deleteCourse,
getAllCourses,
updateTeacher,
deleteTeacher,
} = require("../controllers/adminController");
const {
authMiddleware,
authorizeRoles,
} = require("../middleware/authMiddleware");
const User = require("../models/user");

const router = [Link]();

// Only admin can access

[Link](
"/teachers",
authMiddleware,
authorizeRoles("admin"),
async (req, res) => {
try {
const teachers = await [Link]({ role: "teacher" });
[Link](teachers);
} catch (err) {
[Link](500).json({ msg: "Server error" });
}
}
);
17
File name: Server/models/[Link]

const mongoose = require("mongoose");

const courseSchema = new [Link](

{
title: {
type: String,
required: [true, "Course title is required"],
},
description: {
type: String,
required: [true, "Course description is required"],
},
price: {
type: Number,
required: [true, "Course price is required"],
default: 0,
},
content: [
{
title: String,
type: {
type: String,
enum: ["video", "pdf", "text"],
default: "video",
},
url: String,
},
],
teacher: {
type: [Link],
ref: "User",
required: true,
}
[Link] = [Link]("Course", courseSchema);

18
19
 CHAPTER 7: RESULTS AND DISCUSSION

This chapter explains the results obtained after developing and testing the E-Learning
Website.

7.1 System Testing

The system was tested using different inputs and user scenarios to verify all features.
The following testing methods were applied:
1. Login & Registration Testing
2. Verified correct validation and secure authentication.
3. Course Management Testing
4. Confirmed correct display of courses and content.
5. Database Testing
6. Checked data insertion and retrieval from MongoDB.
7. Navigation Testing
8. Tested smooth page transitions and responsiveness.
9. Security Testing
10. Validated JWT authentication and session control.

7.2 Sample Results

Feature Tested Test Case Results
Registration New user signup Success
Login Valid credentials Success
Course View Open course page Displayed
Dashboard User profile load Success
Database Store user data Successful
Authentication Token generation Secure

7.3 Discussion
1. User Experience: The interface is simple and responsive.
2. Performance: The system loads pages quickly and handles multiple users.
3. Security: JWT provides safe authentication.
4. Reliability: Data is stored consistently in MongoDB.
5. Limitations Noted: No payment gateway and no live video integration.

20
 CHAPTER 8: ADVANTAGES AND LIMITATIONS

8.1 Advantages
1. Web-based learning access from anywhere.
2. Secure authentication using JWT.
3. Easy course browsing and usage.
4. Reduction of paperwork.
5. Flexible learning environment.
6. Scalable system design.
7. Centralized data management.

8.2 Limitations
1. Internet connection is required.
2. No live classroom system.
3. No payment system included.
4. No mobile application (web only).
5. Admin role not fully automated.

21
 CHAPTER 9: CONCLUSION AND FUTURE SCOPE

9.1 Conclusion
The project E-Learning Website has been successfully designed and implemented.
It provides a digital platform for online education using modern web technologies.
The system ensures:
Secure user authentication
Effective course management
Easy usage for students
Reliable data storage
Scalable architecture
This project fulfills the objective of providing an online education portal.

9.2 Future Scope

The system can be enhanced with:
1. Live video classes
2. Mobile application
3. Online test and quiz system
4. Payment gateway integration
5. Certificates generation
6. AI-based course recommendation
7. Chat and discussion system
8. Attendance tracking system

22
 CHAPTER 10: REFERENCES

1. [Link] Official Documentation

[Link]

2. [Link] Documentation
[Link]

3. [Link] Framework

[Link]
4. MongoDB Documentation

[Link]

5. JWT Authentication Guide

[Link]
6. Mozilla Web Docs

[Link]

7. GitHub Developer Guide

[Link]

8. REST API Tutorials

[Link]

23