SkillTree:An AI-Driven E-Learning

Platform

Submitted in partial fulfilment of the requirement for the award of

BACHELOR OF TECHNOLOGY
COMPUTER SCIENCE ENGINEERING

RICHA RANI (21105110014)

VIKASH KUMAR (21105110012)
SAURAV KUMAR (21105110018)
SURAJ KUMAR (21105110009)

DEPARTMENT OF COMPUTER SCIENCE ENGINEERING

GAYA COLLEGE OF ENGINEERING, GAYA, BIHAR
(BIHAR ENGINEERING UNIVERSITY)

2025
 BONAFIDE CERTIFICATE

This is to certify that the project titled SkillTree:An AI-

Driven E-Learning Platform is a Bonafide record of the
work done by Saurav kumar,Vikash Kumar, Richa Rani,
Suraj Kumar in partial fulfilment of the requirements for the
award of the degree of Bachelor of Technology in Computer Sci-
ence of the Gaya College of Engineering, Gaya – 823003, during
the year 2025.

GUIDE: Prof. Ritesh Kumar

HOD: Prof. Ritesh Kumar

Project Viva-voce held on:

 ACKNOWLEDGEMENT

This project aims to provide an AI-driven e-learning solution for skill development
across various technical and non-technical domains. The project scope was very vast,
but I’ve tried to do it to the best of my ability & knowledge. I would like to thank:

• My guide, Prof. Ritesh Kumar, for directing me on how to approach the project and
helping me figure out different approaches for the problem at hand.

• All the esteemed faculty members: Mr. Ritesh Kumar, Dr. Kanchan Bala, Mr. Alok
Kumar, Mrs. Garima, Dr. Pratik for their continued support and mentorship.

• The Dean of Gaya College of Engineering, Gaya, for providing all the necessary
facilities.

• My friends, for all the fruitful discussions on this topic which proved very helpful.

Last but not the least, my parents, for their constant support and encouragement.

I would like to thank all those who spared their valuable time to discuss and helped
me present the project in its current shape and form.

RICHA RANI (21105110014)

VIKASH KUMAR (21105110012)
SAURAV KUMAR (21105110018)
SURAJ KUMAR (21105110009)

1
Contents

1 Introduction of the Project SkillTree:An AI-Driven E-Learning plat-

form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1 Abstract of the Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 Scope of the Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3 Reports of the E-Learning . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4 Modules of the E-Learning . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2 Requirement Engineering . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1 Software Requirement Specification . . . . . . . . . . . . . . . . . . . . . 8
2.2 Requirements of the Project . . . . . . . . . . . . . . . . . . . . . . . . . 9

3 Analysis & Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3.1 System Design of E-learning . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.2 General Task Involved in Design Process . . . . . . . . . . . . . . . . . . 10
3.3 Project Category . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.4 Project Planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.5 Steps for Successful Software Project . . . . . . . . . . . . . . . . . . . . 12
3.6 Project Scheduling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.7 Project Profile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.8 Use Case Model of the Project . . . . . . . . . . . . . . . . . . . . . . . . 15
3.9 Dataflow Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.10 E-R Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4 Construction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.1 Implementation and Software Specification Testing . . . . . . . . . . . . 20
4.2 Programming and Testing . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.3 Steps of Software Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.4 System Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.5 Existing System of E-learning . . . . . . . . . . . . . . . . . . . . . . . . 24
4.6 Proposed System of E-learning . . . . . . . . . . . . . . . . . . . . . . . . 25
4.7 Description of Technology Used . . . . . . . . . . . . . . . . . . . . . . . 26

5 Conclusion & Future Works . . . . . . . . . . . . . . . . . . . . . . . . . . 28

5.1 Conclusion of the Project . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.2 Future Scope of the Project . . . . . . . . . . . . . . . . . . . . . . . . . 29

6 Codes & Snapshots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

6.1 Project Codes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.2 Snapshots of the Project . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

2
Chapter 1

Introduction of the Project

SkillTree:An AI-Driven E-Learning
platform

The AI-Driven E-Learning Management System has been developed to overcome

the limitations and inefficiencies of traditional, manual learning platforms. This system
is designed to provide a smooth, scalable, and intelligent solution for delivering and man-
aging educational content online, catering to both educators and learners in an efficient
manner.
This software not only addresses the challenges faced by existing systems but also
introduces modern enhancements such as AI-driven doubt assistance, secure user au-
thentication, and integrated payment solutions. The system ensures minimal user input
errors by providing real-time validations and appropriate error messages, making it intu-
itive and user-friendly even for those with limited technical expertise.
The platform enables educators to publish and manage courses, while students can
register, enroll, and access learning materials seamlessly. With the integration of Clerk
for secure user authentication and Stripe for payment processing, the application pro-
vides a comprehensive solution that is both reliable and secure.
A key innovation in this system is Sarthi AI, an intelligent assistant designed to
help students resolve doubts from any chapter, topic, or subject—making it a personal-
ized study companion. This feature enhances the learning experience by offering instant
support, reducing dependency on human intervention.
This E-Learning Management System is robust and adaptable, capable of managing
information related to students, assignments, quizzes, classes, and queries. It is designed
to meet the unique requirements of educational institutions and individual instructors
alike. With remote access features, users can manage their learning or teaching activities
anytime, from anywhere.
By automating and streamlining essential educational functions, this system helps
users focus more on knowledge building rather than administrative tasks. In doing so, it
supports better resource utilization and helps institutions align with their academic and
strategic goals.

3
1.1 Abstract of the Project
The purpose of SkillTree: An AI-Driven E-Learning Platform is to modernize and
automate the traditional methods of education delivery by leveraging advanced web tech-
nologies and artificial intelligence. This system is designed to replace manual processes
and deliver an efficient, interactive, and secure digital learning experience.
Built using the MERN stack, SkillTree allows educators to publish technical and non-
technical courses online while enabling learners to enroll, track their progress, and engage
with the material anytime, anywhere. With a user-friendly and responsive interface, the
platform ensures ease of access and smooth navigation for all users.
The application integrates Clerk for secure OTP-based user authentication and Stripe
for safe and seamless payment transactions. A standout feature of SkillTree is Sarthi AI,
a generative AI-powered assistant that helps students by answering course-related doubts
in real-time. This not only enhances the learning experience but also fosters independent
learning.
Educators can create an account, upload video content, write detailed descriptions,
include code snippets, set preview options, and monitor course performance and earnings
through a dedicated dashboard. Learners can also rate courses, track their completion
status, and receive instant doubt resolution.
This platform reduces redundancy, secures important data, and ensures accurate, fast,
and centralized management of e-learning content. It supports better resource utilization
and helps educational organizations focus on quality delivery rather than administrative
overhead.

Functionalities provided by SkillTree:

• Allows educators to publish courses with descriptions, thumbnails, video content,

and code snippets.

• Enables learners to browse, preview, and enroll in courses from various technical
and non-technical domains.

• Provides secure OTP-based authentication using Clerk.

• Integrates Stripe for secure and seamless online payments.

• Supports AI-based doubt resolution through Sarthi AI.

• Displays individual learner progress with the ability to mark lessons as complete or
incomplete.

• Offers a dedicated educator dashboard for managing course content, student enroll-
ments, and earnings.

• Facilitates student feedback and rating for courses.

• Tracks and manages data related to users, enrollments, course progress, and trans-
actions.

• Provides an intuitive, responsive, and user-friendly interface for both students and
educators.

4
1.2 Scope of the Project
The proposed system, SkillTree: An AI-Driven E-Learning Platform, is aimed at
automating the educational delivery and management processes. The system is designed
to make course management, student engagement, and academic content delivery more
streamlined, interactive, and intelligent through the use of modern web technologies and
AI-based assistance.
In a short span of time, SkillTree allows for efficient and structured handling of course
data, user activities, and educator-student interactions. It improves accuracy, reduces
redundancy, and enhances operational efficiency for educational institutions and indi-
vidual educators. The platform will also minimize costs associated with manual course
management and improve access to learning resources.
Our project focuses on business process automation within the e-learning domain. It
computerizes multiple key functions to deliver a faster, smarter, and more secure learning
experience.

The scope of SkillTree includes:

• Users (students or educators) can register and log in securely using Clerk’s OTP-
based authentication system.
• Students can preview and enroll in a wide range of courses with ease.
• Educators can create and publish new courses with descriptions, code snippets,
thumbnails, and videos.
• Stripe integration enables secure and efficient online course payments.
• Students can track course progress, mark modules as complete, and rate completed
courses.
• The AI module, Sarthi AI, provides intelligent, generative doubt-solving assistance.
• Dashboards for both students and educators help manage enrollments, content,
earnings, and performance.
• The system supports reusable and dynamically generated content, increasing pro-
ductivity through automation.
• It meets user requirements while being intuitive, interactive, and user-friendly.
• The system is designed to be scalable and can be extended with future updates and
functionalities.

1.3 Reports of the E-Learning

The SkillTree platform is designed to provide detailed and structured reports for both
students and educators. These reports are essential for tracking course performance, user
activity, financial insights, and academic progress. They help in managing large volumes
of data efficiently and assist stakeholders in making informed decisions.

The reporting features of SkillTree include:

5
 • Generation of reports related to Courses, Enrollments, Students, and Educators.

• Filterable reports based on specific fields such as Course Category, Progress Status,
and Ratings.

• Export reports as PDF documents for Course Progress, Payment History, and En-
rollment Details.

• Support for Excel export formats for Student Information, Educator Data, and
Course Ratings.

• Ability to export CSV files for data such as Course Completion, Student Feedback,
and Earnings.

1.4 Modules of the E-Learning

The SkillTree platform is modular in structure, designed to handle each functional aspect
of an e-learning system independently yet cohesively. Each module is responsible for
specific operations, ensuring better maintainability, scalability, and efficiency.

The major modules of SkillTree include:

• Course Management Module: Used by educators to create, update, and manage

course details such as descriptions, video content, code snippets, and thumbnails.

• Student Management Module: Handles student registration, profile manage-

ment, course enrollment, progress tracking, and course rating.

• Educator Management Module: Manages educator profiles, published courses,

enrolled students, earnings, and feedback ratings.

• Authentication Module: Secured OTP-based login system implemented using

Clerk, allowing users to authenticate via email without requiring passwords.

• Payment Module: Integrated with Stripe for handling secure payments, course
purchases, and managing transaction records.

• AI Assistance Module (Sarthi AI): Provides intelligent, real-time doubt-solving

capabilities to learners based on course content and user queries.

• Dashboard Module: Provides interactive dashboards for both students and ed-
ucators, displaying course progress, earnings, feedback, and analytics.

• Reporting and Export Module: Facilitates data export in PDF, Excel, and
CSV formats for user records, course statistics, earnings, and ratings.

6
1.5 Objective
The main objective of the project SkillTree: An AI-Driven E-Learning Platform
is to provide an accessible, user-friendly, and intelligent online learning environment that
enables users to learn and grow irrespective of their location. The system allows anyone
to register and access high-quality educational content tailored to their interests and skill
levels.
The platform promotes personalized learning by allowing students to explore various
technical and non-technical subjects. It enables them to preview course content, enroll
in courses, and track their progress. With integrated features like secure authentication
(via Clerk), smart payments (via Stripe), and AI-powered doubt resolution (Sarthi AI),
SkillTree ensures a seamless and supportive learning experience for users.
The project also includes a fully functional educator dashboard where verified users
can become educators, create courses, upload materials, and monitor student enrollments
and earnings. The system is designed to reduce manual effort by automating course
delivery, enrollment, progress tracking, and reporting tasks.

The key objectives of SkillTree include:

• To provide a scalable and interactive platform for online learning and teaching.

• To facilitate secure registration and login using OTP-based authentication via

Clerk.

• To enable educators to publish detailed courses with video content, descriptions,

and code snippets.

• To allow learners to preview, purchase (via Stripe), and track their course progress.

• To offer an AI-powered doubt-solving assistant (Sarthi AI) for real-time academic

support.

• To automate the management of user information, course data, payments, and

progress analytics.

• To generate and export comprehensive reports in multiple formats (PDF, Excel,

CSV).

• To ensure a user-friendly interface that is easy to navigate and adaptable across

devices.

• To support role-based functionality for students and educators through dedicated

dashboards.

• To enhance the e-learning experience by reducing dependency on traditional class-

room environments.

7
Chapter 2

Requirement Engineering

2.1 Software Requirement Specification

The Software Requirements Specification (SRS) is prepared at the culmination of
the system analysis phase. It refines the functional and performance goals allocated to the
software by defining a complete information model, detailed functional and behavioral
descriptions, system constraints, validation criteria, and other necessary specifications
relevant to development.
This document serves as a foundational blueprint for the implementation of Skill-
Tree: An AI-Driven E-Learning Platform, a system designed to provide a seamless
digital learning experience, enabling students and educators to interact through a dy-
namic and secure online environment.

The proposed system has the following software requirements:

• The system must store information related to newly created and updated courses
by educators.

• The system must help educators and administrators manage and retrieve student
data based on various filters and queries.

• The system must track and update student course progress, including completion
status.

• The system must securely manage educator profiles, courses published, and student
enrollment data.

• The system must allow updating, editing, and deleting of records related to users,
courses, and transactions.

• The system must provide a powerful search functionality for quick access to courses,
users, and discussions.

• The system must integrate secure authentication (via Clerk) and payment systems
(via Stripe) to ensure the protection of user data and financial transactions.

• The system must support AI-based functionalities like the Sarthi AI doubt assistant,
which should handle and respond to user queries in real time.

8
2.2 Requirements of the Project
The SkillTree: An AI-Driven E-learning Platform is designed to create an efficient,
secure, and interactive online learning environment. To achieve its goals, the system
requires specific software and hardware resources along with certain functional and non-
functional capabilities. These requirements ensure the platform performs seamlessly and
provides a superior user experience to both learners and educators.

The key requirements of the project are as follows:

• User Registration and Authentication: The system must support secure user
registration and login, including OTP-based authentication via Clerk to ensure data
privacy and secure access.

• Course Management: Educators should be able to create, edit, and publish

courses with multimedia content such as videos, code snippets, and thumbnails.

• Course Enrollment and Payment: Students must be able to browse, preview,

and enroll in courses through a secure and reliable payment gateway integrated via
Stripe.

• Progress Tracking and Reporting: The system must track learners’ progress,
course completion status, and provide detailed reports accessible via dashboards.

• AI-Powered Doubt Assistance: Integration of the Sarthi AI module to offer

intelligent, real-time doubt resolution for learners across various subjects.

• Role-Based Dashboards: Separate dashboards for educators and students to

manage courses, enrollments, earnings, ratings, and progress efficiently.

• Search and Filter Capabilities: Robust search functionality to allow users to

find courses, content, and discussions quickly based on keywords, categories, and
other filters.

• Responsive and Interactive UI: The platform should have a responsive design
accessible on multiple devices, providing an intuitive and engaging user experience.

• Data Security and Privacy: All user data, payment details, and course materials
must be securely stored and transmitted to prevent unauthorized access.

• Export and Reporting Features: The system should support exporting reports
and data in multiple formats such as PDF, Excel, and CSV for administrative and
analytical purposes.

9
Chapter 3

Analysis & Design

3.1 System Design of E-learning

Analysis & Design
In this phase, a logical system is designed to fulfill the specified requirements of the
project. The design phase of software development involves transforming the client’s
requirements into a functional and efficient system. For SkillTree, the design is carried
out in two major steps:

1. Primary Design Phase:

During this phase, the overall architecture of the system is developed at a high-level
block diagram. The system is divided into key modules such as User Authentication,
Course Management, Payment Gateway Integration, AI-based Doubt Assistance
(Sarthi AI), and Role-based Dashboards for students and educators. The emphasis
is placed on minimizing the inter-module data flow to reduce complexity and im-
prove maintainability. Related functionalities that require frequent interaction are
grouped within the same module.

2. Secondary Design Phase:

In this phase, each module from the primary design is broken down into detailed
sub-components. For example, the Course Management module includes detailed
designs for video upload, content preview, rating system, and course progress track-
ing. Similarly, the AI module’s detailed design focuses on natural language process-
ing components, query handling, and response generation. This phase ensures each
block’s internal working is well-defined for smooth implementation.

3.2 General Task Involved in Design Process

General Tasks Involved in the Design Process
The design process of the SkillTree: An AI-Driven E-learning Platform involves
a series of well-defined tasks aimed at building a scalable, modular, and maintainable
software solution. Each task plays a vital role in ensuring the final system meets its
intended objectives and performs efficiently in a real-world learning environment.

10
 A. Design various blocks for the overall system such as User Authentication, Course
Management, AI Doubt Assistance, Payment Integration, and Role-based Dash-
boards.

B. Break down each block into smaller, compact, and manageable modules that handle
specific tasks such as course publishing, enrollment tracking, or AI query handling.

C. Design appropriate database schemas to store and retrieve information efficiently,

including user data, course metadata, payment transactions, and chat history with
the AI assistant.

D. Specify program logic and algorithms to implement functionalities like progress

tracking, OTP-based login, Stripe transactions, and AI response generation.

E. Design clean and responsive input and output interfaces such as registration forms,
course cards, dashboards, progress bars, and interactive chat windows for AI assis-
tance.

F. Prepare detailed documentation for each module, including module specifications,

data structures, workflows, and API endpoints for better development and mainte-
nance.

G. Conduct system reviews to validate design decisions, identify potential improve-

ments, and ensure alignment with functional and non-functional requirements.

3.3 Project Category

SkillTree: An AI-Driven E-learning Platform is built using the MERN stack (Mon-
goDB, Express.js, React.js, and Node.js) with modern enhancements such as Next.js for
server-side rendering and improved performance. As part of this stack, MongoDB serves
as the primary database solution for handling all data storage, user management, trans-
actions, and application state.

MongoDB is an open-source, document-oriented NoSQL database designed for high

availability, scalability, and performance. Unlike traditional relational databases (RDBMS)
that store data in structured tables, MongoDB stores data as flexible, JSON-like docu-
ments using BSON (Binary JSON), allowing a schema-less and dynamic data model.

Key Characteristics of MongoDB in this Project:

• Schema-less design enables rapid development and evolution of data models.

• Nested documents support complex and hierarchical data, such as course content,
user profiles, and transaction logs.

• Integrated seamlessly with Node.js backend (Express) using Mongoose for object
data modeling (ODM).

• Supports horizontal scaling and sharding, making it ideal for future growth of the
SkillTree platform.

11
 • Suited for applications requiring real-time analytics, high-speed read/write opera-
tions, and flexible data storage.

MongoDB has become the preferred choice in modern web development environments,
especially those using microservices, REST APIs, and cloud-native infrastructure. In the
context of this MERN-based project, it allows:

• Efficient storage of user data, authentication tokens (JWT), AI query logs, and
course metadata.

• Fast retrieval of content through optimized indexing and query capabilities.

• Easy integration with tools such as Postman (for API testing), Git and GitHub
(for version control), and development utilities like Nodemon (for automatic server
reload).

By leveraging MongoDB’s capabilities, the platform achieves a balance of flexibility, scala-

bility, and performance—key requirements for delivering a robust and AI-enhanced learn-
ing management system.

3.4 Project Planning

Software project planning is a critical phase that defines how the project will be exe-
cuted, monitored, and controlled to ensure successful delivery. For the SkillTree: An
AI-Driven E-learning Platform, the project plan is considered from two main per-
spectives:

1. Within the Organization:

This involves defining the implementation strategy, understanding various con-
straints such as time, cost, and available staff, and outlining the market approach
for the platform. Key considerations include resource allocation, technology stack
decisions (MERN and Next.js), and milestone scheduling.

2. With Respect to the Customer:

Regular meetings and presentations are planned on a weekly or timely basis to
update the customer on the project status. Customer feedback is actively sought
and incorporated to refine features and improve the platform. Project milestones
and deliverables are transparently shared to maintain alignment with customer
expectations.

3.5 Steps for Successful Software Project

Steps for Successful Software Project Planning:

• Select a project and clearly define its scope.

12
 • Identify the project’s aims and objectives, such as creating a responsive, AI-enabled
e-learning platform with secure authentication and payment integration.
• Thoroughly understand the requirements and specifications.
• Choose appropriate methods for analysis, design, and implementation based on the
MERN stack and Next.js technologies.
• Define testing techniques to ensure quality and reliability.
• Prepare comprehensive documentation covering all aspects of the project.
• Set project milestones and deliverables with clear deadlines.
• Allocate budget, keeping track of expenditures to avoid exceeding limits.
• Make project estimates for cost, time, code size, and duration.
• Allocate resources, including hardware and software tools like MongoDB, React,
Node.js, Postman, Git, and development utilities.
• Leverage previous relevant project information and digital libraries for best prac-
tices.
• Implement risk management strategies:
– Risk avoidance by careful planning and contingency measures.
– Risk detection through continuous monitoring and early identification of issues.

3.6 Project Scheduling

Project Timeline
An elementary Gantt chart or Timeline chart for the development plan is given below.
The plan explains the tasks versus the time (in weeks) they will take to complete.

13
3.7 Project Profile
In the evolving landscape of software development, developers often face challenges in
adapting to new technologies and paradigms. While tools have been developed to ease the
software development process, the demand for scalable, maintainable, and well-structured
software has never been higher.
For the SkillTree: An AI-Driven E-learning Platform, Unified Modeling Lan-
guage (UML) diagrams are used to visually represent the structural and behavioral as-
pects of the system. UML has become a standard in the software engineering design
process due to its expressiveness and wide industry acceptance.

What is UML?
Unified Modeling Language (UML) is a standardized modeling language used to visualize
the design of a system. UML was developed as a unification of the object-oriented
modeling techniques of Booch, Rumbaugh (OMT), and Jacobson. Unlike methodologies
that define both process and notation, UML focuses on the modeling language itself,
making it suitable across different software development approaches.

Key UML Diagrams Used in This Project:

• Use Case Diagram:
Illustrates the functional requirements of the platform from the user’s perspective.
It helps in understanding the interactions between the user (student or educator)
and the system, such as login, course enrollment, AI doubt resolution, and content
creation.

• Class Diagram:
Describes the static structure of the system by showing classes, their attributes,
methods, and the relationships between classes. The primary relationships captured
include:

– Associations: e.g., A student can enroll in multiple courses.

– Subtypes (Inheritance): e.g., An Educator is a type of User.

• Activity Diagram:
Represents the dynamic behavior of the system, particularly workflows such as
course publishing, payment processing, and AI-powered doubt solving. This dia-
gram helps in understanding the flow of control within and across use cases.

• State Diagram:
Demonstrates how the system behaves in response to internal and external events,
such as a course changing states from “draft” to “published” or a payment status
from “pending” to “completed.”

The use of UML in this project has helped in:

• Visualizing the architecture and components of the platform.

• Clarifying requirements and system behavior early in development.

• Improving communication between team members and stakeholders.

14
 • Supporting better documentation and future maintenance.

A class diagram specific to this project is also created, depicting entities such as User,
Student, Educator, Course, Payment, and DoubtAI, along with their relationships, at-
tributes, and key operations.

3.8 Use Case Model of the Project

The use case model for any software system outlines the various ways in which users
can interact with the system to accomplish specific goals. Each use case represents a
functional aspect of the system, providing insight into what actions the system supports
from a user’s perspective.
For the SkillTree: An AI-Driven E-learning Platform, the use case model defines
the interaction between the system and various types of users, such as students, educators,
and administrators.

Definition and Importance:

A use case typically consists of a sequence of steps that describes an interaction between
an actor (user or external system) and the software system. These interactions accomplish
meaningful tasks without exposing the internal logic or architecture of the system. Use
cases help partition the behavior of the system into transactions, each performing a
distinct and useful service.
Use case diagrams provide a visual summary of the system’s functionality and user
roles. These diagrams serve as critical tools during the analysis and design phases of
software development.

Use Case Diagram Notation:

• Each use case is represented by an ellipse containing the name of the function.

• Actors are shown using the stick-person icon, representing users such as students
or educators.

• A rectangle is drawn around the use cases to indicate the system boundary.

• The lines connecting actors and use cases are known as communication relation-
ships.

• External systems or services (e.g., payment gateway, AI API) are also represented
as actors, often annotated using the stereotype <<system>>.

Primary Actors in SkillTree:

• Student: Can register/login, browse and enroll in courses, make payments, track
progress, and ask doubts using Sarathi AI.

15
 • Educator: Can register as a content creator, upload and manage courses, monitor
student engagement, and view earnings.
• Admin (Optional): Can manage users, approve educators, and monitor platform
performance.
• <<system>> Stripe API: Handles secure course payments.
• <<system>> Sarathi AI: Provides AI-driven doubt-solving assistance.

Sample Use Cases Include:

• User Registration and Secure Login (via Clerk authentication)
• Browsing Courses
• Viewing Course Previews
• Making Payment (Stripe Integration)
• Enrolling in Courses
• Asking Doubts via Sarathi AI
• Creating and Publishing Courses (Educators)
• Viewing Course Analytics and Stu

3.9 Dataflow Diagram

Data Flow Diagram (DFD) is one of the most effective tools used during the design
phase of software engineering. It helps in functionally decomposing the requirements
and analyzing the flow of data through the system. A DFD uses standardized
symbols to represent various system components and their interactions via data.
In the context of the SkillTree: An AI-Driven E-learning Platform, the DFD
is instrumental in understanding the flow of data among modules such as course
management, user authentication, AI-based doubt resolution, payment gateway
integration, and user dashboards.

Definition and Purpose

A DFD represents the ”what” aspect of a system rather than the ”how.” It il-
lustrates how data moves between different processes, data stores, and external
entities. Each process is represented by a circle or bubble, and the data flow is
shown using directed arrows. External entities are represented as rectangles, and
data stores as open-ended rectangles.
The DFD abstracts the system into logical components without delving into im-
plementation details like hardware, software, or data structures. It is a valuable
modeling technique for analyzing and constructing information processes, often
considered as a Process Model.

16
Key Features of DFDs
– Processes: Shown as circles; represent transformations or functions that han-
dle data.
– Data Flows: Shown as arrows; indicate the direction and movement of data
between components.
– Data Stores: Shown as open-ended rectangles; represent places where data
is held for processing.
– External Entities (Actors): Shown as rectangles; these are users or external
systems interacting with the application.

Application in SkillTree
In the SkillTree platform, a DFD helps to identify:
– The flow of user data from registration and login to course enrollment.
– The handling of payments via the Stripe API.
– The processing of student queries through Sarathi AI.
– Data transformation for course progress tracking, educator dashboards, and
course ratings.

Levels of DFD
– Level 0 DFD (Context Diagram): Provides a broad overview of the sys-
tem, its major processes, external entities, and data flows.
– Level 1 DFD: Decomposes the main process into sub-processes, showing
more detail on internal data movements.

Figure: Data Flow Diagram representing core modules and data movement in the
SkillTree E-learning Platform.

17
3.10 E-R Diagram

Entity Relationship (ER) Diagram

An Entity Relationship Diagram (ERD) is a crucial component of database design.
It provides a high-level conceptual view of the data system and the relationships
among entities. For the project SkillTree: An AI-Driven E-learning Platform,
the ER model has been employed to represent key entities such as Users, Courses,
Payments, and AI Doubt Resolutions, and their inter-relationships.

Overview of the E-R Model

The E-R (Entity-Relationship) Model is widely used for the conceptual design of
database applications. It forms the foundation for mapping a real-world system
into a logical schema that is later transformed into a relational database.
The model consists of the following components:

– Entities: Real-world objects or concepts, such as Student, Educator, Course,

Payment, and Doubt.
– Attributes: Properties of entities, such as name, email, course title, payment status.
– Relationships: Connections among entities, such as enrolls, creates, submits,
and resolves.

Mapping ER Diagram to Relational Model

The E-R diagram can be mapped to relational tables that include:

– One-to-Many (1:N): A single educator can create many courses.

– Many-to-Many (M:N): A student can enroll in multiple courses, and a
course can be taken by multiple students.
– One-to-One (1:1): Each user has exactly one profile (e.g., Clerk authentica-
tion record).
– Weak Entities: Entities like Doubt may depend on both the Student and
Course entities to exist.
– Sub-type / Super-type: The User entity may be generalized into Student
and Educator types.

18
Figure: ER Diagram for SkillTree showing entity relationships between Students,
Educators, Courses, Payments, and Sarathi AI interactions.

19
Chapter 4

Construction

4.1 Implementation and Software Specification Test-

ing
The implementation phase is one of the most critical parts of the Software De-
velopment Life Cycle (SDLC). For the project SkillTree: An AI-Driven E-
learning Platform, the implementation was carried out using MERN Stack tech-
nologies—MongoDB, Express.js, React.js, and Node.js—along with Next.js for the
AI-powered doubt assistant named Sarathi AI. This phase included finalizing tech-
nical specifications, writing code modules, performing tests, and preparing the sys-
tem for deployment.

Detailed Design of Implementation

This phase focuses on refining the technical specifications and translating them into
actual software components. It involves:

– Technical Design: Developed based on prior high-level specifications, in-

cluding frontend interfaces (React), backend APIs (Node.js + Express), and
database schema (MongoDB).
– Test Specification and Planning: Test cases were written for each mod-
ule (Authentication, Course Management, Dashboard, Payment, Sarathi AI)
ensuring each feature performs as expected under various conditions.

Programming and Testing

This involved:

– Writing frontend components using React.js, styled using modern responsive

UI frameworks.
– Backend services and API routes using Node.js and Express.js.
– State management using Redux.

20
 – API testing and integration validation using Postman.
– Authentication logic through Clerk and token handling via JWT.
– Modular testing and validation of each route and component before deploy-
ment.

User Training
Although the application is built to be intuitive, user documentation and guidance
have been prepared to ensure smooth onboarding for both students and educators:

– Creation of user manuals.

– Screenshots and interactive walkthroughs for dashboards.
– Tooltips and prompts integrated into the UI.

Acceptance Test
A final demonstration was conducted to validate:

– Seamless user registration and authentication (via OTP and Email).

– Course creation, preview, and enrollment process.
– Stripe payment gateway functionality.
– Performance of Sarathi AI for query handling.

Installation Phase
The application was hosted and deployed using cloud platforms (e.g., Vercel/Render
for frontend and backend, and MongoDB Atlas for database), making the system
globally accessible and scalable.

Review Phase
After implementation, the system was evaluated for:

– Performance under concurrent users.

– Security checks against unauthorized access.
– Efficiency of AI assistant in doubt resolution.

Development Recap
– Utilized modern JavaScript technologies to achieve performance and modular-
ity.
– Developed an educator-student flow with full-cycle course management.
– Achieved real-time learning support through AI integration.

21
Post-Implementation Review
After running the system in a controlled environment, we analyzed:
– System performance against initial goals.
– Cost-benefit analysis (time saved vs manual approach).
– Feedback from early users for future enhancement.
– Planned updates based on educator and student feedback.

Note: Code snapshots, test results, and UI screen captures have been attached in
the appendix section.

4.2 Programming and Testing

Testing is one of the most critical phases in software development. For the project
SkillTree: An AI-Driven E-learning Platform, rigorous testing was performed
to ensure that all modules—such as user authentication, course management, dash-
board, payment integration, and the AI doubt assistant—function as intended. The
entire testing process was conducted using a manual testing approach supported by
tools like Postman for API validation and browser dev tools for UI debugging.

4.3 Steps of Software Testing

Unit Testing

Unit testing focuses on verifying the smallest functional parts of the system, such
as individual components or modules. The following steps were involved:
a) Preparation of detailed test cases for each module (e.g., login, dashboard,
course enrollment).
b) Design and creation of test data, including validation scenarios for forms and
input fields.
c) Manual code review of each module for correctness and logic adherence.
d) Execution of manual testing for each component independently.
e) Rectification of bugs and revalidation after fixes.
f) Preparation of structured test result scripts for documentation.
The unit testing scope included:
– Testing module-level functionality (e.g., AI response accuracy in Sarathi AI).
– Input validation (e.g., email/OTP checks using Clerk).
– Compliance with JavaScript coding standards and React best practices.
– Logical correctness and arithmetic/data transformations (e.g., course progress
tracking).
– Code commenting standards and maintainability.

22
System Integration Testing

After successful unit testing, all modules were integrated and tested as a cohesive
system to ensure seamless operation across all features. The steps followed are:

1. Integration of each functional module—user, course, AI, payment, dashboard—one

by one.
2. Development of test cases for cross-module interactions (e.g., course purchase
via Stripe followed by dashboard update).
3. Preparation of integration-level test data, simulating real-world scenarios.
4. Manual testing of workflows (e.g., from registration to AI doubt resolution).
5. Logging and categorizing any errors or issues found.
6. Fixing integration bugs and retesting affected flows.
7. Documentation of test scripts and final system behavior post-testing.

Tools Used
– Postman – For testing backend REST APIs.
– Browser Dev Tools (Chrome/Firefox) – For frontend UI/UX testing and
debugging.
– React Testing Library (optional) – For component-level unit tests (in
future updates).
– JWT Debugger – To test and validate JSON Web Tokens used in authenti-
cation.

Testing Highlights
– Login and OTP authentication tested using Clerk under normal and edge case
scenarios.
– Stripe payment tested in test mode with different card types and failure sce-
narios.
– AI Assistant (Sarathi AI) tested with diverse question types across subjects.
– Dashboard tested for dynamic course listing, student progress tracking, and
rating updates.
– Educator module tested for course publishing, content creation, and earnings
visibility.

Conclusion: Through systematic and iterative testing, we ensured that SkillTree is

robust, secure, and functionally complete, providing a seamless experience for both
learners and educators.

23
4.4 System Testing
System Testing is a crucial stage in the software development life cycle that validates
the complete and integrated software system. For SkillTree: An AI-Driven E-
learning Platform, system testing ensured that all the integrated modules worked
in harmony and met the specified requirements. The following steps were followed
during the system testing phase:

1. Integration of All Modules: All modules such as user authentication

(Clerk), course dashboard, educator panel, Stripe payment, and AI doubt-
solving assistant (Sarathi AI) were integrated into the system.
2. Preparation of Test Cases: Test cases were prepared for all functional
flows and user interactions, including learner enrollment, educator publishing,
login/logout sessions, and AI query submission.
3. Preparation of Test Data: Realistic data inputs and edge-case values were
prepared to validate system performance, user inputs, payment edge cases,
and API responses.
4. Manual Execution of Tests: The system was tested manually to verify the
behavior and output for each module, ensuring correct responses and transi-
tions.
5. Error Logging: All errors, bugs, and unexpected behaviors encountered dur-
ing testing were recorded systematically for review and resolution.
6. Bug Fixing and Validation: All identified bugs were rectified and the cor-
responding functionalities were re-tested to ensure error resolution.
7. Test Result Documentation: After successful testing, detailed test result
scripts and reports were documented for future reference and validation.

The successful execution of system testing confirmed that all integrated modules of
SkillTree perform as expected in real-world usage scenarios with high reliability,
security, and performance.

4.5 Existing System of E-learning

Existing System
In the traditional learning environments and many current e-learning platforms,
several limitations exist which hinder the effectiveness, scalability, and efficiency of
online education systems. The existing system suffers from the following drawbacks:

– Manual Learning and Assessment: Exams and assessments are often con-
ducted manually, which leads to inefficiencies and delays in results processing.
– Lack of Intelligent Assistance: Existing systems lack AI-driven tools for
real-time doubt solving and personalized guidance, making self-study less ef-
fective.

24
 – Low Data Security: Many legacy platforms lack robust authentication and
authorization systems, risking unauthorized access and data breaches.
– High Manpower Dependency: Traditional systems require significant hu-
man intervention for managing users, content, and results.
– Time-Consuming Operations: Tasks like enrollment, fee processing, progress
tracking, and manual evaluations are time-intensive.
– Paper-Heavy Processes: Legacy systems often involve physical paperwork
for registration, attendance, grading, etc., which is inefficient and prone to
errors.
– No Role-Based Access: Higher-level educators and administrators have
limited or no direct system access or real-time visibility into platform perfor-
mance.
– Lack of Automation and Analytics: Important features such as auto-
grading, learning progress tracking, and analytics are often missing or under-
developed.

Due to these limitations, existing systems fail to deliver a scalable, secure, and
intelligent digital learning experience. SkillTree: An AI-Driven E-learning
Platform addresses all of these issues by providing a secure, modular, and fully
automated online learning environment with integrated AI assistance.

4.6 Proposed System of E-learning

The aim of the proposed system, SkillTree: An AI-Driven E-learning Plat-
form, is to overcome the limitations of traditional and manual learning systems by
providing an intelligent, secure, and efficient digital learning environment.
The key objectives and advantages of the proposed system are:

– Enhanced Data Security: Secure authentication using Clerk and protected

user data with JWT and encryption.
– Accurate and Consistent Data Handling: Minimizes human error through
automated data validation and structured workflows.
– Real-Time Monitoring and Control: Admin and educator dashboards
provide role-based access and control over platform activities.
– Reduced Manual Effort: Automates enrollment, payments, progress track-
ing, and course publishing.
– Faster Processing: Accelerates all operations including course access, doubt
solving, and assessment using modern web technologies.
– Higher Efficiency and Reliability: Built using scalable technologies like
MongoDB, Express, React, Node.js, and Next.js AI integration.
– Improved User Experience: Fully responsive, intuitive, and interactive UI
for both learners and educators.

25
 – AI Integration for Support: Doubt-solving assistant “Saarthi AI” offers
real-time academic help for students.

The proposed system thus provides a comprehensive and modern solution to deliver
quality education through a secure, intelligent, and user-friendly platform.

4.7 Description of Technology Used

Technologies Used
The development of the project SkillTree: An AI-Driven E-learning Platform
was carried out using modern web technologies and development tools that enable
efficient, secure, and scalable application development. Below is a description of
the core technologies used:

1. React (Equivalent to JSP for Java)

React is a JavaScript library for building interactive UIs. It allows the cre-
ation of reusable components using JSX, a syntax extension that combines
JavaScript with HTML-like structure. React handles state management and
virtual DOM updates, enabling fast and responsive user interfaces.
2. VS Code (Equivalent to Eclipse for Java)
Visual Studio Code was used as the primary code editor for this project. It is
a lightweight, open-source IDE with extensive plugin support, ideal for React
and Node.js development. Features like IntelliSense, Git integration, terminal,
and debugging tools greatly enhanced the development workflow.
3. HTML (Markup Language)
HTML (HyperText Markup Language) is the backbone of web pages. It was
used to define the structure of the application’s UI components before being
handled by React for rendering.
4. CSS (Cascading Style Sheets)
CSS was used for designing the visual presentation and responsiveness of the
website. CSS frameworks and custom styles were implemented to enhance UI
consistency and accessibility across devices.
5. JavaScript
JavaScript is the scripting language used throughout the project to create
dynamic behavior in the frontend and handle logic on both the client and
server side (Node.js). It was also essential for API consumption and state
management.
6. MongoDB Connector/Driver
MongoDB is a NoSQL database used to store application data in a flexible,
JSON-like format. The official MongoDB Node.js driver and Mongoose ODM
(Object Document Mapper) were used to establish a connection between the
application and the database. Mongoose was particularly helpful in defining
schema models and managing queries.

26
 7. Node.js and Express.js
Node.js was used to create the backend runtime environment, and Express.js
was used to create APIs for interacting with the database and managing busi-
ness logic. Together, they form the backend layer of the MERN stack.
8. JWT (JSON Web Token)
JWT was used to secure user sessions through token-based authentication,
enabling protected routes and verifying user roles.
9. Stripe Payment Gateway
The Stripe API was integrated for secure, real-time payment processing when
students enroll in courses.
10. Clerk Authentication System
Clerk provided a robust and modern authentication system supporting OTP-
based login, email login, and user session management.
11. Redux and React Router DOM
Redux was used for state management across components, and React Router
DOM handled routing within the single-page application architecture.
12. Postman
Postman was utilized for testing API endpoints during backend development
and debugging.
13. Git and GitHub
Git was used for version control, and GitHub served as the remote repository
for source code collaboration and tracking.

27
Chapter 5

Conclusion & Future Works

5.1 Conclusion of the Project

Conclusion
Our project SkillTree: An AI-Driven E-Learning Platform is a humble yet
innovative attempt to fulfill the need for an intelligent, scalable, and user-friendly
online learning system. The system has been designed and developed with the aim
to support both learners and educators by providing a seamless and interactive
environment.
This project has adopted several modern technologies and user-friendly design prin-
ciples to make the platform powerful and intuitive. The planning and execution of
the software were carried out under a structured methodology, enabling effective
project management and timely delivery.
At the end of the development phase, we conclude that we have made significant
efforts in the following key areas:

– A comprehensive description of the background and context of the project,

along with its relevance to existing learning platforms.
– Clearly defined aims and objectives aligned with the vision of AI-driven skill
development.
– Detailed explanation of the purpose, scope, and applicability of the platform.
– Identification and analysis of the core problem domain and its proposed solu-
tion through this system.
– Specification of system requirements and the actions that users (students, ed-
ucators, and admins) can perform.
– Development of a domain model outlining operations that can be executed
within the system.
– Inclusion of key features and functionalities with detailed screen layouts and
interaction flow.
– Design and implementation of a secure and responsive user interface with
modern authentication and AI-based features.

28
 – Thorough implementation and rigorous testing of the system against prepared
test cases to ensure reliability and performance.

We believe that this platform can make a meaningful contribution to modern ed-
ucation by providing learners with a flexible, accessible, and intelligent e-learning
experience.

5.2 Future Scope of the Project

Future Scope
In a nutshell, it can be summarized that the future scope of the project revolves
around enhancing the scalability, functionality, and user experience of the platform.
The following improvements and additions can be considered for future versions of
SkillTree: An AI-Driven E-Learning Platform:

– Deployment of the platform on reliable online servers to ensure global accessi-

bility.
– Integration of multiple load balancers to efficiently manage and distribute user
traffic.
– Implementation of a master-slave database structure to optimize performance
and reduce database query overload.
– Automated backup mechanism to regularly back up the source code and database
to different servers for improved data resilience.
– Addition of advanced hardware features like printer support for downloading
course materials, certificates, and test reports.
– Development of more robust authentication systems with features like biomet-
ric login or multi-factor authentication (MFA).
– Enhancement of the AI-powered Sarthi AI module to support voice input
and real-time interactive learning sessions.
– Strengthening of the quiz and assessment module with features such as time-
based tests, randomized questions, and adaptive difficulty.
– Introduction of a Student Blog Section where learners can share their ex-
periences, feedback, and success stories.
– Incorporation of a Gamification Layer that encourages learning through
achievement badges, experience points (XP), and leaderboard rankings.
– Scope for maintaining extensive records for Assignments, Students, Teachers,
Quizzes, and Questions, with additional data analytics and visualization tools.
– Opening the system architecture for extensibility, so future requirements by
users or institutions can be implemented with minimal effort.

These enhancements will significantly increase the applicability, efficiency, and user
engagement of the system. The open-ended architecture ensures that future features
and improvements can be added seamlessly.

29
Finally, we would like to thank everyone involved in the development and improve-
ment of this platform, directly or indirectly. With continuous innovation, SkillTree
aims to evolve as a comprehensive and intelligent companion for learners and edu-
cators alike.

30
Chapter 6

Codes & Snapshots

6.1 Project Codes

Listing 6.1: Sample Code

1 // Your JSP code here
2 import React , { useContext } from ’ react ’;
3 import { assets } from ’ ../../ assets / assets ’;
4 import { Link } from ’ react - router - dom ’;
5 import { AppContext } from ’ ../../ context / AppContext ’;
6 import { UserButton , useUser } from ’ @clerk / clerk - react ’;
7 const Navbar = ({ bgColor }) = > {
8 const { isEducator } = useContext ( AppContext ) ;
9 const { user } = useUser () ;
10 return isEducator && user && (
11 < div className ={ flex h -20 items - center justify - between px
-4 md : px -8 border - b bg -[# ffce00 ] border - gray -500 py -3
12 $ { bgColor }} >
13 < Link to = " / " className = " flex ␣ items - center ␣ gap -2 " >
14 < img
15 src ={ assets . skillstree }
16 alt = " Logo "
17 className = "w -24 ␣ sm :w -28 ␣ lg :w -32 ␣ relative ␣ top -10 "
18 />
19 </ Link >
20 < div className = " flex ␣ items - center ␣ gap -3 ␣ sm : gap -5 ␣ text -
gray -700 " >
21 <p className = " text - sm ␣ sm : text - base ␣ font - medium " > Hi ! { user
. fullName } </p >
22 < UserButton / >
23 </ div >
24 </ div >
25 );
26 };
27 export default Navbar ;
28
29

31
30
31 import React from ’ react ’;
32 import { assets } from ’ ../../ assets / assets ’;
33 const CallToAction = () = > {
34 return (
35 < div className = " ␣w - full ␣ relative ␣ overflow - hidden ␣ bg -
gradient - to - br ␣ from - yellow -50 ␣ to - white ␣ py -20 ␣ px -6 ␣
md : px -0 " >
36 { /* Decorative wave */ }
37 < div className = " absolute ␣ top -0 ␣ left -0 ␣ right -0 " >
38 < svg viewBox = " 0 ␣ 0 ␣ 1440 ␣ 100 " className = "w - full ␣h -
auto " >
39 < path
40 fill = " # fef9c3 "
41 d = " M0 ,64 L48 ,80 C96 ,96 ,192 ,128 ,288 ,117.3 C384
,107 ,480 ,53 ,576 ,32 C672 ,11 ,768 ,21 ,864 ,42.7 C960
,64 ,1056 ,96 ,1152 ,90.7 C
42 ␣ 1248 ,85 ,1344 ,43 ,1392 ,21.3 L1440 ,0 V100H1392C1344
,100 ,1248 ,100 ,1152 ,100 C1056 ,100 ,960 ,100 ,864 ,100 C768
,100 ,672 ,
43 ␣ 100 ,576 ,100 C480 ,100 ,384 ,100 ,288 ,100 C192 ,100 ,96 ,100 ,48 ,100
H0Z "
44 > </ path >
45 </ svg >
46 </ div >
47 < div className = " relative ␣z -10 ␣ flex ␣ flex - col ␣ items -
center ␣ text - center ␣ gap -4 " >
48 < h1 className = " md : text -5 xl ␣ text -2 xl ␣ font - bold ␣ text
- gray -800 ␣ leading - snug " >
49 Learn anything , anytime , anywhere
50 </ h1 >
51 <p className = " text - gray -600 ␣ md : text - lg ␣ max -w - xl " >
52 Master in - demand skills from industry experts
with interactive lessons , real - world projects
, and lifetime access .
53 </p >
54 < div className = " flex ␣ flex - wrap ␣ items - center ␣
justify - center ␣ font - medium ␣ gap -6 ␣ mt -6 " >
55 < button className = " px -8 ␣ py -3 ␣ rounded - lg ␣ text -
white ␣ bg - blue -600 ␣ hover : bg - blue -700 ␣
transition - all ␣ shadow - md " >
56 Get Started
57 </ button >
58 < button className = " flex ␣ items - center ␣ gap -2 ␣ text -
blue -700 ␣ hover : text - blue -900 ␣ transition " >
59 Learn More
60 < img src ={ assets . arrow_icon } alt = " arrow_icon "
className = "h -4 ␣w -4 " / >
61 </ button >
62 </ div >
63 { /* Feature Highlights */ }

32
64 < div className = " grid ␣ grid - cols -2 ␣ sm : grid - cols -4 ␣
gap -6 ␣ mt -10 ␣ text - sm ␣ text - gray -700 ␣ font - medium " >
65 < div className = " flex ␣ flex - col ␣ items - center " >
66 < img src ={ assets . star } alt = " Courses " className
= "w -6 ␣h -6 ␣ mb -1 " / >
67 100+ Expert Courses
68 </ div >
69 < div className = " flex ␣ flex - col ␣ items - center " >
70 < img src ={ assets . clock_icon || assets .
arrow_icon } alt = " Flexible " className = "w -6 ␣h
-6 ␣ mb -1 " / >
71 Learn at Your Pace
72 </ div >
73 < div className = " flex ␣ flex - col ␣ items - center " >
74 < img src ={ assets . infinite_icon || assets .
star_blank } alt = " Access " className = "w -6 ␣h -6
␣ mb -1 " / >
75 Lifetime Access
76 </ div >
77 < div className = " flex ␣ flex - col ␣ items - center " >
78 < img src ={ assets . mobile_icon || assets .
arrow_icon } alt = " Mobile " className = "w -6 ␣h -6
␣ mb -1 " / >
79 Mobile Friendly
80 import React from ’ react ’;
81 import { motion } from ’ framer - motion ’;
82 import CountUp from ’ react - countup ’;
83 const stats = [
84 { end : 500 , suffix : ’+ ’ , label : " Active ␣ Learners " } ,
85 { end : 3000 , suffix : ’+ ’ , label : " Hours ␣ Watched " } ,
86 { end : 90 , suffix : ’% ’ , label : " Career ␣ Growth ␣ Rate " } ,
87 { end : 10 , suffix : ’+ ’ , label : " Countries ␣ Reached " }
88 ];
89 const contai nerVar iants = {
90 hidden : { opacity : 0 } ,
91 visible : {
92 opacity : 1 ,
93 transition : { staggerChildren : 0.3 }
94 }
95 };
96 const itemVariants = {
97 hidden : { opacity : 0 , y : 30 } ,
98 visible : { opacity : 1 , y : 0 }
99 };
100 const Companies = () = > {
101 return (
102 < div className = " ␣w - full ␣ bg - gradient - to - b ␣ from - white ␣ via -
yellow -50 ␣ to - yellow -100 ␣ py -16 " >
103 < div className = " text - center ␣ mb -10 " >
104 < h2 className = " text -3 xl ␣ md : text -4 xl ␣ font - bold ␣ text - yellow
-900 " > Our Learning Impact </ h2 >

33
105 <p className = " text - yellow -800/80 ␣ mt -2 ␣ max -w - xl ␣ mx - auto " >
106 We ’ re ␣ proud ␣ to ␣ empower ␣ learners ␣ worldwide . ␣ Here ’s a
snapshot of our reach .
107 </p >
108 </ div >
109 < motion . div
110 className = " grid ␣ grid - cols -2 ␣ md : grid - cols -4 ␣ gap -6 ␣ px -6 ␣ md :
px -20 ␣ text - center "
111 variants ={ cont ainerV ariant s }
112 initial = " hidden "
113 whileInView = " visible "
114 viewport ={{ once : true }}
115 >
116 { stats . map (({ end , suffix , label } , index ) = > (
117 < motion . div
118 key ={ index }
119 className = "
120 ␣ bg - white ␣ shadow - lg ␣p -6 ␣ rounded - xl ␣ cursor - pointer
121 ␣ transition - transform ␣ duration -300
122 ␣ hover : - translate -y -3 ␣ hover : shadow -2 xl
123 ␣ hover : bg - yellow -100
124 ␣"
125 variants ={ itemVariants }
126
127
128
129
130
131 import React from ’ react ’;
132 import { motion } from ’ framer - motion ’;
133 import CountUp from ’ react - countup ’;
134 const stats = [
135 { end : 500 , suffix : ’+ ’ , label : " Active ␣ Learners " } ,
136 { end : 3000 , suffix : ’+ ’ , label : " Hours ␣ Watched " } ,
137 { end : 90 , suffix : ’% ’ , label : " Career ␣ Growth ␣ Rate " } ,
138 { end : 10 , suffix : ’+ ’ , label : " Countries ␣ Reached " }
139 ];
140 const contai nerVar iants = {
141 hidden : { opacity : 0 } ,
142 visible : {
143 opacity : 1 ,
144 transition : { staggerChildren : 0.3 }
145 }
146 };
147 const itemVariants = {
148 hidden : { opacity : 0 , y : 30 } ,
149 visible : { opacity : 1 , y : 0 }
150 };
151 const Companies = () = > {
152 return (

34
153 < div className = " ␣w - full ␣ bg - gradient - to - b ␣ from - white ␣
via - yellow -50 ␣ to - yellow -100 ␣ py -16 " >
154 < div className = " text - center ␣ mb -10 " >
155 < h2 className = " text -3 xl ␣ md : text -4 xl ␣ font - bold ␣ text
- yellow -900 " > Our Learning Impact </ h2 >
156 <p className = " text - yellow -800/80 ␣ mt -2 ␣ max -w - xl ␣ mx -
auto " >
157 We ’ re ␣ proud ␣ to ␣ empower ␣ learners ␣ worldwide . ␣ Here ’
s a snapshot of our reach .
158 </p >
159 </ div >
160 < motion . div
161 className = " grid ␣ grid - cols -2 ␣ md : grid - cols -4 ␣ gap -6 ␣
px -6 ␣ md : px -20 ␣ text - center "
162 variants ={ cont ainerV ariant s }
163 initial = " hidden "
164 whileInView = " visible "
165 viewport ={{ once : true }}
166 >
167 { stats . map (({ end , suffix , label } , index ) = > (
168 < motion . div
169 key ={ index }
170 className = "
171 ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ bg - white ␣ shadow - lg ␣p -6 ␣ rounded - xl ␣ cursor -
pointer
172 ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ transition - transform ␣ duration -300
173 ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ hover : - translate -y -3 ␣ hover : shadow -2 xl
174 ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ ␣ hover : bg - yellow -100
175 ␣␣␣␣␣␣␣␣␣␣␣␣"
176 variants ={ itemVariants }
177 >
178
179
180
181
182
183 import React , { useContext } from ’ react ’;
184 import { AppContext } from ’ ../../ context / AppContext ’;
185 import CourseCard from ’ ./ CourseCard ’;
186 import { Link } from ’ react - router - dom ’;
187 const CoursesSection = () = > {
188 const { allCourses } = useContext ( AppContext ) ;
189 return (
190 < div className = " py -16 ␣ md : px -40 ␣ px -6 ␣ bg - gradient - to - b ␣
from - white ␣ to - yellow -50 " >
191 < div className = " text - center ␣ mb -12 " >
192 < h2 className = " text -3 xl ␣ md : text -4 xl ␣ font - bold ␣ text
- yellow -900 " >
193 Learn from Industry Experts
194 </ h2 >

35
195 <p className = " md : text - lg ␣ text - sm ␣ text - yellow -800 ␣
mt -3 ␣ max -w -2 xl ␣ mx - auto " >
196 Explore top - rated online courses in technology ,
business , design , wellness , and more .
197 Start learning from expert instructors and
unlock new career opportunities today .
198 </p >
199 </ div >
200 < div className = " grid ␣ grid - cols -1 ␣ sm : grid - cols -2 ␣ md :
grid - cols -3 ␣ lg : grid - cols -4 ␣ gap -6 ␣ md : mb -16 ␣ mb -10 " >
201 { allCourses . slice (0 , 4) . map (( course , index ) = > (
202 < CourseCard key ={ index } course ={ course } / >
203 ))}
204 </ div >
205 < div className = " flex ␣ justify - center " >
206 < Link
207 to ={ ’/ course - list ’}
208 onClick ={() = > scrollTo (0 , 0) }
209 className = " mt -6 ␣ inline - block ␣ text - yellow -900 ␣
border ␣ border - yellow -500 ␣ px -6 ␣ py -3 ␣ rounded -
full ␣ hover : bg - yellow -100
210 ␣ transition ␣ duration -300 "
211 >
212 Browse All Courses
213 </ Link >
214 </ div >
215 </ div >
216 );
217 };
218 export default CoursesSection ;
219
220
221
222
223
224
225 import React from ’ react ’;
226 import { assets } from ’ ../../ assets / assets ’;
227 const Footer = () = > {
228 return (
229 < footer className = " bg - gradient - to - r ␣ from - orange -300 ␣
via - yellow -300 ␣ to - amber -400 ␣ text - gray -800 ␣w - full ␣ mt
-10 " >
230 < div className = " flex ␣ flex - col ␣ md : flex - row ␣ items -
start ␣ px -6 ␣ md : px -36 ␣ justify - between ␣ gap -10 ␣ py -12 ␣
border - b ␣ border
231 gray -400/50 " >
232 { /* Logo & Description */ }
233 < div className = " flex ␣ flex - col ␣ md : items - start ␣ items
- center ␣w - full ␣ md :w -1/3 " >
234 < img

36
235 src ={ assets . skillstree }
236 alt = " logo "
237 className = "w -32 ␣h - auto ␣ object - contain ␣ mb -4 "
238 />
239 <p className = " text - sm ␣ text - gray -700 ␣ text - center ␣
md : text - left ␣ leading - relaxed " >
240 Learn with SkillTree where knowledge meets
opportunity and turns into success .
241 </p >
242 </ div >
243 { /* Company Links */ }
244 < div className = " flex ␣ flex - col ␣ md : items - start ␣ items
- center ␣w - full ␣ md :w -1/4 " >
245 < h2 className = " font - semibold ␣ text - lg ␣ mb -4 " >
Company </ h2 >
246 < ul className = " flex ␣ md : flex - col ␣ justify - between ␣
text - sm ␣ text - gray -700 ␣ md : space -y -2 ␣ gap -2 ␣ md :
gap -0 " >
247 <li > < a href = " # " className = " hover : text - gray -900
" > Home </ a > </ li >
248 <li > < a href = " # " className = " hover : text - gray -900
" > About Us </ a > </ li >
249 <li > < a href = " # " className = " hover : text - gray -900
" > Contact Us </ a > </ li >
250 <li > < a href = " # " className = " hover : text - gray -900
" > Privacy Policy </ a > </ li >
251 </ ul >
252 </ div >
253 { /* Newsletter */ }
254 < div className = " hidden ␣ md : flex ␣ flex - col ␣ items -
start ␣w - full ␣ md :w -1/3 " >
255 < h2 className = " font - semibold ␣ text - lg ␣ mb -4 " >
Subscribe to our newsletter </ h2 >
256 <p className = " text - sm ␣ text - gray -700 ␣ mb -4 " >
257 Get the latest updates and free resources
delivered to your inbox .
258 </p >
259 < div className = " flex ␣ items - center ␣ gap -2 ␣w - full " >
260 < input
261 type = " email "
262 placeholder = " Enter ␣ your ␣ email "
263 className = " flex -1 ␣ border ␣ border - gray -300 ␣ bg -
white ␣ placeholder - gray -500 ␣ text - gray -800 ␣
px -3 ␣h -10 ␣ rounded ␣ outline
264 none ␣ text - sm "
265 />
266 < button className = " bg - gray -900 ␣ hover : bg - gray
-800 ␣ transition ␣w -28 ␣h -10 ␣ text - white ␣
rounded ␣ text - sm ␣ font - medium " >
267 Subscribe
268 </ button >

37
269 </ div >
270 </ div >
271 </ div >
272
273
274
275
276
277
278 };
279 useEffect (() = > {
280 if ( userData ) {
281 f e t c h U s e r E n r o l l e d C o u r s e s ()
282 }
283 } , [ userData ])
284 useEffect (() = > {
285 if ( enrolledCourses . length > 0) {
286 getC ourseP rogres s ()
287 }
288 } , [ enrolledCourses ])
289 import React , { useContext , useEffect , useState } from ’
react ’
290 import { AppContext } from ’ ../../ context / AppContext ’
291 import YouTube from ’ react - youtube ’;
292 import { assets } from ’ ../../ assets / assets ’;
293 import { useParams } from ’ react - router - dom ’;
294 import humanizeDuration from ’ humanize - duration ’;
295 import axios from ’ axios ’;
296 import { toast } from ’ react - toastify ’;
297 import Rating from ’ ../../ components / student / Rating ’;
298 import Footer from ’ ../../ components / student / Footer ’;
299 import Loading from ’ ../../ components / student / Loading ’;
300 const Player = ({ }) = > {
301 const { enrolledCourses , backendUrl , getToken ,
calculateChapterTime , userData ,
fetchUserEnrolledCourses } =
302 useContext ( AppContext )
303 const { courseId } = useParams ()
304 const [ courseData , setCourseData ] = useState ( null )
305 const [ progressData , setProgressData ] = useState ( null )
306 const [ openSections , setOpenSections ] = useState ({}) ;
307 const [ playerData , setPlayerData ] = useState ( null ) ;
308 const [ initialRating , setInitialRating ] = useState (0) ;
309 const getCourseData = () = > {
310 enrolledCourses . map (( course ) = > {
311 if ( course . _id === courseId ) {
312 setCourseData ( course )
313 course . courseRatings . map (( item ) = > {
314 if ( item . userId === userData . _id ) {
315 setInitialRating ( item . rating )
6.2 Snapshots of the Project

39
41
42
References

1. React – A JavaScript library for building user interfaces.

https://reactjs.org
2. Node.js – JavaScript runtime built on Chrome’s V8 JavaScript engine.
https://nodejs.org
3. Express.js – Fast, unopinionated, minimalist web framework for Node.js.
https://expressjs.com
4. MongoDB – NoSQL database for modern applications.
https://www.mongodb.com
5. Mongoose – Elegant MongoDB object modeling for Node.js.
https://mongoosejs.com
6. Clerk – Authentication and user management for modern web apps.
https://clerk.dev
7. Stripe – Online payment processing for internet businesses.
https://stripe.com
8. Next.js – The React Framework for Production.
https://nextjs.org
9. Redux – A Predictable State Container for JS Apps.
https://redux.js.org
10. GitHub – Code hosting platform for version control and collaboration.
https://github.com
11. Postman – API platform for building and using APIs.
https://www.postman.com
12. JWT – JSON Web Token for securely transmitting information between par-
ties.
https://jwt.io
13. Visual Studio Code – Code editor redefined and optimized for building modern
web apps.
https://code.visualstudio.com
14. Official MongoDB Node.js Driver Documentation.
https://www.mongodb.com/docs/drivers/node
15. LaTeX Project Website – Documentation and support for LaTeX.
https://www.latex-project.org

43