OBJECTIVES

Page
1
The objectives of the Project-work are as follows: -

➢ To allow users to select their target job role or position for customized interview
preparation.

➢ To collect and utilize user’s experience level and known technologies to generate
relevant interview questions using AI.

➢ To provide a mock interview or exam environment, simulating real-time testing

and evaluation..

➢ To offer automated result analysis and improvement suggestions, minimizing

manual effort

➢ To include an admin dashboard with the ability to send personalized feedback or

performance updates to top-performing users.

Page
2
CATEGORY OF PROJECT
WORK

Page
3
CATEGORY OF THE PROJECT WORK:

This is a web-based project.

Hardware and Software Used: -

Hardware:
For Developers: Laptop/PC .

For Users: Device,Browser.

Processor: Pentium-IV or higher; RAM 512MB;HDD250GB Keyboard;

Mouse.

Software Tools: VS Code, Ms Powerpoint, Postman .

Language: HTML5, CSS3, JavaScript, React.js, Bootstrap or Tailwind

CSS, Fetch API.

Platform: Windows 10
Database: MongoDB

Page
4
SYSTEM ANALYSIS

Page
5
 Identification of Need:

The basic elements of system analysis are as follows:

Intention: Determination of the objectives or goals. What do we intend to achieve and what is the
purpose of our works.

Requirement Analysis: The emphasis in requirements analysis is on identifying what is needed from the
system, not how the system will active its goals. This consists of two phases:

A. Problem analysis: The aim is to understand the problem and its context and the requirements of
the new system that is to be developed.

Requirement Specification: Once the problem is analyzed and the essentials understood, the
requirements must be specified in the requirement specification document. This document must
specify all functional and performance requirements; the formats of inputs and outputs and all design
constants that exists due to political, economic, environmental and security reasons.

Proper Format: The inputs should be available in proper format.

Economy: The data must be produced at allowable least cost.

File: The word file implies that files are used to store data. Most of the inputs necessary for the system
may be historical data, or it may be possible that these are form within the system. Here in this project we
have used MONGODB to store the data.

Process: Here we come to the details of how the inputs and files are converted into outputs. This involves the
programs and the way in which the data is processed through the computer. The processing involves the set of
logical steps. These steps are required to be instructed to the computer and this is done by series of instructions
called the Program.

Page
6
Preliminary Investigation:

The first step in the system development lifecycle is the preliminary investigations to determine the
system. The purpose of the preliminary investigation is to evaluate project requests. It is not a design study
nor does it include the collection of details to describe the business system in all respect. Rather, it is the
collecting of information that helps committee member to evaluate the merits if project requests and make
an information judgement about the feasibility of the proposed project. Analysts working on preliminary
investigation should accomplish the following objectives: -

➢ Clarify and understand the project request.

➢ Determine size of project.

➢ Assets cost and benefits of alternative approaches.

➢ Determine the technical and operational feasibility of alternative approaches.

Verification and Validation

Verification

This is to ensure that the software being developed implements a specific function. Verification is done
against the design document. It verifies that the software being developed implements all the functionality
specified in the design document

Verification-“Are we building the product Right”

Validation

This is to ensure that the product being developed is matching with the customer requirements. Validation
is done against the SRS (Software Requirement Specification) document. It verifies that the software
being developed implements all the requirements specified in the SRS document.

Validation: ”Are we building the right product”

Page
7
SYSTEM REQUIREMENT
SPECIFICATION

Page
8
Definition:

A condition of capability needed by a user to solve a problem or achieve an object.

A condition or a capability that must be met or processed by a system to satisfy a contract, standard,
specification or other formally imposed document.

Three major parties interested in a new system are – The developer, the client, the user.

The problem – while developing software – faced by the developers and client is that the developer
usually does not understand the client’s problem and the application area and the client
usually does not understand the software development process.

The basic purpose of SRS documentation is to bridge this communication gap.

The introduction of software requirements specification states the goals and objectives of the software,
describe in its context of computer based system. Actually the information may be nothing more than the
software scope planning document.

Here in this project the introduction is described as follows: -

➢ The information description provides a detail description of the problem that the software must
solve.

➢ Information content, flow and structure are documented.

➢ Hardware, software and human interface are described for external system elements and
internal software functions.

A description of each function required to solve the problem is present in functional description. A
processing narrative is provided for each module, design constraints are stated and justified performance
characteristics are stated and one or more diagrams are included to graphically represent the overall
structure of the software and interplay among other software functions and other system elements.

The behavioural description section of the specification examines the operations of the software as a conseq
uence of external events and internally generated control characteristics.

Page
9
Validation criteria are probably the most important and ironically the most neglected selection of software
requirement specification. Specification of validation criteria acts as implicit review of all requirements.

Finally the specification includes a Bibliography and Appendix. The bibliography contains reference to all
documents that relate to the software. These include other software engineering documentation, technical
reference, vendor literature and standards. The appendix contains information that supplements the
specification. Tabular data, detailed description of algorithms, charts, graphs and other material are
represented as appendix.

In many cases an executable prototype, a paper prototype or a preliminary user’s manual may accompany
the software requirement specification. The preliminary user’s manual presents the software manual as
black box. That is heavy emphasis is placed on user input and the resultant output. The manual can serve as
a valuable tool for uncovering problems at the human machine interface.

Page
10
SOFTWARE ENGINEERING
PARADIGM

Page
11
The software development strategy is referred as “Software Engineering Paradigm”
The software development strategy consists of methods, tools, and procedures. There
Exist various software development strategies or process models. Software
engineering is a layered technology. Process defines the framework for a set of key
Processing areas that must be established for effective delivery of software
engineering technology. The key process areas forms the basis of management control
of software projects and establish the context in which technical methods are applied,
work products are produced, milestones are established, quality is ensured and change
is properly managed. The “Software Engineering” methods provide a technical how
to’s for building software. Methods encompass a broad area of tasks that include
requirement analysis, design, program construction, testing and support. Software
Engineering relies on basic principles that govern each area of technology and include
modeling activities and other descriptive techniques. Software engineering tools provide
automated and semi-automated support for the process and methods when tools are integrated
so that the information created by one tool can be used by another; a system for the support of
software development called computer aided software engineering is established.

Page
12
Software Development Models
1. Water Fall Model
2. Iterative Waterfall Model
3. Prototyping Model
4. Evolutionary Model
5. RAD (Rapid Application Development) Model
6. Spiral Model
Each model has its own specific steps for software development. A suitable development model is
selected by considering several factors like requirement, application type and application software to be
used for development etc.

Water Fall Model

In waterfall model, we proceed from one phase to the next in a sequential manner. Requirement Analysis,
Design, Implementation, Testing, Deployment and Maintenance are the different sequential phases. That is
once the requirement analysis is completed perfectly we proceed towards design phase. When the design
is totally completed, the implementation of that design is performed by the coders. After completing the
coding, the testing phase begins. The objective of testing is to uncover errors. The next is the deployment
maintenance phase. Thus the waterfall model insists that proceed to the next phase only after completing
previous phase perfectly. Water fall model is also known as classic life cycle model.

Page
13
 Iterative Water Fall Model

The Iterative water fall model approach overcomes the problems associated with the waterfall model
approach.

If any difficulty or problem encounter in any phase may require going back to the previous phase and
performing the required modifications and proceeds sequentially. This backtracking allows modifying any
corrections or modifications required in the previous phase.

Prototyping Model

After the requirement analysis a quick design is done. That is a working model of the intended software is
constructed.This focuses on a representation of the software that will be visible to the user. This working
model of the software is termed as a prototype. This prototype is evaluated by the customer to ensure that
all the requirements are incorporated. The prototype will be modified according to the customer's
suggestions. This process will be repeated until we get a fully functional working model that satisfies
all user requirements. Ideally prototyping is a mechanism for identifying user requirements

Page
14
 Evolutionary Model

Evolutionary model is also called as incremental model. In this kind of development first the core
product is developed and is delivered to the customer. But many of the known/unknown additional
features are not delivered. Some of these will be delivered to the customer in the subsequent version. In
the new version the existing product may be modified and new functionality may also be added.
Spiral software development model
Spiral model is an evolutionary version of incremental prototyping, developed by Boehm in 1988. Each
iteration of the prototype represented as a cycle in the spiral. The Spiral software development model is a
risk-oriented.

Spiral software development model may be applicable to projects where: The

projects requirements are very difficult.
Where new technologies are used.

The aim of customer communication is to establish effective communication between developer

and customer.

Page
15
The planning objectives are to define resources, project alternatives, time lines and other project
related information.

The purpose of the risk analysis phase is to assess both technical and management risks. The
engineering task is to build one or more representations of the application. The
construction and release task – to construct, test, install and provide user support (e.g.,
documentation and training).

The customer evaluation task - to obtain customer feedback based on the evaluation of the software
representation created during the engineering stage and implemented during the install stage.

RAD (rapid application development)

RAD (rapid application development) is a concept that products can be developed faster and of
higher quality through:

• Gathering requirements using workshops or focus groups

• Prototyping and early, reiterative user testing of designs
• The re-use of software components
• A rigidly paced schedule that defers design improvements to the next product version
• Less formality in reviews and other team communication

Some companies offer products that provide some or all of the tools for RAD software development.
(The concept can be applied to hardware development as well.) These products include requirements
gathering tools, prototyping tools, computer-aided software engineering tools, language development
environments such as those for the Java platform, groupware for communication among development
members, and testing tools.RAD usually embraces object-oriented programming methodology, which
inherently fosters software re- use. The most popular object-oriented programming languages, C++ and
Java, are offered in visual programming packages often described as providing rapid application
development.

Page
16
SYSTEM PLANNING

Page
17
System Planing
Project Planning:
The objective of software project planning is to provide a framework that enables the manager to
make reasonable estimates of resources, cost, and schedule, These estimates are made within a
limited time frame at the beginning of a software project and should be updated regularly as the
project progresses, In addition, estimates should attempt to define best case worst case scenarios
that project outcomes can be bounded, The planning objective is achieved through a process of
information discovery that leads to reasonable estimates.
Project Scheduling:
Project scheduling is an activity that distributes estimated effort across the planned project
duration by allocating the effort to specific software engineering tasks. The number of basic
principles guide the project scheduling is as follows:

➢ Compartmentalization: The project must be compartmentalized into a number of

manageable activities and tasks. To accomplish compartmentalization, both the product
and the process are decomposed.

➢ Inter-dependency: The inter-dependency of each compartmentalized activity or task must

be determined. Some tasks must occur in sequence while others can occur in parallel. Some
activities cannot commence until the work product produced by another is available.
Other activities can occur independently.

➢ Time allocation: Each task is scheduled must be allocated some number of work units. In
addition, each task must be assigned a start date and a completion date.

Page
18
➢ Defined outcomes: Every task that is scheduled should have a defined outcome. For
software projects the outcome is normally a work product or a part of a work product.

➢ Defined milestones: Every tasks or group of tasks should be associated with a project
milestone. A milestone is accomplished when one or more work products has been
reviewed for quality and has been approved.

Page
19
PERT Chart:

Program evaluation and review technique (PERT) charts depict task, duration and dependency
information. Each chart starts with an initiation node from which the first task or tasks originates. If
multiple tasks begin at the same time, they are all started from the node or branch, or fork out from the
starting point. Each task is represented by a line which states its name or other identifier, its duration, the
number of people assigned to it and in some cases the initials of the personnel assigned. The other end of
the task line is terminated by another node which identifies the start of another task, or the beginning of
any slack time, that is, waiting time between tasks.

Each task is connected to its successor tasks in this manner forming a network of nodes and connecting
lines. The chart is complete when all final tasks come together at the completion node. When slack time
exists between the end of one task and the start of another, the usual method is to draw a broken or dotted
line between the end of the first task and the start of the next dependent task.

A PERT chart may have multiple parallel or interconnecting networks of tasks. If the schedule project has
milestones, checkpoints or review points (all of which are highly recommended in any project schedule);
the PERT chart will note – that all tasks up to that point terminate at review node. It should be noted at this
point that the project review, approvals, user reviews, and so forth all take time. This time should never be
underestimated when drawing up the project plan. It is not unusual for a review to take one or two weeks.
Obtaining management and user approvals may even take longer.

PERT charts are usually drawn on ruled paper with the Horizontal-axis indicating ‘time-period- divisions’
in days, weeks, months and so on. Although it is possible to draw a PERT chart for the entire project, the
usual practice is to break the plans in smaller, more meaning full parts. This is very helpful if the chart has
to be redrawn for any reason, such as script or incorrectly estimated tasks.

Many PERT charts terminate at the major review points, such as the end of the analysis. Many
organizations include funding reviews in the project life cycle. Where this is the case, each chart
terminates in the funding review node.

Funding reviews can affect a project in that they may either increase funding, in case more people have to make
available, or they may decrease funding, in which case fewer people may be available. People affect the length of
time it takes to complete the project.

Page
20
Page
21
Gantt Chart:

A Gantt chart is a matrix which lists on the vertical axis all the tasks to be performed. Each
row contains a single task identification which usually consists of a number and name. The
horizontal axis is headed by columns indicating estimated task duration, skill level needed
to perform the task and the name of the person assigned to the tasks, followed by one
column for each period in the project’s duration. Each period may be expressed in hours,
days, weeks, months and other time units. In some cases it may be necessary to label the
period columns as Period1, Period2 and so on.

The graphics portion of the Gantt chart consists of a horizontal bar for each task connecting
the period-start and period-ending columns. A set of markers is usually used to indicate
estimated and actual start and end. Each bar on a separate line and the name of each person
assigned to the task is on a separate line.

In many cases when this type of project plan is used, a blank row is left between tasks.
When the project is under way, this row is used to indicate progress, indicated by a second
bar which starts in the period column when the task is actually started and continues until the
task is actually completed. Comparison between estimated start and end and actual start and
end should indicate project status on a task-by-task basis.

Variants of this method include a lower chart which shows personnel allocations on a
person-by-person basis. For this section the vertical axis contains the number of people
assigned to the project and the columns indicating task duration are left blank, as is the
column indicating person assigned. The graphics consists of the same bar notation as in the
upper chart indicates that the person is working on a task. The value of this lower chart is
evident when it shows slack time for the project personnel, that is, times when they are not
actually working on any project.

Page
22
Page
23
Hardware & Software required at the user end:

At users end a computer in proper working condition and an internet browser is required
along with proper internet connection.

Since it is a web application it can be accessed from any platform (Windows, Mac, Linux).

Page
24
SECURITY ISSUES

Page
25
Security Issues:

Security is the probability that attack of a specific type will be repelled. Any computer based system
that manages sensitive information may become intentional or unintentional target of illegal
penetration. Penetration spans a broad range of activities: disgruntled employees who attempt to
penetrate for revenge; dishonest individual who attempt to penetrate for illicit personal gain.

Security testing attempts to verify protection mechanism built into a system will in fact protect
it from improper penetration. The system security must test for invulnerability from frontal attack but
also be tested for invulnerability from flank or rear attack. During security testing the tester plays the
individual who desires to penetrate the system.

The tester may attempt to acquire passwords through external clerical means or may attack the
system with customer software designed to break down any defences that have constructed. The
tester may even overwhelm the system to check the system’s performance in case of flooding attacks.

In this project, the system is provided with passwords and only an authentic user can access the

system.

Page
26
Page
27
Maintenance:

The maintenance of existing software can account for over 60 percent of all effort expended by
development organisation and the percentage continues to rise as more software is produced. There
are four different kinds of maintenance:

1. Corrective maintenance: Corrective maintenance changes the software to correct defects.

2. Adaptive maintenance: Adaptive maintenance results in modifications to the software to
accommodate changes to its external environment.
3. Perfective maintenance: Perfective maintenance extends the software beyond its original
functional requirements.
4. Preventive maintenance: Preventive maintenance often called software re-engineering must
be conducted to enable software to serve the needs of its end users. In essence preventive
maintenance makes changes to computer programs so that they can be more easily
corrected, adopted and enhanced.

The following software is designed into modules (having well defined inputs, outputs and
non-overlapping specific usage) – which makes it easier to maintain. Suppose a correction or
perfection to the code is made due to user requirement; the effect remains within the
particular module; the rest of the software remain intact.

Page
28
Page
29
 SYSTEM DESIGN

Software design is an interactive process through which requirements are translated into a blue print for
constructing the software. The design provides a complete picture of the software addressing the data,
functional and behavioural domains from an implementation perspective. The design in this project is
modular, i.e., the software can be locally sub-divided into sub-modules; each having a non- overlapping
definite set of functions. The design contains distinct representation of data architecture interface and
modules. It is the way in which we can accurately translate customer requirements into finished product or
system.

The principles of design are as follows:-

➢ The design process does not suffer from ant tunnel vision. Al the alternative approaches are
considered and are judged each based on the requirements of the problems.

➢ The design is traceable to the analysis model.

➢ The design does not reinvent the wheel.

➢ The design “minimises the intellectual distance” between the software and the problem as it exists
between the real worlds.

➢ The design should exhibit uniformity and integration.

➢ A design should be structured in such a way that – limited amount of cost should be incurred to
reflect the modification.

➢ Designing is not coding.

➢ A design should be assessed for conceptual error, quality etc.

Three major designing concepts:

Abstraction: The high level of abstraction in broad terms, states the uses of the language of problem environment.
At lower levels of abstraction more procedural orientation is taken. There are three types of abstraction: Procedural
abstraction, Data abstraction, Control abstractiong

Page
30
 ❖ Procedural abstraction: It is a name sequence of instruction, which has specific and limited
function. For example: the word “click for a module to get activated”.

❖ Data abstraction: It is a collection of data that describes a data object.

❖ Control abstraction: It implies a program control mechanism without specifying the internal
details.

Refinement:-Refinement is a process of elaboration. The statement describes a function of

information conceptually but provides no information about the internal workings of the function or
the internal structure of the information.

This project work provides a semantic mechanism for decomposing the problem into sub- problems
that will reduce the complexity of the overall problems. Thus it can be stated that modular
decomposability is present.

The design methodology in this project work enables existing design components to be assembled
into a new system. Hence it can be stated that modular compatibility is also present.

Each module can be understood as a standard unit – which makes it easier to easier to modify and
change. Thus this project work exhibits modular understandability.

The design step used in this project work exhibits modular protection. The design step also produces a
data design, architectural design an interface design and a procedural design.

Page
31
 Modularisation Details:

Data Integrity and Constraints: The primary activity during data design is to select logical
representation of data objects identified during the requirements specification and definition phase. The
selection process may involve algorithmic analysis of alternative structures in order to determine the most
efficient design or may involve the use of the set of modules that provide the desire operation upon some
representation of the object; well designed data can lead to better program structure and modularity and
reduce procedural complexity. In this project work some principles for data specification have been
maintained:

✓ The systematic analysis principles applied to the function and behaviour is applied to the data.

✓ All data structures and the operations to each are identified.

✓ A data dictionary is established and is used to define both data and program design.

✓ Low level data-design decision is deferred until late in the design process.

Only those modules that must make direct use of data structures know the representations of data
structures.

Architectural Design: The primary objective of the architectural design is to develop a modular
program structure and represent a control relationship between the modules. In addition architectural
design needs program structure and data structure defining interfaces that enable a data to flow
throughout the program. Each software design method has strength and weakness. An important
selection factor for the design method is the breadth of applications to which it can be applied.:

Page
32
Data flow oriented design is amenable to a broad change of application areas. Data flow oriented
design is an architectural design method that allows a convenient transition from the analysis model
to a design description of the program structure. The information must enter and exit the software
in an external world form.

Information enters the system along the path that transforms external data into an internal form.
These paths are identified as an incoming-flow. At the kernel of the software a transition
occurs incoming data are passed through a transform centre and begin to move along the paths
that now lead out of software. Data moving along these paths are called outgoing flow. The overall
flow of data occurs in a sequential manner and follows one or only a few straight line paths.
Transaction flow is characterised by data moving along the incoming path that converts external
works of information into a transaction. The transaction is evaluated and based on its value flow
along one of many action paths are initiated. The hub of information flow from which many action
paths forms is called Transaction centre.

Creation of data-flow model: The data flow diagram enables the software engineer to develop
models of the information domain at the same time. As DFD is referred to greater levels of detail,
the analyst performs an implicit functional decomposition of the system.

Page
33
Page
34
Level 1 DFD AI based Mock Test Platform

Page
35
LEVEL 2 DFD for AI based Mock Test Platform:

Page
36
ERD :

Page
37
EID Text

Page
38
 TABLES STRUCTURE
Table name: User

Field Data Type Description

UserID MONGOOSE OBJECT SCHEMA(PK) Unique identifier for user
Name STRING(100) Full name of the user
Email STRING(100) Email address (unique)
Password STRING(100) Encrypted password
Role ENUM 'Student' or 'Admin'
CreatedAt DATETIME Account creation timestamp

Table name: MockTest

Field Data Type Description

TestID MONGOOSE OBJECT SCHEMA (PK) Unique identifier for mock test
Title STRING Title of the test
Subject STRING(100) Subject area of the test
Description TEXT Short description
DifficultyLevel ENUM Difficulty: 'Easy', 'Medium', 'Hard'
TimeLimit MONGOOSE OBJECT SCHEMA Time limit in minutes
CreatedBy MONGOOSE OBJECT SCHEMA(FK) Reference to User who created the test
CreatedAt DATETIME Creation timestamp

Table name: Question

Field Data Type Description
QuestionID MONGOOSE OBJECT SCHEMA(PK) Unique ID for the question
TestID MONGOOSE OBJECT SCHEMA(FK) Reference to related MockTest
Content TEXT The question text/content
QuestionType ENUM 'MCQ' or 'Descriptive'

Page
39
 Field Data Type Description
Marks NUMBER Marks assigned to the question
CorrectAnswer TEXT (nullable) Correct answer (used in MCQ)
Table name: Option
Field Data Type Description
OptionID MONGOOSE OBJECT SCHEMA(PK) Unique identifier for an option
QuestionID MONGOOSE OBJECT SCHEMA(FK) Reference to the related Question
OptionLabel STRING(1) Label such as 'A', 'B', 'C', 'D'
Text STRING(255) Option text
IsCorrect BOOLEAN Whether this option is the correct answer

Table name: Attempt

Field Data Type Description
AttemptID MONGOOSE OBJECT SCHEMA(PK) Unique identifier for each attempt
UserID MONGOOSE OBJECT SCHEMA(FK) Reference to the user attempting the test
TestID MONGOOSE OBJECT SCHEMA(FK) Reference to the mock test
StartTime DATETIME When the attempt started
EndTime DATETIME When the attempt ended
Score FLOAT Total score achieved
AI_Feedback TEXT Feedback generated by AI (optional)

Table name: Answer

Field Data Type Description

AnswerID MONGOOSE OBJECT SCHEMA(PK) Unique ID for each submitted answer
AttemptID MONGOOSE OBJECT SCHEMA(FK) Reference to related Attempt
QuestionID MONGOOSE OBJECT SCHEMA(FK) Reference to the related Question
SelectedOptionID MONGOOSE OBJECT SCHEMA(FK, NULL) Option selected (if MCQ), nullable
AnswerText TEXT Written answer (if Descriptive)

Page
40
 Field Data Type Description
Marksobtain Float Score given to the answer
CorrectAnswer TEXT (nullable) Correct answer (used in MCQ)

Table name :AI Model

Field Data Type Description

ModelID MONGOOSE OBJECT SCHEMA(PK) Unique identifier for AI model
ModelName STRING(100) Name of the AI model
Version STRING(50) Version of the model
Description TEXT Description of what the model does
UsedFor STRING(50) Purpose (e.g., 'Evaluation', 'Feedback')

Table name : Evaluation

Field Data Type Description

EvaluationID MONGOOSE OBJECT SCHEMA(PK) Unique evaluation ID
AnswerID MONGOOSE OBJECT SCHEMA(FK) Reference to the answer being evaluated
ModelID MONGOOSE OBJECT SCHEMA(FK) Reference to AI model used
FeedbackText TEXT Feedback generated by AI
AI_Score FLOAT Score assigned by the AI

Page
41
SOFTWARE ENGINEERING
PROCESS INVOLVEMENT

Page
42
The “Spiral model” software developing process has been chosen for this Project work.
This model is used since the software-modules are attached according to the required
functionality—from time to time.

At first the most essential modules were developed.

The modules are as follows:

➢ PrepPilot

❖ Landing Page

❖ Home

➢ Create Mock Test Form

➢ Create Session Form

❖ Login Form

❖ Registration Form

❖ Mock Test

❖ Test Result

Input & Output Screen according to DFD

Page
43
 Landing Page

Create Mock Test Form

Page
44
Page
45
Code corresponding to Landing Page:

import "./LandingPage.css";

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

// import HERO_IMG from '../../assets/hero-img.png';
import { APP_FEATURES } from '../../utils/data';
// import { useNavigate } from 'react-router-dom';
import { LuSparkles } from "react-icons/lu";
import Model from '../../components/Model';
import SignUp from '../Auth/SignUp';
import { Icon } from "@iconify/vue";
import Login from '../Auth/Login';
import ProfileInfoCard from '../../components/Cards/ProfileInfoCard';
import { UserContext } from '../../context/useContext';
import GotoDashboardCard from '../GotoDashboardCard';
import Logo from '../../logo';

import { createIcons, icons } from "lucide";

import LandingParticles from '../../components/LandingParticles';
import DashboardLayout from "../../components/layouts/DashboardLayout";

const LandingPage = () => {

useEffect(() => {
createIcons({ icons });
}, []);

const { user } = useContext(UserContext);

// const navigate = useNavigate();
const [gotoDashboard, setGotoDashboard] = useState(false);

const [openAuthModal, setOpenAuthModal] = useState(false);

const [currentPage, setCurrentPage] = useState("login");

const handleCTA = () => {

if (!user) {
setOpenAuthModal(true);
} else {
setGotoDashboard(true);
}
};

return (
<div className="font-sans text-gray-200 overflow-x-hidden">

<header className="fixed top-0 w-full z-10 px-4 md:px-8 py-3 backdrop-blur-md">

<div className="max-w-7xl mx-auto flex justify-between items-center">

<Logo />

{user ? (
<ProfileInfoCard />

Page
46
) : (
<button className="inline-flex items-center gap-2 bg-[#12121e99] text-[#00ffe0] border border-[#00ffe055] px-5 py-2 text-
[0.95rem] rounded-full font-medium cursor-pointer backdrop-blur-md shadow-[0_0_6px_rgba(0,255,224,0.15)] hover:bg-
[#1e1e32cc] hover:text-white hover:border-[#00ffe0] hover:shadow-[0_0_12px_rgba(0,255,224,0.4)] hover:-translate-y-0.5
transition-all duration-300" onClick={() => setOpenAuthModal(true)}>
<i data-lucide="log-in" className="w-4 h-4"></i>
<span className="hidden sm:inline">Login / Sign Up</span>
</button>
)}

</div>
</header>
<section className="hero-gradient min-h-screen flex flex-col items-center justify-center py-8 px-4 animate-
[heroShift_20s_ease-in-out_infinite] relative z-0">
<LandingParticles />
<div className="relative z-10 text-center px-4 max-w-3xl">

{/* AI Tagline */}

<p className="text-sm uppercase tracking-wider text-white mb-3 font-semibold">
<span className="text-[#00ffe0] drop-shadow-[0_0_6px_#00ffe066]">Powered by AI.</span> Personalized for You.
</p>
{/* Main Heading */}
<h1 className="text-4xl md:text-5xl font-bold mb-4 text-white drop-shadow-[0_0_12px_#00ffe033]">
<span className="text-slate-300">Introducing</span>{" "}
<span className="text-[#00ffe0] drop-shadow-[0_0_8px_#00ffe077]">PrepPilot</span>
</h1>

{/* Subheading */}

<p className="text-lg md:text-xl text-slate-300 mb-6">
Powered by AI, PrepPilot crafts personalized mock interviews based on your experience, goals, and skills — helping you
prepare for every question before it’s ever asked.
</p>
{/* Feature List with Lucide Icons */}
<ul className="flex justify-center flex-wrap gap-3 mb-6 text-[#a5f3fc]">
<li className="bg-white/10 px-4 py-2 rounded-xl text-sm backdrop-blur-sm flex gap-2 items-center text-[#7dd3fc]">
<i data-lucide="sparkles" className="w-4 h-4 drop-shadow-[0_0_4px_#7dd3fc77]"></i>
AI-Powered Simulations
</li>

<li className="bg-white/10 px-4 py-2 rounded-xl text-sm backdrop-blur-sm flex gap-2 items-center text-[#7dd3fc]">
<i data-lucide="badge-percent" className="w-4 h-4 drop-shadow-[0_0_4px_#7dd3fc77]"></i>
Role & Skill-Based Questions
</li>
<li className="bg-white/10 px-4 py-2 rounded-xl text-sm backdrop-blur-sm flex gap-2 items-center text-[#7dd3fc]">
<i data-lucide="message-circle-question" className="w-4 h-4 drop-shadow-[0_0_4px_#7dd3fc77]"></i>
Interactive Answer Feedback
</li>
</ul>

{/* CTA Button */}

<button className="bg-[#12121ebf] text-[#00ffe0] border-2 border-[#00ffe0] font-semibold px-7 py-3 text-[1.05rem]
rounded-full cursor-pointer shadow-[0_0_8px_rgba(0,255,224,0.25)] hover:bg-[#1e1e32e6] hover:text-white hover:shadow-
[0_0_16px_rgba(0,255,224,0.5)] hover:-translate-y-0.5 transition-all duration-300 text-shadow-
[0_0_6px_rgba(0,255,224,0.3)]" onClick={handleCTA}>

Page
47
Get Started
</button>

{/* Social Proof Line */}

<p className="text-sm text-[#cbd5e1] mt-4 italic">
Thousands of mock interviews generated — and counting.
</p>

</div>
</section>

<div className={`${gotoDashboard ? 'flex' : 'hidden'} fixed inset-0 flex z-100 items-center justify-center overflow-y-
scroll w-full h-full bg-black/40 `} onClick={() => setGotoDashboard(false)}>
<GotoDashboardCard gotoDashboard={gotoDashboard} />
</div>

<section className="py-20 px-8 bg-[#12121e99] backdrop-blur-md border border-white/5 shadow-[0_6px_24px_rgba(0,0,0,0.4)]

text-center max-w-[1100px] mx-auto my-16 rounded-[20px]">
<div className="max-w-[1100px] mx-auto">
<h2 className="text-3xl mb-12 text-slate-100">Why PrepPilot?</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
<div className="bg-[#1e1e28cc] border border-white/5 rounded-2xl p-8 text-slate-200 backdrop-blur-md shadow-
[0_6px_20px_rgba(0,255,255,0.04)] hover:-translate-y-1 hover:shadow-[0_10px_30px_rgba(0,255,255,0.08)] transition
duration-300">
<div className="text-[#00ffe0] drop-shadow-[0_0_4px_#00ffe088] mb-4">
<i data-lucide="brain" className="w-8 h-8 mx-auto"></i>
</div>
<h3 className="text-lg font-semibold mb-2">Smart Interview Simulation</h3>
<p className="text-sm text-slate-300">
AI generates tailored interview questions based on your role, experience, and skills—just like a real recruiter would.
</p>
</div>

<div className="bg-[#1e1e28cc] border border-white/5 rounded-2xl p-8 text-slate-200 backdrop-blur-md shadow-

[0_6px_20px_rgba(0,255,255,0.04)] hover:-translate-y-1 hover:shadow-[0_10px_30px_rgba(0,255,255,0.08)] transition
duration-300">
<div className="text-[#00ffe0] drop-shadow-[0_0_4px_#00ffe088] mb-4">
<i data-lucide="notebook-pen" className="w-8 h-8 mx-auto"></i>
</div>
<h3 className="text-lg font-semibold mb-2">Interactive Practice Mode</h3>
<p className="text-sm text-slate-300">
Answer live questions, get feedback, expand responses, and deepen your understanding with AI-backed coaching.
</p>
</div>
<div className="bg-[#1e1e28cc] border border-white/5 rounded-2xl p-8 text-slate-200 backdrop-blur-md shadow-
[0_6px_20px_rgba(0,255,255,0.04)] hover:-translate-y-1 hover:shadow-[0_10px_30px_rgba(0,255,255,0.08)] transition
duration-300">
<div className="text-[#00ffe0] drop-shadow-[0_0_4px_#00ffe088] mb-4">
<i data-lucide="bar-chart-3" className="w-8 h-8 mx-auto"></i>
</div>
<h3 className="text-lg font-semibold mb-2">Progress Insights</h3>
<p className="text-sm text-slate-300">
Track your performance, identify weak areas, and sharpen your skills with detailed feedback and analytics.

Page
48
</p>
</div>
</div>
</div>
</section>

<section className="py-16 px-6 bg-[#12121e99] backdrop-blur-md border border-white/5 shadow-[0_6px_24px_rgba(0,0,0,0.4)]

text-[#f1f5f9] max-w-[1100px] mx-auto my-16 rounded-xl">
<div className="max-w-[1100px] mx-auto text-center">
<h2 className="text-2xl md:text-3xl font-semibold mb-10 text-white">What Our Users Say</h2>
<div className="flex flex-col md:flex-row gap-6 md:justify-between">
{[
{
text: `"PrepPilot helped me land my first tech internship. The AI questions felt like the real thing!"`,
user: "Aarav M.",
title: "CS Student @ NIT Surat",
img: "https://i.pravatar.cc/100?img=12"
},
{
text: `"I used PrepPilot to prep for senior backend roles—it challenged me exactly where I needed to grow."`,
user: "Sneha R.",
title: "Software Engineer @ Zomato",
img: "https://i.pravatar.cc/100?img=48"
},
{
text: `"It’s like having a personal coach for interviews. The mock exams and follow-up feedback are gold."`,
user: "Karan J.",
title: "Full Stack Dev @ Freelance",
img: "https://i.pravatar.cc/100?img=27"
},

].map((t, i) => (
<div
key={i}
className="bg-white/5 border border-white/10 rounded-xl p-6 md:w-[30%] backdrop-blur-md shadow-
[0_4px_20px_rgba(0,0,0,0.3)] transition-transform hover:-translate-y-1"
>
<p className="text-base leading-relaxed text-slate-300 italic">"{t.text}"</p>
<div className="flex items-center gap-3 mt-6">
<img
src={t.img}
alt={t.user}
className="w-10 h-10 rounded-full border border-white/10 shadow-sm"
/>
<div className="text-left">
<div className="text-sm font-medium text-white">{t.user}</div>
<div className="text-xs text-slate-400">{t.title}</div>
</div>
</div>
</div>
))}
</div>
</div>
</section>
Page
49
<section className="py-20 px-8 bg-[#12121e99] backdrop-blur-md border border-white/5 shadow-[0_6px_24px_rgba(0,0,0,0.4)]
text-[#f1f5f9] text-center max-w-[1100px] mx-auto my-16 rounded-xl">
<h2 className="text-2xl md:text-3xl font-semibold mb-12">How It Works</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 max-w-[1000px] mx-auto">

<div className="bg-[#1e1e28cc] border border-white/10 rounded-2xl p-8 backdrop-blur-md shadow-

[0_6px_20px_rgba(0,255,255,0.04)]">
<div className="text-[#7dd3fc] mb-4">
<i data-lucide="user-search" className="w-8 h-8 mx-auto drop-shadow-[0_0_4px_#7dd3fc88]"></i>
</div>
<div className="text-lg font-semibold text-white mb-2">1. Set Your Interview Goal</div>
<div className="text-sm text-slate-300">
Choose the role you're targeting, your experience level, and the tech skills you want to focus on.
</div>
</div>

<div className="bg-[#1e1e28cc] border border-white/10 rounded-2xl p-8 backdrop-blur-md shadow-

[0_6px_20px_rgba(0,255,255,0.04)]">
<div className="text-[#7dd3fc] mb-4">
<i data-lucide="brain-cog" className="w-8 h-8 mx-auto drop-shadow-[0_0_4px_#7dd3fc88]"></i>
</div>
<div className="text-lg font-semibold text-white mb-2">2. Practice with AI</div>
<div className="text-sm text-slate-300">
PrepPilot generates custom interview questions, simulates live sessions, and helps you answer with confidence.
</div>
</div>

<div className="bg-[#1e1e28cc] border border-white/10 rounded-2xl p-8 backdrop-blur-md shadow-

[0_6px_20px_rgba(0,255,255,0.04)]">
<div className="text-[#7dd3fc] mb-4">
<i data-lucide="bar-chart-4" className="w-8 h-8 mx-auto drop-shadow-[0_0_4px_#7dd3fc88]"></i>
</div>
<div className="text-lg font-semibold text-white mb-2">3. Track & Improve</div>
<div className="text-sm text-slate-300">
Get real-time feedback, identify weak spots, and monitor your progress as you get closer to interview-ready.
</div>
</div>

</div>
</section>

{/* <section className="py-20 px-8 bg-[#12121e99] backdrop-blur-md border border-white/5 shadow-

[0_6px_24px_rgba(0,0,0,0.4)] text-[#f1f5f9] text-center max-w-[1100px] mx-auto my-16 rounded-xl">
<h2 className="text-2xl md:text-3xl font-semibold mb-6">🎤 Try a Demo Interview</h2>
<p className="text-slate-300 max-w-xl mx-auto mb-10 text-sm md:text-base">
Select a role and skillset to preview the kind of questions PrepPilot generates for you.
</p>
<div className="bg-[#1e1e28cc] border border-white/10 rounded-2xl p-6 backdrop-blur-md max-w-2xl mx-auto text-left
shadow-[0_6px_20px_rgba(0,255,255,0.04)]">
<div className="text-xs text-sky-300 font-medium mb-2">Frontend Developer — 2 Years</div>
<div className="text-base text-white font-semibold mb-2">🧠 What is the virtual DOM in React, and how does it improve
performance?</div>
<p className="text-sm text-slate-400">
This is an example of how PrepPilot generates technical questions tailored to your experience and focus.

Page
50
</p>
</div>
<button className="mt-6 inline-flex items-center gap-2 bg-[#12121e99] text-[#00ffe0] border border-[#00ffe055] px-5 py-2
text-[0.95rem] rounded-full font-medium cursor-pointer backdrop-blur-md shadow-[0_0_6px_rgba(0,255,224,0.15)] hover:bg-
[#1e1e32cc] hover:text-white hover:border-[#00ffe0] hover:shadow-[0_0_12px_rgba(0,255,224,0.4)] hover:-translate-y-0.5
transition-all duration-300">
Generate Another
</button>
</section> */}
<section className="py-20 px-8 bg-[#12121e99] backdrop-blur-md border border-white/5 shadow-[0_6px_24px_rgba(0,0,0,0.4)]
text-[#f1f5f9] text-center max-w-[1100px] mx-auto my-16 rounded-xl">
<h2 className="text-2xl md:text-3xl font-semibold mb-10">❓ Frequently Asked Questions</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8 text-left max-w-4xl mx-auto">
<div>
<h3 className="text-white font-semibold text-base mb-2">Who is PrepPilot for?</h3>
<p className="text-sm text-slate-400">Whether you’re a fresher, mid-level dev, or switching domains—PrepPilot adapts to
your goals.</p>
</div>
<div>
<h3 className="text-white font-semibold text-base mb-2">What kind of questions will I get?</h3>
<p className="text-sm text-slate-400">AI-generated role-specific technical, behavioral, and system design questions based
on your inputs.</p>
</div

<div>
<h3 className="text-white font-semibold text-base mb-2">Is PrepPilot free to use?</h3>
<p className="text-sm text-slate-400">Yes! You can get started for free. Advanced features may be part of future premium
plans.</p>
</div>
<div>
<h3 className="text-white font-semibold text-base mb-2">Can I track my progress?</h3>
<p className="text-sm text-slate-400">Yes, PrepPilot gives you performance insights and lets you revisit previous
sessions.</p>
</div>
</div>
</section>

<footer className="bg-[#0b0b12] text-[#a1a1aa] py-12 text-center border-t border-white/5">

<div className="max-w-5xl mx-auto flex flex-col gap-6 items-center">
<Logo />
<div className="flex flex-wrap justify-center gap-4 text-sm">
<a href="#" className="hover:text-white">Privacy</a>
<a href="#" className="hover:text-white">Terms</a>
<a href="#" className="hover:text-white">Contact</a>
<a href="#" className="hover:text-white">LinkedIn</a>
<a href="#" className="hover:text-white">GitHub</a>
</div>
<div className="text-xs text-[#6b7280]">© 2025 PrepPilot. All rights reserved.</div>
</div>
</footer>
<Model
isOpen={openAuthModal}
onClose={() => {
setOpenAuthModal(false);

Page
51
setCurrentPage("login");
}}
hideHeader
>
{currentPage === "login" && (
<Login setCurrentPage={setCurrentPage} openAuthModel={setOpenAuthModal} />
)}
{currentPage === "signup" && (
<SignUp setCurrentPage={setCurrentPage} openAuthModel={setOpenAuthModal} />
)}
</Model>
</div>
);
}

export default LandingPage

Code corresponding to Mock Test Form:

import React, { useState } from "react";

import { useNavigate } from "react-router-dom";
import { FaSpinner } from "react-icons/fa6";
import axiosInstance from "../../utils/axiosInstance";
import { API_PATHS } from "../../utils/apiPaths";

const CreateMockTestForm = () => {

const [formData, setFormData] = useState({
course: "",
difficulty: "",
topicsToFocus: "",
description: "",
});
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const navigate = useNavigate();
const handleChange = (key, value) => {
setFormData((prevData) => ({
...prevData,
[key]: value,
}));
};
const handleCreateSession = async (e) => {
e.preventDefault();

const { course, difficulty, topicsToFocus} = formData;

if (!course || !difficulty || !topicsToFocus) {
setError("Please fill all the required fields.");
return;

Page
52
 if (difficulty !== "Easy" && difficulty !== "Medium" && difficulty !== "Hard" && difficulty !== "easy" &&
difficulty !== "medium" && difficulty !== "hard") {
setError("Please select a valid question level (Easy, Medium, Hard).");
return;
}

setError(null);
setIsLoading(true);

try {
const aiResponse = await axiosInstance.post(
API_PATHS.AI.GENERATE_MOCK_QUESTIONS,
{
course,
difficulty,
topicsToFocus,
numberOfQuestions: 20,
}
);

const responseData = aiResponse.data?.data;

// Create a local variable instead of relying on state update

const sessionTimeLimit = responseData?.Time || 1200;

if (!responseData.questions || !Array.isArray(responseData.questions)) {
throw new Error("Invalid response format from AI service");
}

const response = await axiosInstance.post(

API_PATHS.SESSION.CREATE_MOCK_SESSION, {
...formData,
timeLimit: sessionTimeLimit,
questions: responseData.questions // ✅ Use the local variable
});

if (response.data?.session?._id) {
navigate(`/mock-test/${response.data?.session._id}`);
}
setIsLoading(false);
} catch (err) {
console.log(err)
if (err.response && err.response.data.message) {
setError(err.response.data.message);
} else {
setError("An error occurred while creating the session.");
}
} finally {
setIsLoading(false);
}
}

Page
53
return (
<div className="w-full px-4 flex flex-col justify-center text-slate-200">
<h3 className="text-xl font-semibold text-white mb-1">
Start a New Interview Journey
</h3>

<p className="text-sm text-slate-400 mb-6">

Fill out a few quick details and unlock your personalized set of Mock Test!
</p>

<form onSubmit={handleCreateSession} className="flex flex-col gap-5">

{/* Course Name */}
<div className="flex flex-col gap-1.5">
<label htmlFor="role" className="text-sm font-medium text-slate-300">
Course Name
</label>
<input
id="role"
type="text"
value={formData.course}
onChange={({ target }) => handleChange("course", target.value)}
placeholder="(e.g., BCA, MCA, BTech etc.)"
className="bg-[#1e1e28] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-slate-200
placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#00ffe0]/60 shadow-inner transition"
/>
</div>

{/* Question Level */}

<div className="flex flex-col gap-1.5">
<label htmlFor="experience" className="text-sm font-medium text-slate-300">
Questions Level
</label>
<input
id="experience"
type="text"
value={formData.difficulty}
onChange={({ target }) => handleChange("difficulty", target.value)}
placeholder="(Easy, Medium, Hard)"
className="bg-[#1e1e28] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-slate-200
placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#00ffe0]/60 shadow-inner transition"
/>
</div>

{/* Topics */}

<div className="flex flex-col gap-1.5">
<label htmlFor="topicsToFocus" className="text-sm font-medium text-slate-300">
Topics to Focus On
</label>
<input
id="topicsToFocus"
type="text"
value={formData.topicsToFocus}
onChange={({ target }) => handleChange("topicsToFocus", target.value)}
placeholder="(e.g., C, Python Programming, Data Structures etc.)"

Page
54
 className="bg-[#1e1e28] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-slate-200 placeholder-
slate-500 focus:outline-none focus:ring-2 focus:ring-[#00ffe0]/60 shadow-inner transition"
/>
</div>
{/* Error */}
{error && <p className="text-red-500 text-xs -mt-2">{error}</p>}

{/* Submit Button */}

<button
type="submit"
className={`w-full bg-[#00ffe0]/10 text-[#00ffe0] border border-[#00ffe0]/40 rounded-lg py-2.5 mt-2 font-
semibold hover:bg-[#00ffe0]/20 hover:text-white transition-all duration-300 shadow-[0_0_10px_rgba(0,255,224,0.1)]
${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
disabled={isLoading}
>

{isLoading && <FaSpinner className="animate-spin inline-block mr-2" />}

Generate Mock Test Session
</button>
</form>
</div>

)
}

export default CreateMockTestForm

Code corresponding to Create session Form:

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { FaSpinner } from "react-icons/fa6";
import axiosInstance from "../../utils/axiosInstance";
import { API_PATHS } from "../../utils/apiPaths";

const CreateSessionForm = () => {

const [formData, setFormData] = useState({
role: "",
experience: "",
topicsToFocus: "",
description: "",
});
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const navigate = useNavigate();
const handleChange = (key, value) => {
setFormData((prevData) => ({
...prevData,
[key]: value,
}));
};
const handleCreateSession = async (e) => {
e.preventDefault();
const { role, experience, topicsToFocus } = formData;
if (!role || !experience || !topicsToFocus) {
Page
55
 setError("Please fill all the required fields.");
return;
}
setError(null);
setIsLoading(true);

// console.log(formData);
try {
// console.log("start creating");
const aiResponse = await axiosInstance.post(

API_PATHS.AI.GENERATE_QUESTIONS,
{
role,
experience,
topicsToFocus,
numberOfQuestions: 10,
}
);
// console.log(aiResponse);

// Should be array like [{question: "", answer: ""}, ...]

const responseData = aiResponse.data?.data;
if (!responseData || !Array.isArray(responseData)) {
throw new Error("Invalid response format from AI service");
}

const validatedQuestions = responseData.map(q => {

if (!q.question || !q.answer) {
throw new Error("Invalid question format in AI response");
}
return {
question: q.question.trim(),
answer: q.answer.trim()
};
});
const response = await axiosInstance.post(
API_PATHS.SESSION.CREATE,{
...formData,
questions: validatedQuestions,
});

if(response.data?.session?._id){
navigate(`/interview-prep/${response.data?.session._id}`);
}
setIsLoading(false);
} catch (err) {
// // console.log(err)
if(err.response && err.response.data.message) {
setError(err.response.data.message);
}else {
setError("An error occurred while creating the session.");
}
}finally {

Page
56
 setIsLoading(false);
}
};

return <div className="w-[90vw] md:w-[35vw] p-7 flex flex-col justify-center ">

<h3 className="text-lg font-semibold text-white">
Start a New Interview Journey
</h3>
<p className="text-xs text-slate-400 mt-[5px] mb-3">
Fill out a few quick details and unlock your personalized set of
interview questions!
</p>
<form onSubmit={handleCreateSession} className="flex flex-col gap-5">
{/* Course Name */}
<div className="flex flex-col gap-1.5">
<label htmlFor="role" className="text-sm font-medium text-slate-300">
Role
</label>
<input
id="role"
type="text"
value={formData.role}
onChange={({ target }) => handleChange("role", target.value)}
placeholder="(e.g., (e.g., Frontend Developer, Data Scientist)"
className="bg-[#1e1e28] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-slate-200
placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#00ffe0]/60 shadow-inner transition"
/>
</div>

{/* Question Level */}

<div className="flex flex-col gap-1.5">
<label htmlFor="experience" className="text-sm font-medium text-slate-300">
Experience
</label>
<input
id="experience"
type="text"
value={formData.experience}
onChange={({ target }) => handleChange("experience", target.value)}
placeholder="(e.g., 1 year, 3 years, 5+ years)"
className="bg-[#1e1e28] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-slate-200
placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#00ffe0]/60 shadow-inner transition"
/>
</div>
{/* Topics */}
<div className="flex flex-col gap-1.5">
<label htmlFor="topicsToFocus" className="text-sm font-medium text-slate-300">
Topics to Focus On
</label>
<input
id="topicsToFocus"
type="text"
value={formData.topicsToFocus}
onChange={({ target }) => handleChange("topicsToFocus", target.value)}

Page
57
 placeholder="(Comma-separated, e.g., React, Node.js, MongoDB)"
className="bg-[#1e1e28] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-slate-200
placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#00ffe0]/60 shadow-inner transition"
/>
</div>

{/* Description */}

<div className="flex flex-col gap-1.5">
<label htmlFor="description" className="text-sm font-medium text-slate-300">
Description
</label>
<input
id="description"
type="text"
value={formData.description}
onChange={({ target }) => handleChange("description", target.value)}
placeholder="(Any specific goals or notes for this session)"
className="bg-[#1e1e28] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-slate-200
placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#00ffe0]/60 shadow-inner transition"
/>
</div>

{/* Error */}

{error && <p className="text-red-500 text-xs -mt-2">{error}</p>}

{/* Submit Button */}

<button
type="submit"
className={`w-full bg-[#00ffe0]/10 text-[#00ffe0] border border-[#00ffe0]/40 rounded-lg py-2.5
mt-2 font-semibold hover:bg-[#00ffe0]/20 hover:text-white transition-all duration-300 shadow-
[0_0_10px_rgba(0,255,224,0.1)] ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
disabled={isLoading}
>
{isLoading && <FaSpinner className="animate-spin inline-block mr-2" />}
Generate Interview Session
</button>
</form>
</div>
}

export default CreateSessionForm

Page
58
Login Page

Page
59
Registration Page

Page
60
Code corresponding to Login Form:
import React, { useContext, useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { validateEmail } from '../../utils/helper';
import axiosInstance from '../../utils/axiosInstance';
import { API_PATHS } from '../../utils/apiPaths';
import { UserContext } from '../../context/useContext';

const Login = ({ setCurrentPage, openAuthModel }) => {

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState(null);
const navigate = useNavigate();

const {updateUser} = useContext(UserContext);

// Handle Login Form Submit

const handleLogin = async (e) => {
e.preventDefault();

// Perform login logic here

if (!validateEmail(email)) {
setError("Email is invalid");
return;
}

if (!password) {
setError("Password is required");
return;
}

setError(null);

// Login API call

try {
const response = await axiosInstance.post(API_PATHS.AUTH.LOGIN, {
email,
password,
});

const { token } = response.data;

if (token) {
localStorage.setItem("token", token);
updateUser(response.data);
openAuthModel(false);
} else {
setError("Login failed. Please try again.");
}

Page
61
 } catch (err) {
if (err.response && err.response.data.message) {
setError(err.response.data.message);
} else {
setError("Something went wrong. Please try again.");
}
}
};

return (
<div className="w-full px-4 flex flex-col justify-center text-slate-200">
<h3 className="text-xl font-semibold text-white mb-1">Welcome Back</h3>
<p className="text-sm text-slate-400 mb-6">
Please enter your details to log in.
</p>

<form onSubmit={handleLogin} className="flex flex-col gap-5">

{/* Email */}
<div className="flex flex-col gap-1.5">
<label htmlFor="email" className="text-sm font-medium text-slate-300">
Email Address
</label>
<input
id="email"
type="email"
placeholder="[email protected]"
value={email}
onChange={({ target }) => setEmail(target.value)}
className="bg-[#1e1e28] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-slate-200 placeholder-
slate-500 focus:outline-none focus:ring-2 focus:ring-[#00ffe0]/60 shadow-inner transition"
/>
</div>

{/* Password */}

<div className="flex flex-col gap-1.5">
<label htmlFor="password" className="text-sm font-medium text-slate-300">
Password
</label>
<input
id="password"
type="password"
placeholder="Min 8 characters"
value={password}
onChange={({ target }) => setPassword(target.value)}
className="bg-[#1e1e28] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-slate-200 placeholder-
slate-500 focus:outline-none focus:ring-2 focus:ring-[#00ffe0]/60 shadow-inner transition"
/>
</div>
{/* Error */}
{error && <p className="text-red-500 text-xs -mt-3">{error}</p>}

Page
62
 {/* Login Button */}
<button
type="submit"
className="w-full bg-[#00ffe0]/10 text-[#00ffe0] border border-[#00ffe0]/40 rounded-lg py-2.5 mt-2 font-
semibold hover:bg-[#00ffe0]/20 hover:text-white transition-all duration-300 shadow-[0_0_10px_rgba(0,255,224,0.1)]"
>
LOGIN
</button>

{/* Switch to Signup */}

<p className="text-sm text-slate-400 mt-4 text-center">
Don’t have an account?
<button
type="button"
className="text-[#00ffe0] font-medium underline ml-1 hover:text-white transition"
onClick={() => setCurrentPage("signup")}
>
Sign Up
</button>
</p>
</form>
</div>

);
};

export default Login

Code corresponding to Registration Form:

import { useContext, useState } from "react";

import { useNavigate } from "react-router-dom";
import ProfilePhotoSelector from '../../components/Inputs/ProfilePhotoSelector.jsx';
import { validateEmail } from "../../utils/helper.js";
import { UserContext } from "../../context/useContext.jsx";
import { API_PATHS } from "../../utils/apiPaths.js";
import axiosInstance from "../../utils/axiosInstance.js";

const SignUp = ({ setCurrentPage, openAuthModel }) => {

const [profilePic, setProfilePic] = useState(null);
const [fullName, setFullName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const { updateUser } = useContext(UserContext);

Page
63
// Handle Sign Up Form Submit
const handleSignUp = async (e) => {
e.preventDefault();

let profilePicUrl = "";

if(!fullName) {
setError("Please Enter Full Name ");
return;
}
if(!validateEmail(email)) {
setError("please enter a valid email");
return;
}
if(!password) {
setError("Password is required");
return;
}

setError("");

// Sing Up API call

try{
setIsLoading(true);
const formData = new FormData();
if(profilePic) {
formData.append("image", profilePic);
formData.append("name", fullName);
formData.append("email", email);
formData.append("password", password);
}
const response = await axiosInstance.post(API_PATHS.AUTH.REGISTER, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
// console.log(response);

const { token } = response.data;

if(token) {
// Update User Context
localStorage.setItem("token", token);
updateUser(response.data);
openAuthModel(false)
}

} catch (err) {
console.log(err);
if(err.response && err.response.data.message) {
setError(err.response.data.message);
}else{
setError("Something went wrong. Please try again.");
}

Page
64
 }

finally {
setIsLoading(false);
}
};

return (
<div className="w-full px-4 flex flex-col justify-center text-slate-200">
<h3 className="text-xl font-semibold text-white mb-1">Create an Account</h3>

<p className="text-sm text-slate-400 mb-6">

Join us today by entering your details below.
</p>

<form onSubmit={handleSignUp} className="flex flex-col gap-5">

{/* Profile Photo Upload */}
<ProfilePhotoSelector image={profilePic} setImage={setProfilePic} />

{/* Input Fields */}

<div className="flex flex-col gap-5">
<div className="flex flex-col gap-1.5">
<label htmlFor="fullname" className="text-sm font-medium text-slate-300">Full Name</label>
<input
id="fullname"
type="text"
value={fullName}
onChange={({ target }) => setFullName(target.value)}
placeholder="John"
className="bg-[#1e1e28] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-slate-200 placeholder-
slate-500 focus:outline-none focus:ring-2 focus:ring-[#00ffe0]/60 shadow-inner transition"
/>
</div>

<label htmlFor="email" className="text-sm font-medium text-slate-300">Email Address</label>

<input
id="email"
type="email"
value={email}
onChange={({ target }) => setEmail(target.value)}
placeholder="[email protected]"
className="bg-[#1e1e28] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-slate-200 placeholder-
slate-500 focus:outline-none focus:ring-2 focus:ring-[#00ffe0]/60 shadow-inner transition"
/>
</div>
<div className="flex flex-col gap-1.5">
<label htmlFor="password" className="text-sm font-medium text-slate-300">Password</label>
<input
id="password"
type="password"
value={password}
onChange={({ target }) => setPassword(target.value)}
placeholder="Min 8 Characters"

Page
65
 className="bg-[#1e1e28] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-slate-200 placeholder-
slate-500 focus:outline-none focus:ring-2 focus:ring-[#00ffe0]/60 shadow-inner transition"
/>

</div>
</div>

{/* Error */}

{error && <p className="text-red-500 text-xs -mt-2">{error}</p>}

{/* Submit Button */}

<button
type="submit"
className={`w-full bg-[#00ffe0]/10 text-[#00ffe0] border border-[#00ffe0]/40 rounded-lg py-2.5 mt-2 font-
semibold hover:bg-[#00ffe0]/20 hover:text-white transition-all duration-300 shadow-[0_0_10px_rgba(0,255,224,0.1)]
${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
>
SIGN UP
</button>

{/* Login Switch */}

<p className="text-sm text-slate-400 mt-4 text-center">
Already have an account?
<button
type="button"
className="text-[#00ffe0] font-medium underline ml-1 hover:text-white transition"
onClick={() => setCurrentPage("login")}
>
Login
</button>
</p>
</form>
</div>

);

};

export default SignUp;

Page
66
Mock Test Dashbord

Mock Test Result

Page
67
Code corresponding to Mock Test Dashboard:

import { useEffect, useState } from 'react'

import { LuPlus, LuBook, } from "react-icons/lu";
import { CARD_BG } from "../../utils/data";
import toast from "react-hot-toast";
import DashboardLayout from '../../components/layouts/DashboardLayout.jsx';
import { useNavigate } from 'react-router-dom';
import axiosInstance from '../../utils/axiosInstance.js';
import { API_PATHS } from '../../utils/apiPaths.js';
import moment from 'moment';
import SummaryCard from '../../components/Cards/SummaryCard.jsx';
import Model from '../../components/Model.jsx';
import CreateSessionForm from './CreateSessionForm.jsx';
import DeleteAlertContent from '../../components/Loaders/DeleteAlertContent.jsx';

const Dashboard = () => {

const navigate = useNavigate();
const [openCreateModal, setOpenCreateModal] = useState(false);
const [sessions, setSessions] = useState(null);
const [openDeleteAlert, setOpenDeleteAlert] = useState({
open: false,
data: null,
});
const [isLoading, setIsLoading] = useState(false);
const fetchAllSessions = async () => {
try {
setIsLoading(true);
const response = await axiosInstance.get(API_PATHS.SESSION.GET_ALL);
setSessions(response.data.sessions);
}

Page
68
catch (error) {
console.error("Error fetching sessions:", error);
toast.error("Failed to fetch sessions");
}
finally {
setIsLoading(false);
}
};

const deleteSession = async (sessionData) => {

try {
const response = await axiosInstance.delete(API_PATHS.SESSION.DELETE(sessionData._id));
// console.log("Session deleted:", response.data);
if (response.status === 200) {
toast.success("Session deleted successfully");
fetchAllSessions();
}
} catch (error) {
console.error("Error deleting session:", error);
toast.error("Failed to delete session");
}
};

useEffect(() => {
fetchAllSessions();
}, []);
return (
<DashboardLayout>
<div className="min-h-screen bg-[#12121e] relative">
{/* Background blur elements matching LandingPage */}
<div className="w-1/3 h-1/3 bg-[#00ffe0]/5 blur-[65px] absolute top-0 left-0 opacity-60" />
<div className="w-1/4 h-1/4 bg-[#7dd3fc]/5 blur-[50px] absolute bottom-0 right-0 opacity-40" />

<div className="container mx-auto pt-20 pb-8 px-4 relative ">

{/* Sessions Grid */}

<div className="mb-8">
<h2 className="text-2xl text-white font-medium mb-6">Your Interview Sessions</h2>
{sessions?.length > 0 ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{sessions?.map((data, index) => (
<SummaryCard
key={data._id}
colors={CARD_BG[index % CARD_BG.length]}
role={data?.role || ""}
topicsToFocus={data?.topicsToFocus || ""}
experience={data?.experience || ""}
questions={data?.questions?.length || 0}
description={data?.description || ""}
lastUpdated={data?.updatedAt ? moment(data.updatedAt).format("Do MMM YYYY") : ""}
onSelect={() => {
navigate(`/interview-prep/${data?._id}`)
}}

Page
69
 onDelete={() => {
setOpenDeleteAlert({
open: true,
data: data,
});
}}
/>
))}
</div>
) : sessions?.length === 0 ? (
<div className="text-center py-16">
<div className="bg-[#1e1e28cc] border border-white/10 rounded-2xl p-12 backdrop-blur-md shadow-
[0_6px_20px_rgba(0,255,255,0.04)] max-w-md mx-auto">
<div className="w-20 h-20 bg-[#00ffe0]/20 rounded-full flex items-center justify-center mx-auto mb-6">
<LuBook className="text-[#00ffe0] text-3xl drop-shadow-[0_0_4px_#00ffe088]" />
</div>
<h3 className="text-white text-xl font-medium mb-3">No Interview Sessions Yet</h3>
<p className="text-slate-300 mb-6">Create your first interview session to get started with AI-powered
preparation</p>
<button
onClick={() => setOpenCreateModal(true)}
className="bg-[#12121e] text-[#00ffe0] border-2 border-[#00ffe0] font-semibold px-6 py-3 rounded-full
cursor-pointer shadow-[0_0_8px_rgba(0,255,224,0.25)] hover:bg-[#1e1e32] hover:text-white hover:shadow-
[0_0_16px_rgba(0,255,224,0.5)] hover:-translate-y-0.5 transition-all duration-300"
>
Create Session
</button>
</div>
</div>
) : (
<div className="min-h-screen bg-[#12121e] flex items-center justify-center pt-16">
<div className="bg-[#1e1e28cc] backdrop-blur-md rounded-2xl p-8 border border-white/10 shadow-
[0_6px_24px_rgba(0,0,0,0.4)]">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#00ffe0] mx-auto mb-4"></div>
<p className="text-slate-200 text-center">Loading Interview Sessions...</p>
</div>
</div>
)}
</div>
{/* Floating Add Button matching LandingPage CTA style */}
<button
className="fixed bottom-8 right-8 w-14 h-14 bg-[#12121e] text-[#00ffe0] border-2 border-[#00ffe0] rounded-full flex
items-center justify-center shadow-[0_0_8px_rgba(0,255,224,0.25)] hover:bg-[#1e1e32] hover:text-white hover:shadow-
[0_0_16px_rgba(0,255,224,0.5)] hover:-translate-y-0.5 transition-all duration-300 z-50"
onClick={() => setOpenCreateModal(true)}
>
<LuPlus className="text-xl" />
</button>
</div>
{/* Modals */}
<Model
isOpen={openCreateModal}
onClose={() => setOpenCreateModal(false)}
hideHeader
>

Page
70
 <div>
<CreateSessionForm />
</div>
</Model>

<Model
isOpen={openDeleteAlert.open}
onClose={() => setOpenDeleteAlert({ open: false, data: null })}
title="Delete Alert"
>
<div className="w-[100%]">
<DeleteAlertContent
content={`Are you sure you want to delete the session for ${openDeleteAlert?.data?.role} role?`}
onDelete={() => {
deleteSession(openDeleteAlert?.data);
setOpenDeleteAlert({ open: false, data: null });
}}
loading={isLoading}
/>
</div>
</Model>
</div>
</DashboardLayout>
)
}

export default Dashboard

Code corresponding to Mock Test Result:

import { useState, useEffect } from 'react';

import { useParams, useNavigate } from 'react-router-dom';
import DashboardLayout from "../../components/layouts/DashboardLayout";
import { API_PATHS } from '../../utils/apiPaths';
import axiosInstance from '../../utils/axiosInstance';
import { DoughnutChart } from './DoughnutChart';
import { IoIosCheckmarkCircle } from "react-icons/io";
import { FaTimesCircle } from "react-icons/fa";

const TestResult = () => {

const { sessionId } = useParams();
const navigate = useNavigate();

const [loading, setLoading] = useState(true);

const [error, setError] = useState(null);
const [metaData, setMetaData] = useState(null);
const [totalTime, setTotalTime] = useState(0);

// Fetch session data on component mount

useEffect(() => {

Page
71
 const fetchSessionData = async () => {
try {
const response = await axiosInstance.get(API_PATHS.ANSWER.GET_ANSWER_BY_ID(sessionId));

if (response.status !== 200) {

throw new Error('Failed to fetch session data');
}
const data = response.data.answer;
console.log('Fetched session data:', data);
setMetaData(data);
setTotalTime(response?.data.totalTime || 0);
setLoading(false);
} catch (err) {
console.error('Error fetching session:', err);
setError('Failed to load quiz session. Please try again.');
setLoading(false);
}
};

if (sessionId) {
fetchSessionData();
}
}, [sessionId]);

// Loading state
if (loading) {
return (
<DashboardLayout>
<div className="min-h-screen bg-[#12121e] flex items-center justify-center pt-16">
<div className="bg-[#1e1e28cc] backdrop-blur-md rounded-2xl p-8 border border-white/10 shadow-
[0_6px_24px_rgba(0,0,0,0.4)]">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#00ffe0] mx-auto mb-
4"></div>
<p className="text-slate-200 text-center">Loading quiz result...</p>
</div>
</div>
</DashboardLayout>
);
}

// Error state
if (error) {
return (
<DashboardLayout>
<div className="min-h-screen bg-[#12121e] flex items-center justify-center pt-16">
<div className="bg-[#1e1e28cc] backdrop-blur-md rounded-2xl p-8 border border-red-500/30 shadow-
[0_6px_24px_rgba(220,38,38,0.2)] max-w-md">
<p className="text-slate-200 text-center mb-4">{error}</p>
<button
onClick={() => navigate('/dashboard/mock-test')}
className="w-full px-4 py-2 bg-[#00ffe0] text-[#12121e] rounded-lg hover:bg-[#00e6cc]
transition-colors font-semibold"
>

Page
72
 Back to Dashboard
</button>
</div>
</div>
</DashboardLayout>
);
}

const percentage = Math.floor((metaData.correctAnswer / metaData.questions.length) * 100);

return (
<DashboardLayout>
<div className="min-h-screen bg-[#12121e] pt-16">
{/* Background blur elements matching MockTest */}
<div className="w-1/3 h-1/3 bg-[#00ffe0]/5 blur-[65px] absolute top-0 left-0 opacity-60" />
<div className="w-1/4 h-1/4 bg-[#7dd3fc]/5 blur-[50px] absolute bottom-0 right-0 opacity-40" />
<div className="p-4 relative ">
<div className="max-w-7xl mx-auto">

{/* Header Section */}

<div className="mb-8">
<div className="flex sm:flex-row items-center justify-between mb-4 gap-4">
<div className='flex md:w-[58%] md:justify-end'>
<h1 className="text-3xl md:text-4xl font-bold text-white mb-2">
Test <span className="text-[#00ffe0]">Results</span>
</h1>
</div>
<button
onClick={() => navigate('/dashboard/mock-test')}
className="flex items-center gap-2 px-6 py-3 bg-white/5 border border-white/10
rounded-xl text-slate-300 font-medium transition-all duration-200 hover:bg-white/10"
>
Dashboard
</button>
</div>
</div>

<div className="flex flex-col gap-10">

{/* Left Panel - Performance Overview */}

<div className="flex flex-col lg:flex-row justify-center gap-6">

{/* Score Card */}

<div className="w-full lg:w-1/3 bg-[#1e1e28cc] backdrop-blur-md rounded-2xl p-6 border
border-white/10 shadow-[0_6px_24px_rgba(0,0,0,0.4)] mb-4 lg:mb-0">
<div className="text-center mb-6">
<div className="inline-flex items-center justify-center w-16 h-16 bg-[#00ffe0]/20
rounded-full mb-4">
{/* Icon */}
</div>

Page
73
 <h2 className="text-2xl font-bold text-white mb-2">Your Score</h2>
<div className="text-4xl font-bold text-[#00ffe0] mb-
2">{metaData.correctAnswer}/{metaData.questions.length}</div>
<div className="text-2xl font-semibold text-[#7dd3fc]">{percentage}%</div>
</div>

{/* Performance Stats */}

<div className="space-y-3 ">
<div className="flex items-center justify-between p-3 bg-green-500/10 border
border-green-500/30 rounded-xl">
<div className="flex items-center gap-2">
<IoIosCheckmarkCircle className="text-green-400" size={18} />
<span className="text-slate-300 text-sm">Correct</span>
</div>
<span className="text-green-400 font-semibold">{metaData.correctAnswer}</span>
</div>

<div className="flex items-center justify-between p-3 bg-red-500/10 border

border-red-500/30 rounded-xl">
<div className="flex items-center gap-2">
<FaTimesCircle className="text-red-400" size={18} />
<span className="text-slate-300 text-sm">Incorrect</span>
</div>
<span className="text-red-400 font-semibold">{metaData.incorrectAnswer}</span>
</div>

<div className="flex items-center justify-between p-3 bg-amber-500/10 border

border-amber-500/30 rounded-xl">
<div className="flex items-center gap-2">
<span className="text-slate-300 text-sm">Unanswered</span>
</div>
<span className="text-amber-400 font-semibold">{metaData.unAnswered}</span>
</div>
</div>
</div>

{/* Quiz Info */}

<div className="w-full lg:w-1/3 bg-[#1e1e28cc] backdrop-blur-md rounded-2xl p-6 border
border-white/10 shadow-[0_6px_24px_rgba(0,0,0,0.4)] mb-4 lg:mb-0">
<h3 className="text-2xl font-semibold text-center text-white mb-4">Quiz
Information</h3>

<div className="space-y-3">
<div className="flex items-center gap-3">
<p className="text-slate-300">Course: <span className="text-[#7dd3fc] font-
medium">{metaData.course}</span></p>
</div>
<div className="flex items-center gap-3">
<span className="text-slate-300 text-sm">Topics:
{metaData.topicsToFocus}</span>
</div>

<div className="flex items-center gap-3">

Page
74
 <span className="text-slate-300 text-sm">Total Questions:</span>
<span className="text-slate-300 text-sm">{metaData.questions.length}
Questions</span>
</div>
</div>

{/* Stats Pills similar to MockTest */}

<div className="flex flex-wrap gap-2 mt-4">
<div className="bg-white/5 border border-white/10 rounded-full px-3 py-1">
<span className="text-[#00ffe0] text-xs font-
medium">{metaData.questions.length * 1} marks</span>
</div>
<div className="bg-white/5 border border-white/10 rounded-full px-3 py-1">
<span className="text-[#00ffe0] text-xs font-
medium">{metaData.questions.length} Q&A</span>
</div>
<div className="bg-white/5 border border-white/10 rounded-full px-3 py-1">
<span className="text-[#00ffe0] text-xs font-medium">{totalTime / 60}
minutes</span>
</div>

</div>
</div>

{/* Performance Chart */}

<div className="w-full lg:w-1/3 bg-[#1e1e28cc] backdrop-blur-md rounded-2xl p-6 border border-white/10 shadow-
[0_6px_24px_rgba(0,0,0,0.4)]">
<h3 className="text-2xl font-semibold text-white mb-4 text-center">Performance
Overview</h3>

{/* Legend */}

<div className="flex flex-wrap justify-center gap-3 mt-3 mb-6 text-xs">
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-green-400"></div>
<span className="text-slate-300">Correct</span>
</div>
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-red-400"></div>
<span className="text-slate-300">Incorrect</span>
</div>
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-amber-400"></div>
<span className="text-slate-300">Unanswered</span>
</div>
</div>

{/* Chart Container */}

<div className="flex justify-center">
<div className="relative w-32 h-32 sm:w-60 sm:h-60">

<DoughnutChart
labels={['Correct', 'Incorrect', 'Unanswered']}
Page
75
 value={[
metaData.correctAnswer || 0,
metaData.incorrectAnswer || 0,
metaData.unAnswered || 0
]}
/>
</div>
</div>
</div>
</div>

{/* Right Panel - Detailed Questions */}

<div className="flex align-center justify-center mt-10">
<div className="bg-[#1e1e28cc] backdrop-blur-md rounded-2xl border border-white/10
shadow-[0_6px_24px_rgba(0,0,0,0.4)] h-[95vh] w-full max-w-6xl">

{/* Header similar to MockTest */}

<div className="p-6 border-b border-white/10">
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
<div className="flex items-center space-x-2">
<span className="text-[#7dd3fc] text-lg font-medium">Mock Interview Test
- Results</span>
</div>
<div className="flex items-center space-x-2 bg-[#00ffe0]/20 border border-
[#00ffe0]/50 rounded-full px-4 py-2">
<span className="text-[#00ffe0] font-mono font-bold">
{percentage}% Score
</span>
</div>
</div>
</div>

{/* Questions List */}

<div className="p-6 overflow-y-auto h-[calc(100%-140px)]"
style={{ scrollbarWidth: 'thin', scrollbarColor: '#00ffe0 transparent' }}>

<div className="space-y-6">
{metaData?.questions.map((question, index) => (
<div key={index} className="border-b border-white/5 pb-6 last:border-b-0">

{/* Question Header similar to MockTest */}

<div className="mb-6">
<h3 className="text-xl md:text-xl font-semibold text-white
leading-relaxed">
<span className="text-[#7dd3fc]">Q{index + 1}:</span>
{question.question}
</h3>
</div>

{/* Options with MockTest styling */}

Page
76
 <div className="space-y-3 mb-6">
{question.options.map((option) => {
const isUserAnswer = question.userAnswer === option.id;
const isCorrectAnswer = question.correctAnswer === option.id;
const isCorrectUserAnswer = isUserAnswer && isCorrectAnswer;
const isIncorrectUserAnswer = isUserAnswer
&& !isCorrectAnswer;

return (
<div
key={option.id}
className={`p-4 rounded-xl border transition-all
duration-200 ${isCorrectAnswer
? 'bg-[#00ffe0]/20 border-[#00ffe0]/50 text-white
shadow-[0_0_8px_rgba(0,255,224,0.25)]'
: isIncorrectUserAnswer
? 'bg-red-500/20 border-red-500/50 text-
white'
: 'bg-white/5 border-white/10 text-slate-300'
}`}
>
<div className="flex items-center gap-3">
<span className="font-medium text-
[#7dd3fc]">{option.id}.</span>
<span className="flex-1">{option.text}</span>

{/* Status Icons */}

{isCorrectAnswer && (
<IoIosCheckmarkCircle className="text-
[#00ffe0]" size={18} />
)}
{isIncorrectUserAnswer && (
<FaTimesCircle className="text-red-400"
size={18} />
)}
</div>
</div>
);
})}
</div>

{/* Explanation */}

<div className="bg-white/5 border border-white/10 rounded-xl p-4">
<div className="mb-2">
<span className="text-[#7dd3fc] font-medium">Correct Answer:
</span>
<span className="text-[#00ffe0] font-semibold">{question.correctAnswer}</span>
</div>
<div className="mb-2">
<span className="text-[#7dd3fc] font-medium">Your Answer:
</span>

<span className={`font-semibold ${question.userAnswer ===

question.correctAnswer

Page
77
 ? 'text-[#00ffe0]'
: question.userAnswer
? 'text-red-400'
: 'text-amber-400'
}`}>
{question.userAnswer || 'Not Answered'}
</span>
</div>
<div>
<span className="text-[#7dd3fc] font-medium">Explanation:
</span>
<p className="text-slate-300 mt-1">{question.explanation}</p>
</div>
</div>
</div>
))}
</div>
</div>

{/* Footer with MockTest button styling */}

<div className="p-6 border-t border-white/10">
<div className="flex justify-center">
<button
onClick={() => navigate('/dashboard/mock-test')}
className="flex items-center gap-2 px-6 py-3 bg-[#00ffe0] text-[#12121e]
rounded-xl font-semibold transition-all duration-200 hover:bg-[#00e6cc] hover:shadow-[0_0_12px_rgba(0,255,224,0.4)]
hover:-translate-y-0.5"
>
Back to Dashboard
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</DashboardLayout>
);
};

export default TestResult;

Page
78
Page
79
 Testing Techniques and Testing Strategies:

Testing Objectives:-

➢ Testing is the process of executing a program/system with the intention of finding error(s).

➢ A good testing strategy is one that has a high probability of finding an ; as-yet-undiscovered error.

➢ A testing strategy must also signify the list of allowable errors and also the types of seeded errors.

These objectives imply a dramatic change towards the view-point of testing. The main motive of
designing Test-scenarios and Test-cases should be that – a minimum amount of cost maximum number of
errors should be detected.

Testing Principles:-

✓ All test should be traceable to customer’s requirement.

✓ Tests should be planned long before test begins.

✓ Testing should begin “in small” and progress toward testing “in the large”.

✓ Exhaustive testing is not possible; hence proper input domains should be, designed.

✓ To be most effective “Testing” should be conducted by an independent third party.

Testability: -

Software testability is simply how easily a computer program can be tested.

Operability: -“The better it works the more efficiently it can be tested”.

❖ The system has few bugs (bugs add analysis and reporting overhead to the test process).

❖ No bugs block the execution of tests.

The product evolves in functional stages.

Observability:-

Page
80
“What you see is what you test”.

➢ Distinct output is generated for each input.

➢ System states are variables are visible or queriable during execution.

➢ Past system states and variables are visible or cerebella.

➢ All factors affecting outputs are visible.

➢ Incorrect output is easily identified.

➢ Internal-errors are automatically detected through self-testing mechanisms.

➢ Source code is accessible.

Controllability: -

“The better we can control the software; the most of the testing can be automated and optimized”.

➢ All possible outputs can be generated through the combination of input.

➢ All code is executable through some combination of input.

➢ Software and hardware states and states and variables can be directly controlled by test
engineer.

➢ Input and output formats are consistent and structured.

Tests can be conveniently specified and reviewed.

Decomposability: -

“By controlling the scope of testing we can isolate the problem more quickly and effectively”.

➢ The software is built from independent modules.

➢ The software modules can be tested independently.

Simplicity: -

“The less there is to be tested the more quickly we can test it”.

Page
81
 ➢ Functional simplicity: the requirements in this project work for post office management system is
account number, amount, date of deposits, date of withdrawal, which we can get from recurring
table.

➢ Structural simplicity: This project architecture is modularized to limit the propagation of faults.

➢ Code simplicity: coding structure is adopted for case of inspection and maintenance.

Understand ability: -

“The more we understand the system/software the smarter will be the test”.

➢ The design should be well understood.

➢ Dependencies between internal, external and shared components are well understood.

➢ Changes to this design should be communicated to all the involved personnel.

Technical document should be accurate, well specified, well organised and instantly accessible.

White box testing:-

White box testing sometimes called glass box testing is a test case design method that uses
the control structure of procedural design to derive test cases. Using white-box testing
methods the software engineer can derive test cases that:

➢ Guarantee that all independent paths within a module have been exercised at least
once.

➢ Exercise all logical decisions on either true or false sides.

➢ Execute all loops at their boundaries and within their operational bounds,

➢ Exercise internal data structures to ensure their validity.

Flow Graph Notation:-

Page
82
The flow graph depicts logical control flow notation. The structured constructs in flow graph in
following from where each circle represents one or more no branching POL or source code
statements.

A flow graph node represents one or more procedural statements. A sequence of process boxes and a
decision diamond can map into a single node. The arrows in a called edges or links represent flow of control
and are analogous to flowchart arrows. An edge must terminate at a node even if the node does not represent
flow of and are analogous to flowchart arrows. An edge must terminate at a node even if the node does not
represent any procedural statements. Areas are bounded by edges and nodes are called regions.

Cyclomatic Complexity: -

Cyclomatic complexity is software metric that provide a quantitative measure of the logical complexity of
a program. When used in the context of basic path testing method the value computed for Cyclomatic
complexity defines the number of independent paths in the basis of computer program and provides us an
upper bound for independents paths for the basis of the program and provides us the upper bound for the
number of tests that must be conducted to ensure that all statements have been executed at least once.

An independent path is any path through the program that introduces at least new set processing
statements or condition. When stated in terms of flow graph and independent path can move along at at
least one edge that has not been traversed before the path. Complexity is computed in three ways:

➢ The ‘n’ no.of regions of flow graph correspond to the cyclomatic complexity.

➢ Cyclomatic complexity V(G) for a flow grapg G is defined as V(G) = E – N + 2; Where

E → no.of flow graph edges N is the no.of flow graph nodes.

➢ Cyclomatic complexity V(G) for a flow graph G is also defined as V(G) = P + 1;

Where P → no.of predicate nodes contained in the flow graph G.

Control structure testing:-

Page
83
The basis path testing technique is no.of technique for control structure testing.

Condition Testing:

Condition testing is a case design method that exercise the logical conditions contained in the program
module(s). a simple condition is Boolean variable or a relation expression possibly proceeded with one
NOT operator. A relational takes the form E1 < relational operator> E2 where E1 and E2 are arithmetic
expression and <relational operator> is one of the following: <, <=, >, >=, =, !=.

A compound condition consists of two or more simple conditions. Boolean operators allows in compound
condition include OR (||), AND (&) NOT (!). A condition without a relational expression S is referred to
Boolean expression.
If the condition is incorrect then atleast one of the components of the condition is incorrect. Therefore types
of errors include the following:

➢ Boolean operator error.

➢ Boolean variable error.

➢ Boolean parenthesis error.

➢ Relational operator error.

➢ Arithmetic expression error.

Condition testing strategies has two advantages. First measures the test coverage of a condition is
simple.

Second the test condition in a program provides a simple guidance for a generation of additional tests of a
program.

Data Flow Testing: -

The data flow testing method selects test paths of a program. A no.of data flow testing methods have been
studied and compared.

Data flow testing methods are useful for selecting test paths of a program containing if and loop
statements.

Loop Testing: -

Page
84
Loop testing is a White-box testing technique that focuses exclusively on the validity of the loop
conditions. Four different types of loops can be defined.

Simple Loops: -

The following tests can be applied to simple loops. Where N is the maximum no.of allowable pass
through the loop.
Nested Loops: -

If we were to extend the test approach for simple loops the no.of possible would grow exponentially. This

would result in impractical no.of tests.

➢ Start at the inner most loop. Set all other loops to minimum values.

➢ Conduct simple loop test for the inner most loop while holding the outer loops at their
minimum iteration parameter values. Add other test for out-of-range or excluded values.

➢ Work outward to conduct tests for the next loops but keeping all outer loops at minimum
values and nested loops to ‘typical’ values.

Concatenated Loops: -

Concatenated loops can be tested using the approach defined for simple loops are independent of the
other. However if two loops are concatenated and the loop counter for loop one is used as initial value for
lop2 then the loops are not independent. When the loops are not independent the approach applied to
nested loops is recommended.

Unstructured Loops:

Whenever possible this class of loops should be redesigned to reflect the use of the structured
programming constructs.

Black-box Testing: -

Black-box testing also called behavioural testing focus on the functional requirements for a program. That
is Black-box testing enables the software engineer to derive sets of input conditions that will fully
exercise functional requirements for a program.

Black-box testing attempts to find the following errors:

➢ Incorrect or missing functions.

Page
85
 ➢ Interface errors.

➢ Errors in Darta structure.

➢ Behaviour or performance errors.

➢ Initialisation or termination errors.

Black-box testing is designed to answer the following questions.

➢ How is functional validity tested?

➢ How is system behaviour and performance tested?

➢ What is the class of input that will make good test-cases.

➢ Is the system sensitive to particular input values?

➢ How are the boundaries of a data class isolated?

➢ What data rates and data volumes can the system tolerate?

➢ What effect will the specific combination of data have on system operation?
➢

Graph based testing methods: -

The first step towards Black-box testing method is to understand the object i.e. modelled in software and
the relationship that connects; begin by creating a graph a collection of nodes that represents objects links
that represents relationship between objects node weights that describe properties of a node and link
weights that describe some characteristic of a link.

Equivalence Class Partitioning:-

Equivalence partitioning is a Black box testing method that decides the input domain of a program
into classes of data from which tests can be derived. An ideal test case single- handily
uncovers a class of errors that might otherwise many case to be executed before the general errors
observed. Equivalence partitioning strives to derive a test case to be executed before the general
error is observed. Equivalence partitioning strives to derive a test case that uncovers classes of errors
there by reducing total no. of test cases that must be developed.

Test case design for equivalence partitioning is based on the evaluation of equivalence classes for

Page
86
in input condition. An Equivalence classes represents a set of valid or invalid states for invalid
conditions. Typically input conditions are either a specific number value, a range of values, a set of
related values, or a Boolean condition. Equivalence classes may be defined according to following
guide lines:

➢ If an input condition specifies a range that is; one valid and two invalid equivalence
classes are one defined.

➢ If an input condition requires a specific value one valid and two invalid equivalence are
defined.

➢ If an input condition specifies a number of a set one valid and one invalid equivalence
classes are defined.

➢ If an input condition specifies a Boolean one valid and one invalid class are defined.

Boundary value Analysis: -

Boundary value analysis is a test case design technique that complements equivalence partitioning.
Rather that selecting an equivalence class BVA leads to the selection of test cases at the edges
of the class.

1. If an input condition specifies a range bounded by values ‘a’b & ‘b’, test cases should be
designed with values ‘a’ & ‘b’ and just above and just below ‘a’ & ‘b’.

2. If an input condition specifies a number of values test case should be developed that exercise
minimum and maximum numbers. Values just above and below minimum and maximum
number are also tested.

➢ Apply guide lines 1 and 2 two output conditions.

➢ If the internal data structures have prescribed boundaries are certain to design a test to exercise
that boundary

Page
87
Comparison Testing: -

There is some situation in which reliability of the software is absolutely critical. In such applications
redundant HW & SW is absolutely critical. The independent versions from the basis of a black-box
testing technique calls comparison testing or back to back testing.

When multiple implementations of the same specifications have been produced test cases designed by other
black box testing technique are provide as input version of the software. If the output of each version is
the same it is assumed that all implementation are correct. If the output of each version is different each of
the application is investigated to determine if a defect in on or more version in responsible for the
difference.

Orthogonal Array Testing: -

Orthogonal Array Testing can be applied to the problem in which input domain are relatively small but
too large to accommodate exhaustive testing. The Orthogonal Array Testing method is particularly useful
in finding errors associated with region faults.

Strategic issues of the software are: -

➢ This project work specifies product requirement in a quantifiable manner long before testing
commences. It states testing objectives explicitly.

➢ This project work understands the users of the SW and develops a profile for each user
category.

➢ It develops a test plan that emphasis “rapid cycle testing”.

➢ Build “robust” SW that is designed to test itself, uses formal technical reviews as a filter, prior
to testing.

➢ Conduct the formal technical reviews to assess the testing strategy and test cases themselves.

➢ Develop a continuous improvement approach for the testing process.

Page
88
Unit Testing: -

Unit testing focuses verification effort on the smallest unit of SW design. The module interface is tested to
ensure that information follows into and out of the program until under test. The local data structure is
examined to ensure that the data stored temporarily maintains its integrity during all steps in al algorithm’s
execution. Boundary conditions are tested to ensure that the module operates properly at boundaries
established to limit or restrict processing. All independent paths through the control structures are
exercised to ensure that all statements in a module have in exercised at least once. And finally all error
handling paths are tested.

Among more common errors in computation are:

➢ Misunderstood or incorrect arithmetic precedence.

➢ Mixed mode operation.

➢ Incorrect initialization.

➢ Precision inaccuracy.

➢ Incorrect symbolic representations of an expression.

Test case should uncover errors such as

➢ Comparison of data types.

➢ Incorrect logical operator or precedence.

➢ Expectation of equality when precession errors make equality unlikely.

➢ Incorrect comparison of variable.

➢ Improper or non-existent loop termination.

➢ Failure to exit when divergent iteration is encountered.

➢ Improperly modified loop variable

Page
89
Among potential errors that should be tested when error handling is evaluated are:

➢ Error description is unintelligible.

➢ Error noted does not correspond to error encountered.

➢ Error condition causes system invention prior to error handling.

➢ Exception continuous processing is incorrect.

➢ Error description does not provide enough information to assist in the notation of the cause of error.

Integration Testing:-

Integration Testing is a systematic technique for constructing the program structure while at the same time
conducting test to uncover error associated with interfacing.

Top Down Testing: -

Top Down Integration Testing is an incremental approach to construction of program structure. Modules
are integrated by moving downwards through the control hierarchy beginning with the main control
module are incorporated into structure in either a Depth-first Or Breadth-first manner.

Depth-first integration would integrate all components on the major control path is somewhat
arbitrary an depends on the application of specific characteristics, For example selecting the left hand
path component M1, M2, M5 would be integrated first. Next M8 or M6 would be integrated, and then the
central and right hand control paths are built. Breadth first integration incorporates all components M2, M3,
M4 would be integrated first. The next control level M5, M6 and so on,
The integration process is performed in the five steps:
➢ The main control module is used as a test driver and stubs are substituted for all
components directly subordinate to the main module,
➢ Depending on integration approach selected subordinate stubs are replaced one at a time with
actual m components,
➢ Tests are conducted as each component is integrated,
➢ On compilation of each set of tests another stubs is replaced with real component.
Regression testing may be conducted to ensure that new errors are not been introduced.

Bottom up integration testing:-

Page
90
Bottom up integration testing as its name implies begins construction and testing with atomic
modules because components are integrated in the bottom up manner processing required for
components subordinate to the given level is always available and need for stubs is
eliminated,

A bottom up integration testing may be eliminated in the following steps:

➢ Low level component are applied into clusters that performs a specific software functions.

➢ A driver is written to coordinate test case input and output.

➢ The cluster is tested.

➢ Drivers are removed and the clusters are combined moving upward in the program structure.

Regression Testing: -

Each time the time module Is added as a part of integration testing the software change, New data flow
paths are established, new I/O may occur and new control logic is invoked, These changes may cause problem
with functions that previously worked flawlessly,

Regression may be conducted manually by re-executing a subset of all test cases or using automated
capture/payback tools. A capture/payback tool enables the software engineer to capture test cases and
results for subsequent payback and comparison. The regression tests contain three different classes of
test cases:

➢ A representative sample of tests that will exercise all software functions.

➢ Additional tests that focus on software function that likely to be effected by change

Smoke testing: -

Smoke testing is an integration testing that is commonly used when "shrink-wrapped". Smoke testing
approach encompasses the following activities:

➢ Software component that have translated into a code are integrated into a "build". A build
includes all data files, libraries, reusable modules, and engineered components that are required
to implement one or more product functions.
Page
91
 ➢ A series of tests are designed to expose errors that will keep the build from properly

➢ performing its function. The intend should be to uncover errors that have the highest
likelihood of throwing the project behind schedule.
➢ The build is integrated with other builds and the entire product is smoke tested daily. The
integration approach may be top or bottom up.

Smoke testing provides a number of benefits when it applied on complex time critical software
engineering project: -
➢ Integration risk is minimized.

➢ The quality of end products is improved.

➢ Error diagnosis and correction are simplified.

➢ Progress is easier to access.

Validation Testing: -

Software validation is achieved through a series of black-box tests that demonstrates conformity with
requirements.A test plan outlines the class of tests should be conducted and test procedure defines
specific test cases that will be used to demonstrate conformity with requirements. Both plan and procedure
designed to ensure that all functional requirements are satisfied all behavioral characteristics are
achieved all performance requirements are attained, documentation is correct and human engineered and
other requirements are met. After each validation test has been conducted one of the two possible conditions
exist (1). The function or performance characteristic conform to specification is error discovered at this
stage in a project can rarely be corrected prior to schedule delivery. It is often necessary to negotiate
with customer to establish a method for resolving deficiencies.

Alpha and Beta Testing: -

It is virtually important for a software developer to foresee how the customer wi!1 relay use a program.
Instruction for use may be is interpreted, strange combination of data may be regularly used, and
output that seemed clear to the tester may be unintelligible to the field. When customer software is built

Page
92
for one customer a series of acceptance tests are conducted to enable the customer to validate all

requirements. Conducted by the end user rather software engineers an acceptance tests can range from
an informal "test drive" to a planned and systematically executed series of tests. In fact acceptance
testing can be conducted over a period of weeks or months, thereby uncovering cumulative errors
that might degrade the system over time. The alpha test is conducted at the developer site by the
customer. The software is used a natural setting with the developer "looking over the shoulder" of the
user and recording errors and usage problems. Alpha tests are conducted in controlled environment. The
Beta test is conducted at one or more customer site by the end user of the software. Unlike alpha testing
the developer is generally not present. Therefore a beta test is a "live" application of the software in an
environment that cannot be controlled by a developer. The customer records all problems that
encountered during beta testing and reports this to developer at regular intervals. As a result problem
reported during beta tests software engineers make modifications and then prepare for release of the
software product to the entire customer base.

System Testing: -
System testing is actually a series of different tests whose primary purpose is to fully exercise the
computer based system. Although each test has a different purpose, all work to verify that system
elements have been properly integrated and perform allocated function.
System Testing: -
System testing is actually a series of different tests whose primary purpose is to fully exercise the
computer based system. Although each test has a different purpose, all work to verify that system
elements have been properly integrated and perform allocated function.

Recovery Testing: -

Recovery testing is system test that forces the software to fall in a variety of ways and verifies that recovery
is properly performed. If recovery is automatic, re-initialization, check pointing mechanisms, data
recovery and restart are evaluated for correctness. If recovery requires human intervention the mean
time to repair (MTTR) is evaluated to determine whether it is within acceptable limits.

Page
93
Stress Testing: -

Stress testing attempts to verify the protection mechanisms built into a system will in fact protect it from
improper penetration. During security testing the tester plays a role of the individual who desire to
penetrate the system. Stress testing executes system in a manner that demands resources in an abnormal
quantity, frequency or volume.
Special test may be designed that generates ten interrupts per second, when one or two average rate. Input
data rates may be increased by an order of magnitude to determine how input function will respond.
Test cases that will require maximum memory or other resources are designed and executed. Test
case may cause thrashing in the virtual operating system are designed.
Test cases that may cause excessive hunting for disk resident data are created.

Performance Testing: -

Performance testing is designed to test the run time performance of the software within the context of an
integrated system. Performance testing occurs throughout all steps in the testing process. Performance
testing usually requires both hardware and software instrumentation.

Implementation : -
An implementation description of an object provides the internal ("hidden") details that are required for
implementation but are not necessary for invocation. That is the designer of the object must provide an
implementation description and must therefore create the internal details of the object. However another
designer or implementers who use the object or other instances of the object requires only description.
An implementation description consists of following information: -
➢ A specification of object name and reference to class.
➢ A specification of private data structure with indication of data items and types.
➢ A procedural description of each operation or alternatively pointers to such procedural
description.
The implementation description must contain sufficient information to provide for proper handling
messages.

Page
94
 Testing Techniques And Testing Strategies Evaluation

Software project is evaluated in the following way: - First:

➢ We tested each module one by one. The person who made the module tested it first next it
was tested by others. When errors were found it was corrected and the module was again
tested. This way the UNIT testing and WHITE-BOX testing was performed. Basic Path
Testing, Condition Testing and Loop Testing are also performed at the same time.
Validation testing for each module was also performed.
➢ Black-Box Testing was also performed for each module. By giving an input the expected
output was obtained.
As Black-Box Testing was done Equivalence Partitioning, Boundary value analysis and Comparison
Testing were also done.

Second:

➢ Modules were integrated one by one from Top to Bottom and the affect were looked upon with
utmost care.

➢ Both Top-Down and Bottom-Up integration testing were performed.

The modules were integrated one by one and tested. After integrating all the modules the entire software
was tested, In this way the INTEGRATION testing and Regression testing were done.

Third:
➢ Performance Testing was done .

➢ Stress Testing was done after installing this software into the server. Since SERVER cannot be
accessed by unauthorized users and so is the software the Stress Testing was successful.

Random inputs were given and each and every error message was designed in such a way that the
Administrator and the User find it easy to rectify their mistake. Moreover this software was installed in the
SERVER and a mock test was arranged to put this software under STRESS and STRAIN testing. This was
done on LAN. In this way both Alpha and Beta Testing were performed.

Page
95
Final:

After successful completion of this software it was implemented / demonstrated.

The maintenance of existing software can account for over 60% of all effort expended by
development organization, and the percentage continues to rise as more software modules are produced
and incorporated. There are four different kinds of maintenance:

Corrective Maintenance: -

It changes software to correct defects. For example this Project-work is designed for “Online Exam” if the
user does not fill any of the respective text boxes then this particular software discussed as the project work
will give rise to an error which requests the user to fill the unfilled textbox.

Adaptive Maintenance: -

It results in modification to the software to accommodate changes to its external environment. For example
there is a particular account for a particular administrator, who can access the system according to the
granted rights. The rights may be changed for a limited period.

Perfective Maintenance: -

It extends the software beyond its original functional requirements.

Preventive Maintenance: -

It is often called as software reengineering. It must be conducted to enable software to serve

the needs of its end users. For example the naming conventions must be such
that the textboxes should be named corresponding to the inputs they take.

Page
96
 Security Measures:
The directory definition of security compasses a set of measures taken to guard against theft, attack,
crime, and espionage or sabotage. Security implies the quality or state of being secure, that is a relief
from danger and acting so as to make safe against adverse contingencies.

When talking about computers, security can have different meanings, including:

❖ Securities boundaries
❖ Physical securities
❖ Application securities
❖ Access control
❖ Message verification.
❖ Message ownership.
The growing use of and reliance on computer worldwide has resulted in business, Govt.
and the military and even at home. Large amount of vital and sensitive data are increasingly
becoming entrusted to end store in computers.

Unauthorized access, revelation, or destruction of data can violate industrial privacy.

Corruption of stored data can result in significant and potentially catastrophic losses to the concern. It
is worth remembering however, that security threats are not unique to computers. They are inevitably
present in any form of safeguarding of valuable assets. The potential problem with computers is that
the evolving immigrations of assets to them sometimes result in the delayed managerial of the
value of and potential dangers of exposures to loss of information store therein.
Thus second security practices and policies of ten trials rather than precede migration of
data and assets to computers.
Database security refers to protection from malicious access absolute protection of the
database from malicious abuse is not possible but the copy to the perpetrator can be made high
enough to dater most if not all attempts to access database without proper authority.
To protect the database, we must take security measure at several levels:

Page
97
System Security:
By system security we mean the ability to secure the underlying operating system, including
the OS kernel and the essential utilities that make up the rest of the operating system. Limit
number of user accounts that you give out and only allow them access to your systems via secure
authentication mechanism.

Application Security:
By application security we should do defensive programming. Make sure that we take care of
your memory. This means freeing all pointers, and preventing buffer overflows. Many security holes
exist because we can overflow the buffer of a program and in turn that allows executing commands
in the stack space of the program. If that programs happens to have super user privileges, the
amount of damage that is possible ti quite large. In our proposed project we must take extra care
when making system calls to external programs.

Access Control:
Access control is the process you perform to determine if a particular connection belongs to a
particular user and then to determine if they have the right to perform the requested action.

User Authentication:
User authentication is the process we preform to verify that a user is who they say they
are. This is accomplished in this project work with the help of password.

User Authorization:
User authorization is the process we perform that determines whether someone has
access to a particular system, application or data. Authorization may or may not require
user authentication.

Page
98
Page
99
The “ONLINE MOCK TEST PROJECT” Succesfully, Achived a
goal of providing a reliable, accesscible and user friendly platform
for students to access their knowledge and prepare for competitive
examinations.The system allows users to register, take mock tests,
view results instantly, and track their progress over time.
This project demonstrates the importance of digital education tools
in modern learning environments. By automating test creation,
result calculation, and feedback, the platform enhances efficiency
for both learners and educators. The integration of features such as
multiple question types, timed quizzes, and performance analytics
add significant value to the overall learning process.
The development of this system involved careful planning, design,
and implementation using modern technologies (e.g., HTML,
CSS, JavaScript, React, Mongo DB, Node JS). Challenges faced
during the project—such as ensuring accurate evaluation,
preventing cheating, and handling user data securely—were
addressed through thoughtful coding and system design.
In conclusion, the Online Mock Test Project is a scalable and
effective solution for digital learning and exam preparation Future
enhancements could include mobile app support, AI-based question
recommendation, and integration with e-learning platforms to
further improve user experience and educational outcomes.

Page
100
Page
101
Future Scope of the Project-Work:-

The integration of Artificial Intelligence into online mock testing systems presents vast opportunities to enhance
the way assessments are designed, delivered, and analyzed. As AI technology continues to evolve, the following
future advancements can significantly improve the user experience, effectiveness, and scalability of AI-powered
online mock test platforms:

1. Personalized Learning and Adaptive Testing-

➢ AI can analyze a student's performance in real-time and adjust the difficulty of questions
dynamically.
➢ It can create customized test sets based on the learner’s strengths, weaknesses, and learning
pace.

2. Automated Question Generation-

➢ Natural Language Processing (NLP) models can be trained to generate relevant and diverse
questions from academic content (textbooks, notes, or articles).
➢ This reduces manual effort for educators and ensures a broader question bank.

1. Intelligent Feedback and Analytics

➢ AI can provide instant, detailed feedback on each question, including explanations, hints, and topic-
wise analysis.
➢ Advanced analytics can help students identify areas for improvement and suggest personalized study
plans.

2. Voice and Image-Based Question Support

➢ Incorporation of AI can allow for speech-to-text or image-based questions (useful in language,

science, and medical fields).
➢ These features make mock tests more engaging and inclusive.

3. Cheating Detection and Remote Proctoring

➢ AI can monitor test-takers using facial recognition, eye movement tracking, and behavioral
analysis to ensure exam integrity.

➢ This allows secure testing from remote locations, reducing the need for physical exam centers.

4. Multilingual and Inclusive Testing

➢ AI-powered translation can offer mock tests in multiple languages, making education accessible to
students from various linguistic backgrounds.
➢ Text-to-speech and speech-to-text features can assist students with visual or hearing impairments.

Page
102
5. Integration with Educational Ecosystems-

➢ The AI mock test system can be integrated with LMS platforms, e-learning apps, and virtual
classrooms for seamless educational experiences.
➢ Performance data can sync with academic records, enabling teachers and institutions to better
support learners.

6. Gamification and Motivation-

AI can introduce game-like elements such as challenges, levels, and rewards based on performance
to keep learners motivated and engaged.

7. Predictive Performance Modeling-

AI can predict future test scores or academic success based on historical data, helping students plan
their study strategies and time more effectively.

Page
103
➢ SOFTWARE ENGINEERING A PRACTIONERS APPROACH:

By ROGER.S.PRESSMAN.

➢ AN INTRODUCTION TO DATABASE SYSTEM:

By BIPIN.C.DESI

➢ Geogle.

➢ W3SCHOOL.com

Page
104
Page
105
GLOSSARY

Analysis:-
A description of the way in which a system work.
Business process:-
An object that belong to the class.
Class:
An object that describes a set of objects with the Same features
Class instance:
An object that belong to the class.
Clients:-
People from outside an organisation that deal with the organization.

Computer- based information system:-

An information system that uses computer.

Context diagram:-
A diagram that shows that the input outputs of a system.
Data flow:-

Data flowing between processes, data stores and external entities.

Data flow diagram (DFD):-

A method to illustrate how data flow in the system.

Data store:-
An organisation store of data.

Data base:-
An organisation store of data

Design:-
Creation of an artefact.

Development process:-

A set of steps used to build a system.

Page
106
 Economic feasibility:-
An evaluation to determine whether a system is economically acceptable.
Employee:-
One who works for another for wages or salary.
Encapsulation:-
Inclusion of many features in the one object.
Entity:-
A distinct object in a system.
Feasibility analysis:-
An evaluation of whether it is worthwhile to proceed with a project.
Features:-
A characteristics of a class.

Feedback:-

Using variations from a system goal to change system behaviour.

Function:-

A part that produces well defined outputs from given inputs.

Functional dependency:-

Where one value of an attribute determines a single value of another attribute.

Global:-

The whole world or all people/world wide.

Information system:-

A system that provides information to people in an organisation.

Inheritance:-

Using same features as another object.

Instance:-

A unique occurrence of a type of object.

Interviewing:-

Gathering information by asking questions.

Page
107
Management:-

People responsible for organizing and allocating resources

Methods:-

A feature that describes programs within an object.

On-line transaction:-

A transaction made through a terminal.

Operational Feasibility: -

An evaluation to determine whether a system operationally acceptable or not.

Organisation:

Grouping and arranging into one whole or that which is grouped and arranged for a special purpose.

Polymorphism : -

Selecting the method appropriate for the class of the object called.

Process: -

A set of steps that define how things are done.

Programmer: -

A person who writes computer program.

Project: -

A scheme of something to be done.

Quality Assurance: -

A process to ensure that development of quality products.

Re-engineering: -

Changing an existing system.

Relation: -

A table or list of values.

Page
108
Security: -

Ensuring that computer system faults do not destroy the information stored about a system.

Software Configuration: -

The documents used in a development process.

Strategy: -

The broad objective for an organisation.

System: -
A collection of components that work together to realize an objective.

System Development Cycle: -

Another term for project dictionary.

System Procedure: -

Defines actions to be taken to accomplish a system tasks.

System specification: -

A precise description of what the system must do.

System Analysis: -

Find out what a system does and what its needs are.

Technical Feasibility: -

An evaluation to determine whether the system can be technically built.

Testing: -
Checking to see if a system does what it is supposed to do.

Transaction: -

A simple interaction with a computer database.

User requirements: -

What user expects the system to do for them.

Page
109
About euphoriagenx.com

euphoriagenx.com, the leading IT training company, is known for its pioneering work in
the field of Software education. We are reputed for quality education, style and
methodlogy of teaching. Our strong research orientation has helped us continuously
innovate and implement cutting-edge technologies.

We provide a comprehensive education environment to individuals and enterprises, offering

training that is customized to the varied needs of audiences with diverse backgrounds.

Presently Ejobindia operates with our two Direct Centres at key locations in Eastern India. Over
the past 5 years in IT training,euphoriagenx.com has gained a reputation for credibility,
reliability and high quality.

Project Site

Page
110