Major Project Report on

CODEPAL
Interactive Learning program
Submitted to partial fulfillment of the Requirements for the
award of the Diploma Under

STATE BOARD OF TECHNICAL EDUCATION,

KERALA
In

Computer Engineering
Under the guidance
of Mr.
MUHAMMED
JISAM A
Submitted by:

Group members

AMAL KP (2301133589)
MINHAJ KT (2301131550)
ABDULLA FATHAH T (2301131534)
SHABEEHA AT (2301133596)

DEPARTMENT OF COMPUTER ENGINEERING

PURAMANNUR, VALANCHERY
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program
APRIL 2026

2
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

MAJLIS POLYTECHNIC COLLEGE

Puramannur, Valanchery

INSTITUTE VISION

To be a prime institution with excellence in technological competency, creativity

and social commitment.

INSTITUTE MISSION

 To impart quality technical education by providing better technological

environment.
 To develop creativity among students by concentrating on their overall
development.
 To mould a technical community with social and moral values.

iii
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

MAJLIS POLYTECHNIC COLLEGE

Puramannur, Valanchery

DEPARTMENT OF COMPUTER ENGINEERING

DEPARTMENT VISION

To provide quality technical education and to produce globally competent

Computer Engineers.

DEPARTMENT MISSION

 Bring up students to have multidisciplinary skills and leadership qualities.

 To produce best Computer Engineering professionals by offering quality
training and education.
 Inculcating professional ethics and innovative research capabilities thereby
making a productive career.
 Facilitate learning in advanced technologies adopting innovative methods.

iv
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

MAJLIS POLYTECHNIC COLLEGE

Puramannur, Valanchery

DEPARTMENT OF COMPUTER ENGINEERING

PROGRAM OUTCOMES (POS)

Basic and Discipline specific knowledge: Apply knowledge of basic mathematics,

PO1 science and engineering fundamentals and engineering specialization to solve the
engineering problems.
Problem analysis: Identify and analyse well-defined engineering problems using
PO2
codified standard methods.
Design/ development of solutions: Design solutions for well-defined technical
PO3 problems and assist with the design of systems components or processes to meet
specified needs.
Engineering Tools, Experimentation and Testing: Apply modern engineering
PO4
tools and appropriate technique to conduct standard tests and measurements.
Engineering practices for society, sustainability and environment: Apply
PO5 appropriate
technology in context of society, sustainability, environment and ethical practices.
Project Management: Use engineering management principles individually, as a
PO6 team member or a leader to manage projects and effectively communicate about
well-defined engineering activities.
Life-long learning: Ability to analyse individual needs and engage in updating in the
PO7 context of technological changes.

PROGRAM SPECIFIC OUTCOME

PSO1 Design software using emerging IT technologies and develop optimized

solutions for all real-world problems.
PSO2 Knowledge in diverse area of computer engineering to solve various
complex problems.

v
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

DEPARTMENT OF COMPUTER ENGINEERING

MAJLIS POLYTECHNIC COLLEGE

PURAMANNUR (PO), VALANCHERY

CERTIFICATE
This is to certify that the Major Project Report entitled “STUDENT
PERFORMANCE PREDICTION SYSTEM” is a bonafide work submitted by
SHIDIN P DILEEP (2301131574) , SAFWAN AHAMED (2301131569) , ABDUL
HASEEB.K (2301131532) , ASHIF.K (2301131538) , 6 th semester Computer Engineering in
partial fulfillment of requirement for the award of diploma in Computer Engineering of the
State Board of Technical Education ,Kerala .

Mr. MUHAMMED JISAM Mr. THOUKHEER Mr. NAZARMON VP

A IBNU ALI ASHRAF .A
Project Guide Project Coordinator Head of the Section

Lecturer Lecturer
Dept. of Computer
Dept. of Computer Dept. of Computer Engineering
Engineering Engineering

Place: Puramannur
Date:
(Office seal)

Internal Examiner External Examiner

vi
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

ACKNOWLEDGEMENT

First of all, I would like to Thank GOD THE ALMIGHTY for the divine grace
bestowed on me to complete this seminar successfully in time.

I wish to convey our gratefulness to, Mr. MOHAMMED SHAREEF K.P,

Principal Majlis polytechnic college, Puramannur, for his strong support and
motivation towards a great level of success in our career.

I express my sincere thanks to Mr. NAZARMON VP., Head of the

department of Computer engineering, for his kind cooperation, encouragement and
help.

I express my hearty thanks to my guide Mr. MUHAMMED JISAM A,

Lecturer, Department of Computer engineering for his enterprising attitude, timely
suggestions and support that made the Project fruitful.

My heartfelt gratitude to Mr. THOUKHEER IBNU ALI ASHRAF A,

Lecturer,department of Computer engineering, for his valuable suggestions and
guidance in the presentation of Project report.

I would also wish to record my gratitude to all my friends and classmates for
their help and support in carrying out this work successfully.

AMAL KP
MINHAJ KT
ABDULLA FATHAH T
SHABEEHA AT

1
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

ABSTRACT

CODEPAL is an interactive web-based learning platform designed to provide a structured

learning roadmap for beginner programmers. In the modern digital era, programming has
become an essential skill, but beginners often face difficulties in identifying the correct
learning path due to the abundance of scattered learning resources available online. Many
learners spend a significant amount of time searching for tutorials instead of focusing on
actual learning.

The CodePal platform addresses this issue by organizing programming topics into a
structured roadmap consisting of categories and modules. Each module contains curated
learning resources that guide the user step-by-step through the learning process. The system
tracks the progress of users and dynamically unlocks subsequent modules only after the
completion of prerequisite modules, ensuring that learners build a strong foundation before
moving to advanced topics.

The system is developed using modern web technologies. The frontend interface is built
using React and styled using Tailwind CSS, enabling the creation of a responsive and
dynamic user interface. The backend functionality is provided by Supabase, a Backend-as-a-
Service (BaaS) platform that manages database operations, authentication, and API
communication. The platform uses a PostgreSQL relational database to store information
related to users, learning modules, categories, and progress tracking.

CodePal aims to improve the learning experience of beginner programmers by providing

a clear roadmap, structured content delivery, and real-time progress tracking. The system
also includes an administrative interface that allows administrators to manage learning
content efficiently. By combining structured learning with modern cloud-based
technologies, CodePal provides a scalable and efficient platform for programming
education.

2
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

3
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

CONTENTS

Title Page................................................................................................................................(i)

Institute Vision and Mission..................................................................................................(ii)

Department Vision and Mission...........................................................................................(iii)

Department PEO, PO and PSO.............................................................................................(iv)

Certificate..............................................................................................................................(v)

Acknowledgement…................................................................................................................1

Abstract…................................................................................................................................2

Contents…................................................................................................................................3

Figure Index…..........................................................................................................................5

Chapter 1 INTRODUCTION…............................................................................................6

Chapter 2 FEASIBILITY STUDY …..................................................................................8

2.1: TECHNICAL FEASIBILITY STUDY.................................................................9

Chapter 3 REQUIREMENTS ANALYSIS AND SPECIFICATION.............................16

3.1 SRS DOCUMENT………………………………………………………………...19

Chapter 4 DESIGN ….................................................................................................……25

4.2 INTERFACE DESIGN…………………………………………………………...25

4.1 DATA FLOW DIAGRAM ………………………………………………………29

Chapter 5 CODING.............................................................................................................30

5.1 SOURCE CODE………………………………………………………………….30

Chapter 6 TESTING...........................................................................................................79
4
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program
6.1 UNIT TESTING………………………………………………………………….79

6.2 INTEGRATION TESTING……………………………………………………...81

6.3 SYSTEM TESTING………………………………………………………………83

Chapter 7 MAINTENANCE............................................................................................86

Chapter 8 CONCLUSION.................................................................................................88

8.1 CONCLUSION........................................................................................................88

8.2 FUTURE SCOPE.....................................................................................................89

Chapter 9 BIBLIOGRAPHY..............................................................................................90

5
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

FIGURE INDEX

Figure 1.0 Home Page………………………….

Figure 1.1 Sign In Page…………………………

Figure 1.2 Reset Password Page………………...

Figure 1.3 Sign Up Page………………………...

Figure 1.4 Learning Dashboard…………………

Figure 1.5 Learning Path………………………..

Figure 1.6 Admin Console –User Management...

Figure 1.7 Admin Console – Content Studio…...

Figure 2.0 Dataflow

diagram……………………

6
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

CHAPTER 1
INTRODUCTION

In the modern digital era, programming has become one of the most important skills
for students, professionals, and technology enthusiasts. Software development plays a
major role in various industries such as web development, mobile applications,
artificial intelligence, and data science. As a result, many individuals are interested in
learning programming to improve their career opportunities and technical knowledge.

However, beginners often face several challenges when they start learning
programming. One of the major problems is the lack of proper guidance and
structured learning paths. Although many free learning resources are available on the
internet, they are often scattered across different platforms such as blogs, tutorial
websites, and video platforms. This makes it difficult for beginners to know where to
start and what topics they should learn first. As a result, learners may feel confused,
skip important concepts, or lose motivation during the learning process.

Another common problem is that most beginners try to learn programming randomly
by watching tutorials or reading articles without following a structured learning
roadmap. This often leads to incomplete knowledge and gaps in understanding
fundamental concepts. Without proper progression from basic topics to advanced
concepts, learners may struggle to develop strong programming skills.

To address these challenges, the CodePal – Programming Learning Platform has been
developed as a web-based learning system that provides structured programming
roadmaps and organized learning resources. CodePal aims to simplify the
programming learning process by presenting topics in a systematic order. The
platform organizes programming concepts into categories and modules so that
learners can progress step by step.

The CodePal system allows users to register on the platform, explore programming
categories, access learning modules, and track their progress throughout the learning
journey. Each module represents a specific programming concept and is designed to
guide learners through the required knowledge in a logical sequence. The platform
also implements a sequential unlocking mechanism that ensures users complete
earlier modules before accessing advanced topics. This helps learners build a strong
foundation before moving forward.

Another important feature of the CodePal system is progress tracking. The platform
records completed modules and dynamically calculates the user's learning progress.
7
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

This feature allows users to monitor their progress and stay motivated as they move
forward in the learning roadmap.

The system also includes an administrative interface that allows administrators to

manage categories, add new learning modules, update resources, and maintain the
overall learning structure. This ensures that the platform can continuously evolve and
provide updated programming resources to users.

From a technical perspective, the CodePal platform is built using modern web
technologies. The frontend interface is developed using React, which enables the
creation of dynamic and interactive user interfaces. Tailwind CSS is used for styling
and responsive design, ensuring that the platform works effectively across different
devices. The backend services are provided by Supabase, which offers database
management, authentication, and API services. PostgreSQL is used as the relational
database to store system data such as user information, learning modules, and
progress records.

The platform follows a client–backend architecture, where the frontend communicates

with backend services through APIs. This architecture allows the system to operate
efficiently while maintaining scalability and security. By using cloud-based services
and modern frameworks, CodePal can support multiple users while maintaining good
performance.

Overall, the CodePal Programming Learning Platform aims to create a structured and
accessible environment for beginner programmers. By organizing learning resources
into a clear roadmap, the system helps users focus on learning rather than searching
for scattered tutorials. The platform provides a guided learning experience that
improves knowledge retention, encourages consistent learning, and supports the
development of practical programming skills.

The development of the CodePal system demonstrates how modern web technologies
can be used to build effective educational platforms. By combining structured
learning paths, progress tracking, and user-friendly design, the system provides an
efficient solution for individuals who want to learn programming in a systematic and
organized manner.

8
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

CHAPTER 2
FEASIBILITY STUDY

Introduction

A feasibility study is one of the most important stages in the System Development
Life Cycle (SDLC). Before developing any system, it is necessary to analyze whether
the proposed system is practical and beneficial. The feasibility study evaluates the
strengths, weaknesses, opportunities, and limitations of the proposed system. It helps
developers and stakeholders understand whether the system can be successfully
implemented within the available resources.
The main purpose of conducting a feasibility study is to determine whether the
proposed system is technically possible, economically viable, operationally practical,
and achievable within the given time frame. This analysis helps organizations avoid
unnecessary risks, reduce development failures, and ensure efficient use of resources.
A feasibility study examines several factors including:
 Availability of required technology
 Financial cost of development and maintenance
 Ability of users to adopt the system
 Time required to complete the project
By carefully evaluating these factors, developers can make informed
decisions regarding the development of the system.
The proposed system for this project is CodePal, which is a web-based programming
learning platform designed to help beginners learn programming in a structured and
organized way. Many students struggle to start learning programming because
learning resources are scattered across multiple platforms. CodePal aims to solve this
problem by providing categorized programming modules, beginner-friendly learning
materials, and progress tracking features.
To determine whether CodePal can be successfully developed and implemented, a
detailed feasibility analysis was conducted. The feasibility study focuses on four main
aspects:
1. Technical Feasibility
2. Economic Feasibility
3. Operational Feasibility
4. Schedule Feasibility
Each of these feasibility factors plays an important role in determining whether the
system can be successfully implemented.

9
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

2.1 Technical Feasibility

Technical feasibility examines whether the proposed system can be developed using
the available technologies, tools, and technical resources. It also evaluates whether the
development team has the necessary skills and expertise required to implement the
system successfully.

The CodePal platform is designed as a modern web application using current web
development technologies. These technologies provide the flexibility, scalability, and
performance needed for building an online learning platform.

2.1.1 Frontend Development Technology

The frontend of the CodePal platform is developed using React, which is a widely
used JavaScript library for building user interfaces. React allows developers to create
reusable components, which makes the development process more efficient and
organized.
Using React provides several advantages:
 Component-based architecture
 Efficient rendering using virtual DOM
 Faster development through reusable components
 Easy integration with backend APIs
 Large developer community support
Because of these advantages, React is widely used in modern web application
development.
React also allows the CodePal platform to provide interactive features such as
dynamic content updates, user dashboards, navigation systems, and real-time
progresstracking.

2.1.2 User Interface Design

The user interface of the system is developed using Tailwind CSS, which is a utility-
first CSS framework that simplifies UI development.
Tailwind CSS helps developers design modern and responsive layouts without writing
complex CSS code. Instead of creating custom stylesheets, developers can use pre-
defined utility classes to design the interface quickly.
Advantages of Tailwind CSS include:
 Faster user interface development
 Consistent design across the application
 Mobile-first responsive design
 Easy customization of styles

10
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Using Tailwind CSS ensures that the CodePal platform maintains a clean, modern,
and user-friendly interface.

2.1.3 Backend Infrastructure

The backend services of the CodePal system are provided using Supabase, which is
an open-source backend-as-a-service platform.
Supabase provides several built-in services that simplify backend development,
including:
 User authentication system
 Database management
 API services
 File storage
 Real-time database updates
By using Supabase, developers do not need to build complex backend systems from
scratch. This significantly reduces development time and simplifies system
architecture.

2.1.4 Database Management System

Supabase uses PostgreSQL as its database management system. PostgreSQL is one

of the most powerful and reliable relational database systems available.
The CodePal system uses the database to store important information such as:
 User registration data
 Login credentials
 Programming categories
 Learning modules
 User progress information
 Administrative content
PostgreSQL provides strong data integrity, high performance, and secure data
management, making it suitable for this project.

2.1.5 Hardware and Software Requirements

One of the advantages of the CodePal platform is that it does not require expensive
hardware or specialized software.
Hardware Requirements
Users can access the system using standard devices such as:
 Desktop computers
 Laptop computers
 Tablets
 Smartphones
Software Requirements
Users only need a modern web browser such as:
 Google Chrome
11
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

 Mozilla Firefox
 Microsoft Edge
 Safari
Because the system is web-based, users do not need to install additional applications.

2.1.6 Technical Risk Analysis

The technologies used in the CodePal project are well-established and widely
supported by developer communities. This reduces the risk associated with technical
implementation.
Additionally, these technologies have extensive documentation and online resources
that help developers troubleshoot problems easily.
Therefore, considering the availability of modern development tools and
technical resources, the CodePal system is technically feasible.

2.2 Economic Feasibility

Economic feasibility evaluates whether the benefits of the proposed system justify the
costs involved in its development and operation.
The main goal of economic feasibility analysis is to ensure that the project does not
require excessive financial resources and that the benefits gained from the system
outweigh the costs.

2.2.1 Development Cost

The development cost of the CodePal system is relatively low because it uses open-
source technologies.
The following technologies used in the project are free:
 React
 Tailwind CSS
 Supabase
 PostgreSQL
 GitHub
Since these technologies are open-source, developers do not need to pay licensing
fees.

2.2.2 Infrastructure Cost

The backend infrastructure is managed using Supabase, which provides a free tier
suitable for educational projects and small applications.
The free tier includes:
 Database storage
 Authentication services
 API access
12
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

 Hosting services
This eliminates the need to purchase expensive server infrastructure.
2.2.3 Deployment Cost

The CodePal application can be deployed using Vercel, which offers free hosting for
frontend applications.
Vercel provides:
 Automatic deployment
 Continuous integration
 Fast global content delivery
These features make the deployment process efficient and cost-effective.

2.2.4 Maintenance Cost

The maintenance cost of the CodePal system is minimal because the technologies
used are stable and easy to maintain.
Maintenance activities include:
 Updating learning content
 Fixing bugs and errors
 Improving system features

Since the system does not require complex hardware infrastructure, maintenance
costs remain low.

2.2.5 Cost-Benefit Analysis

Although the development cost is minimal, the benefits provided by

the CodePal platform are significant.
Some of the major benefits include:
 Providing accessible programming education
 Helping beginners learn programming effectively
 Organizing learning materials in structured modules
 Improving the learning experience of users
Because the system provides educational value while maintaining low development
costs, the CodePal project is economically feasible.

2.3 Operational Feasibility

Operational feasibility evaluates how well the proposed system will perform in real-
world conditions. It examines whether the system will be accepted by users and
whether it can effectively solve the identified problem.

2.3.1 Problem Statement

13
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Many students who want to learn programming struggle to find structured learning
resources. Most online resources are scattered across multiple platforms, making it
difficult for beginners to follow a clear learning path.
The CodePal platform aims to solve this problem by providing organized
programming modules that guide beginners step by step.

2.3.2 User-Friendly Interface

The system is designed with a simple and intuitive user interface. Users can easily
navigate the platform and access learning materials without confusion.
Key features of the user interface include:
 Simple navigation menu
 Organized categories
 Clean layout design
 Easy content access
These features ensure that users can focus on learning without technical difficulties.

2.3.3 Learning Module Structure

The CodePal platform organizes programming content into structured

learning modules. Each module focuses on a specific topic and provides beginner-
friendly explanations.
This structured approach helps users progress gradually from basic concepts to more
advanced topics.

2.3.4 Administrative Control

The system also provides administrative functionality that allows administrators to

manage platform content.
Administrative capabilities include:
 Adding new programming categories
 Updating learning modules
 Managing user data
 Maintaining system content
These features ensure that the platform remains organized and up-to-date.

2.3.5 Accessibility and Availability

Since CodePal is a web-based platform, it can be accessed from anywhere with

internet connectivity.
Users can access the platform from multiple devices such as laptops, tablets, and
smartphones. This flexibility improves accessibility and encourages continuous
learning.

2.3.6 User Acceptance

14
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

The increasing popularity of online learning platforms indicates that users are
comfortable with digital education systems. Because CodePal provides beginner-
friendly programming education, it is expected that users will accept and adopt the
platform.
Therefore, the system is operationally feasible.

2.4 Schedule Feasibility

Schedule feasibility determines whether the project can be completed within the
available time frame.
The CodePal project follows a structured development schedule to ensure that all
development phases are completed efficiently.

2.4.1 Requirement Analysis

During this phase, the project objectives and system requirements are identified and
documented.

2.4.2 System Design

The system architecture, database structure, and user interface design are planned
during this stage.

2.4.3 Frontend Development

The frontend interface is developed using React and Tailwind CSS.

2.4.4 Backend Integration

The frontend application is connected with Supabase backend services.

2.4.5 Testing Phase

Testing ensures that the system functions correctly and identifies potential errors.

2.4.6 Deployment

The final system is deployed using Vercel, making the platform accessible to users.
By dividing the project into these development phases, the system can be completed
within the academic semester timeline.
Therefore, the project is schedule feasible.

15
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

2.5 Conclusion

The feasibility study conducted for the CodePal system indicates that the project is
practical and achievable. The technologies required for development are widely
available, and the system can be built using open-source tools with minimal cost.
Additionally, the platform addresses a real problem faced by beginners who want to
learn programming in a structured manner. The system is easy to use, accessible
through web browsers, and capable of providing valuable educational resources.
Furthermore, the development schedule ensures that the system can be completed
within the available time frame.
Based on the evaluation of technical, economic, operational, and schedule feasibility,
it can be concluded that the CodePal system is feasible for development and
implementation.

16
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

CHAPTER 3
REQUIREMENTS ANALYSIS AND SPECIFICATION

CODEPAL – Programming Learning Platform

3.0 Introduction

Requirements analysis and specification is one of the most critical phases in the
software development process. It focuses on identifying, analyzing, and documenting
the requirements of a proposed system before the actual development begins. The
purpose of this phase is to ensure that developers clearly understand what the system
must do and how it should perform in different situations.

In many software projects, problems arise when system requirements are not properly
defined during the early stages of development. Without proper requirement analysis,
developers may misunderstand user needs, which can lead to system design errors,
increased development costs, and project delays. Therefore, requirements analysis
helps reduce risks and ensures that the final system meets user expectations.
The requirements analysis phase involves gathering information about user needs,
system functionalities, and operational constraints. These requirements are then
organized and documented in a structured format known as the Software
Requirements Specification (SRS). The SRS document acts as a reference guide for
developers, designers, testers, and project managers throughout the development
lifecycle.

For the proposed project CodePal – Programming Learning Platform,

requirements analysis focuses on identifying the needs of beginner programmers who
want to learn programming concepts in a structured and organized manner. Many
beginners struggle when learning programming because learning materials are often
scattered across different websites, tutorials, and educational platforms. This lack of
organization makes it difficult for learners to follow a clear learning path.
The CodePal system aims to solve this problem by providing a centralized learning
platform where programming topics are organized into categories and modules. Each
module focuses on a specific concept and guides learners through programming topics
step by step. The platform also includes features that allow users to track their
learning progress and monitor completed modules.

17
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

The requirements analysis process for the CodePal system involved studying existing
programming learning platforms, analyzing user needs, and identifying system
functionalities that can improve the learning experience for beginners. Based on this
analysis, several functional and non-functional requirements were identified.
Functional requirements describe the specific operations that the system must
perform, such as user registration, login, accessing learning modules, and progress
tracking. Non-functional requirements describe the quality attributes of the system,
such as performance, security, usability, and reliability.

In addition to functional and non-functional requirements, the requirements analysis

also considers system constraints, hardware requirements, software requirements, and
database requirements.

All these requirements are documented in the Software Requirements Specification

(SRS) document, which provides a detailed description of the system and its expected
behavior.

The SRS document serves as a foundation for the design and implementation phases
of the CodePal system. It ensures that the development process remains aligned with
the project objectives and user requirements.

3.0.1 Purpose of Requirements Analysis

The main purpose of requirements analysis is to identify and document the needs of
users and stakeholders. It helps developers understand what features should be
included in the system and how the system should behave under different conditions.
Requirements analysis also ensures that the system design is based on accurate
information and that all necessary functionalities are included in the final product.

Some key objectives of requirements analysis include:

• Understanding the needs of users

• Identifying system functionalities
• Defining system constraints
• Documenting system requirements
• Providing a foundation for system design

By performing proper requirements analysis, developers can ensure that the system
meets user expectations and operates effectively.

18
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

3.0.2 Types of Requirements

System requirements are generally divided into two main categories: functional
requirements and non-functional requirements.
Functional requirements describe the specific functions and operations that the system
must perform. These include user registration, login functionality, accessing
programming modules, and tracking learning progress.
Non-functional requirements describe the performance, security, usability, and
reliability aspects of the system. These requirements ensure that the system performs
efficiently and provides a good user experience.
Both functional and non-functional requirements are important for developing a
reliable and effective software system.

3.0.3 Importance of Software Requirements Specification

The Software Requirements Specification (SRS) document plays a critical role in

software development. It provides a clear and detailed description of the system
requirements and acts as a communication bridge between developers, stakeholders,
and users.
The SRS document ensures that everyone involved in the project has a clear
understanding of the system’s functionality and objectives. It also helps developers
during system design, coding, and testing.
A well-prepared SRS document improves project management, reduces development
errors, and ensures that the final system meets user expectations.

3.1 SRS DOCUMENT

19
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

SRS(Software Requirements Specification)

3.1.1 Introduction

The Software Requirements Specification (SRS) document provides a detailed

description of the CodePal system and its requirements. It describes the functionality,
behavior, constraints, and overall structure of the system.
The main purpose of this document is to provide a clear understanding of the system
requirements to developers, project managers, and stakeholders involved in the
project. By documenting the system requirements in detail, the development team can
design and implement the system more efficiently.
The SRS document also helps in reducing misunderstandings between stakeholders
and developers by clearly defining system features and limitations.

3.1.2 Purpose

The purpose of the CodePal system is to provide an online learning platform that
helps beginners understand programming concepts through structured lessons and
organized modules.
Programming education is often challenging for beginners because many learning
resources are scattered across multiple websites and tutorials. CodePal aims to
simplify the learning process by organizing programming topics into clear learning
paths.
The platform allows users to learn programming concepts step by step and track their
progress as they complete learning modules.

3.1.3 Scope of the System

The CodePal platform focuses on providing programming education to beginners. The

system allows users to register on the platform, log in to their accounts, and explore
different programming categories.
Each category contains several learning modules that explain programming concepts
in an easy-to-understand format. Users can read these modules and mark them as
completed after finishing them.
The system tracks user progress and ensures that modules are completed sequentially.
This helps users follow a logical learning path while studying programming.
The platform also provides administrative features that allow administrators to
20
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

manage the learning content. Administrators can create new programming categories,
add learning modules, update content, and monitor user activity.
The system is designed as a web application that can be accessed through internet
browsers. This allows users to access the platform from multiple devices such as
laptops, tablets, and smartphones.

3.1.4 Definitions and Acronyms

Term Description
SRS Software Requirements Specification
UI User Interface
API Application Programming Interface
DB Database
Admin Administrator responsible for managing system content
Module A structured lesson or learning unit
Category A group of related programming topics

3.1.5 Product Perspective

The CodePal system is designed as a web-based learning platform that follows a

client-server architecture. The frontend interface interacts with the backend services
through APIs to retrieve and store data.
The system relies on a database to store important information such as user accounts,
programming modules, categories, and progress records.
The platform is built using modern web development technologies that support
dynamic content and responsive design.

3.1.6 Product Functions

The major functions of the CodePal system include:

 User registration and login

 Viewing programming categories
 Accessing learning modules
 Tracking learning progress
 Sequential module unlocking
 Administrative management of learning content

These functions work together to provide an effective learning experience for

beginner programmers.

21
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

3.1.7 User Classes and Characteristics

The CodePal system supports two types of users.

Learners
Learners are individuals who use the platform to study programming modules. Most
learners are beginners who want to understand programming concepts in a structured
manner.
Administrators
Administrators manage the platform content. They can add new programming
categories, create modules, update learning materials, and monitor system activity.

3.1.8 Operating Environment

The CodePal platform operates in a web-based environment and supports multiple

operating systems.

Supported operating systems include:

 Windows
 Linux
 macOS
 Android
 iOS

Users can access the platform through web browsers with internet connectivity.

3.1.9 Design Constraints

Some constraints that affect the system include:

 Dependence on internet connectivity

 Limitations of hosting platforms
 Dependence on backend services such as Supabase

These constraints must be considered during system development.

22
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

3.1.10 Functional Requirements

Functional requirements define the actions that the system must perform.
User Registration
The system should allow new users to create accounts by providing registration
details such as email address and password.
User Login
Registered users should be able to log in securely using their credentials.
View Programming Categories
Users should be able to view available programming categories and select topics they
want to learn.
Access Learning Modules
Users should be able to access learning modules that contain explanations of
programming concepts.
Module Completion
Users should be able to mark modules as completed after finishing them.
Progress Tracking
The system should track user progress and display completed modules.
Sequential Module Unlocking
The system should unlock new modules only after the previous module has been
completed.

3.1.11 Admin Functional Requirements

Administrators have the ability to manage system content.

Admin features include:

 Adding programming categories

 Editing existing categories
 Creating new learning modules
 Updating module content
 Monitoring user activity

3.1.12 Non-Functional Requirements

Performance
The system should load pages quickly and provide smooth navigation.
Security
The system should protect user data through secure authentication and encryption
mechanisms.
Usability
23
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

The platform should provide a simple and user-friendly interface suitable for beginner
programmers.
Reliability
The system should operate without errors and maintain accurate data records.
Scalability
The platform should support an increasing number of users and learning modules.

3.1.13 Hardware Requirements

Users can access the system using devices such as:

 Desktop computers
 Laptop computers
 Tablets
 Smartphones

A stable internet connection is required.

3.1.14 Software Requirements

Operating Systems:

 Windows
 Linux
 macOS

Web Browsers:

 Google Chrome
 Mozilla Firefox
 Microsoft Edge
 Safari

Development Technologies:

Frontend Framework: React

Styling Framework: Tailwind CSS
Backend Platform: Supabase
Database System: PostgreSQL
Version Control: GitHub
Deployment Platform: Vercel
24
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

3.1.15 Database Requirements

The database must store the following information:

 User account information

 Programming categories
 Learning modules
 User progress records
 Administrative data

The database should provide secure data storage and efficient data retrieval.

3.1.16 Future Enhancements

Future improvements for the CodePal platform may include:

 Integrated code editor

 Interactive coding exercises
 Programming quizzes
 AI-based learning assistance
 Certification system
 Community discussion forums

3.1.17 Conclusion

The Software Requirements Specification document provides a detailed description of

the requirements of the CodePal programming learning platform. It defines the system
functionalities, performance requirements, and operational constraints.
The requirements described in this document serve as the foundation for the design
and development phases of the project. By following these specifications, the
development team can ensure that the system meets user needs and provides an
effective programming learning experience.

CHAPTER 4
DESIGN

4.2 INTERFACE DESIGN

25
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Figure 1.0 Home Page

Figure 1.1 Sign In Page

26
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Figure 1.2 Reset Password Page

Figure 1.3 Sign Up Page

27
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Figure 1.4 Learning Dashboard

Figure 1.5 Learning Path

28
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Figure 1.6 Admin Console – User Management

Figure 1.7 Admin Console – Content Studio

29
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

4.1 DATA FLOW DIAGRAM

Figure 2.0 Dataflow diagram

30
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

CHAPTER 5
CODING

Login Page

import React, { useState } from 'react'

import { Link, useNavigate } from 'react-router-dom'
import { supabase } from '../lib/supabaseClient'

const LoginPage = () => {

const navigate = useNavigate()
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)

const handleLogin = async (event) => {

[Link]()
setLoading(true)
setError('')

const { data, error: authError } = await [Link]({ email,

password })

if (authError) {
setError([Link])
setLoading(false)
return
}

if ([Link]) navigate('/dashboard')
setLoading(false)
}

return (
<div className="min-h-screen px-6 py-10">
<div className="mx-auto grid w-full max-w-5xl gap-8 rounded-[2rem] border
border-slate-200 bg-white p-6 shadow-sm md:grid-cols-2 md:p-10">
<div className="flex flex-col justify-between rounded-3xl bg-indigo-600 p-8
text-white">
<div>
31
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

<p className="text-xs font-bold uppercase tracking-[0.2em] text-indigo-

200">Welcome Back</p>
<h1 className="mt-4 text-4xl font-black leading-tight">Continue your
coding journey.</h1>
<p className="mt-4 text-sm text-indigo-100">
Track your roadmap progress, complete modules, and unlock the next level.
</p>
</div>
<p className="mt-12 text-sm text-indigo-200">CodePal Learning
Platform</p>
</div>

<div className="rounded-3xl border border-slate-200 bg-slate-50 p-8">

<h2 className="text-2xl font-black text-slate-900">Sign In</h2>
<p className="mt-1 text-sm text-slate-500">Access your dashboard</p>

{error && <p className="mt-4 rounded-xl border border-red-200 bg-red-50

px-3 py-2 text-sm text-red-700">{error}</p>}

<form onSubmit={handleLogin} className="mt-5 space-y-3">

<div>
<label className="mb-1 block text-sm font-semibold text-slate-
700">Email</label>
<input
type="email"
required
value={email}
onChange={(event) => setEmail([Link])}
className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3
outline-none focus:border-indigo-400"
placeholder="you@[Link]"
/>
</div>
<div>
<label className="mb-1 block text-sm font-semibold text-slate-
700">Password</label>
<input
type="password"
required
value={password}
onChange={(event) => setPassword([Link])}
className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3
outline-none focus:border-indigo-400"
placeholder="********"
/>
32
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

</div>
<button
type="submit"
disabled={loading}
className="w-full rounded-xl bg-indigo-600 px-4 py-3 text-sm font-bold
text-white transition-colors hover:bg-indigo-700 disabled:opacity-70"
>
{loading ? 'Signing In...' : 'Sign In'}
</button>
</form>

<p className="mt-3 text-sm text-slate-600">

<Link to="/reset-password" className="font-bold text-indigo-600 hover:text-
indigo-700">
Forgot password?
</Link>
</p>

<p className="mt-4 text-sm text-slate-600">

New user?{' '}
<Link to="/register" className="font-bold text-indigo-600 hover:text-indigo-
700">
Create account
</Link>
</p>
</div>
</div>
</div>
)
}

export default LoginPage

Register Page

import React, { useState } from 'react'

import { Link, useNavigate } from 'react-router-dom'
import { supabase } from '../lib/supabaseClient'

const RegisterPage = () => {

const navigate = useNavigate()
33
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

const [fullName, setFullName] = useState('')

const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)

const handleRegister = async (event) => {

[Link]()
setLoading(true)
setError('')

const { data, error: authError } = await [Link]({

email,
password,
options: {
data: {
full_name: fullName,
},
emailRedirectTo: `${[Link]}/login`,
},
})

if (authError) {
setError([Link])
setLoading(false)
return
}

if ([Link]) navigate('/login')
setLoading(false)
}

return (
<div className="min-h-screen px-6 py-10">
<div className="mx-auto grid w-full max-w-5xl gap-8 rounded-[2rem] border
border-slate-200 bg-white p-6 shadow-sm md:grid-cols-2 md:p-10">
<div className="flex flex-col justify-between rounded-3xl bg-indigo-600 p-8
text-white">
<div>
<p className="text-xs font-bold uppercase tracking-[0.2em] text-indigo-
200">Get Started</p>
<h1 className="mt-4 text-4xl font-black leading-tight">Build your learner
profile.</h1>
<p className="mt-4 text-sm text-indigo-100">
Join roadmap-based learning with level unlocks and curated resources.
34
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

</p>
</div>
<p className="mt-12 text-sm text-indigo-200">CodePal Learning
Platform</p>
</div>

<div className="rounded-3xl border border-slate-200 bg-slate-50 p-8">

<h2 className="text-2xl font-black text-slate-900">Create Account</h2>
<p className="mt-1 text-sm text-slate-500">Start learning for free</p>

{error && <p className="mt-4 rounded-xl border border-red-200 bg-red-50

px-3 py-2 text-sm text-red-700">{error}</p>}

<form onSubmit={handleRegister} className="mt-5 space-y-3">

<div>
<label className="mb-1 block text-sm font-semibold text-slate-700">Full
Name</label>
<input
type="text"
required
value={fullName}
onChange={(event) => setFullName([Link])}
className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3
outline-none focus:border-indigo-400"
placeholder="Jane Doe"
/>
</div>
<div>
<label className="mb-1 block text-sm font-semibold text-slate-
700">Email</label>
<input
type="email"
required
value={email}
onChange={(event) => setEmail([Link])}
className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3
outline-none focus:border-indigo-400"
placeholder="you@[Link]"
/>
</div>
<div>
<label className="mb-1 block text-sm font-semibold text-slate-
700">Password</label>
<input
type="password"
35
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

minLength={6}
required
value={password}
onChange={(event) => setPassword([Link])}
className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3
outline-none focus:border-indigo-400"
placeholder="Minimum 6 characters"
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full rounded-xl bg-indigo-600 px-4 py-3 text-sm font-bold
text-white transition-colors hover:bg-indigo-700 disabled:opacity-70"
>
{loading ? 'Creating Account...' : 'Create Account'}
</button>
</form>

<p className="mt-4 text-sm text-slate-600">

Already registered?{' '}
<Link to="/login" className="font-bold text-indigo-600 hover:text-indigo-
700">
Sign in
</Link>
</p>
</div>
</div>
</div>
)
}

export default RegisterPage

Reset Password Page

import React, { useEffect, useState } from 'react'

import { Link, useNavigate } from 'react-router-dom'
import { supabase } from '../lib/supabaseClient'

36
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

const ResetPasswordPage = () => {

const navigate = useNavigate()
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [confirmPassword, setConfirmPassword] = useState('')
const [hasRecoverySession, setHasRecoverySession] = useState(false)
const [loading, setLoading] = useState(false)
const [message, setMessage] = useState('')
const [error, setError] = useState('')

useEffect(() => {
let mounted = true

[Link]().then(({ data: { session } }) => {

if (mounted) setHasRecoverySession(Boolean(session))
})

const {
data: { subscription },
} = [Link]((event, session) => {
if (event === 'PASSWORD_RECOVERY' || event === 'SIGNED_IN') {
setHasRecoverySession(Boolean(session))
}
})

return () => {
mounted = false
[Link]()
}
}, [])

const sendResetEmail = async (event) => {

[Link]()
setLoading(true)
setMessage('')
setError('')

const { error: resetError } = await [Link](email, {

redirectTo: `${[Link]}/reset-password`,
})

if (resetError) {
setError([Link])
} else {
setMessage('Password reset email sent. Open the link in your inbox to continue.')
37
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

setLoading(false)
}

const updatePassword = async (event) => {

[Link]()
setLoading(true)
setMessage('')
setError('')

if ([Link] < 6) {
setError('Password must be at least 6 characters.')
setLoading(false)
return
}

if (password !== confirmPassword) {

setError('Passwords do not match.')
setLoading(false)
return
}

const { error: updateError } = await [Link]({ password })

if (updateError) {
setError([Link])
setLoading(false)
return
}

setMessage('Password updated successfully. Redirecting to login...')

setLoading(false)
setTimeout(() => navigate('/login'), 1200)
}

return (
<div className="min-h-screen px-6 py-10">
<div className="mx-auto w-full max-w-xl rounded-[2rem] border border-slate-
200 bg-white p-8 shadow-sm">
<h1 className="text-3xl font-black text-slate-900">Reset Password</h1>
<p className="mt-2 text-sm text-slate-500">
{hasRecoverySession
? 'Set your new password below.'
: 'Enter your email and we will send you a password reset link.'}
38
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

</p>

{error && (
<p className="mt-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3
text-sm text-red-700">
{error}
</p>
)}
{message && (
<p className="mt-4 rounded-xl border border-green-200 bg-green-50 px-4 py-
3 text-sm text-green-700">
{message}
</p>
)}

{!hasRecoverySession ? (
<form onSubmit={sendResetEmail} className="mt-5 space-y-3">
<div>
<label className="mb-1 block text-sm font-semibold text-slate-
700">Email</label>
<input
type="email"
required
value={email}
onChange={(event) => setEmail([Link])}
className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3
outline-none focus:border-indigo-400"
placeholder="you@[Link]"
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full rounded-xl bg-indigo-600 px-4 py-3 text-sm font-bold
text-white transition-colors hover:bg-indigo-700 disabled:opacity-70"
>
{loading ? 'Sending...' : 'Send Reset Link'}
</button>
</form>
):(
<form onSubmit={updatePassword} className="mt-5 space-y-3">
<div>
<label className="mb-1 block text-sm font-semibold text-slate-700">New
Password</label>
<input
39
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

type="password"
minLength={6}
required
value={password}
onChange={(event) => setPassword([Link])}
className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3
outline-none focus:border-indigo-400"
placeholder="Minimum 6 characters"
/>
</div>
<div>
<label className="mb-1 block text-sm font-semibold text-slate-
700">Confirm Password</label>
<input
type="password"
minLength={6}
required
value={confirmPassword}
onChange={(event) => setConfirmPassword([Link])}
className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3
outline-none focus:border-indigo-400"
placeholder="Re-enter password"
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full rounded-xl bg-indigo-600 px-4 py-3 text-sm font-bold
text-white transition-colors hover:bg-indigo-700 disabled:opacity-70"
>
{loading ? 'Updating...' : 'Update Password'}
</button>
</form>
)}

<p className="mt-5 text-sm text-slate-600">

Back to{' '}
<Link to="/login" className="font-bold text-indigo-600 hover:text-indigo-
700">
Sign In
</Link>
</p>
</div>
</div>
)
40
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

export default ResetPasswordPage

Roadmap View

import React, { useEffect, useMemo } from 'react'

import { useNavigate, useParams } from 'react-router-dom'
import { ArrowLeft, Check, ExternalLink, Lock } from 'lucide-react'
import { useAuthStore } from '../store/authStore'
import { useRoadmapStore } from '../store/roadmapStore'
import TopNav from '../components/TopNav'

const RoadmapView = () => {

const navigate = useNavigate()
const { slug } = useParams()
const { user } = useAuthStore()
const {
categoryDetails,
currentModules,
loading,
error,
fetchModules,
} = useRoadmapStore()

useEffect(() => {
if (!slug || !user?.id) return
fetchModules(slug, [Link])
}, [slug, user?.id, fetchModules])

const completedCount = categoryDetails?.completedCount ?? 0

const xp = completedCount * 150
const categoryLocked = Boolean(categoryDetails?.isLocked)
const allModulesCompleted = [Link] > 0 &&
[Link]((module) => [Link])
const showFinalQuizNode = !categoryLocked && allModulesCompleted
const finalQuizPassed = Boolean(categoryDetails?.finalAssessmentPassed)
const finalQuizConfigured = (categoryDetails?.finalQuestionsCount ?? 0) > 0

const currentIndex = useMemo(

() => [Link]((module) => [Link] && !
41
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

[Link]),
[currentModules],
)

if (loading && !categoryDetails) {

return (
<div className="min-h-screen">
<TopNav active="dashboard" xp={xp} />
<div className="mx-auto max-w-3xl px-6 pb-20 pt-32">
<p className="text-sm text-slate-500">Loading roadmap...</p>
</div>
</div>
)
}

if (!categoryDetails) {
return (
<div className="min-h-screen">
<TopNav active="dashboard" xp={0} />
<div className="mx-auto max-w-3xl px-6 pb-20 pt-32">
<button
type="button"
onClick={() => navigate('/dashboard')}
className="text-sm font-bold text-indigo-600"
>
Back to Dashboard
</button>
<p className="mt-3 text-sm text-red-700">Roadmap not found.</p>
</div>
</div>
)
}

return (
<div className="min-h-screen">
<TopNav active="dashboard" xp={xp} />

<section className="view-transition mx-auto max-w-3xl px-6 pb-20 pt-32">

<button
type="button"
onClick={() => navigate('/dashboard')}
className="mb-12 flex items-center gap-2 text-sm font-bold text-slate-400
transition-colors hover:text-indigo-600"
>
<ArrowLeft className="h-4 w-4" />
42
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Back to Dashboard
</button>

<div className="mb-20 text-center">

<h2 className="mb-4 text-4xl font-black text-slate-
900">{[Link]}</h2>
<p className="text-slate-500">{[Link] || 'Follow the path
to becoming an expert.'}</p>
{categoryDetails?.is_foundation_course && (
<div className="mt-4 inline-flex rounded-full bg-indigo-100 px-4 py-1 text-
xs font-black uppercase tracking-widest text-indigo-700">
Foundation
</div>
)}
</div>

{error && <p className="mb-8 rounded-xl border border-red-200 bg-red-50

px-4 py-3 text-sm text-red-700">{error}</p>}
{categoryLocked && (
<p className="mb-8 rounded-xl border border-amber-200 bg-amber-50 px-4
py-3 text-sm text-amber-700">
Complete the required foundation course(s) to unlock this course.
</p>
)}

<div className="relative pb-20">

<div className="roadmap-line absolute bottom-0 left-8 top-0 w-2 rounded-full
opacity-50 md:left-1/2 md:-translate-x-1/2" />

<div className="relative space-y-16 md:space-y-24">

{[Link]((module, index) => {
const state = [Link]
? 'completed'
: [Link] && index === currentIndex
? 'current'
: 'locked'

const isRight = index % 2 === 1

return (
<div
key={[Link]}
className={`flex items-center gap-6 md:gap-10 ${isRight ? 'md:flex-
row-reverse' : 'md:flex-row'}`}
>
43
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

<div className="w-full pl-4 md:flex-1 md:pl-0">

<div className={`rounded-3xl border border-slate-200 bg-white p-6
shadow-sm ${state === 'locked' ? 'opacity-70' : ''}`}>
<h4 className="text-lg font-black text-slate-800">{[Link]}</h4>
<p className="text-xs text-slate-400">{[Link]}</p>

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

{[Link] || [Link] ? (
<>
<button
type="button"
onClick={() => navigate(`/roadmap/${slug}/module/$
{[Link]}`)}
className="rounded-full bg-indigo-600 px-5 py-2 text-xs font-
bold text-white"
>
{[Link] ? 'Review Module' : 'Open Module'}
</button>
{[Link] && (
<span className="rounded-full bg-green-100 px-5 py-2 text-xs
font-bold text-green-700">
<span className="inline-flex items-center gap-1">
<Check className="h-3.5 w-3.5" />
Completed
</span>
</span>
)}
</>
):(
<span className="rounded-full bg-slate-100 px-5 py-2 text-xs font-
bold text-slate-500">
Locked
</span>
)}

{module.resource_url && ([Link] || [Link]) &&

(
<a
href={module.resource_url}
target="_blank"
rel="noreferrer"
className="inline-flex items-center gap-1 text-xs font-bold text-
slate-500"
>
<ExternalLink className="h-3.5 w-3.5" />
44
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Resource
</a>
)}
</div>
</div>
</div>

<div
className={`level-node ${state} z-10 flex h-16 w-16 shrink-0 items-
center justify-center rounded-full border-4 text-xl font-black md:h-20 md:w-20`}
>
{[Link] ? <Check className="h-6 w-6" /> : state ===
'locked' ? <Lock className="h-6 w-6" /> : index + 1}
</div>

<div className="hidden md:block md:flex-1" />

</div>
)
})}

{showFinalQuizNode && (
<div className="flex items-center gap-6 md:gap-10 md:flex-row">
<div className="w-full pl-4 md:flex-1 md:pl-0">
<div className={`rounded-3xl border border-slate-200 bg-white p-6
shadow-sm ${!finalQuizConfigured ? 'opacity-80' : ''}`}>
<h4 className="text-lg font-black text-slate-800">Final Quiz</h4>
<p className="text-xs text-slate-400">Complete the final MCQ
assessment for this roadmap.</p>

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

{finalQuizPassed ? (
<span className="rounded-full bg-green-100 px-5 py-2 text-xs font-
bold text-green-700">
<span className="inline-flex items-center gap-1">
<Check className="h-3.5 w-3.5" />
Completed
</span>
</span>
) : finalQuizConfigured ? (
<button
type="button"
onClick={() => navigate(`/roadmap/${slug}/final-assessment`)}
className="rounded-full bg-indigo-600 px-5 py-2 text-xs font-bold
text-white"
>
45
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Open Final Quiz

</button>
):(
<span className="rounded-full bg-amber-100 px-5 py-2 text-xs font-
bold text-amber-700">
Awaiting Setup
</span>
)}
</div>
</div>
</div>

<div
className={`level-node ${finalQuizPassed ? 'completed' : 'current'} z-10
flex h-16 w-16 shrink-0 items-center justify-center rounded-full border-4 text-xl font-
black md:h-20 md:w-20`}
>
{finalQuizPassed ? <Check className="h-6 w-6" /> :
[Link] + 1}
</div>

<div className="hidden md:block md:flex-1" />

</div>
)}
</div>
</div>
</section>
</div>
)
}

export default RoadmapView

Admin panel

import React, { useEffect, useMemo, useState } from 'react'

import {
ChevronDown,
ChevronRight,
FileText,
Folder,
FolderOpen,
46
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

GraduationCap,
Plus,
Save,
Search,
Trash2,
} from 'lucide-react'
import TopNav from '../components/TopNav'
import { useRoadmapStore } from '../store/roadmapStore'

const fill4 = (arr) => {

const v = [Link](arr) ? [Link](0, 4) : []
while ([Link] < 4) [Link]('')
return v
}

const moduleFormOf = (m) => ({

id: m?.id || null,
category_id: m?.category_id || '',
title: m?.title || '',
description: m?.description || '',
module_content: m?.module_content || '',
difficulty: m?.difficulty || 'easy',
position: m?.position || 1,
video_url: m?.video_url || '',
resource_url: m?.resource_url || '',
quiz_question: m?.quiz_question || '',
quiz_options: fill4(m?.quiz_options),
quiz_correct_option: [Link](m?.quiz_correct_option) ?
m.quiz_correct_option : 0,
})

const categoryIconOptions = [
{ value: '', label: 'Auto (by roadmap type)' },
{ value: 'server', label: 'Server' },
{ value: 'laptop', label: 'Laptop' },
{ value: 'brain', label: 'Brain' },
{ value: 'code', label: 'Code' },
{ value: 'database', label: 'Database' },
{ value: 'gamepad', label: 'Gamepad' },
{ value: 'globe', label: 'Globe' },
]

function AdminPanel() {
const s = useRoadmapStore()
const {
47
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

adminCategories, adminModules, adminUsers, adminProgress,

adminFinalQuestions, adminStats, adminLoading, error,
fetchAdminData, createCategory, updateCategory, uploadCategoryIcon,
deleteCategory, createModule, updateModule, deleteModule,
createFinalQuestion, updateFinalQuestion, deleteFinalQuestion,
resetUserProgressByAdmin, deleteUserByAdmin,
}=s

const [tab, setTab] = useState('studio')

const [selected, setSelected] = useState(null)
const [expanded, setExpanded] = useState({})
const [msg, setMsg] = useState(null)
const [busy, setBusy] = useState(false)
const [search, setSearch] = useState('')
const [categoryForm, setCategoryForm] = useState({
id: null,
name: '',
description: '',
is_foundation_course: false,
icon_name: '',
icon_url: '',
icon_size: 56,
})
const [categoryIconFile, setCategoryIconFile] = useState(null)
const [moduleForm, setModuleForm] = useState(moduleFormOf(null))
const [qForm, setQForm] = useState({ category_id: '', question: '', options: ['', '', '', ''],
correct_option: 0, position: 1 })
const [selectedUserId, setSelectedUserId] = useState('')
const [selectedCategoryId, setSelectedCategoryId] = useState('all')

useEffect(() => { fetchAdminData() }, [fetchAdminData])

useEffect(() => {
setExpanded((prev) => {
const next = {}
[Link]((c) => { next[[Link]] = prev[[Link]] ?? true })
return next
})
}, [adminCategories])
useEffect(() => {
if (!selected) return
if ([Link] === 'category') {
const c = [Link]((x) => [Link] === [Link])
if (c) setCategoryForm({
id: [Link],
name: [Link] || '',
48
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

description: [Link] || '',

is_foundation_course: Boolean(c.is_foundation_course),
icon_name: c.icon_name || '',
icon_url: c.icon_url || '',
icon_size: Number(c.icon_size) || 56,
})
setCategoryIconFile(null)
}
if ([Link] === 'module') {
const m = [Link]((x) => [Link] === [Link])
if (m) setModuleForm(moduleFormOf(m))
}
if ([Link] === 'assessment') {
setQForm((v) => ({ ...v, category_id: [Link] }))
}
}, [selected, adminCategories, adminModules])

const grouped = useMemo(() => [Link]((c) => ({

...c,
modules: [Link]((m) => m.category_id === [Link]).sort((a, b) =>
([Link] || 0) - ([Link] || 0)),
questions: [Link]((q) => q.category_id === [Link]).sort((a, b) =>
([Link] || 0) - ([Link] || 0)),
})), [adminCategories, adminModules, adminFinalQuestions])

const userCount = useMemo(() => [Link]((acc, p) => ({ ...acc,

[p.user_id]: (acc[p.user_id] || 0) + 1 }), {}), [adminProgress])
const users = useMemo(() => [Link]((u) => [Link] !== 'admin').map((u)
=> ({ ...u, completions: userCount[[Link]] || 0 })), [adminUsers, userCount])
const filteredUsers = useMemo(() => [Link]((u) => `${u.full_name || ''} $
{[Link] || ''}`.toLowerCase().includes([Link]())), [users, search])
const assessmentQs = useMemo(() => selected?.type === 'assessment' ?
[Link]((q) => q.category_id === [Link]).sort((a, b) =>
([Link] || 0) - ([Link] || 0)) : [], [selected, adminFinalQuestions])

const run = async (fn, ok) => {

setBusy(true); setMsg(null)
try { await fn(); await fetchAdminData(); setMsg({ t: 'ok', m: ok }) } catch (e)
{ setMsg({ t: 'err', m: [Link] || 'Failed' }) }
finally { setBusy(false) }
}

const saveCategory = (e) => {

[Link]()
if (![Link]()) return setMsg({ t: 'err', m: 'Roadmap name
49
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

required.' })
run(() => [Link] ? updateCategory(categoryForm) :
createCategory(categoryForm), 'Roadmap saved.')
}

const uploadCategoryIconFile = async () => {

if (![Link]) return setMsg({ t: 'err', m: 'Save roadmap first, then upload
icon.' })
if (!categoryIconFile) return setMsg({ t: 'err', m: 'Choose an icon file first.' })

setBusy(true); setMsg(null)
try {
const iconUrl = await uploadCategoryIcon({ categoryId: [Link], file:
categoryIconFile })
if (!iconUrl) throw new Error('Could not generate icon URL.')
setCategoryForm((v) => ({ ...v, icon_url: iconUrl }))
setCategoryIconFile(null)
setMsg({ t: 'ok', m: 'Icon uploaded. Click Save to apply it to this roadmap.' })
} catch (e) {
setMsg({ t: 'err', m: [Link] || 'Icon upload failed.' })
} finally {
setBusy(false)
}
}

const saveModule = (e) => {

[Link]()
if (!moduleForm.category_id || ![Link]()) return setMsg({ t: 'err', m:
'Module title and roadmap required.' })
const p = { ...moduleForm, position: Number([Link]) || 1,
quiz_options: fill4(moduleForm.quiz_options), quiz_correct_option:
Number(moduleForm.quiz_correct_option) || 0 }
run(() => [Link] ? updateModule(p) : createModule(p), 'Module saved.')
}

const createQuestion = (e) => {

[Link]()
if (!qForm.category_id || ![Link]()) return setMsg({ t: 'err', m:
'Question and category required.' })
run(() => createFinalQuestion({ ...qForm, options: fill4([Link]) }), 'Final
question added.')
}

const card = 'rounded-2xl border border-slate-200 bg-white p-4 shadow-sm'

50
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

return (
<div className="min-h-screen bg-slate-50/60">
<TopNav active="admin" xp={(adminStats?.totalCompletions || 0) * 10} />
<main className="mx-auto max-w-7xl px-4 pb-20 pt-28 sm:px-6">
<h1 className="mb-2 text-3xl font-black">Admin Console</h1>
<p className="mb-6 text-slate-500">Content Studio + User Management with
full existing actions.</p>
{msg && <div className={`mb-4 rounded-xl border px-4 py-2 text-sm ${msg.t
=== 'ok' ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-red-200 bg-
red-50 text-red-700'}`}>{msg.m}</div>}
{(adminLoading || error) && <div className="mb-4 rounded-xl border border-
slate-200 bg-white px-4 py-2 text-sm">{adminLoading ? 'Loading admin data...' :
error}</div>}

<div className="mb-6 grid grid-cols-2 gap-3 lg:grid-cols-5">

<div className={card}><p className="text-xs uppercase text-slate-
500">Users</p><p className="text-2xl font-black">{adminStats?.totalUsers ||
0}</p></div>
<div className={card}><p className="text-xs uppercase text-slate-
500">Learners</p><p className="text-2xl font-black">{adminStats?.activeLearners
|| 0}</p></div>
<div className={card}><p className="text-xs uppercase text-slate-
500">Categories</p><p className="text-2xl font-
black">{adminStats?.totalCategories || 0}</p></div>
<div className={card}><p className="text-xs uppercase text-slate-
500">Modules</p><p className="text-2xl font-black">{adminStats?.totalModules ||
0}</p></div>
<div className={card}><p className="text-xs uppercase text-slate-
500">Completions</p><p className="text-2xl font-
black">{adminStats?.totalCompletions || 0}</p></div>
</div>

<div className="mb-4 flex gap-6 border-b border-slate-200">

<button onClick={() => setTab('studio')} className={`border-b-2 px-1 py-3
text-sm font-bold ${tab === 'studio' ? 'border-indigo-600 text-indigo-600' : 'border-
transparent text-slate-500'}`}>Content Studio</button>
<button onClick={() => setTab('users')} className={`border-b-2 px-1 py-3
text-sm font-bold ${tab === 'users' ? 'border-indigo-600 text-indigo-600' : 'border-
transparent text-slate-500'}`}>User Management</button>
</div>

{tab === 'studio' ? (

<section className="overflow-hidden rounded-[2rem] border border-slate-200
bg-white shadow-sm">
<div className="flex h-[calc(100vh-320px)] min-h-[520px] flex-col md:flex-
51
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

row">
<aside className="w-full border-b border-slate-200 bg-slate-50 p-4 md:w-
80 md:border-b-0 md:border-r">
<div className="mb-3 flex items-center justify-between">
<h3 className="text-xs font-black uppercase tracking-wide text-slate-
500">Content Tree</h3>
<button onClick={() => run(() => createCategory({ name: `New Roadmap
${[Link] + 1}`, description: '', icon_name: '', icon_url: '', icon_size:
56 }), 'Roadmap created.')} className="rounded p-1 hover:bg-slate-200"><Plus
className="h-4 w-4" /></button>
</div>
<div className="space-y-2 overflow-y-auto pr-1 md:max-h-[calc(100vh-
390px)]">
{[Link]((c) => (
<div key={[Link]}>
<button className={`flex w-full items-center justify-between rounded-
lg px-2 py-2 text-left text-sm font-bold ${selected?.type === 'category' &&
[Link] === [Link] ? 'bg-indigo-100 text-indigo-700' : 'hover:bg-slate-200'}`}
onClick={() => setSelected({ type: 'category', id: [Link] })}>
<span className="flex min-w-0 items-center gap-2">
<span onClick={(e) => { [Link](); setExpanded((v) =>
({ ...v, [[Link]]: !v[[Link]] })) }}>{expanded[[Link]] ? <ChevronDown className="h-4 w-4
opacity-60" /> : <ChevronRight className="h-4 w-4 opacity-60" />}</span>
{expanded[[Link]] ? <FolderOpen className="h-4 w-4 shrink-0" /> :
<Folder className="h-4 w-4 shrink-0" />}
<span className="truncate">{[Link]}</span>
{c.is_foundation_course && (
<span className="rounded-full bg-indigo-100 px-2 py-0.5 text-
[9px] font-black uppercase tracking-widest text-indigo-700">
Foundation
</span>
)}
</span>
<span onClick={(e) => { [Link](); run(() =>
createModule({ category_id: [Link], title: `New Module ${[Link] + 1}`,
position: [Link] + 1, description: '', module_content: '', difficulty: 'easy',
quiz_question: '', quiz_options: ['', '', '', ''], quiz_correct_option: 0, video_url: '',
resource_url: '' }), 'Module created.') }} className="rounded p-1 text-indigo-600
hover:bg-indigo-200"><Plus className="h-3.5 w-3.5" /></span>
</button>
{expanded[[Link]] && <div className="ml-4 mt-1 space-y-1 border-l
border-slate-200 pl-3">
{[Link]((m) => <button key={[Link]} onClick={() =>
setSelected({ type: 'module', id: [Link] })} className={`flex w-full items-center gap-2
rounded-lg border px-2 py-2 text-left text-xs ${selected?.type === 'module' &&
52
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

[Link] === [Link] ? 'border-indigo-200 bg-indigo-50 text-indigo-700' : 'border-

transparent text-slate-600 hover:bg-slate-100'}`}><FileText className="h-3.5 w-3.5
shrink-0" /><span className="truncate">{[Link]}. {[Link]}</span></button>)}
<button onClick={() => setSelected({ type: 'assessment', id: [Link] })}
className={`flex w-full items-center justify-between rounded-lg border px-2 py-2
text-left text-xs ${selected?.type === 'assessment' && [Link] === [Link] ? 'border-
amber-200 bg-amber-50 text-amber-700' : 'border-transparent text-slate-600 hover:bg-
slate-100'}`}><span className="flex items-center gap-2"><GraduationCap
className="h-3.5 w-3.5" />Final Assessment</span><span className="rounded bg-
slate-100 px-1.5 py-0.5 text-[10px]">{[Link]}</span></button>
</div>}
</div>
))}
</div>
</aside>

<div className="flex-1 overflow-y-auto p-6 sm:p-8">

{!selected && <div className="grid h-full place-items-center text-slate-
400">Select a roadmap, module, or final assessment.</div>}
{selected?.type === 'category' && (
<form onSubmit={saveCategory} className="space-y-4">
<div className="flex items-center justify-between"><h3
className="text-xl font-black">Roadmap Settings</h3><button type="button"
onClick={() => [Link]('Delete roadmap?') && run(() =>
deleteCategory([Link]), 'Roadmap deleted.') && setSelected(null)}
className="rounded-lg border border-red-200 px-3 py-2 text-xs font-bold text-red-
700">Delete</button></div>
<input value={[Link]} onChange={(e) =>
setCategoryForm((v) => ({ ...v, name: [Link] }))} className="w-full
rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm"
placeholder="Roadmap name" />
<textarea rows={5} value={[Link]} onChange={(e)
=> setCategoryForm((v) => ({ ...v, description: [Link] }))} className="w-full
rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm"
placeholder="Description" />
<label className="block space-y-2">
<span className="text-sm font-bold text-slate-900">Roadmap
Icon</span>
<select
value={categoryForm.icon_name || ''}
onChange={(e) => setCategoryForm((v) => ({ ...v, icon_name:
[Link] }))}
className="w-full rounded-xl border border-slate-200 bg-white px-4
py-3 text-sm"
>
53
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

{[Link]((option) => (
<option key={[Link] || 'auto'} value={[Link]}>
{[Link]}
</option>
))}
</select>
</label>
<div className="space-y-2 rounded-xl border border-slate-200 bg-slate-
50 p-4">
<p className="text-sm font-bold text-slate-900">Upload Custom
Icon</p>
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
<input
type="file"
accept="image/png,image/jpeg,image/webp,image/svg+xml"
onChange={(e) => setCategoryIconFile([Link]?.[0] ?? null)}
className="w-full rounded-lg border border-slate-200 bg-white px-3
py-2 text-xs text-slate-700 sm:flex-1"
/>
<button
type="button"
onClick={uploadCategoryIconFile}
disabled={busy}
className="rounded-lg border border-indigo-200 px-3 py-2 text-xs
font-bold text-indigo-700"
>
Upload
</button>
<button
type="button"
onClick={() => { setCategoryForm((v) => ({ ...v, icon_url: '' }));
setCategoryIconFile(null) }}
className="rounded-lg border border-slate-200 px-3 py-2 text-xs
font-bold text-slate-700"
>
Remove
</button>
</div>
{categoryForm.icon_url && (
<div className="inline-flex items-center gap-3 rounded-lg border
border-slate-200 bg-white px-3 py-2">
<img src={categoryForm.icon_url} alt="Roadmap icon preview"
className="h-10 w-10 rounded object-cover" />
<span className="text-xs text-slate-500">Uploaded icon ready.
Save roadmap to persist.</span>
54
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

</div>
)}
</div>
<label className="block space-y-2">
<span className="text-sm font-bold text-slate-900">Icon Size
(px)</span>
<input
type="number"
min="24"
max="120"
value={categoryForm.icon_size}
onChange={(e) =>
setCategoryForm((v) => ({
...v,
icon_size: [Link](24, [Link](120, Number([Link]) ||
56)),
}))
}
className="w-full rounded-xl border border-slate-200 bg-white px-4
py-3 text-sm"
/>
</label>
<label className="flex items-start gap-3 rounded-xl border border-slate-
200 bg-slate-50 px-4 py-3">
<input
type="checkbox"
checked={Boolean(categoryForm.is_foundation_course)}
onChange={(e) => setCategoryForm((v) => ({ ...v,
is_foundation_course: [Link] }))}
className="mt-0.5 h-4 w-4 rounded border-slate-300 text-indigo-600
focus:ring-indigo-500"
/>
<span>
<span className="block text-sm font-bold text-slate-
900">Foundation Course</span>
<span className="block text-xs text-slate-500">
Learners must complete all foundation courses before other roadmaps
unlock.
</span>
</span>
</label>
<button disabled={busy} className="inline-flex items-center gap-2
rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white"><Save
className="h-4 w-4" /> Save</button>
</form>
55
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

)}

{selected?.type === 'module' && (

<form onSubmit={saveModule} className="space-y-4">
<div className="flex items-center justify-between"><h3
className="text-xl font-black">Module Editor</h3><button type="button"
onClick={() => [Link]('Delete module?') && run(() =>
deleteModule([Link]), 'Module deleted.') && setSelected(null)}
className="rounded-lg border border-red-200 px-3 py-2 text-xs font-bold text-red-
700">Delete</button></div>
<div className="grid gap-3 md:grid-cols-2">
<select value={moduleForm.category_id} onChange={(e) =>
setModuleForm((v) => ({ ...v, category_id: [Link] }))} className="rounded-
xl border border-slate-200 bg-white px-4 py-3 text-sm">{[Link]((c)
=> <option key={[Link]} value={[Link]}>{[Link]}</option>)}</select>
<input type="number" min="1" value={[Link]}
onChange={(e) => setModuleForm((v) => ({ ...v, position: Number([Link]) ||
1 }))} className="rounded-xl border border-slate-200 bg-white px-4 py-3 text-
sm" />
</div>
<input value={[Link]} onChange={(e) => setModuleForm((v)
=> ({ ...v, title: [Link] }))} className="w-full rounded-xl border border-slate-
200 bg-white px-4 py-3 text-sm" placeholder="Title" />
<textarea rows={2} value={[Link]} onChange={(e) =>
setModuleForm((v) => ({ ...v, description: [Link] }))} className="w-full
rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm" placeholder="Short
description" />
<textarea rows={10} value={moduleForm.module_content}
onChange={(e) => setModuleForm((v) => ({ ...v, module_content: [Link] }))}
className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 font-mono
text-sm" placeholder="Module HTML/content" />
<div className="grid gap-3 md:grid-cols-2"><input
value={moduleForm.video_url} onChange={(e) => setModuleForm((v) => ({ ...v,
video_url: [Link] }))} className="rounded-xl border border-slate-200 bg-
white px-4 py-3 text-sm" placeholder="Video URL" /><input
value={moduleForm.resource_url} onChange={(e) => setModuleForm((v) => ({ ...v,
resource_url: [Link] }))} className="rounded-xl border border-slate-200 bg-
white px-4 py-3 text-sm" placeholder="Resource URL" /></div>
<input value={moduleForm.quiz_question} onChange={(e) =>
setModuleForm((v) => ({ ...v, quiz_question: [Link] }))} className="w-full
rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm" placeholder="Quiz
question" />
<div className="grid gap-3 md:grid-cols-
2">{moduleForm.quiz_options.map((o, i) => <input key={i} value={o}
onChange={(e) => { const q = [...moduleForm.quiz_options]; q[i] = [Link];
56
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

setModuleForm((v) => ({ ...v, quiz_options: q })) }} className="rounded-xl border

border-slate-200 bg-white px-4 py-3 text-sm" placeholder={`Option ${i + 1}`}
/>)}</div>
<div className="grid gap-3 md:grid-cols-2"><input type="number"
min="0" max="3" value={moduleForm.quiz_correct_option} onChange={(e) =>
setModuleForm((v) => ({ ...v, quiz_correct_option: [Link](0, [Link](3,
Number([Link]) || 0)) }))} className="rounded-xl border border-slate-200 bg-
white px-4 py-3 text-sm" placeholder="Correct index 0-3" /><select
value={[Link]} onChange={(e) => setModuleForm((v) => ({ ...v,
difficulty: [Link] }))} className="rounded-xl border border-slate-200 bg-
white px-4 py-3 text-sm"><option value="easy">easy</option><option
value="medium">medium</option><option
value="hard">hard</option></select></div>
<button disabled={busy} className="inline-flex items-center gap-2
rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white"><Save
className="h-4 w-4" /> Save</button>
</form>
)}

{selected?.type === 'assessment' && (

<div className="space-y-4">
<h3 className="text-xl font-black">Final Assessment</h3>
<form onSubmit={createQuestion} className="rounded-xl border
border-slate-200 bg-slate-50 p-4">
<div className="space-y-3">
<input value={[Link]} onChange={(e) => setQForm((v) =>
({ ...v, question: [Link], category_id: [Link] }))} className="w-full
rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm"
placeholder="Question" />
<div className="grid gap-3 md:grid-cols-2">{[Link]((o,
i) => <input key={i} value={o} onChange={(e) => { const q = [...[Link]];
q[i] = [Link]; setQForm((v) => ({ ...v, options: q, category_id:
[Link] })) }} className="rounded-xl border border-slate-200 bg-white px-4 py-
2.5 text-sm" placeholder={`Option ${i + 1}`} />)}</div>
<div className="grid gap-3 md:grid-cols-2"><input type="number"
min="0" max="3" value={qForm.correct_option} onChange={(e) => setQForm((v)
=> ({ ...v, correct_option: Number([Link]) || 0, category_id: [Link] }))}
className="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm"
placeholder="Correct option index" /><input type="number" min="1"
value={[Link]} onChange={(e) => setQForm((v) => ({ ...v, position:
Number([Link]) || 1, category_id: [Link] }))} className="rounded-xl
border border-slate-200 bg-white px-4 py-2.5 text-sm" placeholder="Position"
/></div>
<button disabled={busy} className="rounded-xl bg-slate-900 px-4
py-2 text-sm font-bold text-white">Add Question</button>
57
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

</div>
</form>
<div className="space-y-2">
{[Link]((q) => (
<div key={[Link]} className="rounded-xl border border-slate-200 bg-
white p-4">
<div className="flex items-center justify-between">
<p className="font-bold">{[Link]}. {[Link]}</p>
<div className="flex gap-2">
<button
onClick={() => {
const question = [Link]('Edit question', [Link])
if (!question) return
const options = fill4([Link]).map((opt, idx) => (
[Link](`Option ${idx + 1}`, opt) ?? opt
))
const correct = Number([Link]('Correct option index
(0-3)', String(q.correct_option)) ?? q.correct_option)
const position = Number([Link]('Position',
String([Link])) ?? [Link])
run(
() => updateFinalQuestion({
id: [Link],
question,
options,
correct_option: [Link](0, [Link](3,
[Link](correct) ? q.correct_option : correct)),
position: [Link](position) ? [Link] : position,
}),
'Question updated.',
)
}}
className="rounded border border-slate-200 px-2 py-1 text-xs"
>
Edit
</button>
<button
onClick={() => [Link]('Delete question?') && run(()
=> deleteFinalQuestion([Link]), 'Question deleted.')}
className="rounded border border-red-200 px-2 py-1 text-xs
text-red-700"
>
<Trash2 className="h-3 w-3" />
</button>
</div>
58
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

</div>
</div>
))}
</div>
</div>
)}
</div>

</div>
</section>
):(
<section className="rounded-[2rem] border border-slate-200 bg-white p-5
shadow-sm sm:p-8">
<div className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center
sm:justify-between">
<h3 className="text-xl font-black">Registered Learners</h3>
<div className="flex w-full items-center gap-2 rounded-xl border border-
slate-200 bg-slate-50 px-3 py-2 sm:w-72"><Search className="h-4 w-4 text-slate-
400" /><input value={search} onChange={(e) => setSearch([Link])}
className="w-full bg-transparent text-sm outline-none" placeholder="Search
users" /></div>
</div>
<div className="overflow-x-auto rounded-xl border border-slate-100">
<table className="w-full whitespace-nowrap text-left text-sm">
<thead className="border-b border-slate-100 bg-slate-50 text-xs uppercase
tracking-wide text-slate-500"><tr><th className="px-4 py-3">User</th><th
className="px-4 py-3">Completed</th><th className="px-4 py-3">Reset</th><th
className="px-4 py-3 text-right">Delete</th></tr></thead>
<tbody className="divide-y divide-slate-100">
{[Link]((u) => <tr key={[Link]}><td className="px-4 py-3"><p
className="font-bold">{u.full_name || 'Unnamed User'}</p><p className="text-xs
text-slate-500">{[Link] || 'No email'}</p></td><td className="px-4 py-3 font-bold
text-indigo-600">{[Link]}</td><td className="px-4 py-3"><div
className="flex items-center gap-2"><select value={selectedUserId === [Link] ?
selectedCategoryId : 'all'} onChange={(e) => { setSelectedUserId([Link]);
setSelectedCategoryId([Link]) }} className="rounded border border-slate-
200 px-2 py-1 text-xs"><option value="all">All</option>{[Link]((c)
=> <option key={[Link]} value={[Link]}>{[Link]}</option>)}</select><button
onClick={() => run(() => resetUserProgressByAdmin({ userId: [Link], categoryId:
selectedUserId === [Link] && selectedCategoryId !== 'all' ? selectedCategoryId :
null }), 'Progress reset.')} className="rounded border border-amber-200 px-2 py-1
text-xs text-amber-700">Reset</button></div></td><td className="px-4 py-3 text-
right"><button onClick={() => [Link](`Delete ${[Link] || [Link]}?`) &&
59
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

run(() => deleteUserByAdmin([Link]), 'User deleted.')} className="rounded border

border-red-200 px-2 py-1 text-xs text-red-700">Delete</button></td></tr>)}
</tbody>
</table>
</div>
</section>
)}
</main>
</div>
)
}

export default AdminPanel

Dash Board

import React, { useEffect } from 'react'

import { useNavigate } from 'react-router-dom'
import { Brain, Code2, Database, Gamepad2, Globe2, Laptop2, Lock, Server } from
'lucide-react'
import { useAuthStore } from '../store/authStore'
import { useRoadmapStore } from '../store/roadmapStore'
import TopNav from '../components/TopNav'

const iconLibrary = {
server: { icon: Server, classes: 'bg-emerald-50 text-emerald-600' },
laptop: { icon: Laptop2, classes: 'bg-blue-50 text-blue-600' },
brain: { icon: Brain, classes: 'bg-amber-50 text-amber-600' },
code: { icon: Code2, classes: 'bg-violet-50 text-violet-600' },
database: { icon: Database, classes: 'bg-cyan-50 text-cyan-600' },
gamepad: { icon: Gamepad2, classes: 'bg-rose-50 text-rose-600' },
globe: { icon: Globe2, classes: 'bg-teal-50 text-teal-600' },
}

const fallbackIconBySlug = {
html: 'laptop',
css: 'laptop',
javascript: 'code',
python: 'brain',
}

60
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

const Dashboard = () => {

const navigate = useNavigate()
const { user, profile } = useAuthStore()
const { categories, fetchCategories, loading, error } = useRoadmapStore()

useEffect(() => {
if (!user?.id) return
fetchCategories([Link])
}, [fetchCategories, user?.id])

const completedModules = [Link]((sum, category) => sum +

[Link], 0)
const xp = completedModules * 150

return (
<div className="min-h-screen">
<TopNav active="dashboard" xp={xp} />

<section className="view-transition mx-auto max-w-7xl px-6 pb-20 pt-32">

<header className="mb-12">
<h2 className="mb-2 text-4xl font-black text-slate-900">
Welcome Back, <span className="text-indigo-600">{profile?.full_name ||
'Explorer'}</span>!
</h2>
<p className="text-slate-500">Pick a roadmap to continue your
adventure.</p>
</header>

{error && <p className="mb-6 rounded-xl border border-red-200 bg-red-50

px-4 py-3 text-sm text-red-700">{error}</p>}

{loading ? (
<p className="text-sm text-slate-500">Loading roadmap categories...</p>
):(
<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
{[Link]((category) => {
const iconKey = category.icon_name || fallbackIconBySlug[[Link]] ||
'server'
const iconConfig = iconLibrary[iconKey] || [Link]
const Icon = [Link]
const hasCustomIcon = Boolean(category.icon_url)
const iconSize = [Link](24, [Link](120, Number(category.icon_size) ||
56))

return (
61
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

<button
key={[Link]}
type="button"
onClick={() => {
if ([Link]) return
navigate(`/roadmap/${[Link]}`)
}}
className={`group rounded-[2.5rem] border bg-white p-8 text-left
transition-all ${
[Link]
? 'cursor-not-allowed border-slate-200 opacity-70'
: 'border-slate-200 hover:border-indigo-400 hover:shadow-2xl
hover:shadow-indigo-500/10'
}`}
>
<div
className={`mb-6 flex h-14 w-14 items-center justify-center overflow-
hidden rounded-2xl text-xl ${
hasCustomIcon ? 'border border-slate-200 bg-white' :
[Link]
}`}
style={{ width: `${iconSize}px`, height: `${iconSize}px` }}
>
{hasCustomIcon ? (
<img
src={category.icon_url}
alt={`${[Link]} icon`}
className="h-full w-full object-cover"
/>
):(
<Icon className="h-6 w-6" />
)}
</div>

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

<h3 className="text-2xl font-black
text-slate-800">{[Link]}</h3>
{category.is_foundation_course && (
<span className="rounded-full bg-indigo-100 px-3 py-1 text-[10px]
font-black uppercase tracking-widest text-indigo-700">
Foundation
</span>
)}
</div>
<p className="mb-8 text-sm text-slate-500">
62
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

{[Link]
? 'Complete the required foundation course(s) to unlock this course.'
: [Link] || 'Master this roadmap through guided modules
and levels.'}
</p>

{[Link] && (
<div className="mb-4 inline-flex items-center gap-2 rounded-full bg-
slate-100 px-3 py-1.5 text-xs font-bold text-slate-600">
<Lock className="h-3.5 w-3.5" />
Locked
</div>
)}

<div className="space-y-3">
<div className="flex justify-between text-[10px] font-black uppercase
tracking-widest text-slate-400">
<span>Progress</span>
<span
className="text-indigo-600">{[Link]}%</span>
</div>
<div className="h-3 w-full overflow-hidden rounded-full bg-slate-
100">
<div
className="h-full rounded-full bg-indigo-600"
style={{ width: `${[Link]}%` }}
/>
</div>
</div>
</button>
)
})}
</div>
)}
</section>
</div>
)
}

export default Dashboard

Module page

63
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

import React, { useEffect, useMemo, useState } from 'react'

import { ArrowLeft, CheckCircle2, ExternalLink, PlayCircle } from 'lucide-react'
import { useNavigate, useParams } from 'react-router-dom'
import DOMPurify from 'dompurify'
import TopNav from '../components/TopNav'
import { useAuthStore } from '../store/authStore'
import { useRoadmapStore } from '../store/roadmapStore'

const renderBlogContent = (rawContent) => {

const content = (rawContent || '').trim()
if (!content) return null

const lines = [Link]('\n')

const elements = []
let listItems = []
let paragraphLines = []

const flushList = () => {

if (![Link]) return
[Link](
<ul key={`list-${[Link]}`} className="mb-5 list-disc space-y-1 pl-6
text-slate-700">
{[Link]((item, index) => (
<li key={`li-${index}`}>{item}</li>
))}
</ul>,
)
listItems = []
}

const flushParagraph = () => {

if (![Link]) return
[Link](
<p key={`p-${[Link]}`} className="mb-5 text-[15px] leading-7 text-
slate-700">
{[Link](' ')}
</p>,
)
paragraphLines = []
}

[Link]((line) => {
const trimmed = [Link]()

64
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

if (!trimmed) {
flushList()
flushParagraph()
return
}

if ([Link]('### ')) {
flushList()
flushParagraph()
[Link](
<h3 key={`h3-${[Link]}`} className="mb-3 mt-6 text-lg font-black
text-slate-900">
{[Link](4)}
</h3>,
)
return
}

if ([Link]('## ')) {
flushList()
flushParagraph()
[Link](
<h2 key={`h2-${[Link]}`} className="mb-3 mt-7 text-2xl font-black
text-slate-900">
{[Link](3)}
</h2>,
)
return
}

if ([Link]('# ')) {
flushList()
flushParagraph()
[Link](
<h1 key={`h1-${[Link]}`} className="mb-4 mt-8 text-3xl font-black
text-slate-900">
{[Link](2)}
</h1>,
)
return
}

if ([Link]('- ')) {
flushParagraph()
[Link]([Link](2))
65
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

return
}

flushList()
[Link](trimmed)
})

flushList()
flushParagraph()
return elements
}

const extractHtmlBody = (rawContent) => {

if (!rawContent) return ''
const trimmed = [Link]()
const hasHtmlTag = /<[^>]+>/.test(trimmed)
if (!hasHtmlTag) return ''

try {
const parsed = new [Link]().parseFromString(trimmed, 'text/html')
return [Link]?.innerHTML || trimmed
} catch {
return trimmed
}
}

const ModulePage = () => {

const navigate = useNavigate()
const { slug, moduleId } = useParams()
const { user } = useAuthStore()
const {
loading,
error,
categoryDetails,
currentModules,
fetchModules,
submitModuleQuiz,
} = useRoadmapStore()
const [selectedOption, setSelectedOption] = useState(null)
const [submitError, setSubmitError] = useState('')
const [submitMessage, setSubmitMessage] = useState('')
const [submitting, setSubmitting] = useState(false)

useEffect(() => {
if (!slug || !user?.id) return
66
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

fetchModules(slug, [Link])
}, [slug, user?.id, fetchModules])

const module = useMemo(

() => [Link]((item) => [Link] === moduleId) ?? null,
[currentModules, moduleId],
)
const moduleIndex = useMemo(
() => [Link]((item) => [Link] === moduleId),
[currentModules, moduleId],
)
const nextModule = useMemo(() => {
if (moduleIndex < 0) return null
return currentModules[moduleIndex + 1] ?? null
}, [currentModules, moduleIndex])

const options = [Link](module?.quiz_options) ? module.quiz_options : []

const canSubmitQuiz =
module &&
[Link] &&
![Link] &&
module.quiz_question &&
[Link] >= 2 &&
selectedOption !== null

const onSubmitQuiz = async () => {

if (!module || selectedOption === null) return

setSubmitting(true)
setSubmitError('')
setSubmitMessage('')

try {
const passed = await submitModuleQuiz({
moduleId: [Link],
selectedOption,
})

if (passed) {
setSubmitMessage('Correct answer. Module completed and next module
unlocked.')
} else {
setSubmitError('Incorrect answer. Review the module content and try again.')
}

67
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

await fetchModules(slug, [Link])

} catch (err) {
setSubmitError([Link] || 'Unable to submit quiz.')
} finally {
setSubmitting(false)
}
}

if (loading && !module) {

return (
<div className="min-h-screen">
<TopNav active="dashboard" xp={(categoryDetails?.completedCount ?? 0) *
150} />
<div className="mx-auto max-w-4xl px-4 pb-16 pt-24 sm:px-6 sm:pb-20
sm:pt-32">
<p className="text-sm text-slate-500">Loading module...</p>
</div>
</div>
)
}

if (!module) {
return (
<div className="min-h-screen">
<TopNav active="dashboard" xp={0} />
<div className="mx-auto max-w-4xl px-4 pb-16 pt-24 sm:px-6 sm:pb-20
sm:pt-32">
<button
type="button"
onClick={() => navigate(`/roadmap/${slug}`)}
className="text-sm font-bold text-indigo-600"
>
Back to Roadmap
</button>
<p className="mt-3 text-sm text-red-700">Module not found.</p>
</div>
</div>
)
}

const categoryLocked = Boolean(categoryDetails?.isLocked)

const locked = categoryLocked || (![Link] && ![Link])
const xp = (categoryDetails?.completedCount ?? 0) * 150
const articleContent = module.module_content?.trim()
const htmlBody = extractHtmlBody(articleContent)
68
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

const sanitizedHtml = htmlBody

? [Link](htmlBody, {
USE_PROFILES: { html: true },
ADD_TAGS: ['iframe'],
ADD_ATTR: [
'allow',
'allowfullscreen',
'frameborder',
'loading',
'referrerpolicy',
'scrolling',
'style',
'title',
'width',
'height',
],
FORBID_TAGS: ['script', 'style', 'object', 'embed', 'link', 'meta'],
ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel|sms):|[^a-z]|[a-z+.-]+(?:
[^a-z+.-:]|$))/i,
})
: ''

return (
<div className="min-h-screen">
<TopNav active="dashboard" xp={xp} />

<section className="view-transition mx-auto max-w-6xl px-4 pb-16 pt-24

sm:px-6 sm:pb-20 sm:pt-32">
<button
type="button"
onClick={() => navigate(`/roadmap/${slug}`)}
className="mb-6 inline-flex items-center gap-2 text-sm font-bold text-slate-
500 transition-colors hover:text-indigo-600 sm:mb-8"
>
<ArrowLeft className="h-4 w-4" />
Back to Roadmap
</button>

<div className="mb-5 flex flex-col gap-3 sm:mb-6 sm:flex-row sm:items-start

sm:justify-between sm:gap-4">
<div>
<h1 className="text-3xl font-black leading-tight text-slate-900 sm:text-
4xl">{[Link]}</h1>
<p className="mt-2 text-sm text-slate-500">{[Link] || 'No
description provided.'}</p>
69
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

{categoryDetails?.is_foundation_course && (
<span className="mt-3 inline-flex rounded-full bg-indigo-100 px-3 py-1
text-[10px] font-black uppercase tracking-widest text-indigo-700">
Foundation
</span>
)}
</div>
{[Link] && (
<span className="inline-flex items-center gap-1 rounded-full bg-green-100
px-3 py-1 text-xs font-bold text-green-700">
<CheckCircle2 className="h-4 w-4" />
Completed
</span>
)}
</div>

{!categoryLocked && (
<div className="mb-6 flex flex-wrap items-center gap-2 sm:mb-8 sm:gap-3">
{module.video_url && (
<a
href={module.video_url}
target="_blank"
rel="noreferrer"
className="inline-flex items-center gap-1 rounded-full bg-indigo-50 px-3
py-2 text-xs font-bold text-indigo-700 sm:px-4"
>
<PlayCircle className="h-4 w-4" />
Watch Video
</a>
)}
{module.resource_url && (
<a
href={module.resource_url}
target="_blank"
rel="noreferrer"
className="inline-flex items-center gap-1 rounded-full bg-slate-100 px-3
py-2 text-xs font-bold text-slate-700 sm:px-4"
>
<ExternalLink className="h-4 w-4" />
Open Resource
</a>
)}
</div>
)}

70
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

{categoryLocked ? (
<p className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3
text-sm text-amber-700">
Complete the required foundation course(s) to unlock this course.
</p>
):(
<>
<article className="mb-8">
{sanitizedHtml ? (
<div
className="module-html prose max-w-none prose-headings:font-black
prose-headings:text-slate-900 prose-p:text-slate-700 prose-li:text-slate-700 prose-
a:text-indigo-600"
dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
/>
) : articleContent ? (
<div>{renderBlogContent(articleContent)}</div>
):(
<p className="text-[15px] leading-7 text-slate-700">
{[Link] || 'No article content yet for this module.'}
</p>
)}
</article>
{locked ? (
<p className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3
text-sm text-amber-700">
This module is locked. Complete previous modules first.
</p>
):(
<div className="rounded-2xl border border-slate-200 bg-slate-50 p-4 sm:p-
6">
<h2 className="text-lg font-black text-slate-900">Module Quiz</h2>

{!module.quiz_question || [Link] < 2 ? (

<p className="mt-3 text-sm text-red-700">
Quiz is not configured for this module yet. Ask admin to add MCQ options.
</p>
):(
<>
<p className="mt-4 text-sm font-semibold text-slate-
800">{module.quiz_question}</p>
<div className="mt-4 space-y-2">
{[Link]((option, index) => (
<label
key={`${[Link]}-${index}`}
71
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

className="flex cursor-pointer items-start gap-3 rounded-xl border

border-slate-200 bg-white px-3 py-3 sm:items-center sm:px-4"
>
<input
type="radio"
name="module-quiz"
checked={selectedOption === index}
onChange={() => setSelectedOption(index)}
/>
<span className="text-sm text-slate-700">{option}</span>
</label>
))}
</div>

{submitError && (
<p className="mt-4 rounded-xl border border-red-200 bg-red-50 px-4
py-3 text-sm text-red-700">
{submitError}
</p>
)}
{submitMessage && (
<p className="mt-4 rounded-xl border border-green-200 bg-green-50 px-
4 py-3 text-sm text-green-700">
{submitMessage}
</p>
)}
{error && (
<p className="mt-4 rounded-xl border border-red-200 bg-red-50 px-4
py-3 text-sm text-red-700">
{error}
</p>
)}

{![Link] && (
<button
type="button"
onClick={onSubmitQuiz}
disabled={!canSubmitQuiz || submitting}
className="mt-5 w-full rounded-xl bg-indigo-600 px-5 py-3 text-sm
font-bold text-white disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
>
{submitting ? 'Submitting...' : 'Submit Quiz'}
</button>
)}

72
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

{[Link] && nextModule && [Link] && (

<button
type="button"
onClick={() => navigate(`/roadmap/${slug}/module/$
{[Link]}`)}
className="mt-5 w-full rounded-xl bg-emerald-600 px-5 py-3 text-sm
font-bold text-white hover:bg-emerald-700 sm:w-auto"
>
Next Module
</button>
)}

</>
)}
</div>
)}
</>
)}
</section>
</div>
)
}

export default ModulePage

Landing Page

import React from 'react'

import { Link } from 'react-router-dom'
import { Terminal } from 'lucide-react'

const LandingPage = () => {

return (
<section className="view-transition flex min-h-screen flex-col items-center
justify-center p-6 text-center">
<div className="mb-8 flex h-20 w-20 animate-bounce items-center justify-
center rounded-[2rem] bg-indigo-600 text-white shadow-2xl">
<Terminal className="h-10 w-10" />
</div>

<h1 className="mb-6 text-5xl font-black tracking-tight text-slate-900 md:text-

7xl">
73
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Master Code <br />

<span className="text-indigo-600">Step by Step.</span>
</h1>

<p className="mb-10 max-w-2xl text-lg leading-relaxed text-slate-500">

The interactive roadmap platform for developers. No complicated setups, just
structured learning
paths to take you from zero to hero.
</p>

<div className="flex">
<Link
to="/dashboard"
className="rounded-2xl bg-indigo-600 px-10 py-5 text-lg font-bold text-white
shadow-xl shadow-indigo-200 transition-all hover:-translate-y-1 hover:bg-indigo-
700"
>
Start Learning Free
</Link>
</div>
</section>
)
}

export default LandingPage

Final Assessment Page

import React, { useEffect, useMemo, useState } from 'react'

import { ArrowLeft } from 'lucide-react'
import { useNavigate, useParams } from 'react-router-dom'
import TopNav from '../components/TopNav'
import { useAuthStore } from '../store/authStore'
import { useRoadmapStore } from '../store/roadmapStore'

const FinalAssessmentPage = () => {

const navigate = useNavigate()
const { slug } = useParams()
const { user } = useAuthStore()
const {
categoryDetails,
currentModules,
74
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

fetchModules,
fetchFinalAssessmentQuestions,
submitFinalAssessment,
} = useRoadmapStore()
const [questions, setQuestions] = useState([])
const [answers, setAnswers] = useState([])
const [loading, setLoading] = useState(true)
const [submitting, setSubmitting] = useState(false)
const [error, setError] = useState('')
const [message, setMessage] = useState('')

useEffect(() => {
const load = async () => {
if (!slug || !user?.id) return
setLoading(true)
setError('')
try {
await fetchModules(slug, [Link])
} catch (err) {
setError([Link] || 'Failed to load roadmap.')
} finally {
setLoading(false)
}
}
load()
}, [slug, user?.id, fetchModules])

const finalModuleCompleted = useMemo(() => {

const finalModule = currentModules[[Link] - 1]
return Boolean(finalModule?.completed)
}, [currentModules])

useEffect(() => {
const loadQuestions = async () => {
if (!categoryDetails?.id || !finalModuleCompleted) return
setLoading(true)
setError('')
try {
const items = await fetchFinalAssessmentQuestions([Link])
setQuestions(items)
setAnswers([Link]({ length: [Link] }, () => -1))
} catch (err) {
setError([Link] || 'Failed to load assessment.')
} finally {
setLoading(false)
75
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

}
}
loadQuestions()
}, [categoryDetails?.id, finalModuleCompleted, fetchFinalAssessmentQuestions])

const onSubmit = async () => {

if (!categoryDetails?.id) return
if ([Link]((value) => value < 0)) {
setError('Please answer all questions before submitting.')
return
}

setSubmitting(true)
setError('')
setMessage('')
try {
const passed = await submitFinalAssessment({
categoryId: [Link],
answers,
})

if (passed) {
setMessage('Final assessment passed. Great job!')
} else {
setError('Final assessment not passed. Review and try again.')
}
} catch (err) {
setError([Link] || 'Unable to submit final assessment.')
} finally {
setSubmitting(false)
}
}

const xp = (categoryDetails?.completedCount ?? 0) * 150

const categoryLocked = Boolean(categoryDetails?.isLocked)

if (loading) {
return (
<div className="min-h-screen">
<TopNav active="dashboard" xp={xp} />
<div className="mx-auto max-w-4xl px-4 pb-16 pt-24 sm:px-6 sm:pb-20
sm:pt-32">
<p className="text-sm text-slate-500">Loading final assessment...</p>
</div>
</div>
76
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

)
}

return (
<div className="min-h-screen">
<TopNav active="dashboard" xp={xp} />

<section className="view-transition mx-auto max-w-4xl px-4 pb-16 pt-24

sm:px-6 sm:pb-20 sm:pt-32">
<button
type="button"
onClick={() => navigate(`/roadmap/${slug}`)}
className="mb-6 inline-flex items-center gap-2 text-sm font-bold text-slate-
500 hover:text-indigo-600"
>
<ArrowLeft className="h-4 w-4" />
Back to Roadmap
</button>

<h1 className="text-3xl font-black text-slate-900 sm:text-4xl">Final

Assessment</h1>
<p className="mt-2 text-sm text-slate-500">
{categoryDetails?.name || 'Roadmap'} final MCQ. Pass all questions to clear
assessment.
</p>
{categoryLocked && (
<p className="mt-5 rounded-xl border border-amber-200 bg-amber-50 px-4
py-3 text-sm text-amber-700">
Complete the required foundation course(s) to unlock this course.
</p>
)}

{!categoryLocked && !finalModuleCompleted && (

<p className="mt-5 rounded-xl border border-amber-200 bg-amber-50 px-4
py-3 text-sm text-amber-700">
Complete the final module first to unlock this assessment.
</p>
)}

{!categoryLocked && finalModuleCompleted && [Link] === 0 && (

<p className="mt-5 rounded-xl border border-amber-200 bg-amber-50 px-4
py-3 text-sm text-amber-700">
Assessment questions are not configured yet. Ask admin to add questions.
</p>
)}
77
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

{!categoryLocked && finalModuleCompleted && [Link] > 0 && (

<div className="mt-6 space-y-4">
{[Link]((question, index) => {
const options = [Link]([Link]) ? [Link] : []
return (
<div key={[Link]} className="rounded-2xl border border-slate-200
bg-white p-4 sm:p-5">
<p className="font-bold text-slate-900">
{index + 1}. {[Link]}
</p>
<div className="mt-3 space-y-2">
{[Link]((option, optionIndex) => (
<label
key={`${[Link]}-${optionIndex}`}
className="flex cursor-pointer items-start gap-3 rounded-xl border
border-slate-200 bg-slate-50 px-3 py-3 sm:items-center"
>
<input
type="radio"
name={`final-${[Link]}`}
checked={answers[index] === optionIndex}
onChange={() =>
setAnswers((prev) => {
const next = [...prev]
next[index] = optionIndex
return next
})
}
/>
<span className="text-sm text-slate-700">{option}</span>
</label>
))}
</div>
</div>
)
})}

<button
type="button"
onClick={onSubmit}
disabled={submitting}
className="w-full rounded-xl bg-indigo-600 px-5 py-3 text-sm font-bold
text-white hover:bg-indigo-700 disabled:opacity-60 sm:w-auto"
>
78
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

{submitting ? 'Submitting...' : `Submit ${[Link]} Questions`}

</button>
</div>
)}

{error && (
<p className="mt-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3
text-sm text-red-700">
{error}
</p>
)}
{message && (
<p className="mt-4 rounded-xl border border-green-200 bg-green-50 px-4 py-
3 text-sm text-green-700">
{message}
</p>
)}
</section>
</div>
)
}

export default FinalAssessmentPage

79
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

CHAPTER 6
TESTING

Software testing is an important phase in the software development life cycle. It

ensures that the developed system works correctly and meets the specified
requirements. Testing helps identify errors, bugs, and performance issues before the
system is deployed to users.

For the CodePal Programming Learning Platform, different testing methods were
used to verify that the system operates correctly and provides a reliable learning
experience for users. The testing process ensures that each component of the system
performs as expected and that all modules work together properly.

The main types of testing performed in this project include:

Unit Testing

Integration Testing

System Testing

Each testing method focuses on different aspects of the system to ensure overall
system reliability and performance.

---

6.1 Unit Testing

Unit testing is the process of testing individual components or modules of a software

application separately. The goal of unit testing is to verify that each individual unit of
the system functions correctly.

In the CodePal platform, unit testing was performed on different components of the
system such as:

User authentication module

Category display module

80
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Learning module interface

Progress tracking functionality

Each module was tested independently to ensure that it produces the expected results.

User Registration Testing

The user registration functionality was tested to ensure that new users can
successfully create accounts on the platform. The system verifies user input such as
email and password and stores the data securely in the database.

The following conditions were tested:

Valid user registration

Invalid email format

Empty input fields

Duplicate account registration

The system successfully prevented invalid inputs and created user accounts correctly.

Login Authentication Testing

The login functionality was tested to ensure that registered users can log in securely
using their credentials. The system verifies user identity through authentication
services provided by the backend.

Test cases included:

Valid login credentials

Incorrect password

Unregistered user login

Session handling after login

The login system successfully authenticated users and displayed appropriate

81
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

error messages for invalid credentials.

Module Access Testing

Each learning module was tested to ensure that users can access module content
properly. The system checks whether the module is unlocked before allowing access.

The test verified that:

Modules load correctly

Content is displayed properly

Navigation between modules works correctly

Progress Tracking Testing

The progress tracking functionality was tested to ensure that completed modules are
recorded properly in the database.

The system correctly updated the user's progress after a module was marked as
completed.

Results of Unit Testing

All individual components were tested successfully. Any minor

errors identified during testing were corrected during the development phase.

Unit testing confirmed that each module of the CodePal system functions
independently and performs its intended task correctly.

---

6.2 Integration Testing

Integration testing is performed after unit testing. It focuses on verifying the

interaction between different modules of the system.

While unit testing ensures that individual modules work correctly, integration testing
ensures that these modules communicate properly when combined together.

In the CodePal system, integration testing was performed to verify the interaction
between:
82
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Frontend interface

Backend services

Database operations

Frontend and Backend Integration

The frontend application communicates with backend services using APIs. Integration
testing ensured that data requests and responses between the frontend and backend
were functioning correctly.

The following scenarios were tested:

User registration data being stored in the database

Login authentication with backend services

Fetching categories and modules from the database

Updating progress after module completion

All API interactions worked correctly and returned accurate results.

Database Integration Testing

The system uses a PostgreSQL database to store system data. Integration testing
verified that the database correctly stores and retrieves information.

The following database operations were tested:

Saving new user accounts

Fetching category data

Retrieving learning modules

Updating user progress

All database transactions were completed successfully without data loss.

83
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

User Flow Integration Testing

Integration testing also verified the complete user workflow.

A typical user workflow includes:

1. Registering an account

2. Logging into the system

3. Selecting a programming category

4. Accessing learning modules

5. Completing modules and updating progress

Testing confirmed that all modules interact correctly during this workflow.

Results of Integration Testing

Integration testing confirmed that all system components work together properly. The
frontend, backend, and database communicate effectively, ensuring smooth system
functionality.

---

6.3 System Testing

System testing evaluates the complete system to ensure that it meets all functional and
non-functional requirements.

This type of testing verifies the behavior of the entire system under real
operating conditions.

For the CodePal system, system testing was conducted to ensure that the platform
performs reliably when used by real users.

Functional Testing
84
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Functional testing ensured that all system features operate according to the specified
requirements.

The following features were tested:

User registration

Login authentication

Category browsing

Module access

Sequential module unlocking

Progress tracking

All functional requirements were successfully verified.

Performance Testing

Performance testing evaluated how the system performs under normal usage
conditions.

The system was tested for:

Page loading speed

Response time for user actions

Ability to handle multiple users

The system performed efficiently and maintained stable performance.

Usability Testing

Usability testing evaluated the user interface and user experience.

The testing ensured that:

The interface is simple and easy to navigate

85
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Users can easily access learning modules

The platform is suitable for beginner programmers

The system received positive results for usability.

Security Testing

Security testing verified that user data is protected.

The system was tested for:

Secure authentication

Password protection

Data access control

Security testing confirmed that user information is stored securely.

Results of System Testing

System testing confirmed that the CodePal platform functions correctly and meets all
system requirements.

The system is stable, reliable, and ready for deployment.

86
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

CHAPTER 7
MAINTENANCE

Software maintenance refers to the process of modifying and improving the system
after it has been deployed. Maintenance ensures that the system continues
to operate efficiently and adapts to new requirements or changes.

For the CodePal system, maintenance is important to ensure that the

platform remains updated and continues to provide accurate learning resources.

There are several types of software maintenance.

Corrective Maintenance

Corrective maintenance involves fixing errors or bugs that may appear after the
system is deployed. Even after thorough testing, some issues may appear during real-
world usage.

These errors are identified and corrected to maintain system stability.

Adaptive Maintenance

Adaptive maintenance involves modifying the system to adapt to changes in the

environment.

Examples include:

Updating the system for new browser versions

Improving compatibility with new devices

Updating backend services

Perfective Maintenance

Perfective maintenance focuses on improving system performance and usability.

This includes:
87
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

Enhancing the user interface

Improving system speed

Adding new learning modules

Preventive Maintenance

Preventive maintenance involves improving system reliability by preventing future

issues.

Examples include:

Updating system libraries

Improving database performance

Strengthening security mechanisms

Regular maintenance ensures that the CodePal platform remains efficient, secure, and
user-friendly.

88
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

CHAPTER 8
CONCLUSION

8.1 Conclusion

The CodePal Programming Learning Platform was developed to provide a structured

and accessible learning environment for beginner programmers. The platform
organizes programming topics into categories and modules, allowing users to follow a
systematic learning path.

Through features such as module unlocking and progress tracking, the system ensures
that learners understand programming concepts step by step. The platform provides a
user-friendly interface that allows beginners to easily access programming content
and track their progress.

The system was developed using modern web technologies including React, Tailwind
CSS, and Supabase. These technologies provide flexibility, scalability, and efficient
performance for the platform.

Testing was conducted at different levels to ensure that the system operates correctly
and meets all functional and non-functional requirements. The testing process
confirmed that the platform performs reliably and provides a smooth user experience.

Overall, the CodePal system successfully achieves its objective of providing a

structured programming learning platform for beginners.

89
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

8.2 Future Scope

Although the CodePal platform currently provides essential learning features, several
improvements can be made in the future to enhance the system further.

Possible future enhancements include:

Interactive Coding Environment

An integrated coding editor can be added to allow users to practice programming

directly within the platform.

Quiz and Assessment System

Quizzes can be added after each module to evaluate user understanding and reinforce
learning.

Certification System

The platform can provide certificates after completing learning paths or programming
courses.

Discussion Forums

A discussion forum can allow learners to interact with other users, ask questions, and
share knowledge.

Mobile Application

A mobile application version of CodePal can improve accessibility and allow users to
learn programming on mobile devices.

Implementing these features would make the platform more interactive and beneficial
for learners.

90
DEPARTMENT OF COMPUTER ENGINEERING MJPC
MAJOR PROJECT REPORT | 2026 CODEPAL - Interactive Learning Program

CHAPTER 9
BIBILIOGRAPHY

The following references were used during the development of this project and
preparation of the documentation.

1. Sommerville, Ian. Software Engineering, 10th Edition, Pearson Education.

2. Pressman, Roger S. Software Engineering: A Practitioner’s Approach,

McGraw Hill Education.

3. React Official Documentation. Available at:

[Link]

4. Supabase Documentation. Available at:

[Link]

5. Tailwind CSS Documentation. Available at:

[Link]

6. PostgreSQL Global Development Group. PostgreSQL Documentation.

[Link]

7. MDN Web Docs – Web Development Resources.

[Link]

91
DEPARTMENT OF COMPUTER ENGINEERING MJPC