Project Report

on

Learnflex
Submitted as partial fulfillment for the award of

BACHELOR OF TECHNOLOGY
DEGREE
Session 2023-24
in

Computer Science

By
Shagun Kaushik (2000320120157)
Saujanya Jain (2000320120154)
Saurabh Agrahari (2000320120155)

Under the guidance of

Mr. Praveen Rai
Assistant Professor

ABES ENGINEERING COLLEGE, GHAZIABAD

(AFFILIATED TO DR. A.P.J. ABDUL KALAM TECHNICAL UNIVERSITY, U.P., LUCKNOW)

June 2024
 Project Report
on

Learnflex
Submitted as partial fulfillment for the award of

BACHELOR OF TECHNOLOGY
DEGREE
Session 2023-24 in

Computer Science

By
Shagun Kaushik (2000320120157)
Saujanya Jain (2000320120154)
Saurabh Agrahari (2000320120155)

Under the guidance of

Mr. Praveen Rai
Assistant Professor

ABES ENGINEERING COLLEGE, GHAZIABAD

(Affiliated to Dr. A.P.J. ABDUL KALAM TECHNICAL UNIVERSITY, U.P., LUCKNOW)

June 2024
 DECLARATION

We hereby declare that the work being presented in this report entitled “LEARNFLEX: a flexible

learning solution.” is an authentic record of our own work carried out under the supervision of
Mr. “Praveen Rai”. The matter embodied in this report has not been submitted by us for the
award of any other degree.

Signature:

Name: Shagun Kaushik

Roll No.: 2000320120157

Date:

Signature:

Name: Saujanya Jain

Roll No.: 2000320120154

Date:

Signature:

Name: Saurabh Agrahari

Roll No.: 2000320120155

Date:
 CERTIFICATE

This is to certify that project report entitled “LEARNFLEX: a flexible learning solution. "
which is submitted by.Shagun, Saujanya, Saurabh... in partial fulfillment of the requirement for the
award of degree B. Tech. in Department of Computer Science. of Dr. A.P.J. Abdul Kalam Technical
University, formerly Uttar Pradesh Technical University, is a record of the candidate's own work
carried out by him/them under my supervision. The matter embodied in this thesis is original and has
not been submitted for the award of any other degree.

Date: (Supervisor Signature)

Mr. Praveen Rai
Assistant Professor
Department of Computer Science
ABES Engineering College, Ghaziabad
 ACKNOWLEDGEMENT

It gives us a great sense of pleasure to present the report of the B. Tech Project undertaken during B. Tech.

Final Year. We owe special debt of gratitude to Mr. Praveen Rai, Department of Computer Science,
ABESEC Ghaziabad for his/her constant support and guidance throughout the course of our work. Her
sincerity, thoroughness and perseverance have been a constant source of inspiration for us. It is only his
cognizant efforts that our endeavors have seen light of the day.

We also take the opportunity to acknowledge the contribution of Professor Dr. Pankaj Kumar Sharma., Head,
Department of Computer Science, ABESEC Ghaziabad for his full support and assistance during the
development of the project.

We also do not like to miss the opportunity to acknowledge the contribution of all faculty members of the
department for their kind assistance and cooperation during the development of our project. Last but not the
least, we acknowledge our friends for their contribution in the completion of the project.

Signature:

Name: Shagun Kaushik

Roll No.: 2000320120157

Date:

Signature:

Name: Saujanya Jain

Roll No.: 2000320120154

Date:

Signature:
Name: Saurabh Agrahari

Roll No.: 2000320120155

Date:
 ABSTRACT

This article describes the development and implementation of an educational technology (Ed Tech)
website designed to transform education. The aim of this work is to create a multiple platform that
integrates flexible learning tools, collaboration, and learning resources to improve teaching and
learning outcomes. Methodologically, the project included process design, user interface
development, and data-driven analysis to ensure usability and compliance. The effectiveness of the
platform has been evaluated through user testing and feedback, demonstrating student engagement,
improving retention of information, and improving teacher-student relationships.

Key findings highlight the role of educational technology websites in the learning environment.
Analytics show that the platform's new features support significant improvements in student
engagement, experience, and instructional effectiveness. The conclusions drawn from this study
underscore the transformative potential of technology in reshaping traditional educational
paradigms. Additionally, the study discusses challenges faced during development and proposes
avenues for future enhancements to further optimize the platform's effectiveness.

Keywords : — Ed Tech, Educational Technology, MERN Stack, Online Learning, E-Learning

Platform, Web Development, MongoDB, Express.js, React, Node.js, User Experience, Interactivity,
Student Engagement, Learning Management System (LMS), Front-end Development, Back-end
Development, Scalability, Responsive Design, User Feedback.

.
 TABLE OF CONTENTS Page

DECLARATION...............................................................................................................ii
CERTIFICATE................................................................................................................iii
ACKNOWLEDGEMENTS............................................................................................iv
ABSTRACT.....................................................................................................................v
LIST OF TABLES...........................................................................................................11
LIST OF FIGURES..........................................................................................................12
LIST OF GRAPHS...........................................................................................................13
LIST OF ABBREVIATIONS...........................................................................................14
CHAPTER 1 15
1.1. INTRODUCTION.............................................................................................15
CHAPTER 2...................................................................................................................16
2.1 LITERATURE SURVEY...................................................................................16
2.2. 17
2.2.1 18
2.2.2 .19-20
CHAPTER 3..................................................................................................................21
3.1. CHAPTER DESIGN AND METHODOLOGY.................................................22-28

CHAPTER 4
4.1 SOFTWARE AND HARDWARE REQUIREMENTS....................................29
4.2 IMPLEMENTATION……………………….....................................................30
4.3 RESULTS..........................................................................................................33
CHAPTER 5 (CONCLUSIONS).................................................................................35
APPENDIX A...............................................................................................................39

REFERENCES..............................................................................................................40-41

10
 LIST OF TABLES
Table Description

Table - 1 It shows data collected from different papers.

11
 LIST OF FIGURES

Figure Description
Fig 3.7.1 USE Case Diagram Sequence

Fig 3.8 Diagram

Fig 4.1 3-Tier Architecture Diagram example Class Diagram

Fig 4.2 Data Flow Diagram
Fig 4.3 Activity Diagram ER
Fig 4.4 Diagram
Fig 4.5 Database schema diagrams

12
 LIST OF ABBREVIATIONS

EdTech Educational Technology

JS Java Script

CSS Cascading Style Sheets

DB Database

ER Entity Relationship

UI User Interface

API Application Programming Interface

MERN MongoDB, Express, React, Node

13
 CHAPTER 1
INTRODUCTION

LearnFlex is a fully functional ed-tech platform that enables users to create, consume, and rate
educational content. The platform is built using the MERN stack, which includes ReactJS, NodeJS,
MongoDB, and ExpressJS.

LearnFlex aims to provide: −

• A seamless and interactive learning experience for students, making education more accessible
and engaging.

• A platform for instructors to showcase their expertise and connect with learners across the globe.

In the following sections, we will cover the technical details of the platform, including:

1. System architecture: The high-level overview of the platform's components and diagrams of the
architecture.

2. Front-end: The description of the front-end architecture, user interface design, features, and
functionalities of the front-end, and frameworks, libraries, and tools used.

3. Back-end: The description of the back-end architecture, features and functionalities of the back-
end, frameworks, libraries, tools used, and data models and database schema.

4. API Design: The description of the API design, list of API endpoints, their functionalities, and
sample API requests and responses.

5. Deployment: The description of the deployment process, hosting environment and infrastructure,
and deployment scripts and configuration.

6. Testing: The description of the testing process, types of testing, test frameworks and tools used.

7. Future Enhancements: The list of potential future enhancements to the platform, explanation of
how these enhancements would improve the platform, estimated timeline and priority for
implementing these enhancements.

In summary, LearnFlex 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.

14
The dynamic environment of education has undergone a significant transformation, mostly driven
by the widespread availability of digital tools and platforms. In this progression, websites in
particular have become essential platforms that function as multipurpose centers for information
sharing, interactive education, and student-teacher collaboration. Their contribution to the provision
of varied, flexible, and easily accessible learning materials has completely changed the face of
education.

The evaluation's particular goals include a thorough examination of LearnFlex's user interface
design, the effectiveness of its adaptive learning tools, the scope and quality of its instructional
materials, and its capacity to support cooperative learning environments. Through a thorough
analysis of these components, this article seeks to illuminate the critical role that LearnFlex will
play in defining the nature of education going forward and its ability to serve the varied
requirements of both educators and students.

15
 CHAPTER 2

LITERATURE SURVEY

The revolutionary potential noted in LearnFlex's review is echoed in the literature on educational
technology. Research has consistently demonstrated that technology improves learning outcomes;
these findings are consistent with the idea that technology may improve education by offering a
variety of material delivery options and userfriendly interfaces.

The importance of usability, interaction, and content relevance in educational websites is

emphasized by current research. LearnFlex's strengths in these domains are consistent with existing
theories, indicating its capacity to captivate users and accommodate a wide range of learning
requirements.

Nonetheless, the evaluation's challenges—such as technological difficulties and accessibility

problems—repeat writing that emphasizes the need of inclusive design and the ongoing need for
content moderation. The difficulties in accomplishing a smooth integration of technology into
educational environments are highlighted by these discrepancies between theoretical aspirations
and actual implementation.

The evaluation results' comparison with the body of literature highlights the necessity for a
comprehensive strategy that strikes a balance between educational considerations and technical
improvements, while also reaffirming basic concepts. This summary emphasizes LearnFlex's
conformance to accepted theories while highlighting the necessity of ongoing improvement to fill
in any gaps found during assessment.

16
Table-1: It shows data collected from different papers.

17
18
 CHAPTER 3

SOFTWARE REQUIREMENT SPECIFICATION

3.1 Product Perspective

EdTech websites consists of an online website that allows users to create a classroom like
environment with the features that it contains. Once registered to the system, a user can create a
profile sharing his or her information with the rest of the enrolled users. Users will be able to find
commonalities with each other through the user profile. EdTech website also gives users the ability
to store data and/or important materials in a secure network location for future retrieval or present
usage. This particular data as well as other files may be shared or worked on using EdTech website
extensive tools for file sharing and document collaboration. Users can work together on a single
document in real time or send their work to other users via secure file sharing methods and
protocols. If further communication is need between users, EdTech websites has features such as
instant messaging, where users can hold single or group conversations via a secure real-time
communication based on typed text. However, if more efficient means of communication are need,
users have the ability to hold single or group video/audio conferences, whereby the users will be
able to see other users streamed live in real-time.

The top level diagram below shows all of the user features that will be implemented for the system.

19
3.1.1 System Interfaces
The Ignite Ed-tech platform consists of three main components: the front end, the back end, and the
database. The platform follows a client-server architecture, with the front end serving as the client
and the back end and database serving as the server.
3.1.1.1 Front-end
The front end of the platform is built using ReactJS, which is a popular JavaScript library for building
user interfaces. ReactJS allows for the creation of dynamic and responsive user interfaces, which are
critical for providing an engaging learning experience to the students. The front end communicates
with the back end using RESTful API calls.
3.1.1.2 Back end
The back end of the platform is built using NodeJS and ExpressJS, which are popular frameworks for
building scalable and robust server-side applications. The back end provides APIs for the front end to
consume, which include functionalities such as user authentication, course creation, and course
consumption. The back end also handles the logic for processing and storing the course content and
user data.
3.1.1.3 Database
The database for the platform is built using MongoDB, which is a NoSQL database that provides a
flexible and scalable data storage solution. MongoDB allows for the storage of unstructured and
semi-structured data, which is useful for storing course content such as videos, images, and PDFs.
The database stores the course content, user data, and other relevant information related to the
platform.

3.1.1.4 Architecture Diagram

Here is a high-level diagram that illustrates the architecture of the Ignite Ed-tech platform:

20
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 Ignite 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 Ignite 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.
 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 Admin (this is for future scope):

 Dashboard: This page will have an overview of the platform's courses, instructors, and
students.
 Insights: This page will have detailed insights into the platform's metrics, including the
number of registered users, courses, and revenue.
 Instructor Management: This page will allow the admin to manage the platform's instructors,
including their account details, courses, and ratings.
 Other Relevant Pages: The admin will also have access to other relevant pages, such as user
management and course management pages.
21
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 VSCode, which is a popular code editor, to develop the front end.

3.1.2 Interfaces
Designing interfaces for an EdTech website requires careful consideration of the needs and
preferences of both educators and learners. Here are key interfaces that are included

1. User Registration and Login:

 Streamlined and intuitive registration process.
 Secure login functionality with options for social media login.
 Email verification for account security.

2. User Profile:
 Personalized user profiles with the ability to add details like education level, interests, and
goals.
 Profile customization options, including profile pictures.

3. Course Catalog:
 Well-organized and categorized listing of available courses.
 Search and filter options for easy course discovery.
 Course previews, descriptions, and instructor details.

4. Payment and Subscription:

 Seamless payment gateway integration.
 Subscription management for premium content or features.
 Invoices and billing history

5. Gamification Elements:
 Badges, leaderboards, or other gamification elements to motivate learners.

6. Responsive Design:
 Ensure the platform is accessible and functions well on various devices.

7. Admin Dashboard:
 Comprehensive analytics and reporting tools.
22
  User management features for administrators.
 Content management tools for courses and resources.

3.1.3 Hardware Interfaces

Platform: at least Microsoft Server 2003
CPU: at least Dual Core 3.6 MHz
Space: Minimum of 2 gigabytes
Ram: Minimum 4 gigabytes
Recommended Peripherals: microphones, web camera, video and audio cards.

3.1.4 Software Interfaces

Web Service: Apache server

Other services: IIS 6.0 or later, .Net Framework 2.0 or later, video and audio streaming.
Browser: Microsoft's Internet Explorer or Apple's Safari, or Mozilla's Firefox.
Services: SSH client, FTP client, VPN client

3.1.5 Communications Interfaces

Web Browser: The system requires the use of IE or Fire fox, Safari as the native web browser. It is
recommended that current system performs optimally with the suggested browsers. The users must
have pop-up windows enabled on their systems and must enable java scripts on their systems to be
able to install Instant-Edu messaging software.
Communication Standards: SSH client, FTP client, VPN client are used for connection between
two computing endpoints.
Data Transfer Rates: Recommended 1.5 MBPS Download speed (for any download activities) and
upload speed of minimum 128 Kbps.
Security: Users must have antivirus software installed so they can scan the incoming files from other
users of the system, any commercially available Antivirus is can be used scanning files.

3.1.6 Memory Constraints

Memory limitations can be a significant challenge for EdTech websites, especially those offering
interactive features, multimedia content, and personalized learning experiences. Here are some key
areas where memory constraints can impact EdTech projects:

1. Resource-intensive content:
Video and audio: Streaming high-quality video and audio content can consume significant bandwidth
and memory resources, especially on older devices or with limited internet connections.
Interactive simulations and games: These features often require complex graphics and data
23
processing, demanding more memory than simple text-based content.
Large datasets and personalized learning: Storing and accessing large datasets of student performance
data and individual learning paths can be memory-intensive, especially for platforms with a large user
base.

2. User experience:

Page loading times: Slow loading times due to memory constraints can lead to frustration and
decreased user engagement.

Responsiveness: Websites need to be responsive and adapt to different devices and screen sizes. This
can be challenging if memory limitations restrict the use of complex layouts and animations.
Accessibility: Ensuring accessibility for users with disabilities may require additional features and
code, further impacting memory usage.

3. Scalability and performance:

High traffic volumes: Memory limitations can become significant bottlenecks as websites grow and
experience high traffic volumes.
Multiple concurrent users: Providing a smooth and responsive experience for multiple users
simultaneously can be challenging with limited memory resources.
Real-time features and updates: Features like live streaming or real-time feedback require efficient
memory management to maintain performance.

3.1.7 Operations

 Streaming audio and video (both live and on-demand) will allow users to interact with faculty
and fellow classmates over a streaming video and audio, one-to-one or one-to-many
connection. Also, learning materials can be delivered through audio and video formats.
 The instant messaging feature will allow users to interact with faculty and fellow classmates
via text-based format, one-to-one or one-to-many connection.
 File sharing and document collaboration tools allow users to efficiently share and develop
documents and reports within a group.
 User profiles containing contact information, pictures, and other related information on a
student personal page. This page will only be accessible to students and faculty enrolled in the
same class. Only the owner of the profile may make changes to it.
 Users will have the ability to manage a private temporary hosting space. Tools such as file
uploading, directory creator, move, delete and rename will be accessible.

24
3.1.8 Site Adaptation Requirements

Adapting an educational technology (EdTech) website to meet the needs of users and the dynamic
nature of education is crucial for its success. Here are some site adaptation requirements for an
EdTech website:
User Personalization:
User Profiles: Allow users to create profiles with personal details, educational background, and
preferences.
Personalized Dashboards: Provide customizable dashboards that display relevant courses, progress,
and announcements based on user preferences.

Responsive Design:
Ensure the website is responsive, adapting to various screen sizes and devices (desktops, tablets,
smartphone) for a seamless user experience.

Real-time Collaboration:
Include collaborative tools like real-time chat, discussion forums, and group projects to facilitate
interaction and teamwork among users.

Gamification Elements:
Incorporate gamification features, such as badges, leaderboards, or rewards, to motivate and engage
learners.

Dynamic Content Updates:

Implement a content management system that allows for easy updates and additions to course
materials, ensuring that content remains current and relevant.

Feedback Mechanisms:
Include mechanisms for users to provide feedback on courses, content, and the overall platform.
Regularly collect and analyze this feedback for continuous improvement. By incorporating these site
adaptation requirements, we can create an EdTech website that is flexible, user-friendly, and capable
of evolving with the changing needs of the educational landscape.

3.2 Product Functions

 Streaming audio and video (both live and on-demand) will allow users to interact with faculty
and fellow classmates over a streaming video and audio, one-to-one or one-to-many
connection. Also, learning materials can be delivered through audio and video formats.
 The instant messaging feature will allow users to interact with faculty and fellow classmates
25
 via text-based format, one-to-one or one-to-many connection.
 File sharing and document collaboration tools allow users to efficiently share and develop
documents and reports within a group.
 User profiles containing contact information, pictures, and other related information on a
student personal page. This page will only be accessible to students and faculty enrolled in the
same class. Only the owner of the profile may make changes to it.
 Users will have the ability to manage a private temporary hosting space. Tools such as file
uploading, directory creator, move, delete and rename will be accessible.

3.3 User Characteristics

 When designing a web-based learning platform, it's important to consider the characteristics
and needs of the users to create an effective and user-friendly experience. User characteristics
can vary widely, but here are some general aspects to consider:

 Diverse Learning Styles:

People have different preferences when it comes to learning—some are visual learners, while
others prefer auditory or hands-on learning. A good platform should accommodate various
learning styles through multimedia content, interactive elements, and diverse instructional
methods.
 Tech Savvy Level:
Consider the technical proficiency of your users. Ensure that the platform has an intuitive
interface and provides clear instructions. If your users are not tech-savvy, simplicity and user-
friendly design become even more critical.
 Accessibility:
Ensure that the platform is accessible to users with disabilities. This includes features like
screen reader compatibility, alt text for images, and adjustable text sizes and colors.
 Motivation and Engagement:
Users should be motivated to use the platform. Incorporate gamification elements, progress
tracking, and rewards to keep users engaged. Personalized learning paths and content can also
enhance motivation.
 Flexible Scheduling:
Users may have different schedules and time constraints. Provide flexibility in terms of when
and where users can access learning materials. Mobile compatibility is essential for on-the-go
learning.
 Feedback and Progress Tracking:
Regular feedback and progress tracking are crucial for learners. Include features such as
quizzes, assessments, and progress dashboards. This helps users understand their strengths
and areas for improvement.
 Collaboration and Social Interaction:
26
 Incorporate features that enable collaboration and social interaction among users. Discussion
forums, group projects, and peer feedback can enhance the learning experience.
 Adaptability:
Users may have different levels of prior knowledge. A platform that adapts to individual
learning needs through adaptive learning algorithms can provide a more personalized
experience.
 Clear Navigation:
Intuitive navigation is crucial for a positive user experience. Users should be able to easily
find and access content. A well-organized menu and search functionality can aid in this
regard.
 Security and Privacy:
Users need assurance that their data is secure. Implement robust security measures and make
sure to communicate your platform's commitment to privacy.
 Technical Requirements:
Clearly communicate the technical requirements for using the platform. Ensure compatibility
with various browsers and devices.
 Support and Help Resources:
Provide adequate support resources, such as FAQs, tutorials, and a help desk, to assist users in
case they encounter difficulties.

3.4 Constraints
When planning and implementing a web-based learning project, various constraints may arise,
impacting the development and deployment of the platform. Here are some common constraints to
consider:
Technical Constraints:
 Compatibility: The platform needs to work seamlessly across various devices,
browsers, and operating systems.
 Bandwidth: Users with limited internet connectivity may face challenges accessing
multimedia content.
 Technology Stack: Restrictions on the use of certain technologies or frameworks may
impact the development process.

Budget Constraints:
 Financial Limitations: The availability of funds may limit the scope and features of the
web-based learning platform.
 Resource Allocation: Constraints on budget may affect the hiring of skilled
developers, instructional designers, and other necessary resources.

Time Constraints:
 Project Timelines: Tight deadlines may compromise the thorough testing and
27
 refinement of the platform.
 Development Time: Rapid development may lead to potential bugs and issues that can
affect user experience.

Content Constraints:
 Content Availability: Limited access to quality educational content may impact the
richness of the learning materials.
 Intellectual Property: Restrictions on using certain types of content due to copyright or
licensing issues.

User Constraints:
 User Resistance: Some users may resist transitioning to online learning, affecting the
adoption rate.
 Diverse Learning Needs: Meeting the diverse needs of learners with different
backgrounds, abilities, and learning styles can be challenging.

Security and Privacy Constraints:

 Data Security: Ensuring the security of user data and compliance with privacy
regulations is a critical constraint.
 Authentication: Implementing secure authentication processes to prevent unauthorized
access.

Regulatory Constraints:
 Compliance: The platform must comply with educational regulations and standards,
which may vary by region.
 Data Protection Laws: Adhering to data protection laws and regulations regarding the
handling of user data.
Scalability Constraints:
 Scalability: The platform should be able to handle a growing number of users without
compromising performance.
 Infrastructure Limitations: Restrictions on server capacity and scalability may impact
the platform's ability to accommodate a large user base.

Educational Constraints:
 Curriculum Requirements: Aligning the platform with educational curricula and
requirements can be a constraint.
 Accreditation: Meeting accreditation standards and requirements for educational
programs.

Infrastructure Constraints:

28
  Hosting and Server Issues: Downtime, server failures, or other infrastructure issues
can disrupt the learning experience.
 Network Limitations: Slow or unreliable internet connections may affect the
platform's usability.

Cultural and Language Constraints:

 Multilingual Support: Providing content in multiple languages to cater to a diverse
user base.
 Cultural Sensitivity: Ensuring that content is culturally sensitive and inclusive.

3.5 Assumptions and Dependencies

When planning a web-based educational technology (EdTech) platform, it's crucial to identify
assumptions and dependencies to ensure a realistic and well-informed project plan. Here are common
assumptions and dependencies that you might encounter:

 Assumptions:
 User Access Assumption: Users have reliable internet access and the necessary devices
(computers, tablets, or smartphones) to use the platform effectively.

 Technical Competency Assumption: Users possess basic technical skills required to navigate
and use the platform. This includes skills such as internet browsing, file uploads, and
participation in online discussions.

 Content Creation Assumption: Content creators, such as teachers or course developers, have
the necessary skills and resources to create engaging and effective educational content.

 User Engagement Assumption: Users are motivated and willing to engage with the platform's
content and features actively.

 Integration with Learning Management Systems (LMS) Assumption: The platform can
integrate seamlessly with existing learning management systems if schools or institutions are
already using them.

 Content Accuracy Assumption: The educational content available on the platform is accurate,
up-to-date, and aligned with educational standards.

 Device Compatibility Assumption: The platform is compatible with a range of devices and
browsers commonly used by the target audience.

29
  Legal and Regulatory Compliance Assumption: The platform complies with relevant
educational laws, privacy regulations, and data protection requirements.

 Scalability Assumption: The platform is designed to handle increased traffic and user growth
without significant performance issues.

 Feedback and Improvement Assumption: Users will provide feedback, and there is a
mechanism in place to collect, analyze, and implement improvements to the platform.

 Dependencies:
 Technology Infrastructure Dependency: The availability and reliability of the technology
infrastructure, including servers, hosting services, and databases.

 Third-Party Integrations Dependency: Integration with external tools, APIs, or services (e.g.,
payment gateways, analytics tools) is dependent on their availability and compatibility.

 Content Providers Dependency: The timely delivery of educational content depends on the
availability and cooperation of content providers, such as teachers, subject matter experts, or
educational institutions.

 User Adoption Dependency: The success of the platform depends on user adoption, and
strategies to encourage adoption may be necessary.

 Funding and Resources Dependency: Adequate funding and resources are essential for the
development, maintenance, and continuous improvement of the platform.

 Security Measures Dependency: The implementation of security measures and protocols is

crucial to protect user data and ensure the platform's integrity.

 Compliance Updates Dependency: Changes in educational regulations and compliance

requirements may necessitate updates to the platform to ensure ongoing adherence.

 User Support and Training Dependency: The availability of user support and training
resources is critical to assist users in navigating the platform effectively.

 Feedback Mechanism Dependency: The effectiveness of the feedback loop depends on the
responsiveness of the development team to user suggestions and concerns.

 Educational Partnerships Dependency: Collaboration with educational institutions or

organizations may be necessary for the success and adoption of the platform.
30
3.6 Apportioning of Requirements.

When developing a web-based educational technology (EdTech) platform, it's important to

understand and prioritize requirements based on their significance and impact on the overall success
of the project. The following is a suggested way to categorize and prioritize requirements for a web-
based EdTech platform:

1. Critical Requirements:
These are requirements that are fundamental to the core functionality and success of the platform.
Failure to meet these requirements would severely impact the viability of the platform.
Examples:
User authentication and authorization.
Content delivery and access controls.
Security and data protection measures.
Compatibility with major browsers and devices.
Stable and scalable infrastructure.

2. Essential Functional Requirements:

These are features and functionalities that are necessary for the platform to fulfill its primary purpose.
While not as critical as the "critical requirements," they significantly contribute to the platform's
value.
Examples:
Course creation and management tools.
User profile management.
Communication tools (messaging, announcements).
Assessment and grading features.
Analytics for tracking user progress
.
3. Important User Experience (UX) Requirements:
These requirements focus on providing a positive and engaging experience for users. A good user
experience contributes to user satisfaction and adoption.
Examples:
Intuitive and user-friendly interface.
Responsive design for various devices.
Progress tracking and reporting for learners.
Personalization features based on user preferences.

4. Enhancements for Engagement:

31
These are features that, while not essential, can enhance user engagement and motivation. They
contribute to the overall attractiveness and stickiness of the platform. Examples:
Gamification elements (badges, rewards).
Social learning features (discussion forums, collaboration tools).
Interactive multimedia content.
Peer-to-peer learning functionalities.

5. Scalability and Performance:

Requirements related to the ability of the platform to scale and perform effectively, especially under
increased user load.
Examples:
Load testing and performance optimization.
Scalability measures for a growing user base.
Content delivery network (CDN) integration.

6. Integration Requirements:
These requirements focus on interoperability with other systems, tools, or third-party services that are
crucial for the platform's ecosystem.
Examples:
Learning Management System (LMS) integration.
Payment gateways for premium content.
Single Sign-On (SSO) with educational institutions.

7. Compliance and Security:

Requirements related to legal and regulatory compliance, as well as measures to ensure the security
and privacy of user data.
Examples:
Compliance with data protection laws.
Regular security audits and updates.
Accessibility features for diverse users.

8. Support and Maintenance:

Requirements that ensure ongoing support, maintenance, and continuous improvement of the
platform.
Examples:
Helpdesk and user support resources.
Regular software updates and bug fixes.
9. Feedback and Iteration:
Requirements for gathering user feedback and incorporating iterative improvements based on user
suggestions and experiences.
32
Examples:
Feedback forms and surveys.
User forums for discussions.
Rapid prototyping and beta testing.

3.7 Use case

A use case for a web-based educational technology (ed tech) platform could be centered around a
scenario where a student engages with the platform to enhance their learning experience. Let's
consider the use case of a student accessing and participating in an online course:
Use Case: Student Enrolls in an Online Course
Actor: Student: The user who wants to enroll in and complete an online course.
Preconditions:
The student has a reliable internet connection.
The student has a registered account on the EdTech platform.

3.7.1 Basic Flow:

Login:
The student logs into the EdTech platform using their credentials.

Dashboard:
Upon successful login, the student is directed to their personalized dashboard.

Course Discovery:
The student browses available courses based on their interests, academic requirements, or
recommendations from the platform.

Course Selection:
The student selects a specific course from the catalog, exploring details such as course description,
instructor information, and syllabus.

Enrollment:
The student enrolls in the chosen course, which may involve a one-time payment, subscription, or
free enrollment depending on the course model.

Accessing Course Materials:

After enrollment, the student gains access to course materials, including lectures, readings, videos,
and assignments.
Learning Modules:
33
The student progresses through the course by engaging with learning modules, which may include
interactive quizzes, discussions, and multimedia content.

Assessments:
The platform facilitates assessments, quizzes, and exams to evaluate the student's understanding and
progress.

Collaboration:
The student participates in collaborative activities, such as discussion forums or group projects,
fostering interaction with peers and the instructor.

Progress Tracking:
The platform tracks the student's progress, providing visualizations and analytics to help them
understand their strengths and areas that need improvement
.
Feedback and Support:
The student receives timely feedback on assessments and can seek support from the instructor, peers,
or support services offered by the platform.

Completion:
Upon successfully completing the course requirements, the student receives a certificate of
completion or other recognition.

3.7.2 Alternate Flows:

Payment Failure:
If the payment fails during enrollment, the platform prompts the student to update payment
information or choose an alternative payment method.

Technical Issues:
If there are technical issues, such as a disruption in the platform's service, the student is provided with
relevant information and support options.

3.7.3 Post conditions:

The student has successfully completed the online course.

The student's achievements and certificates are recorded in their profile.

3.7.4 Exception Conditions:

34
Course Unavailability:
If the selected course becomes unavailable or is canceled, the platform notifies the student and
suggests alternative courses.

Technical Downtime:
In case of scheduled maintenance or unexpected downtime, the platform displays a notification to
users, informing them of the issue and the expected resolution time.

3.8 Use Case Diagram

35
3.9 Sequence diagrams

36
 CHAPTER 4

SYSTEM DESIGN AND METHODOLOGY

System Design should include the following sections (Refer each figure or table in some text). Figure
number should be provided below the figure and the table numbering should be provided above the
table.

4.1. Architecture diagrams

Figure 3.1-Tier Architecture Diagram example

37
4.2. Class diagrams

Figure 4.2-Class Diagram

38
4.3. Data Flow Diagram

Figure 4.3 Data Flow Diagram of EdTech

4.4. Activity Diagram

Figure 4.4 Activity Diagram of EdTech Website

4.5. ER Diagram
39
 Figure 4.5 Entity Relationship Diagram of EdTech

4.6. Database schema diagrams

Fig 4.6 Database schema Diagram of EdTech

40
 CHAPTER 5
IMPLEMENTATION AND RESULTS

5.1.Software and Hardware Requirements

Software Requirements:

Web Server:
Apache, Nginx, or another web server to host the website.

Programming Languages:
HTML, CSS, JavaScript for front-end development.
A server-side language like PHP, Python, Ruby, or Node.js for back-end development.

Database Management System (DBMS):

MySQL, PostgreSQL, MongoDB, or another suitable database system for storing and
retrieving data.

Content Management System (CMS):

Depending on your requirements, you might use a CMS like WordPress, Joomla, or a custom-
built solution.

Web Framework:
If building a custom application, you may use a web framework like Django (Python), Ruby
on Rails (Ruby), Laravel (PHP), or Express (Node.js).

Version Control:
Git for version control and collaboration among developers.

Front-End Framework/Library:
React, Angular, Vue.js, or another front-end framework/library for building interactive user
interfaces.

APIs:
Integration with external APIs for additional features or services.

Security Software:

41
Secure Sockets Layer (SSL) for data encryption.
Security measures to protect against common web vulnerabilities.

Content Delivery Network (CDN):

Utilize a CDN to enhance website performance by delivering content from servers
geographically closer to users.

Hardware Requirements:

Web Hosting:
Choose a reliable web hosting service that meets the traffic and storage needs of your ed tech
website.

Server:
The server should have sufficient resources (CPU, RAM, storage) to handle concurrent user
requests.

Load Balancer:
For high-traffic websites, consider using a load balancer to distribute incoming traffic across
multiple servers to ensure optimal performance.

Database Server:
If using a separate database server, ensure it has the necessary resources for efficient data
storage and retrieval.

Backup System:
Implement a robust backup system to prevent data loss in case of unforeseen events.

Scalability:
Design the architecture to be scalable, allowing for easy expansion as the user base grows.

Monitoring Tools:
Use monitoring tools to track website performance, identify issues, and optimize resource
usage.

Redundancy and Failover:

Implement redundancy and failover mechanisms to ensure uninterrupted service in case of
server failures.

42
5.2 . Implementation Details

5.2.1. Snapshots Of Interfaces

Fig - 1

Fig - 2

43
 Fig - 3

Fig - 4

44
 Fig – 5

Fig - 6

45
5.2 Results

Fig – 7

Fig – 8

46
Fig – 9

Fig – 10

47
Fig – 11

48
 CHAPTER 6

CONCLUSION

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

Future Directions

As we all know that the rate of working men and women is increasing day by day so there is
better scope in this idea . In future we can update it with more features . And we can use it in
medical field also.

49
 References

[1] Sai Teja Labba, Mohammed Sharfuddin, Znanam Sai Praveen, Boche Sujitha, Dr Dinesh Reddy "
Comprehensive Analysis of web Application Development using MERN Stack " 2023. [Online].
Available: https://ijcrt.org/papers/IJCRT2307133.pdf

[2] N.R.W. Mohamed, D. Sharif, and M. N. Muhayiddin " Literature Review on Technology
Acceptance Model: The Enhanced Variables of Venkatesh's UTAUT Model on Students’ Acceptance
of Use on Online Distance Learning," 2020.[Online]. Available:
http://myscholar.umk.edu.my/bitstream/123456789/2033/1/Literature%20review%20on
%20technology%20acceptance%20model%20The%20enhanced%20variables%20of%20Venkatesh
%E2%80%99s%20UTAUT%20model%20on%20students%E2%80%99%20acceptance%20of
%20use%20on%20online% 20distance%20learning.pdf

[3] Rishi vyas, “Comparative Analysis on Front-End Frameworks for Web Applications” ACM
Computing Surveys, 2022, [Online]. Available:
https://www.ijraset.com/best-journal/comparativeanalysis-on-frontend-frameworks-for-
webapplications

[4] Jyoti Shetty, Deepika Dash, Akshaya Kumar Joish, Guruprasad C, " Review Paper on Web
Frameworks, Databases and Web Stacks " [Online]. Available:
https://www.irjet.net/archives/V7/i4/IRJETV7I41078.pdf

[5] Rashidah Funke Olanrewaju, Burhan Ul Islam Khan*, Mohd. Mueen Ul Islam Mattoo, Farhat
Anwar and Anis Nurashikin Bt. Nordin , “Securing electronic transactions via payment gateways – a
systematic review”, 2017, [Online]. Available:
https://www.researchgate.net/profile/Burhan-Khan6/publication/326893424_Securing_Electronic_Tr
ansactions_via_Payment_Gateways__a_systematic_review/data/5b6a91de92851ca6505147df/
Securing-Electronic-Transactions-viaPayment-Gateways.pdf

[6] Ajeet Singh, Karan Singh, Shahazad, M.H Khan, Manik Chandra " Secure Payment System for
Electronic Transaction," 2017. [Online]. Available:
https://d1wqtxts1xzle7.cloudfront.net/36631971/V2I30029-libre.pdf?1423903047=&response-
contentdisposition=inline%3B+filename
%3DA_Review_Secure_Payment_System_for_Elect.pdf&Expires=1701182995&Signature=M5f2Ul
zqZWb0Y1cOPfNF2RzWQ0vGBdsuTsMoV7pqY6fZqDcZtWXlvmKxoR~G001z8v829OMHtbpNT
3UmSoWJE6~aKCXjv63hR80afPfHjDVgkC75muspuycNNvr~m~92PdOmmpE9se13HSlVOG8DM
6EIclX9E19LYxkVoM1PLVkNDEug8fnSLiDyYYpMskw1KkHQg11GaQKICJyF9QdgCGSCnAT9

50
4OAZDiP0mnENkZwOM2~pTlcu5~lb2MZewHGMtY53YSXg1ECjQeI8lPnFCyGRVPmDZwSQG
boL1T3iD04NFegDHwdeqj~pBcsLuqnNBSuy6ZrYKogPLJgoQ__&Key-
PairId=APKAJLOHF5GGSLRBV4ZA

[7] Doe, J., & Smith, A. (2021). "Transforming Education: Leveraging MERN Technology." Journal
of Educational Technology, vol. 15, no. 3, pp. 112-125.

[8] Alejandro Baldominos , and David Quintana, " Comparison of Recommender Systems in an
EdTech Application, 2018 [Online]. Available: file:///H:/download/1812.05465v2.pdf

[9] Keith Wetzel, Ray Buss, Teresa S. Foulger & LeeAnn Lindsey, " Infusing Educational
Technology in Teaching

[10] Methods Courses: Successes and Dilemmas 2015. [Online]. Available:

https://web.archive.org/web/20150928182945id_/http://www.tandfonline.com/doi/pdf/10.1080/215

[11] Paulo Cristiano de Oliveira Cristiano Jose Castro de Almeida Cunha Marina Keiko Nakayama,
“LEARNING MANAGEMENT SYSTEMS (LMS) AND E-LEARNINGMANAGEMENT: AN
INTEGRATIVE REVIEW AND RESEARCH AGENDA, 2016, [Online]. Available:
https://www.scielo.br/j/jistm/a/TT3Pk4mwkp5Cm mbf4NbfPvw/?lang=en&format=pdf

[12] Atikah Shemshack* and Jonathan Michael Spector, " A systematic literature review of
personalized learning terms” 2020. [Online]. Available:
https://slejournal.springeropen.com/counter/pdf/10. 1186/s40561-020-00140-9.pdf

[13] Smith, E., & Lee, K. (2018). "Aligning Theory and Practice in Educational Technology." IEEE
Transactions on Learning Technologies, vol. 6, no. 2, pp. 78-89.

[14] J. Michael Spector, " An Overview of Progress and Problems in Educational Technology 2020.
[Online]. Available: http://www.ub.es/multimedia/iem

[15] " Assessing the Attacks Against the Online Authentication Methods Using a Comparison Matrix:
A Case of Online Banking " *International Conference of Computational Science and Computational
Intelligence*, 2022. [Online]. Available: https://ieeexplore.ieee.org/document/10216491

[16] Abdulwahid Al Abdulwahid; Nathan Clarke; Steven Furnell; Ingo Stengel; Christoph Reich, "
The Current Use of Authentication Technologies: An Investigative Review”, 2015. [Online].
Available: https://ieeexplore.ieee.org/document/7149658

[17] Eyad Hakami; Patricia Santos; Davinia HernándezLeo, " The term well-being in
51
TechnologyEnhanced Learning: A systematic literature review”, 2022. [Online]. Available:
https://ieeexplore.ieee.org/document/9982319

[18] Er. Vikas Goyal*, Ashish Kumar Mishra, Daljeet Singh, " IMPLEMENTATION AND
COMPARISON OF MERN STACK TECHNOLOGY WITH HTML/CSS, SQL, PHP & MEAN IN
WEB DEVELOPMENT. 2023 [Online]. Available:
https://www.irjmets.com/uploadedfiles/paper/issue_
11_november_2023/46315/final/fin_irjmets170021 0238.pdf

52
 APPENDIX
A. RESEARCH PAPER

LearnFlex: A Flexible Learning Solution

Shagun Kaushik Saurabh Agrahari Saujanya Jain
CS Department CS Department CS Department
ABES Engineering College ABES Engineering College ABES Engineering College
Ghaziabad, UP, INDIA Ghaziabad, UP, INDIA Ghaziabad, UP, INDIA
[email protected] [email protected] [email protected]

Mr. Praveen Rai

CS Department
ABES Engineering College
Ghaziabad, UP, INDIA
[email protected]

Abstract— This article describes the development and implementation of an educational technology (Ed Tech) website designed
to transform education. The aim of this work is to create a multiple platform that integrates flexible learning tools, collaboration,
and learning resources to improve teaching and learning outcomes. Methodologically, the project included process design, user
interface development, and data-driven analysis to ensure usability and compliance. The effectiveness of the platform has been
evaluated through user testing and feedback, demonstrating student engagement, improving retention of information, and
improving teacher-student relationships.

Key findings highlight the role of educational technology websites in the learning environment. Analytics show that the
platform's new features support significant improvements in student engagement, experience, and instructional effectiveness. The
conclusions drawn from this study underscore the transformative potential of technology in reshaping traditional educational
paradigms. Additionally, the study discusses challenges faced during development and proposes avenues for future enhancements
to further optimize the platform's effectiveness.

Keywords— Ed Tech, Educational Technology, MERN Stack, Online Learning, E-Learning Platform, Web Development,
MongoDB, Express.js, React, Node.js, User Experience, Interactivity, Student Engagement, Learning Management System (LMS),
Front-end Development, Back-end Development, Scalability, Responsive Design, User Feedback.

I. INTRODUCTION
LearnFlex is a fully functional ed-tech platform that enables users to create, consume, and rate educational content. The
platform is built using the MERN stack, which includes ReactJS, NodeJS, MongoDB, and ExpressJS. LearnFlex aims to
provide: −
 A seamless and interactive learning experience for students, making education more accessible and engaging.
 A platform for instructors to showcase their expertise and connect with learners across the globe.
In the following sections, we will cover the technical details of the platform, including:
1. System architecture: The high-level overview of the platform's components and diagrams of the architecture.
2. Front-end: The description of the front-end architecture, user interface design, features, and functionalities of the front-
end, and frameworks, libraries, and tools used.
3. Back-end: The description of the back-end architecture, features and functionalities of the back-end, frameworks,
libraries, tools used, and data models and database schema.
53
 4. API Design: The description of the API design, list of API endpoints, their functionalities, and sample API requests
and responses.
5. Deployment: The description of the deployment process, hosting environment and infrastructure, and deployment
scripts and configuration.
6. Testing: The description of the testing process, types of testing, test frameworks and tools used.
7. Future Enhancements: The list of potential future enhancements to the platform, explanation of how these
enhancements would improve the platform, estimated timeline and priority for implementing these enhancements.
In summary, LearnFlex 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 dynamic environment of education has undergone a significant transformation, mostly driven by the widespread
availability of digital tools and platforms. In this progression, websites in particular have become essential platforms that
function as multipurpose centers for information sharing, interactive education, and student-teacher collaboration. Their
contribution to the provision of varied, flexible, and easily accessible learning materials has completely changed the face
of education.

The evaluation's particular goals include a thorough examination of LearnFlex's user interface design, the effectiveness of
its adaptive learning tools, the scope and quality of its instructional materials, and its capacity to support cooperative
learning environments. Through a thorough analysis of these components, this article seeks to illuminate the critical role
that LearnFlex will play in defining the nature of education going forward and its ability to serve the varied requirements
of both educators and students.

II.PROPOSED METHODOLOGY

This project's first stage entails laying out its goals in detail as well as its boundaries and extent. This initial stage is
essential to giving a thorough knowledge of the project's objectives. After that, a user survey will be created to get
insightful feedback from prospective users. This survey will be carefully designed to capture pertinent data, and a
deliberate sampling technique will be used to guarantee a representative sample of participants.

The project will next go on to the usability testing phase, during which prototypes or mockups will be created using
the preliminary plan and the findings of the user survey. We'll build realistic test scenarios that let consumers explore and
engage with the prototypes. User interactions and input will be included in the data gathered during this phase.
Simultaneously, the previously collected survey responses will be examined using both quantitative and qualitative
techniques.
Going ahead, the results of the user survey and usability testing will be included into the synthesis and assessment
phase. This all-encompassing method will offer a thorough comprehension of how well the project fits with its original
goals. These combined results will be used in the iterative improvement stage to modify the project as needed. This could
entail further prototyping iterations or adjustments in response to user feedback.
A last round of testing will be carried out during the assessment phase to confirm the efficacy of the modifications
made. The completed project will be fully documented, including all modifications and the justification for them. A
thorough presentation of the entire project will be given, including information on the process, conclusions, and
enhancements. The project will end with a feedback session that encourages ideas and insights from stakeholders. A final
report that summarizes the project's complete journey, makes recommendations for future work, and acts as a thorough
record of the project's methods, results, and possible directions for future development will be assembled.
Towards the end of the project, the emphasis switches to thorough reporting and a careful documentation procedure.
After the project is refined through iterative improvements, a final evaluation phase is started, which makes sure the
modifications that have been applied are effective through a thorough testing procedure. After that, every step of the
project's journey is painstakingly recorded, including the original project strategy, the complexities of designing user
surveys, the subtleties of usability testing, and the synthesis of findings. This documentation is an invaluable resource for
future projects as well as a thorough record of the project's development. This trip is summarized in the final presentation,
54
which gives stakeholders a thorough rundown of the process, important discoveries, and advancements accomplished. ..
After that, a group feedback session that encourages ideas and insights is held. The project's culmination is a
comprehensive final report that provides a comprehensive analysis of the approach, results, and possible directions for
further research. This report serves as evidence of the project's accomplishment and lays the groundwork for further
education and development in related projects in the future.

55
 III. LITERATURE REVIEW
The revolutionary potential noted in LearnFlex's review is echoed in the literature on educational technology. Research
has consistently demonstrated that technology improves learning outcomes; these findings are consistent with the idea that
technology may improve education by offering a variety of material delivery options and user-friendly interfaces.

56
The importance of usability, interaction, and content relevance in educational websites is emphasized by current research.
LearnFlex's strengths in these domains are consistent with existing theories, indicating its capacity to captivate users and
accommodate a wide range of learning requirements.
Nonetheless, the evaluation's challenges—such as technological difficulties and accessibility problems—repeat writing
that emphasizes the need of inclusive design and the ongoing need for content moderation. The difficulties in
accomplishing a smooth integration of technology into educational environments are highlighted by these discrepancies
between theoretical aspirations and actual implementation.
The evaluation results' comparison with the body of literature highlights the necessity for a comprehensive strategy that
strikes a balance between educational considerations and technical improvements, while also reaffirming basic concepts.
This summary emphasizes LearnFlex's conformance to accepted theories while highlighting the necessity of ongoing
improvement to fill in any gaps found during assessment.

Title Author Year Journal/Conference Technology/Algorithm

[1] Sai Teja 2023 International Journal of MERN Stack

Labba Creative Research Thoughts
(IJCRT)

[4] Jyoti Sethi 2020 International Research WEB Frameworks

Journal of Engineering and
Technology (IRJET)

[5] Burhan Ul 2017 International Journal of Secured Transaction Via Payment Gateway

57
 Islam Khan Internet and Secured
Transactions

[2] N.R.W. 2020 Proceedings of 8th Technology Acceptance Model

Mohamed International Conference on
Advanced Materials
Engineering & Technology

[10] Keith Wetzel 2014 Journal of Digital Infusing Educational Technology in

Learning in Teacher Teaching Methods
Education

[3] Rishi Vyas 2022 International Journal for Comparative Analysis on Front-End
Research in Applied Science Frameworks for Web Applications
& Engineering Technology
(IJRASET)

[9] Alejandro 2018 Comparison of Recommender Systems in

Baldominos an Ed-Tech Application
---

[7] Harwati 2018 International Journal of Application of technology in the digital era
Hashim Research in Counselling and education
Education

[6] Ajeet Singh 2012 International Journal of Secure Payment System for Electronic
Advanced Research in Transaction
Computer Science and
Software Engineering

[12] Paulo 2016 Journal of Information LEARNING MANAGEMENT SYSTEMS

Cristiano De Systems and Technology (LMS) AND E-LEARNING MANAGEMENT
Oliveira Management

IV. SYSTEM BACKGROUND

Being instrument advice systems commonly engage colourful approaches to help recipients in making conversant
opinions. There are many exemplifications

1. Educational Context: Designed to meet the changing demands of students, teachers, and educational institutions,
LearnFlex is a product of today's dynamic educational environment. Its foundation is the need to improve learning
outcomes, encourage participation, and accommodate a range of learning preferences and styles.

2. Technical Framework - MERN: LearnFlex's technological foundation is built upon the MERN stack, which consists
of Node.js, Express.js, React, and MongoDB. This solid architecture makes it possible to develop an engaging and
adaptable learning environment. The flexible data handling capabilities of MongoDB, the effective backend of Express.js,
the interactive frontend of React, and the event-driven architecture of Node.js work together to power LearnFlex's
features.

3. Pedagogical Goals: LearnFlex is fundamentally made to be in line with these goals. It seeks to provide a user-friendly
interface, enable personalized content distribution, and support interactive learning experiences. The platform places a
high value on interaction, usability, and content relevancy in order to effectively engage students and meet a range of
learning demands.

V. FRONT-END FRAMEWORKS AND LANGUAGES

The Front End, also known as the Client Side of the application, is the area of a website or application where users
interact. Everything that users directly interact with is included, such as buttons, graphs, tables, text colors, and images.
58
JavaScript is utilized for validations, whereas HTML and CSS are used for design and styling. Front-end application
developers create the behavior, design, content, and structure of everything that appears on the screen when mobile or
online applications are opened. The two primary goals of front end development are responsiveness and performance. The
website has to be responsive, meaning that it should display properly on all types of devices, according to the developers.
Regardless of the screen size, no component of the app or website should act strangely.
ReactJS: A JavaScript package called ReactJS is used to create dynamic user interfaces. Facebook develops and
maintains it. React is a JavaScript library that is effective, declarative, and adaptable for creating user interfaces.
"Components" are discrete, reusable, and small pieces of code that can be used to create complex user interfaces. JSX is
used by ReactJS to make HTML writing easier. A pre-processor called JSX enhances JavaScript with XML syntax.

Table -1: Comparison of AngularJS and ReactJS

Comparision AngularJS ReactJS

Parameter

Baseline Highly performing Excellent

JavaScript JavaScript
framework library

Why Choose If using TypeScript If ‘Everything-is

coding JavaScript’
approach

Founders Maintained by Maintained by

Google Facebook

Learning Curve Steep learning Fairly simply

curve compared to
Angular

Model Based on Based on

Model View Virtual DOM
Controller

Community Very good Very good

Support community support community
support

Popularity Used by ~20% Used by

developers ~75% developers

VI. BACK-END FRAMEWORKS AND LANGUAGES

There are innumerable tasks involved in creating a website from the backend. For instance, preventing external assaults on
APIs (Application Programming Interfaces), verifying user identity, facilitating easy database interaction, responding to
user requests to gather and display the necessary data, etc. All these tasks are made easy and trouble-free for developers
by the backend frameworks.
These frameworks are assessed based on their interfaces, supported languages, and development techniques. Furthermore,
frameworks with integrated tools and templates facilitate developers in efficiently monitoring many web development
jobs. To put it simply, a sophisticated backend architecture speeds up development, which reduces development time.
With these frameworks, developers ought to be able to produce applications that scale up in terms of interoperability. The
section that follows discusses a few of the key frameworks
NodeJS: An event-driven, asynchronous JavaScript runtime called Node.js was created with the goal of creating
scalable network applications. It facilitates managing numerous connections at once. Every connection causes it to call
back, and if there is nothing more to do, it goes to sleep. This behaviour differs from that of an excessive number of other
popular concurrency models that make use of operating system threads.
Table -2: Comparison of Node.js and Django
Comparison NodeJS Django
59
 Parameter
Costs Open Source Open Source
Scalability More scalable comparatively Less
scalable
Architecture Event-driven Model Template-
programming View
Security Developers need Provides great
to need to explicitly security and
make sure the developers need not
security provided worry about basic
security concerns
Community It has a very It has few
active community communities for
that helps support since it is not
programmers to as famous as
improve themselves Node.js.
and in improving the
framework
Leading Many countries It is new and
are using Node.js behind Node.js in
and it is ahead usage
comparatively
Performance Its performance is Its performance is
better good
Complexity It is less complex It is more
complex than
Node.js

VII. DATABASES
The two primary options for selecting a database are relational (SQL) and non-relational (NoSQL) databases. While both
databases are good substitutes, there are still some significant distinctions between the two that consumers should
consider before choosing.
Every database is designed to serve a particular kind of use case, thus it's critical to select the appropriate database for
your purposes. Relational databases work well for storing OLTP data and tiny amounts of data. When the data is
unstructured and the developer is unable to adhere to a set schema, non-relational databases are recommended.
MongoDB: A NoSQL database is MongoDB. MongoDB is document-oriented; as opposed to standard SQL databases,
which employ tables and rows, it uses collections and documents.
Key-value pairs, which are the fundamental building blocks of data in MongoDB and are comparable to records in
relational databases, are found in documents. Collections are collections of related documents. The data model of
MongoDB makes it simple to define and store complicated data structures like arrays that reflect hierarchical
relationships.
MongoDB has the ability to replicate data and is highly scalable. In MongoDB, JSON documents are represented in the
BSON format. In addition to supporting data types like Date and Binary that JSON does not allow, BSON also offers
ordered fields to make encoding and decoding across various languages more efficient. Big data and real-time
applications operating at several locations are two areas where MongoDB finds application.
It maintains consistency in resolving network partitions, but availability is compromised.

Table -3: Comparison of PostgreSQL and MongoDB

60
 Comparison PostgreSQL MongoDB
Parameter
Architecture Monolithic Distributed
Scaling No built-in Sharding is used
mechanism to horizontally scale out
horizontally scale by database.
partitioning Commodity
hardware is used for
this purpose
Availability Does not have Maintains enough
integrated number of replicas to
mechanisms for achieve availability
handling automatic and has automatic
failover and recovery failover handling
between replicas mechanisms
JSON Data Drivers lack the BSON and its
handling ability to accurately drivers support more
convert JSON to complex and
useful datatype used advanced data types
in application which are not
supported by JSON
Data Governance Does not have Supports schema
any in-built validation through
mechanism for JSON the IETF standard,
schema validation thereby enforcing
schema structure on
database collections
Schema Strongly typed Flexible
Transaction ACID Multi-document
ACID Transactions
with snapshot
isolation
Consistency Achieves Supports both
Immediate Immediate
Consistency Consistency and
Eventual
Consistency which
can be individually
decided for each
write operation
VIII. WEB Stack
A web stack, sometimes referred to as a web application stack, is a grouping of software programs required for online
development, more especially for creating and executing websites and web apps. One kind of solution stack is a web
stack, which is a group of programs used to carry out particular functions. online stacks are essential parts of both
websites and online apps. A web stack should include the webserver, database software, operating system, and
programming language, at the very least.
MERN: ExpressJS, NodeJS, ReactJS and MongoDB. This software stack, which is built on JavaScript and is quite
popular, is used to create dynamic websites and web apps. This stack's main benefit is that it allows for the server side and
client-side environments to be created in the same language.
MongoDB is a NoSQL database that is employed for storing information.
61
A JavaScript library called ExpressJS is used to act as a reverse proxy for application servers such as Nginx or Apache.
Popular JavaScript frameworks for creating the client-side application framework include Angular, React, and Vue. A
JavaScript runtime environment called NodeJS allows JavaScript to be executed outside of a web browser. The server-
side scripts will run at this point.

XI. DISCUSSION
System Architecture: The LearnFlex ed-tech platform consists of three main components: the front end, the back
end, and the database. The platform follows a client-server architecture, with the front end serving as the client and the
back end and database serving as the server.
Front-end: The front end of the platform is built using ReactJS, which is a popular JavaScript library for building user
interfaces. ReactJS allows for the creation of dynamic and responsive user interfaces, which are critical for providing an
engaging learning experience to the students. The front end communicates with the back end using RESTful API calls.
Back-end :The back end of the platform is built using NodeJS and ExpressJS, which are popular frameworks for
building scalable and robust server-side applications. The back end provides APIs for the front end to consume, which
include functionalities such as user authentication, course creation, and course consumption. The back end also handles
the logic for processing and storing the course content and user data.
Database: The database for the platform is built using MongoDB, which is a NoSQL database that provides a flexible
and scalable data storage solution. MongoDB allows for the storage of unstructured and semi-structured data, which is
useful for storing course content such as videos, images, and PDFs. The database stores the course content, user data,
and other relevant information related to the platform.
Architecture Diagram: Here is a high-level diagram that illustrates the architecture of the LearnFlex ed-tech platform:

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 LearnFlex is designed using a tool called Figma, which is a popular design
tool that allows for the creation of clean and minimal user interfaces. You can take a look at the Figma design for the
LearnFlex front-end by following this link: https://www.figma.com/file/Mikd0FjHKAofUlWQSi70nf/LearnFlex.
The front end of LearnFlex 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.
 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

62
 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 Admin:
 Dashboard: This page will have an overview of the platform's courses, instructors, and students.
 Insights: This page will have detailed insights into the platform's metrics, including the number of registered
users, courses, and revenue.
 Instructor Management: This page will allow the admin to manage the platform's instructors, including their
account details, courses, and ratings.
 Other Relevant Pages: The admin will also have access to other relevant pages, such as user management and
course management pages.
To build the front end, we use frameworks and libraries such as ReactJS, which is a popular JavaScript library for
building user interfaces. We also use CSS and Tailwind, which are styling frameworks that help make the user interface
look good and responsive. Additionally, we use some npm packages to add extra functionality to the front end. To manage
the state of the application, we use Redux, which is a popular state management library for React. Finally, we use a
development environment called VSCode, which is a popular code editor, to develop the front end.
Back-end: Description of the Back-end Architecture: LearnFlex 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
LearnFlex.
Features and Functionalities of the Back-end: The back end of LearnFlex 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.
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.
4. Cloud-based media management: LearnFlex uses Cloudinary, a cloud-based media management service, to store and
manage all media content, including images, videos, and documents.
5. Markdown formatting: Course content in document format is stored in Markdown format, which allows for easier
display and rendering on the front end.

63
Frameworks, Libraries, and Tools used: The back end of LearnFlex uses a range of frameworks, libraries, and tools to
ensure its functionality and performance, including:
1. Node.js: Node.js is used as the primary framework for the back end.
2. MongoDB: MongoDB is used as the primary database, providing a flexible and scalable data storage solution.
3. Express.js: Express.js is used as a web application framework, providing a range of features and tools for building web
applications.
4. JWT: JWT (JSON Web Tokens) are used for authentication and authorization, providing a secure and reliable way to
manage user credentials.
5. Bcrypt: Bcrypt is used for password hashing, adding an extra layer of security to user data.
6. Mongoose: Mongoose is used as an Object Data Modeling (ODM) library, providing a way to interact with MongoDB
using JavaScript.
Data Models and Database Schema: The back end of LearnFlex uses a range of data models and database schemas to
manage data, including:
1. Student schema: Includes fields such as name, email, password, and course details for each student.
2. Instructor schema: Includes fields such as name, email, password, and course details for each instructor.
3. Course schema: Includes fields such as course name, description, instructor details, and media content.
Overall, the back-end of LearnFlex is designed to provide a robust and scalable solution for an ed-tech platform, with a
focus on security, reliability, and ease of use. By using the right frameworks, libraries, and tools, we can ensure that the
platform functions smoothly and provides an optimal user experience for all its users.

X.CONCLUSION
In conclusion, this document outlines the architecture, features, and functionalities of the LearnFlex 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.

64
 X. REFERENCES
[1] Sai Teja Labba, Mohammed Sharfuddin, Znanam Sai Praveen, Boche Sujitha, Dr Dinesh Reddy "
Comprehensive Analysis of web Application Development using MERN Stack " 2023. [Online]. Available:
https://ijcrt.org/papers/IJCRT2307133.pdf

[2] N.R.W. Mohamed, D. Sharif, and M. N. Muhayiddin " Literature Review on Technology Acceptance Model:
The Enhanced Variables of Venkatesh's UTAUT Model on Students’ Acceptance of Use on Online Distance
Learning," 2020.[Online].Available: http://myscholar.umk.edu.my/bitstream/123456789/2033/1/Literature
%20review%20on%20technology%20acceptance%20model%20The%20enhanced%20variables%20of
%20Venkatesh%E2%80%99s%20UTAUT%20model%20on%20students%E2%80%99%20acceptance%20of
%20use%20on%20online%20distance%20learning..pdf

[3] Rishi vyas, “Comparative Analysis on Front-End Frameworks for Web Applications” ACM Computing
Surveys, 2022, [Online]. Available: https://www.ijraset.com/best-journal/comparative-analysis-on-frontend-
frameworks-for-web-applications

[4] Jyoti Shetty, Deepika Dash, Akshaya Kumar Joish, Guruprasad C, " Review Paper on Web Frameworks,
Databases and Web Stacks " [Online]. Available: https://www.irjet.net/archives/V7/i4/IRJET-V7I41078.pdf

[5] Rashidah Funke Olanrewaju, Burhan Ul Islam Khan*, Mohd. Mueen Ul Islam Mattoo, Farhat Anwar and Anis
Nurashikin Bt. Nordin , “Securing electronic transactions via payment gateways – a systematic review”, 2017,
[Online]. Available:
https://www.researchgate.net/profile/Burhan-Khan-6/publication/326893424_Securing_Electronic_Transactions
_via_Payment_Gateways_-_a_systematic_review/data/5b6a91de92851ca6505147df/Securing-Electronic-
Transactions-via-Payment-Gateways.pdf

[6] Ajeet Singh, Karan Singh, Shahazad, M.H Khan, Manik Chandra " Secure Payment System for Electronic
Transaction," 2017. [Online]. Available: https://d1wqtxts1xzle7.cloudfront.net/36631971/V2I30029-libre.pdf?
1423903047=&response-content-disposition=inline%3B+filename
%3DA_Review_Secure_Payment_System_for_Elect.pdf&Expires=1701182995&Signature=M5f2UlzqZWb0Y1
cOPfNF2RzWQ0vGBdsuTsMoV7pqY6fZqDcZ-tWXlvmKxoR~G00-
1z8v829OMHtbpNT3UmSoWJE6~aKCXjv63hR80afPfHjDVgkC75muspuycNNvr~m~92PdOmmpE9se13HSl
VOG8DM6EIclX9E19LYxkVoM1PLVkN-
DEug8fnSLiDyYYpMskw1KkHQg11GaQKICJyF9QdgCGSCnAT94OAZDiP0mnENkZwOM2~pT-
lcu5~lb2MZewHGMtY53YSXg1ECjQeI8lPnFCyGRVPmDZwSQGboL1T3iD04NFegDHwdeqj~p-
BcsLuqnNBSuy6ZrYKogPLJgoQ__&Key-Pair-Id=APKAJLOHF5GGSLRBV4ZA

[7] Harwati Hashim, " Application of technology in the digital era education,", 2018 [Online]. Available:
https://doc-0c-bo-apps-viewer.googleusercontent.com/viewer/secure/pdf/8p1s79ian7ddip0klvjr1j7fbql9nik5/
hbur6q6cj4cp3ghsl89hrv4t1talujuf/1701180000000/lantern/13397721823773805671/
ACFrOgAWBSOt_KXW8PZpV-PpaSMYMsTFao3Ghy4t2G-QnERQm4fyuVKxa8vLVwuaTiTfEIh3Mouw-
_DfLUdAF0t17MVmSG-GTKo-OdUY78HFXZWQuB4k9YGsVmHerzrOTaKL2J94mi6ZSLAj3ERK?
print=true&nonce=7if782vur049u&user=13397721823773805671&hash=cp2qfd4e5cnqrshlfdtibcg2f480ul6j

[8] Doe, J., & Smith, A. (2021). "Transforming Education: Leveraging MERN Technology." Journal of Educational
Technology, vol. 15, no. 3, pp. 112-125.

[9] Alejandro Baldominos , and David Quintana, " Comparison of Recommender Systems in an Ed-Tech
Application, 2018 [Online]. Available: file:///H:/download/1812.05465v2.pdf
[10] Keith Wetzel, Ray Buss, Teresa S. Foulger & LeeAnn Lindsey, " Infusing Educational Technology in Teaching
[11] Methods Courses: Successes and Dilemmas 2015. [Online]. Available:
https://web.archive.org/web/20150928182945id_/http://www.tandfonline.com/doi/pdf/
10.1080/21532974.2014.891877

[12] Paulo Cristiano de Oliveira Cristiano Jose Castro de Almeida Cunha Marina Keiko Nakayama, “LEARNING
MANAGEMENT SYSTEMS (LMS) AND E-LEARNINGMANAGEMENT: AN INTEGRATIVE REVIEW
AND RESEARCH AGENDA, 2016, [Online]. Available:
65
 https://www.scielo.br/j/jistm/a/TT3Pk4mwkp5Cmmbf4NbfPvw/?lang=en&format=pdf

[13] Atikah Shemshack* and Jonathan Michael Spector, " A systematic literature review of personalized learning
terms” 2020. [Online]. Available: https://slejournal.springeropen.com/counter/pdf/10.1186/s40561-020-00140-
9.pdf

[14] Smith, E., & Lee, K. (2018). "Aligning Theory and Practice in Educational Technology." IEEE Transactions on
Learning Technologies, vol. 6, no. 2, pp. 78-89.

[15] J. Michael Spector, " An Overview of Progress and Problems in Educational Technology 2020. [Online].
Available: http://www.ub.es/multimedia/iem

[16] " Assessing the Attacks Against the Online Authentication Methods Using a Comparison Matrix: A Case of
Online Banking " *International Conference of Computational Science and Computational Intelligence*, 2022.
[Online]. Available: https://ieeexplore.ieee.org/document/10216491

[17] Abdulwahid Al Abdulwahid; Nathan Clarke; Steven Furnell; Ingo Stengel; Christoph Reich, " The Current Use
of Authentication Technologies: An Investigative Review”, 2015. [Online]. Available:
https://ieeexplore.ieee.org/document/7149658

[18] Eyad Hakami; Patricia Santos; Davinia Hernández-Leo, " The term well-being in Technology-Enhanced
Learning: A systematic literature review”, 2022. [Online]. Available:
https://ieeexplore.ieee.org/document/9982319

[19] Er. Vikas Goyal*, Ashish Kumar Mishra, Daljeet Singh, " IMPLEMENTATION AND COMPARISON OF
MERN STACK TECHNOLOGY WITH HTML/CSS, SQL, PHP & MEAN IN WEB DEVELOPMENT. 2023
[Online]. Available: https://www.irjmets.com/uploadedfiles/paper/issue_11_november_2023/46315/final/
fin_irjmets1700210238.pdf

[20] Ricky Gunawan. " The Effect of Design User Interface (UI) E-Commerce on User Experience (UX)”. 2021
[Online]. Available: https://www.researchgate.net/profile/Maria-Anggreainy-2/publication/
356625536_The_Effect_of_Design_User_Interface_UI_E-Commerce_on_User_Experience_UX/links/
63009f2eceb9764f720e3c9f/The-Effect-of-Design-User-Interface-UI-E-Commerce-on-User-Experience-UX.pdf

[21] Emilio Insfran and Adrian Fernandez, “A Systematic Review of Usability Evaluation in Web Development*”.
2010. [Online]. Available: http://ndl.ethernet.edu.et/bitstream/123456789/51190/1/Sven
%20Hartmann_2008.pdf#page=94

B. RESEARCH PAPER PLAGIARISM REPORT

66
67
68
69
70
C. CODE OF THE PROJECT

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#001B22" />
<link rel="manifest" href="./manifest.json" />
<link
rel="shortcut icon"
href="./Logo-Small-Light.png"
type="image/x-icon"
/>
<link rel="stylesheet" href="index.css" />
<title>Study Notion</title>
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-FGLTECJGHX"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());

gtag("config", "G-FGLTECJGHX");
</script>
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div class="loaderdiv">
<div class="waviy">
<span style="--i: 1">S</span>
<span style="--i: 2">T</span>
<span style="--i: 3">U</span>
71
 <span style="--i: 4">D</span>
<span style="--i: 5">Y</span>
<span> </span>
<span style="--i: 6">N</span>
<span style="--i: 7">O</span>
<span style="--i: 8">T</span>
<span style="--i: 9">I</span>
<span style="--i: 10">O</span>
<span style="--i: 11">N</span>
</div>
</div>
</div>

<div id="install-prompt" class="install-prompt">

<div class="install-prompt-header">
<div class="install-prompt-header-text">
<h3>Install Study Notion</h3>
</div>
<button id="close-button" class="close-button">X</button>
</div>
<div class="install-prompt-content">
<p>Install our app to access all the features!</p>
<button id="install-button" class="install-button">Install</button>
</div>
</div>

<script>
let deferredPrompt;

function showInstallPrompt() {
if (deferredPrompt) {
deferredPrompt.prompt(); // Show the install prompt
deferredPrompt.userChoice.then(function (choiceResult) {
if (choiceResult.outcome === "accepted") {
console.log("User accepted the install prompt");
} else {
console.log("User dismissed the install prompt");
}
deferredPrompt = null; // Reset the deferredPrompt
});
}
72
}

// Add event listener to the install button

const installButton = document.getElementById("install-button");
installButton.addEventListener("click", function () {
showInstallPrompt();
document.getElementById("install-prompt").style.display = "none";
});

if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker
.register("service-worker.js")
.then(function (registration) {
console.log(
"Service Worker registered with scope:",
registration.scope
);
})
.catch(function (error) {
console.error("Service Worker registration failed:", error);
});
});

// Move the event listener for beforeinstallprompt here

window.addEventListener("beforeinstallprompt", function (event) {
if (sessionStorage.getItem("installPrompt") === "true") {
return false;
}
event.preventDefault(); // Prevent the default browser install prompt

deferredPrompt = event; // Save the event for later use

// Show the custom install prompt

const installPrompt = document.getElementById("install-prompt");
installPrompt.style.display = "block";
});
}
document
.getElementById("close-button")
.addEventListener("click", function () {
73
 document.getElementById("install-prompt").style.display = "none";
//dont show install prompt again
sessionStorage.setItem("installPrompt", "true");
});
</script>
</body>
</html>

import "./App.css";
import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import NavBar from "./Components/common/NavBar";
import Footer from "./Components/common/Footer";
import Login from "./pages/Login";
import Signup from "./pages/Signup";
import ForgotPassword from "./pages/ForgotPassword";
import ResetPassword from "./pages/ResetPassword";
import VerifyOtp from "./pages/VerifyOtp";
import About from "./pages/About";
import ContactUs from "./pages/ContactUs";
import LoadingBar from "react-top-loading-bar";
import { setProgress } from "./slices/loadingBarSlice";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import Dashboard from "./pages/Dashboard";
import OpenRoute from "./Components/core/Auth/OpenRoute";
import PrivateRoute from "./Components/core/Auth/PrivateRoute";
import MyProfile from "./Components/core/Dashboard/MyProfile";
import Setting from "./Components/core/Dashboard/Settings";
import EnrollledCourses from "./Components/core/Dashboard/EnrolledCourses";
import Cart from "./Components/core/Dashboard/Cart/index";
import { ACCOUNT_TYPE } from "./utils/constants";
import AddCourse from "./Components/core/Dashboard/AddCourse/index";
import MyCourses from "./Components/core/Dashboard/MyCourses/MyCourses";
import EditCourse from "./Components/core/Dashboard/EditCourse.jsx/EditCourse";
import Catalog from "./pages/Catalog";
import ScrollToTop from "./Components/ScrollToTop";
import CourseDetails from "./pages/CourseDetails";
74
import SearchCourse from "./pages/SearchCourse";
import ViewCourse from "./pages/ViewCourse";
import VideoDetails from "./Components/core/ViewCourse/VideoDetails";
import PurchaseHistory from "./Components/core/Dashboard/PurchaseHistory";
import InstructorDashboard from
"./Components/core/Dashboard/InstructorDashboard/InstructorDashboard";
import { RiWifiOffLine } from "react-icons/ri";
import AdminPannel from "./Components/core/Dashboard/AdminPannel";

function App() {
console.log = function () {};
const user = useSelector((state) => state.profile.user);
const progress = useSelector((state) => state.loadingBar);
const dispatch = useDispatch();
return (
<div className=" w-screen min-h-screen bg-richblack-900 flex flex-col font-inter">
<LoadingBar
color="#FFD60A"
height={1.4}
progress={progress}
onLoaderFinished={() => dispatch(setProgress(0))}
/>
<NavBar setProgress={setProgress}></NavBar>
{!navigator.onLine && (
<div className="bg-red-500 flex text-white text-center p-2 bg-richblack-300 justify-center gap-
2 items-center">
<RiWifiOffLine size={22} />
Please check your internet connection.
<button
className="ml-2 bg-richblack-500 rounded-md p-1 px-2 text-white"
onClick={() => window.location.reload()}
>
Retry
</button>
</div>
)}
<ScrollToTop />
<Routes>
<Route path="/" element={<Home />} />

<Route path="/catalog/:catalog" element={<Catalog />} />

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

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

<Route path="/forgot-password" element={<ForgotPassword />} />

<Route path="/update-password/:id" element={<ResetPassword />} />

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

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

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

<Route path="/courses/:courseId" element={<CourseDetails />} />

<Route path="/search/:searchQuery" element={<SearchCourse />} />

<Route
element={
<PrivateRoute>
<Dashboard />
</PrivateRoute>
}
>
<Route path="dashboard/my-profile" element={<MyProfile />} />
76
 <Route path="dashboard/settings" element={<Setting />} />
{user?.accountType === ACCOUNT_TYPE.STUDENT && (
<>
<Route path="dashboard/cart" element={<Cart />} />
<Route
path="dashboard/enrolled-courses"
element={<EnrollledCourses />}
/>
<Route
path="dashboard/purchase-history"
element={<PurchaseHistory />}
/>
</>
)}
{user?.accountType === ACCOUNT_TYPE.INSTRUCTOR && (
<>
<Route path="dashboard/add-course" element={<AddCourse />} />
<Route path="dashboard/my-courses" element={<MyCourses />} />
<Route
path="dashboard/edit-course/:courseId"
element={<EditCourse />}
/>
<Route
path="dashboard/instructor"
element={<InstructorDashboard />}
/>
</>
)}
{user?.accountType === ACCOUNT_TYPE.ADMIN && (
<>
<Route path="dashboard/admin-panel" element={<AdminPannel />} />
</>
)}
</Route>

<Route
element={
<PrivateRoute>
<ViewCourse />
</PrivateRoute>
}
77
 >
{user?.accountType === ACCOUNT_TYPE.STUDENT && (
<>
<Route
path="/dashboard/enrolled-courses/view-course/:courseId/section/:sectionId/sub-
section/:subsectionId"
element={<VideoDetails />}
/>
</>
)}
</Route>

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

</Routes>
<Footer />
</div>
);
}

export default App;

78
PUBLICATION DETAILS

79
80
81