IT3501: FULL STACK WEB DEVELOPMENT LABORATORY

DEPARTMENT OF INFORMATION TECHNOLOGY

LAB RECORD

Name :
Register Number :
Class :
Batch :

363, Arcot Road, Kodambakkam, Chennai - 600 024.

[Link]
VISION [Link]
MISSION OF THE INSTITUTE
 Meenakshi Sundararajan Engineering College
(An Autonomous Institution, Affiliated to Anna University, Chennai)
IT3511 – Full Stack Web Development Laboratory

MEENAKSHI SUNDARARAJAN ENGINEERING COLLEGE

(An Autonomous Institution)

Certified to be the Bonafide Record of work done by

Register No.
of class in
IT3501 FULL STACK WEB DEVELOPMENT LABORATORY
during the academic Year 2025- 2026.

STAFF INCHARGE HOD

Submitted for the End Semester Practical Examination held on

at Meenakshi Sundararajan Engineering College, Kodambakkam,

Chennai -24

INTERNAL EXAMINER EXTERNAL EXAMINER

 Meenakshi Sundararajan Engineering College
(An Autonomous Institution, Affiliated to Anna University, Chennai)
IT3511 – Full Stack Web Development Laboratory

VISION AND MISSION OF THE INSTITUTE

Vision:
To impart state-of-the art technical education, including sterling values and shining
character, producing engineers who contribute to nation building thereby achieving our
ultimate objective of sustained development of an unparalleled society, nation and world at
large.
Mission:

Meenakshi Sundararajan Engineering College, Chennai constantly strives to be a Centre of

Excellence with the singular aim of producing students of outstanding academic excellence
and sterling character to benefit the society, our nation and the world at large.
To achieve this, the college ensures
● Continuous upgradation of its teaching faculty to ensure a high standard of quality
education and to meet the ever-changing needs of the society.
● Constant interaction with its stakeholders.
● Linkage with other educational institutions and industries at the national and
international level for mutual benefit.
● Provision of research facilities and infrastructure in line with global trends.
● Adequate opportunities and exposure to the students through suitable programs,
to mould their character and to develop their personality with an emphasis on
professional ethics and moral values

1
 Meenakshi Sundararajan Engineering College
(An Autonomous Institution, Affiliated to Anna University, Chennai)
IT3511 – Full Stack Web Development Laboratory

VISION AND MISSION OF THE DEPARTMENT

Vision
Produce technically savvy students, encourage innovative skills and inculcate
moral and professional values.

Mission

 Mission 1: To enrich and enhance the knowledge of the faculty

and students through constant interaction with stakeholders.

 Mission 2: To apply the concept of information technology through

innovative idea for research and developments.

 Mission 3: To mould the students with ethical and moral values

2
 Meenakshi Sundararajan Engineering College
(An Autonomous Institution, Affiliated to Anna University, Chennai)
IT3511 – Full Stack Web Development Laboratory

PROGRAM OUTCOMES (POs)

1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering

fundamentals, and an engineering specialization to the solution of complex engineering
problems.
2. Problem analysis: Identify, formulate, research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
3. Design/development of solutions: Design solutions for complex engineering problems
and design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and environmental
considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and
research methods including design of experiments, analysis and interpretation of data, and
synthesis of the information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools including prediction and modelling to complex engineering
activities with an understanding of the limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.
7. Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and
need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and
write effective reports and design documentation, make effective presentations, and give and
receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member and
leader in a team, to manage projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to
engage in independent and life-long learning in the broadest context of technological change.

3
 Meenakshi Sundararajan Engineering College
(An Autonomous Institution, Affiliated to Anna University, Chennai)
IT3511 – Full Stack Web Development Laboratory

PROGRAM EDUCATIONAL OBJECTIVES (PEOs)

 PEO1: Demonstrate technical competence with analytical and critical thinking to

understand and meet the diversified requirements of industry, academia and
research.
 PEO2: Exhibit technical leadership, team skills and entrepreneurship skills to
provide business solutions to real world problems
 PEO3: Work in multi-disciplinary industries with social and environmental
responsibility
 PEO4: Work ethics and adaptability to address complex engineering and social
problems.
 PEO5: Pursue lifelong learning, use cutting edge technologies and involve in

applied research to design optimal solutions.

PROGRAM SPECIFIC OUTCOMES (PSOs)

 PSO 1: Have proficiency in programming skills to design, develop and
apply appropriate techniques, to solve complex engineering problems.

 PSO 2: Have knowledge to build, automate and manage business solutions

using cutting edge technologies.

 PSO 3: Have excitement towards research in applied computer technologies.

4
 Meenakshi Sundararajan Engineering College
(An Autonomous Institution, Affiliated to Anna University, Chennai)
IT3511 – Full Stack Web Development Laboratory

SYLLABUS

[Link]. Name of Experiment

1 Develop a portfolio website for yourself which gives details about yourself for a potential
recruiter.
2 Create a web application to manage the TO-DO list of users, where users can login and manage
their to-do items
3 Create a simple micro blogging application (like twitter) that allows people to post their content
which can be viewed by people who follow them.
4 Create a food delivery website where users can order food from a particular restaurant listed in
the website.
5 Develop a classifieds web application to buy and sell used products.

6 Develop a leave management system for an organization where users can apply different types of
leaves such as casual leave and medical leave. They also can view the available number of
days.
7 Develop a simple dashboard for project management where the statuses of various tasks are
available. New tasks can be added and the status of existing tasks can be changed among
Pending, InProgress or Completed.
8 Develop an online survey application where a collection of questions is available and users are
asked to answer any random 5 questions.

5
 Meenakshi Sundararajan Engineering College
(An Autonomous Institution, Affiliated to Anna University, Chennai)
IT3511 – Full Stack Web Development Laboratory

EXP DATE MARKS SIGNATURE

NO. TITLE OF THE EXPERIMENT

Developing a portfolio website for a potential recruiter.

1.

Creating a web application to manage the TO-DO list

2.

Creating a simple micro blogging application

3.

Creating a food delivery website

4.
5. Developing a E-Commerce websites for products

6. Developing a leave management system for an

organization.

7. Developing a simple dashboard for project management.

8. Developing an online survey application.

6
[Link].1 DEVELOPING A PORTFOLIO WEBSITE FOR A POTENTIAL RECRUITER

DATE:

AIM
To create a comprehensive and visually appealing online portfolio that provides potential
recruiters with a detailed overview for the organization in any stack combination.

OBJECTIVE
To build a visually appealing and responsive online portfolio showcasing skills, projects,
and achievements.

SOFTWARE REQUIRED:
Frontend: HTML, CSS
Backend: [Link]

DESCRIPTION (MAPPING TO THEORY)

HTML Structure:
• The HTML document starts with a <!DOCTYPE html> declaration, specifying the document
type.
• The <html> element encloses the entire HTML content of the page.
• The <head> section contains metadata about the page, such as character encoding, viewport
settings, and links to external resources like stylesheets and icons.
• The <body> section contains the main content of the webpage.
• Navigation (nav):
• The navigation bar (<nav>) contains the site's logo (heading) and a list of navigation
links (<ul>) using an unordered list.
• Each navigation link is represented by a list item (<li>) containing an anchor (<a>)
element.
• The burger icon button (<button>) is used to toggle the navigation menu on smaller
screens.
• The JavaScript code handles the toggle functionality of the navigation menu when the
burger icon is clicked.
CSS Styling:
• The provided CSS code defines the styling for various elements on the page.
• CSS variables are used to store reusable values such as colors, fonts, and spacing.
• Media queries are used to make the page responsive for different screen sizes.

JavaScript Interactivity:
• The JavaScript code handles the toggling of the navigation menu on smaller screens when the
burger icon is clicked.
• When a navigation link is clicked, the navigation menu closes automatically.
• The scroll-to-top button is implemented using JavaScript to smoothly scroll to the top of the
page when clicked.
1
ALGORITHM
1. Set Up Your New React Project
• Create a new project: npx create-react-app Portfolio
2. Create Components
• Inside the src folder, create components for the Portfolio like skills, achievements etc..
3. Implement Portfolio Component UI
• Edit the Portfolio component to display the list of items and input for adding new items.
4. Manage State
• Use React state to manage the list of items and their properties.
5. Add Functionality
• Implement functions to add new items.
6. Styling
• Add CSS or use a styling library to enhance the appearance of your components.
7. Run the Application
• Start your React app using:
npm start

PROGRAM

2
3
4
5
6
7
8
OUTPUT

9
REAL TIME APPLICATION

 Job recruitment platforms

 Freelancing platforms (Upwork, Fiverr, Freelancer)
 Educational and e-learning platforms

VIVA QUESTIONS

1. Write any three real time application of portfolio generation?

2. What is [Link], and why is it popular?

3. How do you install [Link] on your system?

4. What is the purpose of npm in [Link]?

5. What is the role of the [Link] in a [Link] project?

RESULT
A professional portfolio website has been designed and developed successfully, that presents
expertise, career journey, and project accomplishments in an organized manner

Distribution of Marks
Conceptual Understanding /2
Program and Execution /3
Output /2
Viva-Voce /2
Promptness /1
Total / 10

10
[Link].2 CREATING A WEB APPLICATION TO MANAGE THE TO-DO LIST
DATE:

AIM
To create a web application to manage the TO-DO list of users, where users can login and
manage their to-do items in any stack combination.

OBJECTIVE
To develop a web application that allows users to log in and efficiently manage their
personal TO-DO lists. The goal is to provide a user-friendly interface for adding, updating, and
tracking tasks.

SOFTWARE REQUIRED
Frontend: [Link]
Backend: [Link]
Database: MongoDB

DESCRIPTION (MAPPING TO THEORY)

React & its Components is used to create the App Component. Export the App
Component for the usage and Rendering with state initialization. Within the root, the App
component is rendered within a <[Link]> component. StrictMode is used for
highlighting potential problems in the application during development.
This project applies the principles of full stack web development by creating a responsive
and dynamic TO-DO list management application. The frontend is built using [Link], which
enables the development of reusable components, efficient state management, and a seamless user
experience. React Router is used for client-side routing, providing a single-page application feel.
Styling is achieved using CSS and optional libraries to enhance responsiveness and UI design.
The backend is developed using [Link] and [Link], which handle server-side logic,
routing, and API creation. MongoDB or MySQL is used to store user credentials and task data,
demonstrating database integration and persistence. The application includes secure user
authentication, session handling, and implements full CRUD operations to manage TO-DO items.
RESTful APIs enable communication between frontend and backend asynchronously. Key
concepts such as component lifecycle, hooks, API integration, middleware, and form handling are
implemented. This project effectively maps theory to practice, showcasing the integration of
[Link] with backend technologies to build a complete and functional web application.

ALGORITHM
1. Set Up Your New React Project
• Create a new project: npx create-react-app todo-list-app
2. Create Components
• Inside the src folder, create components for the TO-DO list and TO-DO items.

11
 3. Implement TO-DO List Component
• Edit the TO-DO list component to manage TO-DO list data and actions.
4. Implement TO-DO List Component UI
• Edit the TO-DO list component to display the list of items and input for adding new
items.
5. Implement TO-DO Item Component
• Create a component for individual TO-DO items.
• Define props and actions (e.g., marking as completed, deleting).
6. Implement TO-DO Item Component UI
• Edit the TO-DO item component to display an individual item with appropriate actions.
7. Manage State
• Use React state to manage the list of TO-DO items and their properties.
8. Add Functionality
• Implement functions to add new items, mark items as completed, and potentially delete
items.
9. Styling
• Add CSS or use a styling library to enhance the appearance of your components.
10. Run the Application
• Start your React app using:
npm start

PROGRAM

12
13
14
15
16
17
18
19
OUTPUT

20
 REAL TIME APPLICATION

 Project Management – Organizes project deadlines, milestones, and responsibilities.

 Academic Planner – Students track homework, assignments, and exam schedules.
 Shopping & Grocery Lists – Used in apps to manage and share shopping tasks.

VIVA QUESTIONS

1. Write any three real time application of TODO list?

2. What is a To-Do list application, and why is it useful?

3. Which technologies can be used to implement a To-Do list?

4. How can you add interactivity to the To-Do list?

5. What is the importance of data persistence in a To-Do list application?

RESULT
Thus the web application has been created to manage the TO-DO list of users, where users can login and
manage their to-do items.
Distribution of Marks
Conceptual Understanding /2
Program and Execution /3
Output /2
Viva-Voce /2
Promptness /1
Total / 10

21
[Link]. 3 CREATING A SIMPLE MICRO BLOGGING APPLICATION
DATE:

AIM
To develop a simple micro blogging web application that enabling user registration, content
posting in any stack combination.

OBJECTIVE
To develop a simple microblogging web application that enables user registration, content
posting, and viewing of posts, providing a platform for users to share short updates and interact in a
minimalistic environment.

SOFTWARE REQUIRED
Frontend: [Link]
Backend: [Link]

DESCRIPTION (MAPPING TO THEORY)

This microblogging web application implements full-stack development principles using

the MVC (Model-View-Controller) architecture to separate concerns across the application
layers. The frontend, developed using [Link] (or [Link]), along with HTML, CSS, and
JavaScript, provides a dynamic and responsive user interface. Users can register, log in, create
short posts, view a feed, and follow/unfollow other users. The application follows the Single Page
Application (SPA) model, utilizing React Router and Axios for asynchronous API calls to ensure
a smooth user experience without full page reloads.

The backend is developed using [Link] with [Link] (or alternatives like Django or
Flask), responsible for processing requests, handling business logic, and interacting with the
database. It manages user authentication using secure mechanisms like JWT (JSON Web Tokens)
or session-based authentication, ensuring that only authorized users can post or view content. The
system supports CRUD operations for posts and user data, and implements RESTful API
principles for efficient client-server communication.

The database layer (e.g., MongoDB or PostgreSQL) stores user credentials, posts, and
follower-following relationships, applying relational or document-based data modeling.
Additional concepts such as middleware, form validation, error handling, and routing are
integrated to enhance performance and maintainability. This project bridges theoretical concepts
from web development with practical implementation, offering a real-world demonstration of
how full stack technologies and modern frameworks power scalable social platforms.

22
ALGORITHM
Steps to create the application:
1. Create React Project
npx create-react-app blog
2. Change your directory and enter your main folder MY-APP as
cd blog
3. Install the required modules using the command
npm i bootstrap
npm i react-bootstrap
4. The dependencies in [Link] will look like:
[Link]
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.0",
"react": "^18.2.0",
"react-bootstrap": "^2.7.4",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
5. Create a folder call components and create the files [Link], [Link], [Link], [Link],
[Link], [Link]
6. Open the terminal and run the project using the command.
npm start

PROGRAM

23
24
25
26
27
28
29
30
31
OUTPUT

32
REAL TIME APPLICATION

 Social Media Updates – Platforms like Twitter/X allow quick sharing of thoughts, news, and
links.
 Live Event Coverage – Used to provide real-time updates during sports, conferences, or
breaking news.
 Customer Engagement – Brands interact with customers, answer queries, and promote
products.

VIVA QUESTIONS
1. Write any three real time application for micro blogging?

2. What is a microblogging application?

3. What features are essential in a microblogging platform?

4. How do you implement user authentication in a microblogging application?

5. How can you implement real-time updates in a microblogging application?

RESULT
Thus a simple micro blogging platform has been created successfully, that allowing users to
register, create posts, follow other users, and view personalized feeds based on the followed users'
posts.

Distribution of Marks
Conceptual Understanding /2
Program and Execution /3
Output /2
Viva-Voce /2
Promptness /1
Total / 10

33
[Link].4 CREATING A FOOD DELIVERY WEBSITE
DATE:

AIM
To create a user-friendly React-based food delivery website to browse and customize orders in
any stack combination.

OBJECTIVE
To create a user-friendly, React-based food delivery website that allows users to browse
menus, customize orders, and place them seamlessly, enhancing the online food ordering experience
with an intuitive and responsive interface.

SOFTWARE REQUIRED
Frontend: [Link]
Backend: [Link]
Database: MongoDB

DESCRIPTION (MAPPING TO THEORY)

This food delivery website follows a client-server architecture, leveraging modern web
development practices to deliver a seamless user experience. The frontend is built with [Link],
utilizing its component-based architecture to create reusable, modular UI elements and ensure a
responsive design adaptable to various devices. React Router facilitates smooth client-side
navigation between different pages such as Menu, Cart, and Checkout, following the Single Page
Application (SPA) model to minimize page reloads and enhance performance.

Users can browse available food items, customize their orders with various options (like toppings,
quantities, and special instructions), and manage their cart in real-time with instant feedback. The
frontend handles state management effectively using React hooks or context API to maintain user
interactions and application state.

Communication between the frontend and backend is handled asynchronously via the Fetch APIs,
following RESTful API conventions to request and update data without interrupting the user
experience. The backend, developed with [Link] and [Link], implements the MVC (Model-
View-Controller) architectural pattern to separate concerns, allowing for scalability and
maintainability. It handles user authentication, menu management, order processing, and payment
integration securely.

A database system such as MongoDB is used for persistent storage of user profiles, menu details,
and order history, supporting CRUD operations. Additional backend features include middleware for
validation, error handling, and security practices such as token-based authentication (JWT). Overall,
this project combines theoretical concepts of modern web development frameworks, asynchronous
programming, and API design into a practical, real-world application for online food delivery.

34
ALGORITHM
Steps to create the application:
1. Create a React App
npx create-react-app shopping-cart-app
2. Change your working directory to the newly created
app: cd shopping-cart-app
3. Functionality - Replace the src Directory “[Link]” file Contents with the various option of food
menu and restaurant options for choosing the menu .
4. Styling - Replace the src Directory “[Link]” file contents with the below code.
5. UI components to be added in the directory for the java script connectivity
6. Add Functionality
Implement functions to add new items, mark items as completed, and potentially delete
items.
7. Styling
Add CSS or use a styling library to enhance the appearance of your components.
8. Run the Application
Start your React app using:
npm startRunning the App
npm start

PROGRAM

35
36
37
38
39
40
41
42
43
OUTPUT

44
 REAL TIME APPLICATION

 Online Ordering System – Customers browse menus and place orders instantly.

 Live Order Tracking – Users can track their food in real-time from kitchen to doorstep.

 Restaurant Management – Restaurants manage orders, availability, and delivery status

live.

VIVA QUESTIONS

1. Write any three real time application of food delivering website

2. Core functionalities of the food delivery website?

3. How is payment security ensured?

4. How is user authentication and authorization handled?

5. Challenges and solutions during development?

RESULT
Thus the food delivery website with menu browsing and order placement using React has been
created successfully.

Distribution of Marks
Conceptual Understanding /2
Program and Execution /3
Output /2
Viva-Voce /2
Promptness /1
Total / 10

45
[Link].5 DEVELOPING AN E-COMMERCE WEBSITES FOR PRODUCTS

DATE:

AIM
To create a E-Commerce webpage where users can search for products based on keywords and
view detailed product listings to buy or sell in any stack combinations.

OBJECTIVE
To develop an intuitive E-Commerce webpage that enables users to search products by
keywords and view detailed listings, facilitating seamless buying and selling experiences.

SOFTWARE REQUIRED
Frontend: [Link]
Backend: [Link] with Express
Database: MongoDB

DESCRIPTION (MAPPING TO THEORY)

This E-Commerce webpage is designed following the principles of full stack web development,
integrating a powerful frontend, backend, and database to create a seamless buying and selling
platform. The frontend, built with [Link], leverages component-based architecture and React
Router to create an interactive and responsive user interface. Users can efficiently search for
products using keyword-based filtering, view detailed product descriptions, images, pricing, and
seller information, all within a dynamic Single Page Application (SPA) environment.

The backend, developed using [Link] with [Link], implements RESTful APIs that handle
product searches, user management, order processing, and seller activities. It follows the MVC
(Model-View-Controller) design pattern to separate concerns, enhance scalability, and maintain code
organization. User authentication and authorization are managed securely to enable safe transactions.

The database, MongoDB, stores product data, user profiles, transaction records, and seller
information using a NoSQL document-oriented approach, allowing flexible and scalable data
management. CRUD (Create, Read, Update, Delete) operations enable users to add, edit, or remove
product listings efficiently. The system also integrates features like pagination, sorting, and filtering
to improve search performance and user experience.

Overall, this project maps theoretical concepts such as asynchronous data fetching, state
management in React, RESTful service design, secure authentication, and database schema design
into a practical, real-world e-commerce application that supports robust and user-friendly product
browsing and trading functionalities.

46
ALGORITHM
Set Up Your New React Project
1. Create a new React app: npx create-react-app ecommerce-app
2. Create Components
• Inside src/components, create components like ProductList, ProductItem, SearchBar,
Cart, and ProductDetails.
3. Implement SearchBar Component
• Create a search input that captures user keywords and triggers a search event.
4. Implement ProductList Component
• Fetch and display products based on search keywords or default listing.
5. Implement ProductItem Component
• Display individual product details like image, name, price, and “Add to Cart” button.
6. Implement ProductDetails Component
• Show detailed info when a product is clicked, including description, reviews, and
purchase options.
7. Manage State and API Integration
• Use React state (or Context/Redux) to manage products, search terms, cart items.
• Connect frontend to backend APIs to fetch product data and handle orders.
8. Implement Cart Functionality
• Allow users to add/remove products to/from the cart and view cart contents.
9. User Authentication (Optional)
• Add login/signup components and integrate authentication backend.
10. Styling
• Add CSS or use frameworks like Bootstrap, Tailwind to design a responsive UI.
11. Run and Test the Application
• Start the React app: npm start
• Test product search, listing, details, and cart workflows

PROGRAM

47
48
49
50
51
52
53
54
55
OUTPUT

56
REAL TIME APPLICATION

 Online Shopping Platforms – Websites like Amazon, Flipkart, and Myntra allow users to buy
products in real-time.
 Digital Marketplaces – Platforms like eBay and OLX support live product listings and
auctions.
 Grocery Delivery Apps – Real-time inventory and delivery tracking (e.g., BigBasket,
Blinkit).

VIVA QUESTIONS

1. Write any three real time application for E-Commerce

2. What is an e-commerce application?

3. Which technologies are typically used in an e-commerce application?

4. How do you implement a shopping cart feature?

5. What security measures are necessary for an e-commerce application?

RESULT
Thus a functional classifieds webpage has been created and executed successfully.

Distribution of Marks
Conceptual Understanding /2
Program and Execution /3
Output /2
Viva-Voce /2
Promptness /1
Total / 10

57
[Link].6 DEVELOPING A LEAVE MANAGEMENT SYSTEM FOR AN ORGANIZATION

DATE:

AIM
To design and implement a user-friendly Leave Management System for an organization in any
stack combinations.

OBJECTIVE
To develop an efficient Leave Management System that automates leave application and
approval processes.

SOFTWARE REQUIRED
Frontend: [Link]
Backend: [Link] with Express
Database: MongoDB

DESCRIPTION (MAPPING TO THEORY)

The Leave Management System is designed to streamline and automate the process of requesting,
approving, and tracking employee leaves within an organization. Employees can apply for various
types of leaves, such as casual, earned, and medical leave, and can easily view their leave history and
remaining balances. The system features a user-friendly interface developed using web technologies
like HTML, CSS, and JavaScript, providing smooth navigation and interactive forms for submitting
leave applications.

On the backend, the system utilizes a structured database (such as MySQL or MongoDB) to store
and manage user data, leave records, and organizational policies regarding leave eligibility. Server-
side scripting ensures secure data handling, validation of leave requests, and role-based access
control for employees, managers, and administrators.

The project is grounded in key theoretical concepts from database management (such as entity-
relationship modeling, normalization, and CRUD operations), software engineering (modular design,
validation mechanisms, and error handling), and web development (client-server architecture,
responsive design, and asynchronous communication). It also reflects principles of human-computer
interaction (HCI) by ensuring a smooth user experience and accessibility.

Overall, the system enhances organizational efficiency, reduces manual workload, ensures accurate
record-keeping, and supports transparent and accountable HR processes.

58
 ALGORITHM
Steps to create the application:
1. Create a new React application using Create React App and install React Router DOM
for handling routing.
2. Inside the frontend/src directory, create a "components" folder. Inside the
"components" folder, create [Link], [Link], and [Link] files
with respective functionalities
for user authentication and leave management.
3. Implement the frontend components. [Link] handles user login, [Link] handles user
registration, and [Link] handles leave application and balance
display.
4. Create a CSS file ([Link]) for styling the components.
5. Configure routes in [Link] using React Router DOM to navigate between Login, Signup, and
Leavemanagement components.
6. Set up the backend:
Create a folder named "backend."
Inside the backend folder, run npm init -y to initialize a [Link] application.
Install required packages: npm install express mongoose body-parser bcrypt cors dotenv
7. Inside the backend folder, create "models" and "routes" folders.
In the "models" folder, create a [Link] file defining the MongoDB schema for user leave
data.
In the "routes" folder, create [Link], [Link], and [Link] files for handling authentication,
registration, and leave management routes.
8. Implement the backend routes:
[Link]: Handle user login, validate credentials, and return user data.
[Link]: Handle user registration and save user data to the database.
[Link]: Handle leave application, deduct leave days from the user's balance, and update the
database.
9. Create an [Link] file in the backend folder to set up Express server, connect to MongoDB,
and define API routes.
10. Start both frontend and backend:
In the frontend directory, run npm start to start the React development server.
In the backend directory, run node [Link] to start the Express server.

PROGRAM

59
60
61
62
63
64
65
66
67
OUTPUT

68
REAL TIME APPLICATION

 Employee Leave Tracking – Employees apply for leave and managers approve/reject
requests in real-time.
 Attendance Integration – Syncs with attendance systems to update leave records instantly.
 HR Dashboard – HR can monitor leave balances, trends, and policy violations in real-time.

VIVA QUESTIONS

1. Write any three real time application for leave management system?

2. What is a Leave Management System, and why is it important for an organization?

3. Explain the key features that a Leave Management System should include.

4. What are the challenges in implementing a Leave Management System and how would you
address them?

5. How would you ensure data security and privacy in a Leave Management System?

RESULT
Thus a user-friendly Leave Management System has been designed and implemented
successfully.

Distribution of Marks
Conceptual Understanding /2
Program and Execution /3
Output /2
Viva-Voce /2
Promptness /1
Total / 10

69
[Link].7 DEVELOPING A SIMPLE DASHBOARD FOR PROJECT MANAGEMENT
DATE:

AIM
To design and implement a user-friendly project management for the organization in any stacks
combinations.

OBJECTIVE
To design and implement a user-friendly Project Management System that enables teams
to efficiently create, assign, track, and update tasks across various departments.

SOFTWARE REQUIRED
Frontend: [Link]
Backend: [Link]
Database: MongoDB

DESCRIPTION (MAPPING TO THEORY)

The Project Management Dashboard is a centralized web-based system that facilitates the creation,
tracking, and management of tasks within an organization. It allows users to add new tasks, assign
them to team members, and update their status as Pending, InProgress, or Completed, thereby
enabling real-time visibility into project progress. This supports effective coordination, timely
decision-making, and improved workflow across departments.

The frontend is developed using modern web technologies such as HTML, CSS, JavaScript, or
frameworks like React, incorporating key principles of Human-Computer Interaction (HCI) to ensure
a smooth and intuitive user experience. Features like drag-and-drop task updates, color-coded status
indicators, and responsive design improve usability and engagement.

The backend system integrates with MongoDB or other databases to store task details, user
information, and status updates. It implements CRUD operations, user authentication, and data
validation, which reflect concepts from database management systems (DBMS) and software
engineering such as modular design, MVC architecture, and data integrity.

By combining theoretical concepts from web development, database theory, software engineering,
and project management principles, the system offers a reliable and scalable platform to enhance
productivity, collaboration, and transparency in project execution.

70
ALGORITHM
1. Setup Frontend and Backend Projects
• Create a new folder named "ProjectDashboard".
• Inside "ProjectDashboard", create folders named "frontend" and "backend".
2. Setup Frontend Project
• Open a terminal and navigate to "ProjectDashboard/frontend".
• Create a new [Link] application inside the "frontend" folder:
o npx create-react-app frontend
• Install required dependencies for React Router and CanvasJS:
o cd frontend
o npm i react-router-dom @canvasjs/react-charts
3. Setup Backend Project
• Open a terminal and navigate to "ProjectDashboard/backend".
• Initialize a new [Link] application and install required dependencies:
o npm init -y
o npm install express mongoose body-parser cors dotenv
4. Define Frontend Components
• Inside "frontend/src", create a folder named "components".
• Create the following components inside the "components" folder: [Link],
[Link], and [Link].
• Implement the logic for each component based on the provided code.
5. Define Backend Routes and Models
• Inside "backend", create folders named "models" and "routes".
• Define the MongoDB schema for the user in "models/[Link]".
• Implement backend routes for handling homepage, new project creation, and project
update in "routes/[Link]", "routes/[Link]", and "routes/[Link]"
respectively.
6. Configure [Link] Server
• Create an [Link] file inside the "backend" folder.
• Configure [Link] server, connect to MongoDB, and define routes in the [Link] file.
• Start the Express server:
o node [Link]
7. Integrate Frontend and Backend
• Inside "frontend/src", configure API endpoints to make requests to the backend server (e.g.,
[Link]
• Integrate frontend components with backend routes by making HTTP requests to the
corresponding endpoints.
8. Run the Application
• Open two separate terminals: one for frontend and one for backend.
• Start the React development server for frontend:
o cd frontend
o npm start
• Start the [Link] server for backend (in the backend folder):
o cd backend
o node [Link]
71
9. Access the Application
• Open a web browser and navigate to [Link] to access the project management
dashboard.

PROGRAM

72
73
74
75
76
77
78
OUTPUT

79
REAL TIME APPLICATION

 Task Assignment & Tracking – Assign tasks to team members and track progress in real-
time.
 Live Collaboration – Team members can update status, add comments, and share files
instantly.
 Progress Dashboards – Real-time visual dashboards show overall project health and
deadlines.
 Gantt Charts & Timelines – Dynamic scheduling tools reflect live changes in task durations
and dependencies.

VIVA QUESTIONS

1. Write any three real time application for the project management.

2. What is a task management dashboard?

3. What key features should be included in a task management dashboard?

4. How do you ensure data accuracy in a task management system?

5. How can you visualize task progress on the dashboard?

RESULT
Thus the Project Management Dashboard has been developed for the organization has been
executed successfully.
Distribution of Marks
Conceptual Understanding /2
Program and Execution /3
Output /2
Viva-Voce /2
Promptness /1
Total / 10

80
[Link].8 DEVELOPING AN ONLINE SURVEY APPLICATION
DATE:

AIM
To create an online survey application with a diverse collection of questions, allowing users to
answer random queries, enhancing their engagement and feedback participation.

OBJECTIVE
To create an online survey application that displays a random selection of questions to
users for improved engagement.

SOFTWARE REQUIRED
Frontend:[Link]
Backend:[Link]
Database: MongoDB

DESCRIPTION (MAPPING TO THEORY)

The Online Survey Application is designed to collect user feedback and opinions by presenting a set
of 5 randomly selected questions from a larger pool of survey items. This method enhances user
engagement and ensures a unique experience for each participant by using logic-based
randomization algorithms to prevent repetition and maintain question diversity.

The frontend is developed using technologies such as HTML, CSS, JavaScript, or React,
incorporating principles of Human-Computer Interaction (HCI) to deliver a clean, intuitive, and
responsive user interface. Interactive elements like radio buttons, dropdowns, and progress indicators
guide users smoothly through the survey.

The backend, built with frameworks like Flask, Django, or [Link], handles data processing, user
session tracking, and ensures that each user receives a personalized and secure survey experience.
The system follows RESTful API design principles for communication between frontend and
backend, ensuring modularity and scalability.

For data storage and management, the application uses relational or NoSQL databases, depending on
the tech stack, applying key Database Management System (DBMS) concepts such as normalization
to avoid redundancy and query optimization for faster data retrieval. The application also
incorporates session management to track user progress and prevent multiple submissions.

81
ALGORITHM
1. Create a new folder named "SURVEY".
2. Inside the "SURVEY" folder, create a frontend application:
 Open a new terminal.
 Navigate to the "SURVEY" folder (cd SURVEY).
 Run the following commands:
o mkdir frontend
o cd frontend
o npx create-react-app frontend
o npm i react-router-dom
o npm install --save recharts
3. Create the frontend components and styles:
 Inside the "SURVEY/frontend/src" folder:
o Create a folder named "components".
o Inside the "components" folder, create three files: "[Link]", "[Link]", and
"[Link]".
o Create a CSS file for styling named "[Link]".
o Copy and paste the respective code for each file.
4. Set up the backend application:
 Inside the "SURVEY" folder, create a backend application:
o Open a new terminal.
o Run the following commands:
 mkdir backend
 cd backend
 npm init -y
 npm install express mongoose body-parser bcrypt cors dotenv
 mkdir models
 mkdir routes
5. Create backend routes and models:
 Inside the "SURVEY/backend/models" folder, create a file named "[Link]". Copy and paste
the code for the mongoose schema.
 Inside the "SURVEY/backend/routes" folder, create three files: "[Link]", "[Link]", and
"[Link]". Copy and paste the respective code for each file.
6. Set up the backend server:
 Inside the "SURVEY/backend" folder, create a file named "[Link]". Copy and paste the
code for setting up the Express server.
7. Run the application:
 Open two separate terminals.
 In the first terminal, navigate to "SURVEY/frontend" and run npm start to start the frontend
application.
 In the second terminal, navigate to "SURVEY/backend" and run node [Link] to start the
backend server.
8. Access the application:
 Open a web browser and go to "[Link] to access the frontend application.

82
PROGAM

83
84
85
86
87
88
89
90
OUTPUT

91
REAL TIME APPLICATION

 Customer Feedback Collection – Gather live feedback from users about products or services.
 Market Research – Conduct real-time polls and surveys to understand market trends and
preferences.
 Employee Satisfaction Surveys – HR collects real-time data on employee engagement and
morale.

VIVA QUESTIONS

1. Write any three real time application for online survey?

2. What is the main purpose of your online survey project?

3. What technologies did you use to build this project?

4. How are responses stored and managed in your system?

5. How does the system ensure that a user doesn't submit multiple responses?

RESULT
Thus the interactive online survey platform has been developed successfully and implemented.

Distribution of Marks
Conceptual Understanding /2
Program and Execution /3
Output /2
Viva-Voce /2
Promptness /1
Total / 10

92