STUDY NOTION

A Major Project-I Report

Submitted in Partial fulfillment for the award of
Bachelor of Technology in Department of Information Technology
Submitted to
RAJIV GANDHI PROUDYOGIKI VISHWAVIDYALAYA
BHOPAL (M.P)

MAJOR PROJECT-I REPORT

Submitted by
Piyush Mahajan[0103IT211129]
Ritesh Sharma[0103IT211156]
Abhimat Pandey[0103IT211008]

Under the supervision of

Prof. Devashri Deoskar
Assistant Professor

Department of Information Technology

Lakshmi Narain College of Technology, Bhopal (M.P.)
Session 2024-25
LAKSHMI NARAIN COLLEGE OF TECHNOLOGY, BHOPAL
DEPARTMENT OF INFORMATION TECHNOLOGY

CERTIFICATE

This is to certify that the work embodied in this project work entitled “Study
Notion” has been satisfactorily completed by the Piyush Mahajan
(0103IT211129), Ritesh Sharma (0103IT211156) , Abhimat Pandey
(0103IT211008). It is a Bonafide piece of work, carried out under the guidance in
Department of Information Technology, Lakshmi Narain College of
Technology, Bhopal for the partial fulfillment of the Bachelor of Technology
during the academic year 2024-2025.

Guide By Approved By

Prof. Devashri Deoskar Dr. Sushil Kumar

Assistant Professor Professor & Head

i
LAKSHMI NARAIN COLLEGE OF TECHNOLOGY, BHOPAL
DEPARTMENT OF INFORMATION TECHNOLOGY

ACKNOWLEDGEMENT

We express our deep sense of gratitude to Prof. Devashri Deoskar

department of IT, L.N.C.T., Bhopal. Whose kindness valuable guidance and
timely help encouraged me to complete this project.

A special thank goes to Dr. Sushil Kumar (HOD) who helped me in

completing this project work. He exchanged his interesting ideas & thoughts
which made this project work successful.

We would also thank our institution and all the faculty members without
whom this project work would have been a distant reality.

(Signature) (Signature)
Piyush Mahajan[0103IT211129] Ritesh Sharma[0103IT211156]

(Signature)
Abhimat Pandey[0103IT211008]

ii
 INDEX

S.NO. TOPICS PAGES

1. Introduction 1

2. Literature Survey 4

3. Major objective & scope of project 6

4. Problem Analysis and requirement specification 8

5. Hardware/Software platform environment 12

6. ER Diagram/Flow Diagram 14

7. Software Specification 18

8. Snapshots of Web Application 22

9. Coding 31

10. Conclusion 54

11. References 55

iii
CHAPTER 1

INTRODUCTION

1.1 Project Introduction

Study Notion is a fully functional ed-tech platform that enables users to create, consume, and
rate educational content. It is a versatile and intuitive ed-tech platform that is designed to
provide an immersive learning experience to students and a platform for instructors to showcase
their expertise. In the following sections, we will delve into the technical details of the platform,
which will provide a comprehensive understanding of the platform's features and
functionalities.
The platform is built using the MERN stack, which includes ReactJS, NodeJS, MongoDB, and
Express JS.
Study Notion 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.

1.2. Problem Domain

The problem domain of an Ed Tech (Educational Technology) platform is broad and
encompasses various aspects of education and technology integration. The primary goal of an
Ed Tech platform is to leverage technology to enhance and facilitate the learning experience.
Here are some key components within the problem domain of an Ed Tech platform:

1.2.1 Learning Management System (LMS)

LMS is a fundamental component that manages and delivers educational content. It includes
features such as course creation, content delivery, assessment, and tracking of student progress.

1
1.2.2 Content Creation and Delivery
Ed Tech platforms focus on creating and delivering educational content in various formats,
including text, video, audio, and interactive multimedia. This involves ensuring content is
engaging, accessible, and aligns with educational objectives.

1.2.3 Adaptive Learning

Some Ed Tech platforms incorporate adaptive learning technologies that personalize the
learning experience based on individual student progress, strengths,
and weaknesses. This helps in catering to diverse learning styles and paces.

1.2.4 Assessment and Analytics

Ed Tech platforms often include tools for creating and conducting assessments, as well as
analytics to track student performance. These analytics can provide valuable insights for
educators to tailor their teaching methods and interventions.

1.2.5 Collaborative Learning

Facilitating collaboration among students and educators is a crucial aspect. This involves
features like discussion forums, group projects, and real-time collaboration tools that enhance
the interactive and social aspects of learning.

1.2.6 Gamification
Some platforms incorporate gamification elements to make learning more engaging. This
includes the use of game-like elements such as points, badges, and leaderboards to motivate and
reward students.

1.2.7 Teacher Support and Professional Development

Ed Tech platforms may offer resources and tools to support teachers in their instructional roles.
This could include professional development courses, lesson planning tools, and resources for
staying updated on educational best practices.

2
1.2.8 Accessibility and Inclusivity
Ensuring that the platform is accessible to all learners, including those with diverse abilities and
backgrounds, is a key consideration. This involves designing interfaces and content that are
inclusive and accommodate various learning needs.

1.2.9 Data Security and Privacy

Given the sensitive nature of educational data, Ed Tech platforms need robust security measures
to protect student and teacher information. Compliance with data privacy regulations is crucial.

1.2.10 Integration with Other Systems

Many Ed Tech platforms need to integrate with existing educational systems, such as student
information systems, to streamline data flow and ensure a cohesive educational experience.
Understanding and addressing these aspects within the problem domain is essential for the
development and success of an Ed Tech platform. The ultimate aim is to enhance the teaching
and learning experience through effective and innovative use of technology in education.

3
CHAPTER 2

LITERATURE SURVEY

EdTech allows students to learn from virtually anywhere. There are no longer restrictions
keeping students and teachers in the classroom or even in the same geographic location as their
instructors.

EdTech gives teachers the flexibility to create different learning plans for each student if the
course is asynchronous (self-paced) rather than synchronous (taught in real time).

EdTech resources expand instructors’ options for engaging students. They might give students
the ability to visit new locations through videos or play educational games, or they could even
use augmented reality (AR) or virtual reality (VR) to enhance a lesson.

EdTech resources expand instructors’ options for engaging students. They might give students
the ability to visit new locations through videos or play educational games, or they could even
use augmented reality (AR) or virtual reality (VR) to enhance a lesson.

When teaching resources are exclusively online, students and instructors can easily collaborate
on assignments during class and after school. Platforms like social media, collaborative wiki
pages, and interactive whiteboards also allow students to work together easily and virtually.

Before EdTech changed how students learn, getting in touch with a teacher outside of school
was difficult. Now, with messaging apps and virtual meetings, a student may be able to get real-
time help when they need it — if the instructor is available, of course.

4
Edtech opens up opportunities for educators to craft personalized learning plans for each of their
students. This approach aims to customize learning based on a student’s strengths, skills and
interests. Video content tools help students learn at their own pace and because students can
pause and rewind lectures, these videos can help students fully grasp lessons.

Educational technology has the potential to make everything — from the way teachers
communicate with their students to how students behave — a little easier. There are now apps
that help send parents and students reminders about projects or homework assignments, as well
as tools that allow students to self- monitor classroom noise levels.

According to research, 74% of college students desire mobile accessibility to their course
materials. Thus, one of the primary goals of any top educational app development firm is to
foster increased student engagement.

The importance of educational technology lies in its ability to cater to the unique needs of
individual learners. Custom Edu Tech solutions use data- driven algorithms, AI, and ML
techniques. These technologies help construct customized learning trajectories. These
technologies consider each student’s strengths, weaknesses, and preferences.

EdTech app development empowers teachers in its own way. It provides

education software development tools that streamline various aspects of their work .These tools
can automate administrative tasks, offer insights into student performance, and more. They
enable teachers to focus more on teaching and nurturing their students.

One of the biggest advantages of using Edtech is the reduced amount of paper used in the
classroom. Millions of trees are cut down each year to provide paper to schools. If more
educational facilities used technology, the number of trees that would have to be cut down
would be massively reduced.

5
CHAPTER 3

MAJOR OBJECTIVE & SCOPE OF PROJECT

3.1 Objective
The major objective of our EdTech project is to revolutionize the way education is delivered and
accessed, making it more accessible, engaging, and effective for learners of all ages and
backgrounds. In today's fast-paced, digital world, traditional educational methods are no longer
sufficient in meeting the diverse and evolving needs of students. Our project aims to bridge the
gap by harnessing the power of technology to enhance the educational experience.

3.1.1 Increase access to quality education

The first key objective of our EdTech project is to increase access to quality education.
Education should not be limited by geographical boundaries, economic disparities, or physical
constraints. Through our platform, we will provide a wide range of courses and learning
resources that can be accessed by anyone with an internet connection, allowing individuals from
remote areas and underserved communities to access high-quality education. This inclusivity
will empower individuals who may have been previously left behind to acquire knowledge and
skills that can improve their lives and communities.

3.1.2 Enhance education quality

Secondly, our project seeks to enhance the engagement and motivation of learners. Traditional
classrooms often struggle to keep students engaged and interested in the learning process.
Through the use of interactive multimedia, gamification, and personalized learning pathways,
our EdTech platform will provide a more dynamic and enjoyable learning experience. By
tailoring content to individual needs and preferences, we aim to boost students' motivation and
retention, ultimately leading to better educational outcomes.

6
3.1.3 Enhancing Reachability
Another key objective is to support educators in their teaching endeavors. We recognize the
vital role that teachers and instructors play in the education system. Our EdTech project will
provide a wealth of resources, tools, and training opportunities for educators, helping them to
adapt to the changing landscape of education and become more effective in their roles. By
empowering educators with the latest teaching methodologies and technology tools, we aim to
create a symbiotic relationship that benefits both students and teachers.

3.1.4 Anytime and Anywhere Accessible

Our EdTech project aims to foster lifelong learning. The world is evolving at an unprecedented
pace, and individuals need to adapt and acquire new skills throughout their lives. Our platform
will offer a wide range of courses and learning resources for all age groups, from early
childhood education to adult professional development. We want to instill a culture of
continuous learning and skill development, enabling individuals to thrive in an ever-changing
world.

3.1.5 Diverse Content

In addition to these major objectives, the scope of our EdTech project is extensive and
encompasses various dimensions. One aspect of the scope involves content diversity and
breadth. Our platform will cover a wide array of subjects, from traditional academic disciplines
like mathematics and science to practical skills such as coding, entrepreneurship, and vocational
training. We aim to provide a holistic educational experience that caters to the diverse interests
and needs of our learners.

7
3.2 Project Scope

3.2.1 Increased Scalability

Another dimension of the project's scope is scalability. We envision our EdTech platform
growing to accommodate millions of users worldwide. This scalability will involve robust
infrastructure, cloud-based solutions, and a user-friendly interface to ensure a seamless
experience for all users. Additionally, we plan to offer the platform in multiple languages,
making it accessible to learners from various linguistic backgrounds.

3.2.2 Socializing Activities

Interactivity is another essential aspect of our project's scope. We intend to create an engaging
learning environment that encourages interaction among learners, as well as between learners
and educators. Features such as discussion forums, live webinars, and peer-to-peer collaboration
will be integrated to facilitate meaningful interactions, further enhancing the learning
experience.

3.2.3 Machine learning-powered recommendations

Using machine learning algorithms to provide personalized course recommendations can
improve student engagement and satisfaction. This would be a medium to high- priority
enhancement.

3.2.4 Personalized learning paths

Creating personalized learning paths for each student based on their interests and learning style
can increase student satisfaction and success. This would be a high- priority enhancement.
Moreover, accessibility and inclusivity are paramount within our project's scope. We aim to
design our platform with universal design principles, ensuring that individuals with disabilities
can access and benefit from the educational content. This will involve features such as screen
readers, subtitles, and alternative content formats.

8
3.2.5 Virtual Reality/Augmented Reality
Our EdTech project will explore emerging technologies such as virtual reality (VR) and
augmented reality (AR) to create immersive and interactive learning experiences. By embracing
these innovative technologies, we intend to push the boundaries of traditional education and
provide a unique and memorable learning journey.

9
CHAPTER 4

PROBLEM ANALYSIS AND REQUIREMENT SPECIFICATION

A thorough problem analysis is essential for any EdTech (Education Technology) project, as it
lays the foundation for understanding the challenges within the education sector that the project
aims to address. In this 500-word paragraph, we will delve into the key problems and issues that
our EdTech project seeks to tackle.

One of the central problems our EdTech project aims to address is the lack of access to quality
education. This issue is particularly prevalent in remote and underserved areas, where traditional
educational institutions are scarce or of low quality. As the world becomes increasingly digital,
it is essential to bridge this educational divide. The lack of access to quality education
perpetuates inequality, limiting the opportunities available to those who are geographically
isolated or economically disadvantaged.

Additionally, the traditional education system often struggles to keep students engaged and
motivated. The problem of disengagement is multifaceted and is exacerbated by outdated
teaching methods and a one-size-fits-all approach to education. Students have diverse learning
styles and interests, and the conventional classroom setting may not cater to their individual
needs. This leads to a decline in academic performance, decreased interest in learning, and even
dropouts, hindering the development of a skilled and knowledgeable workforce.

Moreover, educators face their own set of challenges within the current education system.
Teachers are often burdened with excessive administrative tasks, large class sizes, and limited
resources, leaving them with little time to focus on personalized instruction and innovative
teaching methods. The problem of teacher burnout is prevalent, with many educators feeling
overwhelmed and undervalued.
10
The pace of change in the modern world also presents a problem. With rapid technological
advancements and evolving job markets, individuals need to acquire new skills continuously.
The traditional education system often falls short in preparing learners for this dynamic
environment. As a result, the problem of skill obsolescence arises, leaving individuals
unprepared for the demands of the workforce and hindering their personal and professional
growth.

Additionally, students with disabilities face barriers to accessing education, resulting in

exclusion from the learning process. Traditional educational resources and methods often lack
the necessary accommodations for students with special needs. This problem perpetuates
inequality and limits the potential of these individuals to contribute to society.

Another problem that our EdTech project aims to address is the lack of personalized learning
experiences. Traditional classrooms struggle to tailor instruction to the unique needs and
interests of each student. This one-size-fits-all approach leaves many learners underserved, as
they may not receive the support they need to excel. Personalization is key to unlocking the full
potential of every learner.

The lack of data-driven insights within the education system is a significant problem. Educators
and institutions often lack the tools and resources to collect and analyze data on student
performance and engagement. This results in a lack of evidence-based decision-making and
hinders the ability to identify and address areas of improvement in the educational process.

Emerging technologies such as virtual reality (VR) and augmented reality (AR) remain largely
untapped in the education sector. These technologies have the potential to create immersive and
interactive learning experiences, but the problem lies in the slow adoption of these innovations
within traditional classrooms, limiting the possibilities for engaging and effective teaching.

11
CHAPTER 5

HARDWARE PLATFORM REQUIREMENT

12
CHAPTER 6

ER DIAGRAM/FLOW DIAGRAM

6.1 ER Diagram for Study Notion

13
6.2 Architecture Diagram

Here is a high-level diagram that illustrates the architecture of the StudyNotion ed-
tech platform:

6.3 Front-End

The front end is part of the platform that the user interacts with. It's like the "face"
of the platform that the user sees and interacts with. The front end of Study Notion
is designed using a tool called Figma, which is a popular design tool that allows for
the creation of clean and minimal user interfaces.

The front end of StudyNotion has all the necessary pages that an ed-tech platform
should have. Some of these pages are:-

6.3.1 For Students

Homepage: This page will have a brief introduction to the platform, as well as links
to the course list and user details.

Course List: This page will have a list of all the courses available on the
14
platform, along with their descriptions and ratings.

Wishlist: This page will display all the courses that a student has added to their
Wishlist.

Cart Checkout: This page will allow the user to complete the course purchase.

Course Content: This page will have the course content for a particular course,
including videos, and other related material.

User Details: This page will have details about the student's account, including their
name, email, and other relevant information.

User Edit Details: This page will allow the student to edit their account details.

6.3.2 For Instructors

Dashboard: This page will have an overview of the instructor's courses, as well
as the ratings and feedback for each course.

Insights: This page will have detailed insights into the instructor's courses,
including the number of views, clicks, and other relevant metrics.

Course Management Pages: These pages will allow the instructor to create,
update, and delete courses, as well as manage the course content and pricing.

View and Edit Profile Details: These pages will allow the instructor to view and
edit their account details.

15
6.3.3 For Admins(This is for future scope)

Dashboard: This page will have an overview of the platform's courses,

instructors, and students.

Insights: This page will have detailed insights into the platform's metrics,
including the number of registered users, courses, and revenue.

Instructor Management: This page will allow the admin to manage the
platform's instructors, including their account details, courses, and ratings.

Other Relevant Pages: The admin will also have access to other relevant pages,
such as user management and course management pages.
To build the front end, we use frameworks and libraries such as ReactJS, which is a
popular JavaScript library for building user interfaces. We also use CSS and
Tailwind, which are styling frameworks that help make the user interface look good
and responsive. Additionally, we use some npm packages to add extra functionality
to the front end. To manage the state of the application, we use Redux, which is a
popular state management library for React. Finally, we use a development
environment called VS Code, which is a popular code editor, to develop the front
end.

16
6.4 Back-End

6.4.1 Description of the Back-end Architecture:

Study Notion uses a monolithic architecture, with the backend built using Node.js
and Express.js, and MongoDB as the primary database. Monolithic architecture
refers to a design approach where all the modules of the application are combined
into a single large program, with a single codebase, to enable better control,
security, and performance.

Node.js is a popular JavaScript runtime that allows us to run JavaScript code

outside of the browser. Express.js is a web application framework that simplifies
the process of building web applications in Node.js. MongoDB is a popular NoSQL
database that allows for flexible data storage and retrieval, making it a suitable
choice for complex applications like StudyNotion

6.4.2 Features and Functionalities of the Back-end

The back end of StudyNotion provides a range of features and functionalities,

including:

User authentication and authorization: Students and instructors can sign up and log
in to the platform using their email addresses and password. The platform also
supports OTP (One-Time Password) verification and forgot password functionality
for added security.

Course management: Instructors can create, read, update, and delete courses, as
well as manage course content and media. Students can view and rate courses.
Payment Integration: Students will purchase and enrol on courses by completing
the checkout flow that is followed by Razorpay integration for payment handling.

17
CHAPTER 7

SOFTWARE SPECIFICATION

7.1 Technology used

Before start creating our app, there are a few things that we have to take into
consideration.

7.1.1 MERN Stack

MERN stack, React can become a companion to the other technologies for
developing JavaScript and JSON-oriented applications. Figure 1 below illustrates
the architecture of the MERN stack technology:

18
As illustrated, the MERN stack is constructed based on the well-known 3-tier
architecture. which confirms that the MERN stack is full-stack application
development. The MERN stack consists of three components: display layer
powered by React, application layer with NodeJS and Express, and database
tier provided by MongoDB.

7.1.2 MongoDB

MongoDB is a cross-platform, open-source, NoSQL database that is mainly used

for scalable large-volume data applications and tasks that do not function well in a
relational database. It utilizes a document storage format known as BSON (Binary
encoded JavaScript Object Notation). It is a non-relational database management
system created by Dwight Merriman ,Eliot Horowitz, and Kevin Ryan and became
popular in the mid-2000s. MongoDB’s design is based on collections and
documents, as illustrated in Figure 2 below, which replace the usage of tables and
rows in conventional relational databases.

7.1.3 Express JS

Express.js is a routing and middleware framework for managing the many routing
options for a website. It operates between the request and response
cycles. Middleware is invoked after the server receives the request and before the
controller actions transmit the response. One or more pieces of middleware are
executed to perform particular tasks, such as authorizing requests or parsing request
content. Express applications are composed of a sequence of middleware function
calls. Typically, the first middleware executed to process the request initiates the
task pipeline. The initial middleware can either complete the request and provide it
to the users or call the subsequent middleware to continue the request.

19
The same approach will be continued until the pipeline's last middleware takes the
result of the preceding middleware as input.

7.1.4 React
React, representing the letter 'R' in the MERN stack, focuses on creating the View
Layer, which is well-known for all visible parts of the page of an application. React
is a multi-purposed, open-source JavaScript library used for building user interfaces
based on UI components.

Since React was established to cope with sophisticated, large-scale user interfaces
combined with real-time dynamic data and data binding, it has been steadily
improving its single-page application development and frontend utilities for
programmers of all levels.

7.1.5 Node JS

NodeJS is an open-source, cross-platform JavaScript runtime environment designed

for constructing scalable applications. NodeJS is independently built on top of
Google Chrome's V8 runtime engine, which is well-known for working effectively
outside of a browser. By utilizing an event-driven design and operating on a single-
thread event loop, NodeJS allows asynchronous and non-blocking I/O optimization
to enhance web application performance and scalability, as shown in Figure 5
below. Therefore, it provides an alternative approach for developers to wait and
fulfil requests for developing lightweight and real-time applications.

20
7.1.6 JWT

JWT (JSON Web Tokens) are used for authentication and authorization, providing
a secure and reliable way to manage user credentials.

7.1.7 Bcrypt

Bcrypt is used for password hashing, adding an extra layer of security to user data.

7.1.8 Mongoose

Mongoose is used as an Object Data Modelling (ODM) library, providing a way to

interact with MongoDB using JavaScript.

7.2 Software platform environment

This website is created in VS Code editor.

Visual Studio Code is a lightweight but powerful source code editor which runs on
your desktop and is available for Windows, macOS and Linux. It comes with built-
in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of
extensions for other languages and runtimes (such as C++, C#, Java, Python, PHP,
Go, .NET).

21
It is a source-code editor made by Microsoft with the Electron Framework,
for Windows, Linux and macOS.[10] Features include support for debugging,
syntax highlighting, intelligent code completion, snippets, code refactoring,
and embedded Git. Users can change the theme, keyboard shortcuts, preferences,
and install extensions that add functionality.

In the Stack Overflow 2022 Developer Survey, Visual Studio Code was ranked the
most popular developer environment tool among 71,010 respondents, with 74.48%
reporting that they use it.

22
CHAPTER 8

SNAPSHOTS OF WEB APPLICATION

Fig 8.1 : Home Page

23
Fig 8.2 : Log In Page

Fig 8.3 : Sign Up Page

24
 Fig 8.4 : Dashboard

Fig 8.5 : Enrolled Courses Page

25
Fig 8.6 : Course Content Page

Fig 8.7 : Reset Password Page

26
Fig 8.8 : Update Password Page

Fig 8.9 : Verify Email Page

27
Fig 8.10 : Wishlist Page

Fig 8.11 : Contact Us Page

28
Fig 8.12 : Course Details Page

29
Fig 8.13 : About Us Page

30
CHAPTER 9

CODING

9.1. Index.js

import React from "react";

import ReactDOM from "react-dom/client";

import App from "./App";

import "./index.css";

import { BrowserRouter } from "react-router-dom";

import { Provider } from "react-redux";

import rootReducer from "./reducer";

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

import { Toaster } from "react-hot-toast";

const store = configureStore({

reducer: rootReducer,

});

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

<React.StrictMode>

<Provider store={store}>
31
 <BrowserRouter>

<App />

<Toaster />

</BrowserRouter>

</Provider>

</React.StrictMode>

);

9.2. App.js

import "./App.css";

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

import { Home } from "../src/Pages/Home";

import Login from "./Pages/Login";

import Signup from "./Pages/Signup";

import Navbar from "../src/Components/Common/Navbar";

import Error from "./Pages/Error";

import ForgetPassword from "./Pages/ForgetPassword";

import UpdatePassword from "./Pages/UpdatePassword";

import VerifyEmail from "./Pages/VerifyEmail";

import Dashboard from "./Pages/Dashboard";

import About from "./Pages/About";

import MyProfile from "./Pages/MyProfile";

import ContactUs from "./Pages/ContactUs";

import Footer from "./Components/Common/Footer";

32
import PrivateRoute from "./Components/core/Auth/PrivateRoute";

import EnrolledCourses from

"./Components/core/DashBoard/Enrolled
Courses";

function App() {

return (

<div className="w-screen min-h-screen bg-richblack-900 flex-

flex-col font- inter ">
<Navbar />

<Routes>

<Route path="*" element={<Error />} />

<Route path="/" element={<Home />} />

<Route path="/login" element={<Login />} />

<Route path="/signup" element={<Signup />} />

<Route path="/forgetpassword" element={<ForgetPassword />} />

<Route path="/update-password/*" element={<UpdatePassword />} />

<Route path="/verify-email" element={<VerifyEmail />} />

<Route

element={

<PrivateRoute>

<Dashboard />

</PrivateRoute>
}>

<Route path="/dashboard/my-profile" element={<MyProfile />} />

33
<Route path="/dashboard/settings" element={<MyProfile />} />

<Route

path="/dashboard/enrolled-courses"

element={<EnrolledCourses />}/>

<Route path="/dashboard/purchase-history" element={<MyProfile />} />

</Route>

<Route path="/about" element={<About />} />

<Route path="/contact" element={<ContactUs />} />

</Routes>

<Footer />

</div>

);

};

export default App;

34
9.3. HomePage Component

import React from "react";

import { Button } from "./Button";

import { TypeAnimation } from "react-type-animation";

import "./Gradient.css";

import { FaArrowRight } from "react-icons/fa";

export const Codeblocks = ({

position,

heading,

subheading,

b1text,

b2text,

codeblock,

bggradient,

codecolor,

}) => {
return (

<div

className={flex ${position} my-20 mx-auto justify-center gap-20 text- white}

>

{/* section 1 */}

<div className="flex flex-col w-[50%] gap-6 ">

35
{heading}

<div className="text-richblack-300 font-bold">{subheading}</div>

<div className="flex gap-7 mt-7">

<Button

text={b1text.text}

active={b1text.active}

links={b1text.links}

arrow={b1text.arrow}

flex

items-center

gap-2

>

<div className="flex items-center gap-2">

<FaArrowRight />

</div>

</Button>

<Button

text={b2text.text}

active={b2text.active}

links={b2text.links}

></Button>

</div>

36
<div></div>

</div>

{/* section 2 */}

{/* hw-BG gradient */}

<div className=" flex h-fit py-4 lg:w-[500px] border border-l-

caribbeangreen-700 border-t-caribbeangreen-700 border-b-black border-r-
black rounded-sm">
<div className="text-center flex flex-col w-[10%] text-richblack-400 font-
inter font-bold bg-transparent">
<p>1</p>

<p>2</p>

<p>3</p>

<p>4</p>

<p>5</p>

<p>6</p>

<p>7</p>

<p>8</p>

<p>9</p>

<p>10</p>

</div>

<div

className={`w-[90%] flex flex-col ${codecolor} font-mono pr-2 font-bold `}

37
 >

<TypeAnimation

sequence={[codeblock, 1000, ""]}

repeat={Infinity}

omitDeletionAnimation={true}

cursor={true}

style={{

whiteSpace: "pre-line",

display: "block",

}}

/>

</div>

</div>

</div>
);

};

9.4. About Page

import React from "react";

import HighlightText from "../Components/Core/HomePage/HighlightText";

import img1 from "../assets/Images/aboutus1.webp";

import img2 from "../assets/Images/aboutus2.webp";

import img3 from "../assets/Images/aboutus3.webp";

import img4 from "../assets/Images/FoundingStory.png";

38
import Stats from "../Components/Core/aboutPage/Stats";

import CTAButton from "../Components/Core/HomePage/CTAButton";

import Footer from "../Components/common/Footer";

import LearningGrid from "../Components/Core/aboutPage/LearningGrid";

import ContactFormSection from

"../Components/Core/aboutPage/ContactFormSec
tion";
const About = () => {

return (

<div>

<div className="flex justify-center w-screen pt-16 bg-richblack-800">

{/* Section 1 */}

<section className="w-9/12 mx-auto">

<div className="flex flex-col items-center gap-3 text-richblack-100 ">

<div>About Us</div>

<header className=" text-center font-bold text-2xl text-white">

Driving Innovation in Online Education for a <br />

<HighlightText text="Brighter Future" />

</header>

<p className="text-[14px] text-center mt-2">

Studynotion is at the forefront of driving innovation in online

education. We're passionate about creating a brighter future by

offering cutting-edge courses, leveraging emerging technologies,

and nurturing a vibrant learning community.

39
</p>

<div className="relative mt-10">

<div className=" w-48 h-32 relative top-7 rounded-full shadow-
[0px_0px_60px_2px_#f6ad55]"></div>
<div className=" absolute -bottom-12 flex gap-4 justify-center">

<img src={img1} className=" w-60" />

<img src={img2} className=" w-60" />

<img src={img3} className=" w-60" />

</div>

</div>

</div>

</section>

</div>

<div className=" pb-14 bg-richblack-900">

<div className=" pt-32 w-9/12 mx-auto flex flex-col gap-24">

<div className="text-richblack-200 text-2xl font-bold mx-auto">

<span className=" text-richblack-600 text-2xl font-extrabold">

"

</span>{" "}

We are passionate about revolutionizing the way we learn. Our

innovative platform <HighlightText text="combines technology" />,

<span className="bg-gradient-to-b from-[#de8d01] to-[#de8d01] bg-

clip-text text-transparent fond-semibold">
expertise

</span>
40
, and community to create an

<span className="bg-gradient-to-b from-[#e2c804] to-[#dda704] bg-

clip-text text-transparent fond-semibold">
{" "}

unparalleled educational experience

</span>

.<span className=" text-richblack-600 text-2xl font-bold">"</span>

</div>

<hr className=" text-richblack-700 w-full text-left h-[0.3px]" />

<div className="flex gap-20 items-center">

<div className=" w-[50%]">

a. <h1 className=" mb-6 bg-gradient-to-r from-
[#ad0070] via-[#bb0404] to- [#a5031e] text-3xl bg-
clip-text text-transparent font-bold">
b. Our Founding Story{" "}

c. </h1>

d. <div className=" flex flex-col gap-3 text-[12px] text-richblack-

200">

e. <div>

i. Our e-learning platform was born out of a shared vision

and

ii. passion for transforming education. It all began with a

group

iii. of educators, technologists, and lifelong learners who

iv. recognized the need for accessible, flexible, and high-

quality

41
 v. learning opportunities in a rapidly evolving digital world.

f. </div>

g. <div>

h. As experienced educators ourselves, we witnessed firsthand the

ii. limitations and challenges of traditional education

systems.

iii. We believed that education should not be confined to the

walls

iv. of a classroom or restricted by geographical boundaries.

We

v. envisioned a platform that could bridge these gaps and

empower

vi. individuals from all walks of life to unlock their full

vii. potential.

i. </div>

j. </div>

k. </div>

l. <div className="w-[50%] ">

m. <img src={img4} />

n. </div>

</div>

<div className=" flex gap-20 items-baseline">

i. <div>

ii. {" "}

iii. <h1 className=" mb-6 bg-gradient-to-r from-

42
 [#f16107] via-[#e43e01] to- [#b64300] text-3xl bg-
clip-text text-transparent font-bold">
iv. Our Vision{" "}

v. </h1>
a. <div className="text-[12px] text-richblack-200">

b. With this vision in mind, we set out on a journey to create an

c. e-learning platform that would revolutionize the way people

d. learn. Our team of dedicated experts worked tirelessly to

e. develop a robust and intuitive platform that combines

f. cutting-edge technology with engaging content, fostering a

g. dynamic and interactive learning experience.

h. </div>

i. </div>

j. <div>

k. <h1 className=" mb-6 bg-gradient-to-r from-[#1a9ee5] via-

[#0355c1] to- [#170195] text-3xl bg-clip-text text-
transparent font-bold">
l. Our Mission{" "}

m. </h1>

n. <p className=" text-[12px] text-richblack-200">

o. our mission goes beyond just delivering courses online. We

p. wanted to create a vibrant community of learners, where

q. individuals can connect, collaborate, and learn from one

r. another. We believe that knowledge thrives in an environment of

s. sharing and dialogue, and we foster this spirit of collaboration

43
 t. through forums, live sessions, and networking opportunities.

u. </p>

v. </div>

</div>

<Stats />

<LearningGrid />

<ContactFormSection />

</div>

</div>

<Footer />

</div>

);};

export default About;

9.5. Login Page

import React from "react";

import loginImage from "../assets/Images/login.webp";

import { Template } from "../Components/core/Auth/Template";

const Login = () => {

return (

<div>

<Template image={loginImage} formType={"Login"}

text1={"Welcome Back"} />
44
 </div>

);};

export default Login;

9.6. Contact Us Page

import React from "react";

import ContactUsForm from "../Components/Common/ContactUsForm";

import { TbMessageShare } from "react-icons/tb";

import { PiPhoneCallFill } from "react-icons/pi";

import { BiWorld } from "react-icons/bi";

const ContactUs = () => {

return (

<div className="flex max-w-[1500px] mx-auto gap-8 w-9/12

justify- between mt-16 ">
<div className="w-[40%] max-h-fit h-[350px] flex flex-col gap-10
bg- richblack-800 rounded-xl p-6 box-border">
<div className=" flex gap-4 items-start justify-start">

<TbMessageShare className="text-2xl bg-richblack-800 text-richblack-

100 rounded-md" />
<div className="text-richblack-5 flex flex-col gap-1">

<h4 className=" font-medium text-xl">Chat on us</h4>

<p className="text-sm text-richblack-200">

Our friendly team is here to help.

</p>

<p className="text-sm text-richblack-200">@email address</p>

45
</div>
</div>

<div className=" flex gap-4 items-start justify-start">

<BiWorld className="text-2xl bg-richblack-800 text-richblack-100

rounded- md" />
<div className="text-richblack-5 flex flex-col gap-1">

<h4 className="font-medium text-xl">Visit us</h4>

<p className="text-sm text-richblack-200">

Come and say hello at our office HQ.{" "}

</p>

<p className="text-sm text-richblack-200">

Here is the location/ address

</p>

</div>

</div>

<div className=" flex gap-4 items-start justify-start">

<PiPhoneCallFill className="text-2xl bg-richblack-800 text-richblack-

100 rounded-md" />
<div className="text-richblack-5 flex flex-col gap-1">

<h4 className="font-medium text-xl">Call us</h4>

<p className="text-sm text-richblack-200">

Mon - Fri From 8am to 5pm{" "}

</p>

<p className="text-sm text-richblack-200">+123 456 7890</p>

</div>
46
 </div>

</div>

<div className="flex flex-col gap-4 w-[55%] p-[24px] rounded-xl

border- [1px] border-richblack-500 mb-4">
<h2 className="text-4xl font-bold text-richblack-5 ">

Got a Idea? We’ve got the skills. Let’s team up

</h2>

<p className=" text-base text-richblack-500">

Tell us more about yourself and what you’re got in mind.

</p>
<ContactUsForm />

</div>

</div>

);};

export default ContactUs;

9.7. Sign Up

import React from "react";

import { Template } from "../Components/core/Auth/Template";

import signup from "../assets/Images/signup.webp";

const Signup = () => {

return (

<div>

47
 <Template

text1={"Join the million learning to code with StudyNotion for free"}

image={signup}

formType={"Signup"}

/>

</div>

);

};

export default Signup;

9.8. DashBoard Page

import React from "react";

import { useSelector } from "react-redux";

import Spinner from "../Components/Common/Spinner";

import { Outlet } from "react-router-dom";

import SideBar from "../Components/core/DashBoard/SideBar";

const Dashboard = () => {

const { loading: authLoading } = useSelector((state) => state.auth);

const { loading: profileLoading } = useSelector((state) => state.profile);

if (authLoading || profileLoading) {

return (

<div className="flex flex-col gap-7 justify-center items-center mt-10">

<p className="text-center text-richblack-5 text-2xl">Loading. ..........</p>

48
 <Spinner />

</div>

);

return (

<div className="relative min-h-[calc(100vh-3.5rem)] flex gap-6">

<SideBar />

<div className="h-[calc(100vh-3.5rem)] overflow-auto">

<div className="w-11/12 max-auto max-w-[1000px] py-10">

<Outlet />

</div>

</div>

</div>

);

};

export default Dashboard;

9.9. View Course Page

import { useEffect, useState } from "react"

import { useDispatch, useSelector } from "react-redux"

import { Outlet, useParams } from "react-router-dom"

import CourseReviewModal from

"../components/core/ViewCourse/CourseRevie
wModal"
import VideoDetailsSidebar from

49
"../components/core/ViewCourse/VideoDetail
sSidebar"
import {
getFullDetailsOfCourse } from
"../services/operations/courseD
etailsAPI"
import {

setCompletedLectures,

setCourseSectionData,

setEntireCourseData,
setTotalNoOfLectures,

} from "../slices/viewCourseSlice"

export default function ViewCourse() {

const { courseId } = useParams()

const { token } = useSelector((state) => state.auth)

const dispatch = useDispatch()

const [reviewModal, setReviewModal] = useState(false)

useEffect(() => {

;(async () => {

const courseData = await getFullDetailsOfCourse(courseId, token)

// console.log("Course Data here... ", courseData.courseDetails)

dispatch(setCourseSectionData(courseData.courseDetails.courseContent))

dispatch(setEntireCourseData(courseData.courseDetails))

dispatch(setCompletedLectures(courseData.completedVideos))

let lectures = 0

50
courseData?.courseDetails?.courseContent?.forEach((sec) => {

lectures += sec.subSection.length

})

dispatch(setTotalNoOfLectures(lectures))

})()

// eslint-disable-next-line react-hooks/exhaustive-deps

}, [])

return (

<>

<div className="relative flex min-h-[calc(100vh-3.5rem)]">

<VideoDetailsSidebar setReviewModal={setReviewModal} />

<div className="h-[calc(100vh-3.5rem)] flex-1 overflow-auto">

<div className="mx-6">

<Outlet />

</div>

</div>

</div>

{reviewModal &&
<CourseReviewModal
setReviewModal={setReviewM
odal} />}
</>

)}

51
Backend
const express = require("express");

require("dotenv").config();

const { DBConnect } = require("./Config/database");

const cookieParser = require("cookie-parser");

const cors = require("cors");

const { cloudinaryConnect } = require("./Config/cloudinary");

const fileUpload = require("express-fileupload");

const userRoutes = require("./Routes/User");

const profileRoutes = require("./Routes/Profile");

const courseRoutes = require("./Routes/Course");

const paymentRoutes = require("./Routes/Payment");

const app = express();

const PORT = process.env.PORT || 4000;

DBConnect();

app.use(cookieParser());

app.use(express.json());

app.use(cors({ origin: "http://localhost:3000", credentials: true }));

app.use(

fileUpload({

useTempFiles: true,

tempFileDir: "/tmp",

})

52
);

cloudinaryConnect();

app.use("/api/v1/auth", userRoutes);

app.use("/api/v1/profile", profileRoutes);

app.use("/api/v1/payment", paymentRoutes);

app.use("/api/v1/course", courseRoutes);

app.get("/", (req, res) => {

res.json({
success: true,

message: "Your server is up and running",

});

});

app.listen(PORT, () => {

console.log("app is running successfully on Port", PORT);

});

53
CHAPTER 10

CONCLUSION

In conclusion, this document outlines the architecture, features, and functionalities of the
StudyNotion ed-tech platform. It highlights the use of MERN stack technologies and REST API
design and outlines the deployment process using free hosting services, Vercel for the front-end,
Render.com for the backend, and MongoDB Atlas for the database. Additionally, it lists
potential future enhancements that could be implemented to improve the platform, along with
their estimated timelines and priorities.

Throughout the development of the project, various achievements will be made in terms of
implementing the desired functionalities and creating a user-friendly interface. However, there
will be challenges to be faced during the development process, such as integrating different
technologies and debugging errors.

54
CHAPTER 11

REFERENCES

[1] HTML : CodeWithHarry (https://youtu.be/BsDoLVMnmZs?si=GnHFVVkXYHERGlnG)

[2] CSS : Thapa Technical (https://youtu.be/MSICFljRcb4?si=RJ4gPkMdeERccf_4)

[3] JavaScript : Geeky Shows (https://youtu.be/3qti7Vof_7Q?si=hIpa0ENsS5KWD0vA)

[4] React.js : CodeWithHarry React (https://youtu.be/MSICFljRcb4?si=RJ4gPkMdeERccf_4)

[5] Node.js : Tech with Timmy (https://youtu.be/A1ZtSO2GFio?si=m5SOFCuHdREqLMjw)

[6] Express.js : The Learn Programmer(https://youtu.be/MSICFljRcb4?si=RJ4gPkMdeERccf_4)

55