Abstract

StudyBuddy is ed-tech platform using the MERN stack, encompassing the capabilities of
ReactJS, NodeJS, MongoDB, and ExpressJS. Designed with a visionary approach, Stu-
dyNotion encapsulates the essence of modern education, fostering a dynamic ecosystem
where users can effortlessly create, consume, and rate educational content.

Utilizing MongoDB, StudyBuddy ensures efficient storage and management of edu-

cational content and user data. ExpressJS and NodeJS collaborate to deliver a robust
backend, while ReactJS crafts a user-friendly frontend interface.

StudyBuddy provides a seamless and interactive learning experience for students world-
wide.
Secondly, StudyBuddy is a for instructors to showcase their expertise, and connect with a
diverse cohort of learners spanning the globe.
 Acknowledgement

It is my pleasure to be indebted to various people, who directly or indirectly contribute in

the development of this work and who influenced my thinking, behavior and acts during
the course of study. I express our sincere gratitude to Dr. Kulvinder Singh Mann, H.O.D of
the Information Technology Department for providing us with an opportunity to undergo
this industrial training.
Along with that, I am extremely thankful to Mr. Inderpreet Singh, CEO of Ryaz.io for his
support, cooperation, and motivation provided for constant inspiration, presence, and
blessings. All I can do is offer my gratitude and appreciation for your leadership and for
you being such a great head.
I would also like to thank my industrial mentor Mr. Shiv Charan, for helping me
throughout, teaching me such valuable points and helping me understand the concepts of
the product. Thank you for encouraging me in all of my pursuits and inspiring me to follow
my dreams.
 List of Figures

1 Feasibility Study . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2 VS Code Logo ............................................................................................................. 12

3 Project Structure ............................................................................................ 14
4 Server Folder ............................................................................................................... 15
5 SRC Folder ............................................................................................................. 16
6 User Interface of IDE ............................................................................................. 17

7 SDLC ........................................................................................................................... 18
8 Use Case Diagram ....................................................................................................... 23
9 DFD Level-0 ................................................................................................................ 24
10 DFD Level-1 ................................................................................................................ 24
11 DFD Level-2 ................................................................................................................ 24
12 Database Design .......................................................................................................... 25

13 Methodology ................................................................................................................ 25
14 React ....................................................................................................................... 26

15 Java Script .............................................................................................................. 28

16 MongoDB Atlas ........................................................................................................... 30

17 Visual Studio code ................................................................................................. 31

18 Testing .................................................................................................................... 32
19 Login page ................................................................................................................... 33
20 SignUp Page for Student ........................................................................................ 34

21 SignUp Page for Instructor .................................................................................... 35

22 OTP Page ................................................................................................................ 36
23 Student Dashboard ................................................................................................. 37
 Contents

1 Introduction 1
1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.2 Introduction to technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.2.1 Full Stack Development . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Introduction to project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 Project Category . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.5 Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.6 Problem Formulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.7 Identification of Need . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.8 Existing System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.9 Proposed System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.10 Unique Features of the System . . . . . . . . . . . . . . . . . . . . . . . . . 6

2 Training Work Undertaken 7

2.1 Topics Covered . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2 Requirement Analysis and System Specification . . . . . . . . . . . . . . . 9
2.2.1 Feasibility Study . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3 Software Requirement Specification ......................................................................... 12
2.4 Structure Of Project.............................................................................................. 14

2.5 Validation ............................................................................................................... 17

2.6 Expected Hurdles.................................................................................................... 17
2.7 SDLC Model Used ...................................................................................................... 17

3 System Design 21
3.1 Design Approach ......................................................................................................... 21
3.2 Detail Design ............................................................................................................... 21

3.3 System Design using various Structured analysis and design tools ...................... 22
3.4 Database Design ......................................................................................................... 25
3.5 Methodology ................................................................................................................ 25
4 Implementation, Testing, and Maintenance 26

4.1 Introduction to Languages, IDE’s, Tools and Technologies used for Imple-
mentation ................................................................................................................ 26
4.2 Testing Techniques and Test Plans ...................................................................... 31

5 Results and discussions 33

5.1 User Interface Representation ............................................................................... 33
5.2 Snapshots of system with brief detail of each ....................................................... 33

6 Conclusions and Future Scope 38

6.1 Conclusion of project ................................................................................................. 38
6.2 Future Scope of project .............................................................................................. 38

7 References 40
 1 Introduction

1.1 Introduction

StudyBuddy is an advanced ed-tech platform made with the MERN stack, allowing users
to create, view, and rate educational content. It focuses on giving students an engaging
learning experience while providing instructors a platform to share their knowledge globally.
This overview will delve into its technical aspects, detailing system architecture, front-end
and back-end designs, API structures, deployment methods, testing procedures, and future
upgrade possibilities. In essence, StudyBuddy combines tech prowess with educational
goals, benefiting both learners and educators.
The StudyBuddy falls under the category of Education Technology (EdTech). It combines
elements of student to seamless and interactive learning experience and making education
more accessible and engaging. The system aims to instructors to showcase their expertise
and connect with learners across the globe.
Online education is growing, but many students and teachers face problems. Students
often struggle to find engaging lessons, while teachers find it hard to share their knowl-
edge with a wider audience effectively. Many online learning sites are not user-friendly
or engaging. Students might get bored, find it hard to stay focused.Teachers want to

share their expertise but can’t always do so easily online. They might not have the right
tools to teach well or connect with students globally. This limits their reach and im-
pact.StudyBuddy aims to solve these problems. It wants to make learning fun and easy
for students while giving teachers a platform to shine and reach students worldwide. By
doing this, StudyBuddy hopes to make online education better for everyone involved.

1
1.2 Introduction to technology

1.2.1 Full Stack Development

The process of planning, building, testing, and deploying an entire web application from
scratch is known as full stack development. Working with a variety of technologies and
tools is required, including database development, front-end web development, and back-
end web development.full stack developers work in both the front end and the back end
of web development, which refers to the whole depth of a computer system programme.
Everything a client, or site visitor, can see and interact with is included in the front end.
Topics undertaken in full stack development are below mentioned

1. HTML: Hyper Text Markup Language is referred to as HTML. The most common
markup language for making Web pages is HTML. The layout of a Web page is described
in HTML.
2. CSS: The term "Cascading Style Sheets" is abbreviated as CSS. A computer language
called CSS is used to structure and organise HTML or XML-based web pages.
3. Tailwind: Tailwind is the most popular CSS framework to create rapidaly build modern

websites without ever leaving your HTML.

4. Javascript: JavaScript is a scripting language that allows users to do pretty much

anything else, including manipulate multimedia, animate graphics, and generate dynamic
content.
5. React: A JavaScript package called React is used to create user interfaces. It serves
as the web application’s view layer. Components are the foundation of all React apps. A
self-contained module that produces output is known as a component.
6. MongoDB Atlas: MongoDB Atlas is a fully managed cloud database service provided

by MongoDB. It offers automatic scaling, global clusters, and advanced security features,
allowing developers to easily deploy, scale, and secure their MongoDB databases in the
cloud. With MongoDB Atlas, developers can focus on building their applications while
leaving the management of the underlying infrastructure to MongoDB’s experts.

2
1.3 Introduction to project

StudyBuddy is an advanced ed-tech platform made with the MERN stack, allowing users
to create, view, and rate educational content. It focuses on giving students an engaging
learning experience while providing instructors a platform to share their knowledge globally.
This overview will delve into its technical aspects, detailing system architecture, front-end
and back-end designs, API structures, deployment methods, testing procedures, and future
upgrade possibilities. In essence, StudyBuddy combines tech prowess with educational
goals, benefiting both learners and educators.

1.4 Project Category

The StudyBuddy falls under the category of Education Technology (EdTech). It combines
elements of student to seamless and interactive learning experience and making education
more accessible and engaging. The system aims to instructors to showcase their expertise
and connect with learners across the globe.

1.5 Objectives

1) To seamless and interactive learning experience for students, making education more
accessible and engaging.
2) To platform for instructors to showcase their expertise and connect with learners across
the globe.

3) To Enable instructors to track and manage their earnings and can monitor students’
participation.
4) To monitor and track their course progress systematically.

1.6 Problem Formulation

Online education is growing, but many students and teachers face problems. Students
often struggle to find engaging lessons, while teachers find it hard to share their knowl-
edge with a wider audience effectively. Many online learning sites are not user-friendly
or engaging. Students might get bored, find it hard to stay focused.Teachers want to

3
share their expertise but can’t always do so easily online. They might not have the right
tools to teach well or connect with students globally. This limits their reach and im-
pact.StudyBuddy aims to solve these problems. It wants to make learning fun and easy
for students while giving teachers a platform to shine and reach students worldwide. By
doing this, StudyBuddy hopes to make online education better for everyone involved.

1.7 Identification of Need

StudyBuddy is needed because students want fun and flexible learning, and teachers
need a good platform to teach, connect with students, and grow their audience and earn-
ings.

1.8 Existing System

The existing system in StudyBuddy is built upon the principles of enhancing user experi-
ence, ensuring content quality, maintaining security, promoting personalized learning, and
continuously improving based on user feedback and needs.

Problems/shortcomings of the existing system

User Engagement and Retention: Without an intuitive and interactive interface, users
might find it challenging to navigate the platform, leading to reduced engagement and
retention rates.
Quality Control: In the absence of a robust rating and review system, there’s a risk of
inconsistent course quality. Without effective monitoring mechanisms, subpar content
might proliferate, impacting the platform’s reputation.
Payment and Transaction Issues: If the payment gateway is not secure or user-friendly,
it could deter potential students and instructors from conducting transactions, affecting
revenue streams and trust.
Scalability Concerns: As the user base grows, the platform must efficiently handle in-
creased traffic, course uploads, user interactions, and data storage without compromising
performance.
Data Security and Privacy: Handling user data, payment information, and course con-
tent necessitates stringent security measures. Any vulnerabilities could lead to breaches,

4
compromising user trust and legal implications.
Lack of Customization: If the platform does not offer personalized learning paths, con-
tent recommendations, or adaptive learning features, it might not cater to diverse learn-
ing styles and preferences.

Instructor-Student Matching: Without effective algorithms or mechanisms, students might

struggle to find instructors or courses aligned with their preferences, interests, or learning
objectives.

To mitigate these problems and achieve desired outcomes. StudyBuddy is focus on mak-
ing things easy and enjoyable for users and keep making the platform better based on
user feedback.

1.9 Proposed System

The proposed system, StudyBuddy aims to provide a seamless and interactive learning
experience for students, offering them a better way to access and engage with educational
content. For teachers, StudyBuddy is a place to show what they know, connect with stu-
dents worldwide, and expand their teaching reach.
• StudyBuddy is user-friendly, with clear navigation for both students and teachers.

• Provide secure and straightforward payment options for course enrollments and trans-
actions.
• Enable teachers on StudyBuddy to track student progress, engagement, and feedback
effectively.
• Implement strict data protection measures to safeguard user information and privacy.
• Use analytics and insights to help teachers optimize their courses, reach more students,
and grow professionally.

• Implementing a robust rating and review system.

• Integrate a notification system while purchasing the course.
• platform is mobile-responsive, allowing users to access content and features seamlessly
on various devices, including smartphones and tablets.

5
1.10 Unique Features of the System

StudyBuddy offers several unique features include:

• Global Instructor Marketplace: StudyBuddy serves as a global platform where instruc-
tors from around the world can showcase their expertise, creating a diverse and extensive
catalog of courses and subjects.
• Integrated Feedback Systems: StudyBuddy features comprehensive feedback mecha-
nisms that enable students to provide reviews, ratings, and suggestions, fostering a cul-
ture of continuous improvement and quality assurance.

• User Profiles: Create distinct profiles for students and instructors. Instructors can
showcase their qualifications, courses they offer, ratings, reviews, and other relevant in-
formation. Students can view their progress, enrolled courses, achievements, and more.

• Progress Tracking: Implement features like progress bars, checkpoints, and certificates
upon course completion. Students should be able to track their progress, revisit com-
pleted sections, and assess their understanding through regular quizzes and assessments.
• Notifications: Integrate a notification system while purchasing the course.
• Mobile Responsiveness: Ensure that the platform is mobile-responsive, allowing users
to access content and features seamlessly on various devices, including smartphones and
tablets.

6
 2 Training Work Undertaken

2.1 Topics Covered

1. HTML : The preferred markup language for documents intended to be viewed in

a web browser is HTML, or HyperText Markup Language. It frequently benefits from

tools like Cascading Style Sheets (CSS) and programming languages like JavaScript.HTML
documents are downloaded from a web server or local storage by web browsers, who then
turn them into multimedia web pages. HTML originally featured cues for a web page’s
appearance and semantically explains the structure of a web page.

2. CSS : CSS is used to specify a web page’s appearance, including its design, layout,
typefaces, and other behavioural elements. An overall Cascading Stylesheet was utilised
for the website rather than developing the layout designs for each page individually.As a
result, the web pages were uniform. Additionally, it included the adjustments necessary to
make the same content compatible with a variety of devices. The CSS file is typically kept
outside of the computer. Therefore, a developer just needs to alter the CSS file to alter
how a whole website looks. This results in significant time and effort savings. It safeguards
an organization’s financial health as well.

3. Tailwind : Tailwind CSS is a tool that helps web developers create websites more

easily. Instead of writing a lot of custom code, developers use ready-made "utility" classes
to style elements on the webpage quickly. This approach speeds up the design process and
keeps the code consistent.One great thing about Tailwind is its flexibility. Developers can
customize the styles, colors, spacing, and other design elements to match the specific look
and feel they want for their website. Plus, Tailwind makes it simple to create designs that
work well on both big computer screens and smaller mobile devices.Using Tailwind saves
developers time because they don’t have to write as much repetitive code. It also works well
with popular tools and frameworks that developers often use, making it easy to integrate
into different projects.

4. Javascript : JavaScript is a dynamic programming language used for creating web-

sites, web apps, video games, and many other things. You can use it to add dynamic

7
features to web sites that you couldn’t do with only HTML and CSS.JavaScript is a script-
ing language widely used by browsers to create dynamic online content. The effects of
JavaScript can be seen whenever a user sees a dropdown menu that can be clicked to re-
veal, additional content being added to a page, or dynamically changing element colours
on a page, to mention a few features.

5. React : React is one such front-end library that can build engaging user interfaces.
Full stack react development refers to using React as a Front-end Development framework
with a backend based on frameworks such as Node.The ideal way to create user interfaces
is by assembling little pieces of code (components) into complete websites. It was initially
created by Facebook, and is now maintained by the open-source community.

6. Redux : Redux serves as a centralized storage system for managing data in web
applications, particularly those developed with frameworks like React. Instead of scattering
data across various components or modules, Redux consolidates all application data into a
single entity known as the "store." This centralized approach streamlines data management,
making it easier to track, modify, and maintain the application state, especially as the
complexity of the application grows.

7. Node.js : Node.js is a powerful runtime environment that allows developers to ex-

ecute JavaScript code on the server-side, enabling the development of scalable and efficient
web applications. Unlike traditional server-side languages that rely on multi-threading,
Node.js operates on a single-threaded, non-blocking event loop model, which enhances
performance and facilitates handling concurrent requests with minimal resource overhead.

8. Express.js : Express.js, commonly referred to as Express, is a minimal and flexi-

ble Node.js web application framework that provides a robust set of features for building
web and mobile applications. Designed to simplify the process of creating server-side ap-
plications and APIs, Express offers a streamlined, unopinionated architecture that allows
developers to structure their applications according to their specific requirements and pref-
erences.

9. MongoDB : MongoDB is a popular NoSQL database that offers a flexible, scalable,

8
and efficient solution for storing, retrieving, and managing data in modern web applications.
Designed to address the limitations of traditional relational databases, MongoDB employs
a document-oriented data model, where data is stored in JSON-like BSON (Binary JSON)
documents, allowing developers to represent hierarchical relationships, arrays, and complex
data structures natively within a single document.

10. MongoDB Atlas : MongoDB Atlas is a fully managed cloud database service
provided by MongoDB. It offers automatic scaling, global clusters, and advanced security
features, allowing developers to easily deploy, scale, and secure their MongoDB databases
in the cloud. With MongoDB Atlas, developers can focus on building their applications
while leaving the management of the underlying infrastructure to MongoDB’s experts

2.2 Requirement Analysis and System Specification

2.2.1 Feasibility Study

The feasibility of the project is analyzed in this phase and an idea is put forward with very
general plan for the project and sometime estimates. During system analysis feasibility
study of the proposed system is to be carried out. This is to ensure that the proposed
system is not a burden to the user. Some understanding of the major requirements for the
system is essential. Four key considerations involved in the feasibility analysis are:

Figure 1: Feasibility Study

Time Feasibility: The project will be completed within a specified timeframe, ensuring
that all development, testing, and deployment activities are carried out efficiently.
9
 A detailed project schedule will be created, outlining the tasks, milestones, and deadlines
to ensure timely completion.

Regular progress tracking and monitoring will be implemented to identify and address
any potential delays or bottlenecks.

Technical Feasibility:The project will utilize modern technologies and frameworks

MERN Stack, that are readily available and well-supported.
The development team possesses the necessary technical skills and expertise to imple-
ment the required functionalities.

The system will be designed to integrate with existing systems and databases, ensuring
seamless data exchange and interoperability. The tools and technologies used in the devel-
opment of this system are:
• Code Editor: Microsoft VS Code
• Languages: HTML,CSS, JavaScript and JSON.
This software are free to use and are available for students. To install all these in the
system, developer need any regular laptop/PC with minimum 16 GB RAM

Economic Feasibility: A cost-benefit analysis will be conducted to assess the financial

viability of the project. The project’s benefits, such as time savings, improved efficiency,
and reduced paperwork, will outweigh the costs associated with development, implementa-
tion, and maintenance. The resources used in this project are easily available and are very
economic. Today, all the software’s for this system and plugins are available to develop
Web-application easily.

Operational Feasibility: Operational feasibility is a measure of how well the proposed

system will solve the problems, and takes advantage of the opportunities that are identified
during scope The project will align with the existing operational processes and workflows
of the institution. User acceptance testing and feedback will be obtained to ensure that
the system meets the operational requirements and addresses the needs of all stakeholders.
Adequate training and support will be provided to users to facilitate a smooth transition
to the new system and ensure its successful operation.

10
 Software Requirements:

• Operating System: Windows, macOS, Linux

• Text Editor or Integrated Development Environment (IDE): Visual Studio Code,

Atom, Sublime Text, etc.

• Web Browser: Google Chrome, Mozilla Firefox, Safari, etc.

• Node.js: JavaScript runtime environment

• Express.js: Web application framework for Node.js

• MongoDB: NoSQL database for data storage

• React.js: JavaScript library for building user interfaces

• HTML, CSS: Markup and styling languages

• Git: Version control system for collaboration and code management

Hardware Requirements:

• Computer or Laptop with a minimum of 4GB RAM and a decent processor

• Sufficient storage space to accommodate the development environment and project

files

• Internet connectivity for accessing online resources, APIs, and databases

• Display with a resolution of at least 1280x800 pixels for comfortable coding and
testing

• Keyboard and mouse or trackpad for input and navigation

• Optional: Mobile device (smartphone or tablet) for testing the responsive design of
the application

Note: The specific software and hardware requirements may vary depending on the op-
erating system and development preferences. It is advisable to refer to the documentation of
each software/library/framework for their detailed system requirements and compatibility.

11
2.3 Software Requirement Specification

Visual Studio Code:

Visual Studio Code, also commonly referred to as VS Code, is a source-code editor made
by Microsoft with the Electron Framework, for Windows, Linux and macOS. 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, reporting that they use
it.

Figure 2: VS Code Logo

Hardware Requirements:

• RAM: A minimum of 8 GB is required, 16 GB recommended

• Android Studio will require some heavy Lifting. Less than 16 GB can

• cause problems while Multitasking.

• OS: This system can run on any latest, Linux OS, Windows 7/810/11.

• Processor: Intel i5 10th Gen or above or Ryzen 5 4th Gen or above

12
• Sufficient storage space to accommodate the development environment and project
files about 250GB.

• Internet connectivity for accessing online resources, APIs, and databases

Software Requirements:

• Operating System: Windows, macOS, Linux

• Text Editor or Integrated Development Environment (IDE): Visual Studio Code,

Atom, Sublime Text, etc.

• Web Browser: Google Chrome, Mozilla Firefox, Safari, etc.

• Node.js: JavaScript runtime environment

• Express.js: Web application framework for Node.js

• MongoDB: NoSQL database for data storage

• React.js: JavaScript library for building user interfaces

• HTML, CSS: Markup and styling languages

• Git: Version control system for collaboration and code management

13
2.4 Structure Of Project

React Project View where developer will have all files related to the project. Here, it
consists of Backend folder, src folder, public folder, node modules folder.

Figure 3: Project Structure

Backend Folder:
In Backend folder consist of 4 files and 1 folder of back-end server. The files are app.js,
package-lock.json, package.json, users.json. app.js contains all api’s of the back-end callings,
package-lock.json file contains dependencies for the server, users.json contains the login
credentials of every user

14
 Figure 4: Server Folder

SRC Folder:
The majority of the project’s React code is written in the SRC folder, making it the most
significant one. The application’s entry point, main. React, is by default located in the
SRC directory. But this arrangement can be altered. These are helpful files which are used
by an application or a command or a process for their proper execution.Organizing your
files and directories within src effectively can help maintain a clean and scalable codebase,
making it easier to develop, debug, and expand your React application over time.

15
 Figure 5: SRC Folder

User Interface of IDE:

User interface of VS Code includes a clean and intuitive design. It consists of a sidebar for
easy navigation, a central editor window for code editing, and a status bar for displaying
helpful information. The interface includes various panels for debugging, terminal access,
and version control integration. It offers a customizable and efficient environment for coding
tasks.

16
 Figure 6: User Interface of IDE

User Requirements:

User must have Web Browser access. This application can only be used when they have
access to internet, user and the requests/responses to be shared on the application.

2.5 Validation

The process of evaluating software during the development process or at the end of the
development process to determine whether it satisfies specified requirements. Validation
Testing ensures that the product actually meets the client’s needs. It can also be defined
as to demonstrate that the product fulfills its intended use when deployed on appropriate
environment.

2.6 Expected Hurdles

Dependencies are used to overcome the hurdles which could rise in the future. Various
modules and dependencies have been added to achieve the successful implementation of
the app. One of the most important dependency is that the device has access to internet.
One another important dependency that user knows the basic operations of web services..

2.7 SDLC Model Used

Making an application is no mystery in today’s time however making a successful and user
friendly and attractive is a process which involves quite an extensive pre-planning. There

has been a meteoric rise in the web market in the past few years with millions of applications
are available. In such a case when the competition is so huge, don’t developers think that
17
they should be really thorough with the basic concepts of application development? Also,
developers have to really make it stand out in function, in its use and in its design to attract
the user’s attention. And to achieve all this developers have to get it right the very first time.
Since, it is so important for application to be spot-on the first time hence it is necessary
for them to follow a step by step process to building a Application Development Lifecycle
is just a representation of the conventional Software Development Lifecycle (SDLC) but
from the perspective of a browser.

Figure 7: SDLC

Phase 1: Pre-planning and research

The first phase is the most important one because it is during this phase that developer
lay down the necessary ground work for what is to follow next. During this step it is
very important to do substantial research and brainstorming before moving on to the next
phase. Developer need to do the homework and have answers to questions like – What
is the main aim of this application? Who is the target audience? Which platform should
target first? Is the application going to serve them, people or both? Once they have the
answer to all these questions then they clearly know that how much time it will take for
them to develop the application. Another thing which a must in this phase is the analysis
of the need and competition.
18
Phase 2: Mental Prototyping

Once developers are done with the research and have laid down the costs involved then the
next phase involves preparing a detailed scope of work. They need to do a mental proto-
typing of their application and draw their ideas in the form of sketches on a whiteboard.
This will be the first visual representation of the ideas which they have collected in Phase
1 and it will help them uncover usability issues. Another thing which needs to be done in
this phase is to take the feedback of relevant people to get a perspective of what they think
about your idea. Discussing it with them will help them figure out the loopholes and allow
them to look for a solution to tackle with them.

Phase 3: Assessment of Technical feasibility

Having an understanding of the visuals is not enough because they need to analyze whether
the backend systems will support the application’s functionality or not. To understand if
the idea of the application is technically feasible they need to get access to public data.
They also need to determine which platform they are building their application for, first.
Building an App shall have different requirements depending upon its languages such as
dart and so on.

Phase 4: Building a prototype

Developers cannot define the touch experience until and unless they actually touch the
application and see how it works and flows. In order for that to happen they must build a
prototype and get the experience of the Application into the user’s hand as soon as possible.
This will help them see if things are going in the right direction. In this phase they can
use rough and not exhaustive wireframes. Including the stakeholders in this process and
allowing them to touch the prototype shall help them take their feedback and implement
it into your work.

Phase 5: Designing and development of Application

Before moving to coding they must design their Application. A User Experience designer
can create the interaction architecture of the design elements while a User Interface de-
signer can create the look and feel of the application. This is a multi-step process and the
end results is visual directions and blueprints which gives envision of the final product.

Phase 6: Building the Application

Once the design is ready then it is the time for them to build the Application. The best

19
approach for application development as it allows them to make changes, add new features
and keep evolving with the changing trends.

Phase 7: Testing the Application

Congratulations on building the Application. For Phase 7 they need to get some target
users to help them test the Application. For user experience testing they need to put their
Application in the hands of the users which they are targeting and once it passes the UAT
test they know that the solution which they are providing that works. Make their Appli-
cation available for the beta trial by allowing open participation of people to test it. The
feedback from these beta users will help you determine if your Application’s functions work
well in the real-world environment.

Phase 8: The launch

Once Phase 7 is successful, the application is complete and is ready to be submitted to
the Application stores for approval. However, this is not the end as every Application
requires regular updates and new features to be added to it during the Application devel-
opment lifecycle. The development cycle begins once again as soon as the first version of
the Application is launched.

20
 3 System Design

3.1 Design Approach

The most creative and challenging phase of the system life cycle is system design. The
term design describes a final system and the process by which it is developed. It refers to
the technical specification that will be applied in implementing the candidate system. It
also includes the construction of program testing. The key question here is how should
the problem be solved? The first step is to determine how the output is to be produced
and in what format. Samples of the output are also presented. Second input data and
master files had to be designed to meet the requirements of the proposed output. The
operational phase is handled through program construction and testing, including a list
of the programs needed to meet the system’s objective and complete documentation. Fi-
nally, details related to justification of the system and an estimate of the impact of the
candidate system on the user and the organization are documented and management as a
step toward implementation.

3.2 Detail Design

User :

This app lets the user login with their Unique id and password, the back-end will check
and redirect to the respective dashboards for different users like Instructor and Student.

21
3.3 System Design using various Structured analysis and design

tools

1. Use Case Diagram

In an ed-tech platform featuring role-based access control, the Admin serves as the
overarching authority, wielding comprehensive control and oversight over all platform func-
tionalities, user management, content approval, financial transactions, and dispute resolu-
tion. Their responsibilities encompass creating, monitoring, and managing user accounts,
course content, instructor profiles, financial transactions, revenue sharing models, and user
feedback. On the other hand, Instructors operate within a more specialized domain, focus-
ing on content creation, course management, student engagement, and financial earnings.
They have the autonomy to develop, upload, and manage course materials, interact with
students, schedule live sessions, and receive payments for their services. Concurrently, Stu-
dents engage with the platform primarily as learners, accessing course offerings, interact-
ing with instructors, making secure payments, participating in discussions, and providing
valuable feedback through ratings and reviews. Their user experience emphasizes course
discovery, content access, interactive learning environments, and community engagement.
Collectively, this role-based structure ensures a harmonized, secure, and personalized user
experience, facilitating seamless interactions, knowledge sharing, collaboration, and growth
within the ed-tech ecosystem.

22
Figure 8: Use Case Diagram

23
2. Data Flow Diagram

Figure 9: DFD Level-0

Level 1 DFDs

Figure 10: DFD Level-1

Level 2 DFDs

Figure 11: DFD Level-2

24
3.4 Database Design

Figure 12: Database Design

3.5 Methodology

Methodology is the systematic, theoretical analysis of the methods applied to a field of

study. Creating StudyBuddy involves a step-by-step approach to make sure everything
runs smoothly. First, we talk to everyone involved, like students and teachers, to under-
stand what they want from the platform. Next, we plan out how the platform will look and
work, deciding on the best technology and design. Then, we start building StudyBuddy,
using a flexible method that lets us make changes easily based on feedback and testing.
Once everything is ready, we launch StudyBuddy to the public, making sure users know
how to use it with guides and training. After the launch, we keep an eye on how things are
going, listen to user feedback, and make improvements regularly. This way, StudyBuddy
can grow and get better over time, helping students learn and teachers teach in a more
engaging and effective way.

This project is based on the MongoDB database, Node, Express and React based tech-
niques.

Figure 13: Methodology

25
 4 Implementation, Testing, and Maintenance

4.1 Introduction to Languages, IDE’s, Tools and Technologies

used for Implementation

React
React is an open-source JavaScript library used for building user interfaces (UIs) in web
applications. It was developed by Facebook and has gained significant popularity due to its
efficiency and flexibility. React follows a component-based architecture, allowing developers
to create reusable UI components that update dynamically based on changes in application
state. It uses a virtual DOM (Document Object Model) to optimize rendering performance,
resulting in fast and responsive applications. React’s declarative syntax and one-way data
flow make it easier to reason about and maintain complex UIs. It is commonly used in
conjunction with other libraries or frameworks to build robust, scalable, and interactive
web applications.

Figure 14: React

Java Script
JavaScript is a high-level, interpreted programming language primarily used for front-end
26
web development. It allows developers to add interactivity and dynamic behavior to web-
sites and web applications. JavaScript can also be used for server-side programming with
the help of frameworks like Node.js.

Key features of JavaScript include::

• Client-side scripting: JavaScript runs on the client-side, meaning it is executed by

the user’s web browser. It enables dynamic updates, form validation, and interactive
elements on web pages.

• Versatility: JavaScript is a multipurpose language that can be used for a variety

of tasks, including DOM manipulation, event handling, asynchronous programming,
and creating interactive web elements.

• Object-oriented: JavaScript supports object-oriented programming (OOP) concepts

like encapsulation, inheritance, and polymorphism. It allows developers to create
objects and classes, making code organization and reuse easier.

• Dynamic typing: JavaScript is dynamically typed, meaning variable types are deter-
mined during runtime. This provides flexibility but also requires careful attention to
data types and error handling.

• Support for frameworks and libraries: JavaScript has a vast ecosystem of frameworks
and libraries, such as React, Angular, and Vue.js, that simplify and accelerate web
development by providing ready-to-use components and tools.

• Event-driven programming: JavaScript employs an event-driven programming model,

where actions or events trigger specific code execution. This approach is commonly
used for handling user interactions, such as button clicks or form submissions.

27
 • Interoperability: JavaScript can interact with HTML and CSS, allowing developers
to manipulate web page elements, modify styling, and create dynamic content.

• Cross-platform compatibility: JavaScript is supported by all major web browsers and

can be used across different operating systems, making it highly accessible.

• Extensibility: JavaScript allows for extending its functionality through third-party

libraries and APIs. Developers can leverage these resources to add complex features
and integrate with other technologies.

JavaScript has evolved significantly over the years and is now used not only for web de-

velopment but also for server-side scripting, mobile app development, and even desktop
application development. Its versatility, extensive community support, and continuous
updates make it a powerful and widely adopted programming language.

Figure 15: Java Script

MongoDB Atlas
MongoDB Atlas is a fully-managed cloud database service provided by MongoDB, the com-
pany behind the popular NoSQL database, MongoDB. It offers a convenient and scalable
solution for deploying, managing, and scaling MongoDB databases in the cloud.

Key features of MongoDB Atlas include:

28
1. Cloud-based Database Hosting: MongoDB Atlas allows you to host your MongoDB
databases in the cloud, eliminating the need for managing your own infrastructure. It sup-
ports multiple cloud providers, including AWS, Azure, and Google Cloud, giving you the
flexibility to choose your preferred cloud environment.

2. Automated Provisioning and Scaling: With MongoDB Atlas, you can easily pro-
vision new database instances with a few clicks. It provides automated scaling options,
allowing your databases to grow seamlessly as your application demands increase.
3. High Availability and Data Replication: MongoDB Atlas ensures high availability
by replicating your data across multiple geographic regions. It employs replica sets, where
data is automatically synchronized across multiple database instances, providing fault tol-
erance and disaster recovery capabilities.
4. Data Security and Compliance: Atlas offers various security features to protect

your data, including built-in encryption at rest, encryption in transit, and integrated au-
thentication mechanisms. It also supports compliance standards such as GDPR, HIPAA,
and SOC 2, ensuring that your data meets industry regulations.
5. Monitoring and Performance Optimization: MongoDB Atlas provides comprehen-
sive monitoring and performance analysis tools. You can track database metrics, receive
alerts, and utilize performance optimization recommendations to ensure your databases
perform optimally.

6. Backup and Point-in-Time Recovery: Atlas offers automated backup and point-
in-time recovery options. You can schedule backups and retain snapshots of your data,
allowing you to restore your databases to specific points in time.

7. Integration with Other MongoDB Tools: MongoDB Atlas seamlessly integrates

with other MongoDB tools and services. It can be easily used in conjunction with MongoDB
Compass for visual database management and MongoDB Stitch for serverless functions and
backend services.
8. Managed Updates and Patches: MongoDB Atlas handles the management of up-
dates and patches, ensuring that your databases are always up to date with the latest
MongoDB versions and security patches.

9. Flexible Pricing Model: Atlas provides a flexible pricing model, allowing you to
choose from various plans based on your specific requirements. You can scale your database

29
resources up or down as needed, and pay only for the resources you use.
MongoDB Atlas simplifies the deployment and management of MongoDB databases, pro-
viding a reliable and scalable solution for modern application development. It allows devel-
opers to focus on building their applications without worrying about infrastructure man-
agement, ensuring a seamless and hassle-free database experience.

Figure 16: MongoDB Atlas

30
 IDE’s Used:

• Android Studio:

Android Studio is the official integrated development environment for Google’s Android
operating system, built on JetBrains’ IntelliJ IDEA software and designed specifically for
Android development. It is available for download on Windows, macOS and Linux based
operating systems. To speed up the creation of apps, Android Studio offers a variety of
code samples and templates. To understand how to create various app components, see
sample code. Create new app modules, distinct activities, or other particular Android
project components using templates.

Figure 17: Visual Studio code

4.2 Testing Techniques and Test Plans

i. Unit Testing :
Unit testing is a level of software testing where individual units/ components of a software
are tested. The purpose is to validate that each unit of the software performs as designed.
A unit is the smallest testable part of any software. It usually has one or a few inputs and
usually a single output. In procedural programming, a unit may be an individual program,
function, procedure, etc. In object-oriented programming, the smallest unit is a method,
which may belong to a base/ super class, abstract class or derived/ child class. Unit testing
frameworks, drivers, stubs, and mock/ fake objects are used to assist in unit testing.
31
ii. Integration Testing :

Integration testing means testing in large. After testing all the units individually, the units
are integrated over the number of steps and tested after each step of integration, it is known
as integration testing.

iii. System Testing :

System Testing is the testing of a complete and fully integrated software product. Usually
software is only one element of a larger computer based system. Ultimately, software
is interfaced with other software/hardware systems.System Testing is actually a series of
different tests whose sole purpose is to exercise the full computer based system.
Two Category of Software Testing are-

o Black Box Testing-System test falls under the black box testing category of software
testing
o White Box Testing-is the testing of the internal workings or code of a software application.
In contrast, black box or System Testing is the opposite. System test involves the external
workings of the software from the user’s perspective.

iv. Acceptance Testing :

Acceptance testing, a testing technique performed to determine whether or not the software
system has met the requirement specifications. The main purpose of this test is to evaluate
the system’s compliance with the business requirements and verify if it is has met the
required criteria for delivery to end users.

Figure 18: Testing

32
 5 Results and discussions

5.1 User Interface Representation

User-There are 2 different users with their respective dashboards. Each one have different
roles assigned to them by which the app can redirect to the respective dashboard.

• A student will login and will see "Student Dashboard" he will see a profile where he
can update the information about him. He can se his enrolled courses and he can
watch the video of courses and also see the Cart.

• Instructor will login to the "Instructor Dashboard" he will see a profile where he can
update the information about him. He can create course there and can public or
private also. Instructor also see the Students and their Earning Chart.

5.2 Snapshots of system with brief detail of each

1. Login Page

Login page is the landing page for this project and has inputs: Email ID, Password. It also
have forgot password? and Sign In button.

Figure 19: Login page

33
2. SignUp Page for Student :

Student SignUp page have a input fields like First Name, Last Name, Email, Create Pass-
word and Confim Password and also have a Create Account button.

Figure 20: SignUp Page for Student

34
 3. SignUp Page for Instructor :

Instructor SignUp page have a input fields like First Name, Last Name, Email, Create
Password and Confim Password and also have a Create Account button.

Figure 21: SignUp Page for Instructor

35
 4. OTP Page :

Before going to Dashboard of Student and Instructor after SignUp will open one page which
is called One Time Password page for verify the Email

Figure 22: OTP Page

36
 2. Student Dashboard :

Student Dashboard have options of My Profile, Enrolled Courses, Cart, Settings and Lo-
gOut button

Figure 23: Student Dashboard

37
6 Conclusions and Future Scope

6.1 Conclusion of project

In conclusion, this document outlines the architecture, features, and functionalities of the
StudyBuddy 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 or Railway.app 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.

6.2 Future Scope of project

This section discusses potential future improvements to the StudyBuddy platform. These
enhancements are listed along with an explanation of how they would improve the platform
and priority for implementation.

1. Gamification features: Adding gamification features such as badges, points, and

leaderboards can increase user engagement and motivation. This would be a medium-
priority enhancement.

2. Personalized learning paths: Creating personalized learning paths for each student
based on their interests and learning style can increase student satisfaction and suc-
cess. This would be a high-priority enhancement.

3. Social learning features: Adding social learning features such as group discussions,
peer-to-peer feedback, and collaborative projects can increase student engagement
and interaction. This would be a medium-priority enhancement.

38
4. Mobile app: Creating a mobile app for the platform would allow for more convenient
access to course content and features, and would increase the platform’s reach. This
would be a high-priority enhancement.

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

6. Virtual reality/augmented reality integration: Adding virtual reality or augmented

reality components to certain courses can enhance the learning experience and make
it more immersive. This would be low to medium-priority enhancement.

39
 7 References

[1] Full Stack Open, "Full Stack Open," Full Stack Open. [Online]. Available: https://fulls
Accessed: Nov. 7, 2023.

[2] W3Schools, "What is Full Stack Development?" W3Schools. [Online]. Available:

https://www.w3schools.com/whatis/whatisf ullstack.asp.Accessed : Nov.7, 2023.

[3]W 3Schools, ”HTMLTutorial, ”W 3Schools.[Online].Available : https : //www.w3schoo

Nov.7, 2023.

[4]W 3Schools, ”CSSTutorial, ”W 3Schools.[Online].Available : https : //www.w3school

Nov.7, 2023.
[5] TailwindCss, ”TailwindCss, ”Tailwind.[Online].Available : https : //tailwindcss.com/

Nov.7, 2023.
[6] Tutorialspoint, ”JavaScriptTutorial, ”Tutorialspoint.[Online].Available : https :

//www.tutorialspoint.com/javascript/index.htm.Accessed : Nov.7, 2023.

[7]React, ”React, ”React.[Online].Available : https : //react.dev/.Accessed :

Nov.7, 2023.
[8] KnowledgeHut, ”Front−endWebDevelopmentwithReact, ”KnowledgeHut.[Online].Av

https : //www.knowledgehut.com/blog/web − development/front − end − web −

development − with − react.Accessed : Nov.7, 2023.

[9] Tutorialspoint, ”JavaScriptTutorial, ”Tutorialspoint.[Online].Available : https :

//www.tutorialspoint.com/javascript/index.htm.Accessed : Nov.7, 2023.

40