lOMoARcPSD|55769355

Project Study Notion

Computer Aided Power Electronics Analysis And Design (Rajiv Gandhi Proudyogiki
Vishwavidyalaya)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)
 lOMoARcPSD|55769355

STUDY
NOTION
A Major Project Report
Submitted in Partial fulfillment for the award of
Bachelor of Technology in CSE-AIML

Submitted to
RAJIV GANDHI PROUDYOGIKI VISHWAVIDYALAYA
BHOPAL (M.P)

MAJOR PROJECT REPORT

Submitted by
Anup Arya (0103AL201009)
Jiya Tejwani (0103AL201025)
Nayan Kolankar (0103AL201033)

Under the supervision of

Prof Parmalik Kumar

Department of CSE-AIML
Lakshmi Narain College of Technology, Bhopal
(M.P.)

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

Session 2022-23

LAKSHMI NARAIN COLLEGE OF TECHNOLOGY, BHOPAL

DEPARTMENT OF CSE-AIML

CERTIFICATE

This is to certify that the work embodied in this project

work entitled “Study Notion-Ed Tech Application” has
been satisfactorily completed by the Anup Arya
(0103AL201009), Jiya Tejwani
(0103AL201025),Nayan Kolankar (0103AL201033).
It is a bonafide piece of work, carried out under the
guidance in Department of CSE- AIML, Lakshmi
Narain College of Technology, Bhopal for the partial
fulfillment of the Bachelor of Technology during the
academic year 2022-23.

Guide Name
Approved By

Prof Parmalik Kumar

Dr.Tripti Saxena

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

(Prof.)
Prof. & HOD

LAKSHMI NARAIN COLLEGE OF TECHNOLOGY,

BHOPAL

DEPARTMENT OF CSE-AIML

ACKNOWLEDGEMENT

We express our deep sense of gratitude to Prof.

Parmalik Kumar(Guide) department of CSE-AIML
L.N.C.T., Bhopal. Whose kindness valuable guidance and
timely help encouraged me to complete this project.

A special thank goes to Dr. Bhupesh Gour (HOD) who

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

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

We would also thank our institution and all the faculty

members without whom this project work would have
been a distant reality.

Anup Arya
(0103AL201009),
Jiya Tejwani
(0103AL201025),
Nayan Kolankar
(0103AL201033)

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

S.NO TOPICS

1. Introduction

2. Literature Survey.

3. Major objective & scope of project

4. Problem Analysis

5. Hardware Platform Requirement

6. ER Diagram/Flow Diagram

7. Software Specification

8. Snapshots of Web Application

9. Coding

10. Project Limitations And Future Scope

11. Conclusion

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

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. 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.

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

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.

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.

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.

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.

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.

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.

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.

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

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.

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.

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

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

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

meetings, a student may be able to get real-time help when they need it — if
the instructor is available, of course.

● 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.

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

● 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..

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

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.
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

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

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.

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,

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

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.

3.2.1 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.

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

CHAPTER 4
PROBLEM ANALYSIS

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. These issues
ultimately impact the quality of education being delivered in classrooms.

The pace of change in the modern world also presents a problem. With rapid
technological advancements and evolving job markets, individuals need to acquire

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

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.

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

CHAPTER 5
HARDWARE PLATFORM REQUIREMENT

1.1 SYSTEM REQUIREMENTS

Windows Mac requirements Linux requirements

requirements

Operating Windows 8 or macOS High Sierra 64-bit

system later 10.13 or later Ubuntu 14.04+,
Debian 8+,
openSUSE 13.3+, or
Fedora Linux 24+

Processor Intel Pentium 4 or Intel Intel Pentium 4 or

later later

Memory 2 GB minimum, 4 GB recommended

Screen 1280x1024 or larger

resolution
Application 1024x680 or larger
window size

Internet Required
connection

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

CHAPTER 6
ER DIAGRAM/FLOW DIAGRAM

1.1 ER Diagram for Study Notion

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

1.2 Architecture Diagram

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

1.2.1 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:-
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
platform, along with their descriptions and ratings.

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

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

● 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.

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.

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.

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

● 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.

1.2.1 Back-End
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

Features and Functionalities of the Back-end:

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

including:

1. 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.

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

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

CHAPTER 7
SOFTWARE SPECIFICATION

6.1Scaffolding the Study Notion

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

6.1.1Technology Used

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:

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

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.

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.

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.

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

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. The same approach
will be continued until the pipeline's last middleware takes the result of the preceding
middleware as input.

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.

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.

JWT

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

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

Bcrypt

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

Mongoose

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

interact with MongoDB using JavaScript.

6.1.2Software 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).

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.

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

CHAPTER 8

SNAPSHOTS OF WEB APPLICATION

8.1 Home

8.2 Login Page

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

8.3 Sign up Page

8.4 Dashboard

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

8.5 Enrolled Courses Pages

8.6 Course Content Page

8.7 Reset Password Page

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

8.8 update Password Page

8.9 Verify Email Page

8.10 Whishlist Page

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

8.11 Contact Us Page

8.12 Course Details Page

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

8.13 About Us Page

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

CHAPTER 9
CODING

9.1 Index.js
1. import React from "react";
2. import ReactDOM from "react-dom/client";
3. import App from "./App";
4. import "./index.css";
5. import { BrowserRouter } from "react-router-dom";
6. import { Provider } from "react-redux";
7. import rootReducer from "./reducer";
8. import { configureStore } from "@reduxjs/toolkit";
9. import { Toaster } from "react-hot-toast";

10. const store = configureStore({

11. reducer: rootReducer,
12. });
13. const root = ReactDOM.createRoot(document.getElementById("root"));
14. root.render(
15. <React.StrictMode>
16. <Provider store={store}>
17. <BrowserRouter>
18. <App />
19. <Toaster />
20. </BrowserRouter>
21. </Provider>
22. </React.StrictMode>
23. );

9.2 App.js
1. import "./App.css";
2. import { Route, Routes } from "react-router-dom";
3. import { Home } from "../src/Pages/Home";

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

4. import Login from "./Pages/Login";

5. import Signup from "./Pages/Signup";
6. import Navbar from "../src/Components/Common/Navbar";
7. import Error from "./Pages/Error";
8. import ForgetPassword from "./Pages/ForgetPassword";
9. import UpdatePassword from "./Pages/UpdatePassword";
10. import VerifyEmail from "./Pages/VerifyEmail";
11. import Dashboard from "./Pages/Dashboard";
12. import About from "./Pages/About";
13. import MyProfile from "./Pages/MyProfile";
14. import ContactUs from "./Pages/ContactUs";
15. import Footer from "./Components/Common/Footer";
16. import PrivateRoute from "./Components/core/Auth/PrivateRoute";
17. import EnrolledCourses from
"./Components/core/DashBoard/EnrolledCourses";

18. function App() {

19. return (
20. <div className="w-screen min-h-screen bg-richblack-900 flex- flex-col font-
inter ">
21. <Navbar />
22. <Routes>
23. <Route path="*" element={<Error />} />
24. <Route path="/" element={<Home />} />
25. <Route path="/login" element={<Login />} />
26. <Route path="/signup" element={<Signup />} />
27. <Route path="/forgetpassword" element={<ForgetPassword />} />
28. <Route path="/update-password/*" element={<UpdatePassword />} />
29. <Route path="/verify-email" element={<VerifyEmail />} />
30. <Route
31. element={
a. <PrivateRoute>
b. <Dashboard />
c. </PrivateRoute>

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

32. }>
33. <Route path="/dashboard/my-profile" element={<MyProfile />} />
34. <Route path="/dashboard/settings" element={<MyProfile />} />
35. <Route
a. path="/dashboard/enrolled-courses"
b. element={<EnrolledCourses />}/>
36. <Route path="/dashboard/purchase-history" element={<MyProfile />} />
37. </Route>
38. <Route path="/about" element={<About />} />
39. <Route path="/contact" element={<ContactUs />} />
40. </Routes>
41. <Footer />
42. </div>
43. );
44. };
45. export default App;

9.3 HomePage Component

1. import React from "react";
2. import { Button } from "./Button";
3. import { TypeAnimation } from "react-type-animation";
4. import "./Gradient.css";
5. import { FaArrowRight } from "react-icons/fa";

6. export const Codeblocks = ({

7. position,
8. heading,
9. subheading,
10. b1text,
11. b2text,
12. codeblock,
13. bggradient,
14. codecolor,
15. }) => {

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

16. return (
17. <div
18. className={flex ${position} my-20 mx-auto justify-center gap-20 text-
white}
19. >
20. {/* section 1 */}
21. <div className="flex flex-col w-[50%] gap-6 ">
22. {heading}
23. <div className="text-richblack-300 font-bold">{subheading}</div>
24. <div className="flex gap-7 mt-7">
25. <Button
a. text={b1text.text}
b. active={b1text.active}
c. links={b1text.links}
d. arrow={b1text.arrow}
e. flex
f. items-center
g. gap-2
26. >
a. <div className="flex items-center gap-2">
b. <FaArrowRight />
c. </div>
27. </Button>
28. <Button
a. text={b2text.text}
b. active={b2text.active}
c. links={b2text.links}
29. ></Button>
30. </div>

31. <div></div>
32. </div>

33. {/* section 2 */}

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

34. {/* hw-BG gradient */}

35. <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">
36. <div className="text-center flex flex-col w-[10%] text-richblack-400 font-
inter font-bold bg-transparent">
37. <p>1</p>
38. <p>2</p>
39. <p>3</p>
40. <p>4</p>
41. <p>5</p>
42. <p>6</p>
43. <p>7</p>
44. <p>8</p>
45. <p>9</p>
46. <p>10</p>
47. </div>
48. <div
49. className={`w-[90%] flex flex-col ${codecolor} font-mono pr-2 font-bold `}
50. >
51. <TypeAnimation
a. sequence={[codeblock, 1000, ""]}
b. repeat={Infinity}
c. omitDeletionAnimation={true}
d. cursor={true}
e. style={{
f. whiteSpace: "pre-line",
g. display: "block",
h. }}
52. />
53. </div>
54. </div>
55. </div>

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

56. );
57. };
9.4 About Page
1. import React from "react";
2. import HighlightText from "../Components/Core/HomePage/HighlightText";
3. import img1 from "../assets/Images/aboutus1.webp";
4. import img2 from "../assets/Images/aboutus2.webp";
5. import img3 from "../assets/Images/aboutus3.webp";
6. import img4 from "../assets/Images/FoundingStory.png";
7. import Stats from "../Components/Core/aboutPage/Stats";
8. import CTAButton from "../Components/Core/HomePage/CTAButton";
9. import Footer from "../Components/common/Footer";
10. import LearningGrid from "../Components/Core/aboutPage/LearningGrid";
11. import ContactFormSection from
"../Components/Core/aboutPage/ContactFormSection";
12. const About = () => {
13. return (
14. <div>
15. <div className="flex justify-center w-screen pt-16 bg-richblack-800">
16. {/* Section 1 */}
17. <section className="w-9/12 mx-auto">
18. <div className="flex flex-col items-center gap-3 text-richblack-100 ">
a. <div>About Us</div>
b. <header className=" text-center font-bold text-2xl text-white">
c. Driving Innovation in Online Education for a <br />
d. <HighlightText text="Brighter Future" />
e. </header>
f. <p className="text-[14px] text-center mt-2">
g. Studynotion is at the forefront of driving innovation in online
h. education. We're passionate about creating a brighter future by
i. offering cutting-edge courses, leveraging emerging technologies,
j. and nurturing a vibrant learning community.
k. </p>
l. <div className="relative mt-10">

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

m. <div className=" w-48 h-32 relative top-7 rounded-full shadow-

[0px_0px_60px_2px_#f6ad55]"></div>
n. <div className=" absolute -bottom-12 flex gap-4 justify-center">
o. <img src={img1} className=" w-60" />
p. <img src={img2} className=" w-60" />
q. <img src={img3} className=" w-60" />
r. </div>
s. </div>
19. </div>
20. </section>
21. </div>
22. <div className=" pb-14 bg-richblack-900">
23. <div className=" pt-32 w-9/12 mx-auto flex flex-col gap-24">
24. <div className="text-richblack-200 text-2xl font-bold mx-auto">
a. <span className=" text-richblack-600 text-2xl font-extrabold">
b. "
c. </span>{" "}
d. We are passionate about revolutionizing the way we learn. Our
e. innovative platform <HighlightText text="combines technology" />,
f. <span className="bg-gradient-to-b from-[#de8d01] to-[#de8d01] bg-
clip-text text-transparent fond-semibold">
g. expertise
h. </span>
i. , and community to create an
j. <span className="bg-gradient-to-b from-[#e2c804] to-[#dda704] bg-
clip-text text-transparent fond-semibold">
k. {" "}
l. unparalleled educational experience
m. </span>
n. .<span className=" text-richblack-600 text-2xl font-bold">"</span>
25. </div>
26. <hr className=" text-richblack-700 w-full text-left h-[0.3px]" />
27. <div className="flex gap-20 items-center">
a. <div className=" w-[50%]">

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

b. <h1 className=" mb-6 bg-gradient-to-r from-[#ad0070] via-[#bb0404] to-

[#a5031e] text-3xl bg-clip-text text-transparent font-bold">
c. Our Founding Story{" "}
d. </h1>
e. <div className=" flex flex-col gap-3 text-[12px] text-richblack-200">
f. <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
v. learning opportunities in a rapidly evolving digital world.
g. </div>
h. <div>
i. 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>
28. </div>
29. <div className=" flex gap-20 items-baseline">
a. <div>
b. {" "}
c. <h1 className=" mb-6 bg-gradient-to-r from-[#f16107] via-[#e43e01] to-
[#b64300] text-3xl bg-clip-text text-transparent font-bold">
d. Our Vision{" "}
e. </h1>

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

f. <div className="text-[12px] text-richblack-200">

g. With this vision in mind, we set out on a journey to create an
h. e-learning platform that would revolutionize the way people
i. learn. Our team of dedicated experts worked tirelessly to
j. develop a robust and intuitive platform that combines
k. cutting-edge technology with engaging content, fostering a
l. dynamic and interactive learning experience.
m. </div>
n. </div>
o. <div>
p. <h1 className=" mb-6 bg-gradient-to-r from-[#1a9ee5] via-[#0355c1] to-
[#170195] text-3xl bg-clip-text text-transparent font-bold">
q. Our Mission{" "}
r. </h1>
s. <p className=" text-[12px] text-richblack-200">
t. our mission goes beyond just delivering courses online. We
u. wanted to create a vibrant community of learners, where
v. individuals can connect, collaborate, and learn from one
w. another. We believe that knowledge thrives in an environment of
x. sharing and dialogue, and we foster this spirit of collaboration
y. through forums, live sessions, and networking opportunities.
z. </p>
aa. </div>
30. </div>
31. <Stats />
32. <LearningGrid />
33. <ContactFormSection />
34. </div>
35. </div>
36. <Footer />
37. </div>
38. );};
39. export default About;
9.5 Login Page

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

1. import React from "react";

2. import loginImage from "../assets/Images/login.webp";
3. import { Template } from "../Components/core/Auth/Template";
4. const Login = () => {
5. return (
6. <div>
7. <Template image={loginImage} formType={"Login"} text1={"Welcome
Back"} />
8. </div>
9. );};
10. export default Login;

9.6 Contact Us Page

1. import React from "react";
2. import ContactUsForm from "../Components/Common/ContactUsForm";
3. import { TbMessageShare } from "react-icons/tb";
4. import { PiPhoneCallFill } from "react-icons/pi";
5. import { BiWorld } from "react-icons/bi";
6. const ContactUs = () => {
7. return (
8. <div className="flex max-w-[1500px] mx-auto gap-8 w-9/12 justify-
between mt-16 ">
9. <div className="w-[40%] max-h-fit h-[350px] flex flex-col gap-10 bg-
richblack-800 rounded-xl p-6 box-border">
10. <div className=" flex gap-4 items-start justify-start">
11. <TbMessageShare className="text-2xl bg-richblack-800 text-richblack-100
rounded-md" />
12. <div className="text-richblack-5 flex flex-col gap-1">
a. <h4 className=" font-medium text-xl">Chat on us</h4>
b. <p className="text-sm text-richblack-200">
c. Our friendly team is here to help.
d. </p>
e. <p className="text-sm text-richblack-200">@email address</p>
13. </div>

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

14. </div>
15. <div className=" flex gap-4 items-start justify-start">
16. <BiWorld className="text-2xl bg-richblack-800 text-richblack-100 rounded-
md" />
17. <div className="text-richblack-5 flex flex-col gap-1">
a. <h4 className="font-medium text-xl">Visit us</h4>
b. <p className="text-sm text-richblack-200">
c. Come and say hello at our office HQ.{" "}
d. </p>
e. <p className="text-sm text-richblack-200">
f. Here is the location/ address
g. </p>
18. </div>
19. </div>
20. <div className=" flex gap-4 items-start justify-start">
21. <PiPhoneCallFill className="text-2xl bg-richblack-800 text-richblack-100
rounded-md" />
22. <div className="text-richblack-5 flex flex-col gap-1">
a. <h4 className="font-medium text-xl">Call us</h4>
b. <p className="text-sm text-richblack-200">
c. Mon - Fri From 8am to 5pm{" "}
d. </p>
e. <p className="text-sm text-richblack-200">+123 456 7890</p>
23. </div>
24. </div>
25. </div>
26. <div className="flex flex-col gap-4 w-[55%] p-[24px] rounded-xl border-
[1px] border-richblack-500 mb-4">
27. <h2 className="text-4xl font-bold text-richblack-5 ">
28. Got a Idea? We’ve got the skills. Let’s team up
29. </h2>
30. <p className=" text-base text-richblack-500">
31. Tell us more about yourself and what you’re got in mind.
32. </p>

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

33. <ContactUsForm />

34. </div>
35. </div>
36. );};
37. export default ContactUs;

9.7 Sign Up Page

1. import React from "react";
2. import { Template } from "../Components/core/Auth/Template";
3. import signup from "../assets/Images/signup.webp";
4. const Signup = () => {
5. return (
6. <div>
7. <Template
8. text1={"Join the million learning to code with StudyNotion for free"}
9. image={signup}
10. formType={"Signup"}
11. />
12. </div>
13. );
14. };
15. export default Signup;

9.8 DashBoard Page

1. import React from "react";
2. import { useSelector } from "react-redux";
3. import Spinner from "../Components/Common/Spinner";
4. import { Outlet } from "react-router-dom";
5. import SideBar from "../Components/core/DashBoard/SideBar";
6. const Dashboard = () => {
7. const { loading: authLoading } = useSelector((state) => state.auth);
8. const { loading: profileLoading } = useSelector((state) => state.profile);

9. if (authLoading || profileLoading) {

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

10. return (
11. <div className="flex flex-col gap-7 justify-center items-center mt-10">
12. <p className="text-center text-richblack-5 text-2xl">Loading.....</p>
13. <Spinner />
14. </div>
15. );
16. }
17. return (
18. <div className="relative min-h-[calc(100vh-3.5rem)] flex gap-6">
19. <SideBar />
20. <div className="h-[calc(100vh-3.5rem)] overflow-auto">
21. <div className="w-11/12 max-auto max-w-[1000px] py-10">
22. <Outlet />
23. </div>
24. </div>
25. </div>
26. );
27. };
28. export default Dashboard;

9.9 View Course Page

1. import { useEffect, useState } from "react"
2. import { useDispatch, useSelector } from "react-redux"
3. import { Outlet, useParams } from "react-router-dom"
4. import CourseReviewModal from
"../components/core/ViewCourse/CourseReviewModal"
5. import VideoDetailsSidebar from
"../components/core/ViewCourse/VideoDetailsSidebar"
6. import { getFullDetailsOfCourse } from
"../services/operations/courseDetailsAPI"
7. import {
8. setCompletedLectures,
9. setCourseSectionData,
10. setEntireCourseData,

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

11. setTotalNoOfLectures,
12. } from "../slices/viewCourseSlice"
13. export default function ViewCourse() {
14. const { courseId } = useParams()
15. const { token } = useSelector((state) => state.auth)
16. const dispatch = useDispatch()
17. const [reviewModal, setReviewModal] = useState(false)
18. useEffect(() => {
19. ;(async () => {
20. const courseData = await getFullDetailsOfCourse(courseId, token)
21. // console.log("Course Data here... ", courseData.courseDetails)
22. dispatch(setCourseSectionData(courseData.courseDetails.courseContent))
23. dispatch(setEntireCourseData(courseData.courseDetails))
24. dispatch(setCompletedLectures(courseData.completedVideos))
25. let lectures = 0
26. courseData?.courseDetails?.courseContent?.forEach((sec) => {
27. lectures += sec.subSection.length
28. })
29. dispatch(setTotalNoOfLectures(lectures))
30. })()
31. // eslint-disable-next-line react-hooks/exhaustive-deps
32. }, [])
33. return (
34. <>
35. <div className="relative flex min-h-[calc(100vh-3.5rem)]">
36. <VideoDetailsSidebar setReviewModal={setReviewModal} />
37. <div className="h-[calc(100vh-3.5rem)] flex-1 overflow-auto">
38. <div className="mx-6">
a. <Outlet />
39. </div>
40. </div>
41. </div>
42. {reviewModal && <CourseReviewModal
setReviewModal={setReviewModal} />}

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

43. </>
44. )}

9.10 Backend
1. const express = require("express");
2. require("dotenv").config();
3. const { DBConnect } = require("./Config/database");
4. const cookieParser = require("cookie-parser");
5. const cors = require("cors");
6. const { cloudinaryConnect } = require("./Config/cloudinary");
7. const fileUpload = require("express-fileupload");
8. const userRoutes = require("./Routes/User");
9. const profileRoutes = require("./Routes/Profile");
10. const courseRoutes = require("./Routes/Course");
11. const paymentRoutes = require("./Routes/Payment");
12. const app = express();
13. const PORT = process.env.PORT || 4000;
14. DBConnect();
15. app.use(cookieParser());
16. app.use(express.json());
17. app.use(cors({ origin: "http://localhost:3000", credentials: true }));
18. app.use(
19. fileUpload({
20. useTempFiles: true,
21. tempFileDir: "/tmp",
22. })
23. );
24. cloudinaryConnect();
25. app.use("/api/v1/auth", userRoutes);
26. app.use("/api/v1/profile", profileRoutes);
27. app.use("/api/v1/payment", paymentRoutes);
28. app.use("/api/v1/course", courseRoutes);
29. app.get("/", (req, res) => {
30. res.json({

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

31. success: true,

32. message: "Your server is up and running",
33. });
34. });
35. app.listen(PORT, () => {
36. console.log("app is running successfully on Port", PORT);
37. });

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

CHAPTER 10
PROJECT LIMITATION AND FUTURE SCOPE

10.1 Project Limitations

● Access and Infrastructure Disparities - Ed tech projects may face

limitations due to unequal access to technology and the internet among

students. In regions with poor infrastructure, students may struggle to benefit
from digital learning tools.

● Digital Divide - The digital divide extends beyond access to include variations

in digital literacy. Students from different socio-economic backgrounds

may have different levels of familiarity and comfort with technology.

● Technological Obsolescence - Rapid advancements in technology can render

ed tech tools obsolete quickly. Projects may struggle to keep up with the latest
developments, leading to potential inefficiencies or the need for frequent
updates.

● Teacher Training and Acceptance - Successful integration of ed tech tools

often depends on the willingness and ability of educators to adapt. Limited

teacher training can impede the effective implementation of technology in the
classroom.

● Data Privacy Concerns - Ed tech projects involve the collection and storage

of sensitive student data. Ensuring robust data privacy measures is critical, and
any breach could lead to significant consequences.

● Cultural and Linguistic Diversity - Ed tech tools may not always be tailored

to diverse cultural and linguistic contexts, limiting their effectiveness in

reaching a broad range of students.

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

● Financial Constraints - Budget constraints can limit the scope and quality of

ed tech projects. Developing and maintaining sophisticated tools may require

significant financial resources.

10.2 Future Scope of Ed Tech Projects:

● Personalized Learning - Future ed tech projects can focus on refining

personalized learning experiences, leveraging AI to adapt educational content
to individual student needs and learning styles.
● Virtual Reality (VR) and Augmented Reality (AR) - The integration of VR
and AR can provide immersive learning experiences, making abstract concepts
more tangible and engaging for students.
● Blockchain for Credentials - Blockchain technology can be employed to
securely and transparently store academic credentials, reducing fraud and
streamlining the verification process for employers and academic institutions.
● Artificial Intelligence (AI) in Assessment - AI-driven assessment tools can
provide more nuanced evaluations of student performance, offering insights
beyond traditional testing methods and enabling a more holistic understanding
of a student's abilities.
● Global Collaboration Platforms - Platforms that facilitate global
collaboration and communication among students from different parts of the
world can broaden perspectives and enhance cultural awareness.
● Accessibility Solutions - Ed tech projects can focus on developing solutions
that address accessibility issues, ensuring that education is inclusive for
students with diverse learning needs.
● Cybersecurity Measures - Future projects should prioritize robust
cybersecurity measures to protect sensitive student data, fostering trust among
users and stakeholders.
● Continued Professional Development for Teachers - Investing in ongoing
professional development programs for educators can ensure that teachers
remain adept at integrating new technologies into their teaching
methodologies.

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)

 lOMoARcPSD|55769355

● Gamification of Learning - Gamified learning platforms can make education

more engaging and enjoyable, fostering a positive learning environment.
● Environmental Sustainability - Ed tech projects can explore ways to
minimize their environmental impact, such as using sustainable materials in
hardware production and promoting energy-efficient practices.

CHAPTER 11

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.

Downloaded by Prince Kumar (princesinghrajput13@gmail.com)