FULL STACK APPLICATION DEVELOPMENT

23SDCS12 A/E/R

STUDENT ID: ACADEMIC YEAR: 2024 - 25

STUDENT NAME:
 LAB & SKILL WORKBOOK
23SDCS12A / 23SDCS12E / 23SDCS12R

FULL STACK APPLICATION DEVELOPMENT

STUDENT NAME
STUDENT ID
YEAR
SEMESTER
SECTION
FACULTY NAME
LAB EXPERIMENTS

Page
Exp. No. Experiment Name
No.
LAB – 1 ➔ Implementing grid, flex and block display 09
LAB – 2 ➔ Development of responsive frontend for system and mobile View 14
LAB – 3 ➔ Working with React props, state 18
Implementation of multiple components as a “Single Page React App” with Redux
LAB – 4 ➔ 22
State Management for Routing
Utilizing the predefined responsive design elements with Bootstrap / Material-UI
LAB – 5 ➔ 26
for designing
LAB – 6 ➔ Transferring (Sending and Receiving) data with Axios / Fetch API and in React 30
LAB – 7 ➔ Spring Boot Web MVC demo and Annotations 34

LAB – 8 ➔ Spring Boot with Rest API and CRUD Operations 38

LAB – 9 ➔ Spring Boot with ReactJS Integration 42
LAB – 10 ➔ Implementing Authentication and Role Based Access 46

LAB – 11 ➔ Implementing JWT Tokens with encryption and decryption (ADV) 50

LAB – 12 ➔ Implementing Microservices and Load Balancing (ADV) 54

LAB – 13 ➔ Implementing Spring Cloud Integration (ADV) 58
LAB – 14 ➔ Hosting backend (spring boot) 62

LAB –15 ➔ Hosting frontend (ReactJS) 66

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 1 of 69
 A.Y. 2024-25 LAB CONTINUOUS EVALUATION

Date of Implementation Output Viva Voce Total

Lab No. Faculty Signature
Evaluation (20M) (20M) (10M) (50M)

10

11

12

13

14

15

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 2 of 69
 A.Y. 2024-25 SKILL CONTINUOUS EVALUATION

Team Details

Team ID Section Student ID Student Name Team Lead

Problem Statement ID:

Problem Statement:

Project Title:

Innovative / Unique Ideology for the Application:

Git Repo Link:

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 3 of 69
 A.Y. 2024-25 SKILL CONTINUOUS EVALUATION
Review 1 - Rubrics and Evaluation
Review 1 -
S.no 0 5 7 9 10 Marks
Rubrics
Extensive
Extensive survey
No Survey Survey survey
Survey conducted
1 work conducted conducted is conducted
Conducted including field
done but partial satisfied through
survey
online

Excellent feature or
Unique points measure is
No Survey Survey
Survey identified identified from
2 work summary is summary is
Summary from survey summary to
done partial satisfied
summary application yet to
develop

Design
Thinking
Concepts
Design Design Design
(Empathy No Design thinking
thinking thinking thinking
3 Mapping, work concepts are
concepts are concepts are concepts are
Persona, done excellent
partial satisfied good
Customer
Journay Map,
etc…)
Identified
Innovative and
No Innovative innovative / Good
Unique Add-on Excellent
4 work idealogy is in unique points deviation from
to the innovation
done partial state for existing app
Application
application
Module
Identification
(Sample: user,
admin,
authentication,
Requirements
core No Requirements All the
Modules are are satisfied
5 functionality work are identified requirements are
partial for the
modules, result done in good level completed
project
display module,
feedback
module,
information
module, etc..)
No
Article Partially Article is
6 work Article is good Article is excellent
Publishing published satisfactory
done
No
Prototype Prototype is Prototype is Prototype is Prototype is
7 work
Creation partial satisfactory good excellent
done
Video
Youtube Video No
prepared in
8 on Explaining work NA NA Video published
offline and
the Prototype done
yet to upload
Individual Individual Individual
Individual
No student's student's student's
Team student's
9 work coordination coordination coordination
Coordination coordination with
done with team is with team is with team is
team is excellent
just ok satisfactory good
No There is Project Project
Overall Project Project progress is
10 work progress but progress is progress is
Progress excellent
done not enough satisfactory good

Signature with Faculty ID

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 4 of 69
 A.Y. 2024-25 SKILL CONTINUOUS EVALUATION
Review 2 - Rubrics and Evaluation
S.No Review 2 - Rubrics 0 5 7 9 10 Marks
Required
70% Components
elements All
Front End Elements / No elements segragation
are partially components
1 Components in React work and and
brought are developed
+ Vite App done components availability is
inside the in front end
are made excellent
app
Design
Responsive Front No Design with Design is Design feels
completed
2 End Design (CSS) in work CSS is done good and and look
but not
React + Vite App done but partiall responsive excellent
responsive
Event
Front End Event No Event Event Event
handling is
3 Handling in React + work handling is handling is handling is
partially
Vite App done satisfied good excellent
completed
Git push and
Git push and Git utilization
No Just created pull
Git Repo for Team pull among team
4 work and not operations
Work operations members is
done utilized are
are good excellent
satisfactory
Individual Individual Individual Individual
No student's student's student's student's
5 Team Coordination work coordination coordination coordination coordination
done with team is with team is with team is with team is
just ok satisfactory good excellent
No There is Project Project Project
Overall Project
6 work progress but progress is progress is progress is
Progress
done not enough satisfactory good excellent

Signature with Faculty ID

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 5 of 69
 A.Y. 2024-25 SKILL CONTINUOUS EVALUATION
Review 3 - Rubrics and Evaluation
Review 3 -
S.No 0 5 7 9 10 Marks
Rubrics
Responsive Front
End in React + Vite Design
No Design is Design feels
App (including Design is done completed but
1 work good and and look
Multiple but partiall not
done responsive excellent
Components, CSS, responsive
Event Handling)
All Server
Server
No dependencies Integration is
Server Side Basic Server handles
2 work and good with
Integration Running request and
done configurations react + vite
response
setted app
<30% 40% 50%
No 30% modules
Modules modules in modules in modules in
3 work in back end
Development back end back end back end
done completed
completed completed completed
No
Connections Entity classes JPA Data storing
4 Database Usage work
Established created integrated in database
done
signup and
signup and login
Authentication Only signup
Authentication No login integrated
tried to page
5 Process Integrating work integrated with server
integrate with integrated
with Server done with server and
server and working
and working operations
are perfect
Individual Individual Individual Individual
No student's student's student's student's
6 Team Coordination work coordination coordination coordination coordination
done with team is with team is with team is with team is
just ok satisfactory good excellent
No There is Project Project Project
Overall Project
7 work progress but progress is progress is progress is
Progress
done not enough satisfactory good excellent

Signature with Faculty ID

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 6 of 69
 A.Y. 2024-25 SKILL CONTINUOUS EVALUATION
Review 4 - Rubrics and Evaluation
Review 4 -
S.No 0 5 7 9 10 Marks
Rubrics
Responsive
Front End in
React + Vite
No Design Design feels
App (including Design is done Design is good
1 work completed but and look
Multiple but partiall and responsive
done not responsive excellent
Components,
CSS, Event
Handling)
No <70% 70% 90% All modules
Module
2 work implementation implementation implementation perfectly
Implementation
done completed completed completed implmented
Additional
Features (like -
encryption &
decrypt,
jwt tokens,
spring cloud,
mail,
Additional Additional Additional Additional
google maps, No
Features Features Features Features
3 search / filter work
Implementation Implementation Implementation Implementation
module, done
is just ok is satisfying is good is excelent
payment
gateway,
file storing in
database,
Captcha
Generation,
etc…)
The database
The database
No tables, fields
Connections Data storing in tables, fields
4 Database Usage work and operations
Established database and operations
done are good
are excellent
enough
No Role based Role based
Role Based Role based Role based
5 work access is access is
Access access is partial access is good
done satisfactory excellent
Individual Individual Individual Individual
No student's student's student's student's
Team
6 work coordination coordination coordination coordination
Coordination
done with team is with team is with team is with team is
just ok satisfactory good excellent

No There is Project Project Project

Overall Project
7 work progress but progress is progress is progress is
Progress
done not enough satisfactory good excellent

Signature with Faculty ID

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 7 of 69
 A.Y. 2024-25 SKILL CONTINUOUS EVALUATION
Review 5 - Rubrics and Evaluation
S.No Reviews 5 - Rubrics 0 5 7 9 10 Marks
Responsive Front End in
React + Vite App No Design Design feels
Design not Design is good
1 (including Multiple work completed but and look
satisfactory and responsive
Components, CSS, Event done not responsive excellent
Handling)
No <80% 80% 90% All modules
2 Module Implementation work implementation implementation implementation perfectly
done completed completed completed implmented
Additional Features
(encryption & decrypt,
jwt tokens,
spring cloud, Additional Additional Additional Additional
No
mail, Features Features Features Features
3 work
google maps, Implementation Implementation Implementation Implementation
done
search / filter module, is just ok is satisfying is good is excelent
payment gateway,
file storing in database,
Captcha Generation, etc…)

ADV -
FSAD - Advanced -
Microservices
Microservies, features are
No server page is features are features are
load balancing, implemented in
4 work present / REG - implemented in implemented in
api gateway. FSAD - a satisfactory
done Component a good level a excelent level
Regular - Unique Feature level
available for
Implementation
unique feature
Frontend and
No Deployment is
Front end Backend Deployed with
5 Deployment Done work partially
deployed deploymed CI/CD
done working
with database
Git repo is upto Git repo is upto
Git repo is upto Git repo is upto
date and date and
No date and date and
number of number of
6 Project Git Integration work number of number of
operations over operations over
done operations over operations over
the git is the git is
the git is ok the git is good
satisfactory excellent

No Video prepared
Youtube Video on Video
7 work in offline and NA NA
Explaining the Project published
done yet to upload

Individual Individual Individual Individual

No student's student's student's student's
8 Team Coordination work coordination coordination coordination coordination
done with team is with team is with team is with team is
just ok satisfactory good excellent
No There is Project Project Project
9 Overall Project Progress work progress but progress is progress is progress is
done not enough satisfactory good excellent

Signature with Faculty ID

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 8 of 69
Experiment No. 1 Student ID

Date Student Name

LAB – 1 ➔ Implementing grid, flex and block display

Prerequisites:
Knowledge on the HTML elements and styling
Exercise:

Faculty and students are organizing a "Greeks for Greeks" student chapter focused on teaching practical web
development concepts. As part of this event, they plan to demonstrate a project that illustrates how to build
a product grid using CSS Grid, and individual product cards and sidebar using Flex and block display
model in React. Each component will be styled using external CSS to create a cohesive and responsive layout.
How can they set up this example to effectively showcase these layout techniques in a React application?

Project structure:

product-catalog/
├── src/
├── App.jsx
├── Grid.jsx
├── Sidebar.jsx
├── MainContent.jsx
└── Main.jsx

Layout should be one of the below,

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 9 of 69
Sample Layout 1

Sample Layout 2

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 10 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 11 of 69
VIVA QUESTIONS:

1. What is the difference between display: grid, display: flex, and display: block?
2. Explain the CSS Grid layout. How does it help in building complex layouts?
3. What is the grid-template-columns and grid-template-rows property in CSS Grid? How do you use
them?
4. How does Flexbox simplify layout management in CSS?
5. What is the difference between justify-content in Flexbox and CSS Grid?

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 12 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Evaluator Emp ID:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 13 of 69
Experiment No. 2 Student ID

Date Student Name

LAB – 2 ➔ Development of responsive frontend for system and mobile View

Prerequisites:
Knowledge on the HTML elements and styling

Exercise:
This Product Directory allows users to view product details in a grid layout on larger screens and in a single-
column list view on smaller screens. It will dynamically fetch employee data from the database and adjust
the layout based on the screen size. So that, to create a responsive front end that display data and adapts to
both desktop and mobile views.

The view may be like the below one,

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 14 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 15 of 69
VIVA QUESTIONS:

1. How does the className attribute work in JSX, and why isn’t it just class like in HTML?
2. What are dynamic classes, and how can you add them based on state in React?
3. How do CSS preprocessors like Sass or LESS integrate with React?
4. Explain the concept of scoped CSS in React and how you can achieve it.
5. What are styled-components, and how do they differ from inline styles or external stylesheets?

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 16 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Evaluator Emp ID:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 17 of 69
Experiment No. 3 Student ID

Date Student Name

LAB – 3 ➔ Working with React props, state

Prerequisites:
Knowledge on the HTML elements and styling
Knowledge on the Java Script

Exercise
The TCS team lead need visited to KLU and they need User Profile Component as a real-time example,
where we manage the user’s personal information (like name, age, and location) in a parent component
(App.js) and pass that data to a child component (UserProfile.js) using props. The user can also update
this information, and we will manage the updates using state within the child component.finally TCS
team need the following pages.

Pass user data (name, age, and location) to a child component as props.

Allow the user to update their profile, which will be handled via state in the child component. The
updated profile information will be reflected back in the parent component using state lifting (passing
the updated state back to the parent).

user-profile/
├── src/
├── App.js
├── UserProfile.js
└── index.js

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 18 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 19 of 69
VIVA QUESTIONS:

1. What are props in React, and how are they different from state?
2. How would you pass props from a parent component to a child component? Provide an example.
3. Explain how state is managed in React and how it differs from props.
4. What is the purpose of this.setState in class components?
5. How can you update state in functional components using hooks?

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 20 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Evaluator Emp ID:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 21 of 69
Experiment No. 4 Student ID

Date Student Name

LAB – 4 ➔ Implementation of multiple components as a “Single Page React App” with

Redux State Management for Routing.

Prerequisites:
Having a basic understanding of HTML and CSS is valuable for building user interfaces and styling
your React components.
>npm install redux

Exercise 1:
Create a single page simple React application with two routes: Home and About. Implement
navigation links to switch between these routes using Redux.

Exercise 2:
Implement a nested routing structure in a React application using Redux. Create a parent route and two
child routes that are rendered within the parent component. All these as a single page app.

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 22 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 23 of 69
VIVA QUESTIONS:

1. How does Redux help in managing the state of an application?

2. List the key components of Redux and their roles?
3. What is the role of reducer and store in any e-commerce application.
4. What are the benefits of using Redux in terms of debugging and maintaining application
state?
5. What is drawback developer need to face without redux?

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 24 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Evaluator Emp ID:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 25 of 69
Experiment No. 5 Student ID

Date Student Name

#LAB – 5 ➔ Utilizing the predefined responsive design elements with Bootstrap / Material-
UI for designing

Prerequisites:
Material UI need to be installed or Bootstrap CDN need to be integrated

Exercise 1:
Create a form with Material-UI / Bootstrap components (such as text fields, select fields, and
checkboxes) to collect user information and validate the input.

Exercise 2:
Implement a responsive navigation bar using Material-UI's App Bar / Bootstrap component. The
navigation bar should have a logo, menu items, and handle mobile responsiveness.

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 26 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 27 of 69
VIVA QUESTIONS:

1. How do you add Material-UI to a React project?

2. Describe the Box component in Material-UI and its use cases.
3. How do you add Bootstrap to a React project?
4. What are the main differences between Bootstrap and Material-UI?
5. What is React-Bootstrap, and how does it differ from regular Bootstrap?

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 28 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Evaluator Emp ID:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 29 of 69
Experiment No. 6 Student ID

Date Student Name

#LAB – 6 ➔ Transferring (Sending and Receiving) data with Axios / Fetch API and in
React

Prerequisites:
Axios / Fetch need to be installed

Exercise 1:
Create a React component called UserData that fetches user data from a given API endpoint using Axios.
Display the fetched user data in a table format.
Use this API end point to get user data - https://api.github.com/users/defunkt/following or
https://reqres.in/api/users

Exercise 2:
Send API request to 3rd party and get the response to print it.
Use this API call - https://rapidapi.com.
For example weather api (use any api as your wish) -https://rapidapi.com/worldapi/api/open-
weather13/playground/apiendpoint_d15cd885-e8e5-49e7-b94b-588c41687aa1

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 30 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 31 of 69
VIVA QUESTIONS:

1. How do you handle loading, success, and error states in a React component when making an API request
with Axios or Fetch?
2. Explain how you would use useEffect with Axios or Fetch to make API calls in a React functional
component. What are the potential issues, and how would you prevent unnecessary re-renders?
3. How can you pass headers or authentication tokens with Axios or Fetch in a React application, and
what’s the best way to keep this information secure?
4. How would you cancel an API request in React if the component unmounts before the request completes,
using Axios or Fetch?
5. How do you handle asynchronous operations with Axios / Fetch?

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 32 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Evaluator Emp ID:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 33 of 69
Experiment No. 7 Student ID

Date Student Name

LAB – 7 ➔ Spring Boot Web MVC Demo & Annotations

Prerequisites:
General Idea on Spring Boot MVC Architecture

Exercise:
1. Create a Spring Boot Web MVC application that demonstrates various request mappings and handling
methods using a customer object. Implement the following demo operations
2. Create a method that maps to the URL "/demo1" and returns an integer.
3. Create a method that maps to the URL "/demo2" and returns a double value
4. Create a method that maps to the URL "/demo3" using @GetMapping and returns a formatted HTML
string.
5. Create a method that maps to the URL "/demo4" using @GetMapping, initializes a string "KLEF", and
returns a concatenated string "I Study at " with the initialized string.
6. Create a method that maps to the URL "/demo5/{id}" using @GetMapping, accepts a path variable "id",
and returns its value.
7. Create a method that maps to the URL "/demo6/{a}/{b}" using @GetMapping, accepts two path
variables "a" and "b", and returns their sum as a string.
8. Create a method that maps to the URL "/demo7" using @GetMapping, accepts a request parameter "id",
and returns it as a string.
9. Create a method that maps to the URL "/demo8/{name}" using @GetMapping, accepts a path variable
"name", and returns it as a string.
10. Create a method that maps to the URL "/addcustomer" using @PostMapping, accepts a Customer object
in the request body, adds it to a list, and returns a confirmation message "Customer Added Successfully".
11. Create a method that maps to the URL "/viewcustomer" using @GetMapping and returns the list of all
Customer objects added.

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 34 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 35 of 69
VIVA QUESTIONS:

1. What are the key differences between Spring MVC and Spring Boot MVC?
2. How does Spring Boot simplify the development of Spring applications?
3. Explain how to use @RequestBody and @ResponseBody annotations in Spring Boot.
4. Explain the role of the @Autowired annotation in Spring Boot and how it works in the context
of Dependency Injection?
5. What is the purpose of application.properties or application.yml in a Spring Boot application?

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 36 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Evaluator Emp ID:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 37 of 69
Experiment No. 8 Student ID

Date Student Name

LAB – 8 ➔ Spring Boot with Rest API and CRUD Operations

Prerequisites:
General Idea on Spring Boot MVC and Form Handling
General Idea on Spring Data JPA

Exercise:
Develop a Spring Boot web application to manage a list of products in a warehouse. The application should
handle CRUD operations to manage product details such as Product ID, Name, Description, Price, and
Quantity. The application should include features to add new products, display a list of all products, update
existing product details, and delete products from the database. Use Spring Web MVC for handling HTTP
requests, Spring Data JPA for database interactions. Ensure the application is configured to connect to a
MySQL/PostgreSQL database and implement both setter-based or constructor-based dependency injections
to manage service and repository layers effectively.

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 38 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 39 of 69
VIVA QUESTIONS:

1. Can you explain the role of each layer (Controller, Service, Repository) in a Spring Boot MVC
application, especially in the context of CRUD operations?
2. How would you configure and connect a Spring Boot application to a relational database, and what
dependencies are necessary for CRUD operations?
3. Describe how you would create and map a JPA entity for a table in the database. How does this
mapping support CRUD operations?
4. How do you handle data validation in a Spring Boot CRUD application before saving data to the
database? Can you give examples of annotations used for validation?
5. What is the purpose of @Transactional in Spring Boot, and how does it ensure data consistency
during CRUD operations?

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 40 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Evaluator Emp ID:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 41 of 69
Experiment No. 9 Student ID

Date Student Name

LAB - 9 ➔ Spring Boot with ReactJS Integration

Prerequisites:
Implementation skill in Reactjs

Implementation skill in Spring Boot Application with JPA and Database

Exercise:

Implement the necessary ReactJS front end pages for sending the request and receive responses from
the back end (spring boot app) designed as per the below requirements.

Develop a Spring Boot web application to manage a list of products in a warehouse. The application
should handle CRUD operations to manage product details such as Product ID, Name, Description,
Price, and Quantity. The application should include features to add new products, display a list of all
products, update existing product details, and delete products from the database. Use Spring Web MVC
for handling HTTP requests, Spring Data JPA for database interactions. Ensure the application is
configured to connect to a MySQL/PostgreSQL database and implement both setter-based or
constructor-based dependency injections to manage service and repository layers effectively.

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 42 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 43 of 69
VIVA QUESTIONS:
1. How does data flow between a ReactJS frontend and a Spring Boot backend in a full-stack application?
2. How do you configure CORS in a Spring Boot application to allow requests from a ReactJS frontend?
3. What is the role of JPA in a Spring Boot application, and how does it interact with a database?
4. How do you handle asynchronous operations in React when fetching data from the Spring Boot API?
5. Can you describe a typical CRUD operation cycle from the ReactJS frontend to the database via Spring
Boot and JPA?

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 44 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Evaluator Emp ID:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 45 of 69
Experiment No. 10 Student ID

Date Student Name

LAB - 10 ➔ Implementing Authentication and Role Based Access

Prerequisites:
Implementation skill in Reactjs
Implementation skill in Spring Boot Application with JPA and Database

Exercise:
Implement the necessary ReactJS front end pages (signin, signup, home, admin) for sending the request and
receiving the responses from the back end (spring boot app) designed to handle signin and signup request
with database integration.
During registering the user, get input as admin or user. This is to store the user role in database. Have logout
button in the front end to sign-out the authentication.
While login, permit the user or admin to Home page on successful login. Permit the admin to admin page
and not the user.

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 46 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 47 of 69
VIVA QUESTIONS:

1. How do you implement authentication in a ReactJS and Spring Boot application, and what are the typical
steps involved?
2. How do you implement role-based access control (RBAC) in a ReactJS application integrated with a
Spring Boot backend?
3. How do you handle session management and token expiration in ReactJS when dealing with
authenticated requests?

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 48 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Evaluator Emp ID:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 49 of 69
Experiment No. 11 Student ID

Date Student Name

#LAB – 11 ➔ Implementing JWT Tokens with encryption and decryption

Prerequisites:
Basic Idea on Spring Security
Basic Idea on JWT Tokens & RBAC

Exercise:
Develop a Spring Boot application with JWT-based security for role-based authentication and
authorization.
Call the JWT token generation function and validation function from browser to generate and validate the
tokens.
Encrypt the provided data to the token and then where required decrypt the token to get the original data to
display in the browser.

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 50 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 51 of 69
VIVA QUESTIONS:

1. What is JWT (JSON Web Token)?

2. How does JWT facilitate secure authentication between a React frontend and a Spring Boot backend?
3. How do you create and configure security filters for handling JWT tokens in Spring Boot?
4. Discuss the use of @PreAuthorize and @Secured annotations in role-based access control.

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 52 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Name of the Evaluator:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 53 of 69
Experiment No. 12 Student ID

Date Student Name

LAB - 12 ➔ Implementing Microservices and Load Balancing

Prerequisites:
Implementation skill on Spring Boot App
Basic Idea on Microservices and Load Balancing

Exercise 1:
Now there is a demand to make some mathematical calculation over web. So, you need to create one
server application (eureka) and two client applications, in which “client 2” will do the calculation and
return the answer to “Client 1”. The client 1 will handle the user interaction by getting input from user
after then sending the same to “client 2” and then getting answer from “client 2” to return the same to
“client 1”. The server need to monitor both the clients.

Exercise 2:
Now the number of requests from the end users is raising above the threshold level, so its time to create
“client 3” which is similar to “client 2” and have load balancer between them. Attach the load balancer
in “client 1”, so that, every request come to “client 1” need to be load balanced between “client 2” and
“client 3”.

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 54 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 55 of 69
VIVA QUESTIONS:

1. How can we access RESTful in Microservices?

2. What's the difference between a microservices-oriented architecture (MOA) and a service-oriented
architecture (SOA)?
3. What does the term "bounded context" mean in relation to microservices?
4. Explain three types of Tests for Microservices?
5. How is distributed tracing used in Microservices?

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 56 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Evaluator Emp ID:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 57 of 69
Experiment No. 13 Student ID

Date Student Name

#LAB - 13 ➔ Implementing Spring Cloud Integration

Prerequisites:
Basic Idea on Spring Boot
Basic Idea on Spring Cloud

Exercise:
Now, due to the implementation of microservices in market, there is a requirement to have common
values for the same variables available in different spring boot app. In this case, there should be similar
2 spring boot app which uses same variable and the value for the variable need to be picked form the
github repo based on the “development” or “production” environment. Assign the picked value to the
variable and print it to show the output.

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 58 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 59 of 69
VIVA QUESTIONS:

1. What is Spring Cloud, and why is it useful in a microservices architecture?

2. What is a Circuit Breaker in Spring Cloud, and how does it help improve system resilience?
3. How do you implement centralized configuration management with Spring Cloud Config?
4. What is Spring Cloud Gateway, and how does it differ from Zuul as an API Gateway?
5. How can you secure microservices in Spring Cloud, and what role does Spring Security play?

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 60 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Evaluator Emp ID:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 61 of 69
Experiment No. 14 Student ID

Date Student Name

#LAB - 14 ➔ Hosting backend (spring boot)

Prerequisites:
Implementation skill on Spring Boot App

Exercise:
Now, it time to bring the web application in online. Whatever you had developed as a spring boot application
(full stack) with JPA, database and frontend interaction. You need to host the back end (spring boot) and
mysql database in cloud. So that everyone should be able to open this anywhere in the world.

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 62 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 63 of 69
VIVA QUESTIONS:

1. What is Spring Boot, and how does it simplify the Spring framework?
2. Explain the purpose of the @SpringBootApplication annotation.
3. How does Spring Boot handle dependency management, and what is the role of the starter dependencies?
4. What is an embedded server, and which servers are supported by Spring Boot?
5. Explain the difference between @RestController and @Controller.

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 64 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Evaluator Emp ID:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 65 of 69
Experiment No. 15 Student ID

Date Student Name

#LAB - 15 ➔ Hosting frontend (ReactJS)

Prerequisites:

Implementation skill on ReactJS App

Exercise:
Now, it time to bring the web application in online. What ever you had developed as a ReactJS application
(full stack) with back end interaction. You need to host the front end (ReactJS) in cloud. So that every one
should able to open this any where in the world.

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 66 of 69
Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25
Course Code(s) 23SDCS12 A/E/R Page 67 of 69
VIVA QUESTIONS:

1. What is ReactJS, and how does it differ from other JavaScript frameworks?
2. Explain the Virtual DOM and how it improves performance in React.
3. What are functional and class components? When would you choose one over the other?
4. What are React Hooks, and why were they introduced?
5. Describe the purpose of useState and useEffect hooks.

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 68 of 69
 (For Evaluator’s use only)

Comment of the Evaluator (if Any) Evaluator’s Observation

Marks Secured: out of 50

Evaluator Emp ID:

Evaluator Signature with Date

Course Title Full Stack Application Development ACADEMIC YEAR: 2024-25

Course Code(s) 23SDCS12 A/E/R Page 69 of 69