Full Stack Application Development - 24SDCS02A Set -1 (Git Version Control)
College Event Management System:
A development team is working on a college event management system where multiple developers
contribute to features such as event registration and notifications. To ensure smooth collaboration
and track changes efficiently, the team uses Git version control.
In this lab, you will simulate a real-world Git workflow including initializing a repository, creating
branches, committing changes, and resolving merge conflicts.
Tasks:
1. Create a new project folder and initialize Git using git init.
2. Configure Git with username and email.
3. Create two files: [Link] and [Link] with sample content.
4. Check repository status and add files to staging.
5. Commit the files with a meaningful message.
6. Create a branch named event-feature, modify files, and commit changes.
7. Create another branch named notification-feature, modify files, and commit changes.
8. Switch back to the main branch and merge both branches.
9. Resolve merge conflicts manually if they occur and complete the merge.
Full Stack Application Development - 24SDCS02A Set -2 (Hibernate CRUD Operations)
Library Management System:
A library system needs to store and manage book details such as book ID, title, author, price, and
available copies. The system should allow the admin to perform CRUD operations efficiently using
Hibernate ORM.
Tasks:
1. Create a Book entity with fields: id, title, author, price, copies.
2. Configure Hibernate and map the entity using JPA annotations.
3. Insert multiple book records.
4. Retrieve a book using its ID.
5. Update price or number of copies.
6. Delete a book record.
Full Stack Application Development - 24SDCS02A Set -3 (Git Version Control)
Online Shopping System:
A team is developing an online shopping application where different modules such as cart and
payment are handled separately by developers. To maintain structured development, Git is used for
version control with multiple branches.
Tasks:
1. Initialize a Git repository.
2. Create files [Link] and [Link].
3. Add and commit the files.
4. Create branch cart-module and make changes.
5. Create branch payment-module and make changes.
6. Merge both branches into main branch.
7. Resolve conflicts if any.
Full Stack Application Development - 24SDCS02A Set -4 HQL (Sorting, Pagination & Aggregates)
Employee Management System:
An organization maintains employee data and needs advanced queries such as sorting, pagination,
and aggregate functions using HQL for better data analysis.
Tasks:
1. Insert employee records.
2. Sort employees by salary (ascending and descending).
3. Implement pagination (first 3, next 3).
4. Count total employees.
5. Find maximum and minimum salary.
6. Filter employees within salary range.
Full Stack Application Development - 24SDCS02A Set -5 (Hibernate CRUD Operations)
Hospital Patient System:
A hospital management system maintains patient records such as ID, name, disease, age, and billing
amount. The system should allow CRUD operations using Hibernate.
Tasks:
1. Create a Patient entity.
2. Configure Hibernate.
3. Insert multiple patient records.
4. Retrieve patient by ID.
5. Update billing amount.
6. Delete a patient record.
Full Stack Application Development - 24SDCS02A Set -6 (Spring Autowiring)
Student & Address:
A system needs to automatically inject Address details into Student using Spring Autowiring.
Tasks:
1. Create Address class.
2. Create Student class with Address object.
3. Use @Component.
4. Use @Autowired.
5. Print details.
Full Stack Application Development - 24SDCS02A Set -7 HQL (Sorting, Pagination & Aggregates)
Product Store
An online store needs to retrieve product data using advanced HQL queries such as grouping,
filtering, and pattern matching.
Tasks:
1. Insert product records.
2. Sort products by price.
3. Group products by category.
4. Count products.
5. Use LIKE queries (start, end, contains).
Full Stack Application Development - 24SDCS02A Set -8 (Spring MVC)
Movie System
A movie application needs multiple endpoints to handle requests like viewing movies, searching, and
adding data.
Tasks:
1. Create controller.
2. /welcome endpoint
3. /movies list
4. /movies/{id}
5. /search
6. /addmovie
7. /viewmovies
Full Stack Application Development - 24SDCS02A Set -9 (Spring Autowiring)
Order and Payment System:
An e-commerce application manages orders along with their payment details. Each Order must
include associated Payment information. Instead of manually creating the Payment object, the
system should use Spring Autowiring to automatically inject it into the Order class using annotations.
Tasks:
1. Create a Payment class with fields: paymentId, paymentMode, transactionStatus
2. Create an Order class with fields: orderId, orderName, amount, Payment object
3. Annotate both classes with @Component.
4. Use @Autowired in the Order class to inject the Payment object.
5. Configure component scanning using Java or XML configuration.
6. Load the Spring IoC container using ApplicationContext.
7. Retrieve the Order bean and display all details including Payment.
Full Stack Application Development - 24SDCS02A Set -10 (API Documentation using Swagger)
Product CRUD API Documentation:
An e-commerce backend provides REST APIs for managing product details. To simplify development
and testing, the APIs must be documented using Swagger/OpenAPI. Swagger UI should provide clear
visibility of endpoints, request formats, and responses.
Tasks:
Part I – Setup
1. Add Swagger dependency to the Spring Boot project.
2. Enable Swagger UI.
3. Launch Swagger UI in browser.
Part II – Document APIs
4. Ensure the following endpoints are available:
o POST /products
o GET /products
o GET /products/{id}
o PUT /products/{id}
o DELETE /products/{id}
5. Verify Product schema (id, name, price, quantity).
6. Add optional annotations to describe APIs.
Part III – Testing
7. Test CRUD operations using Swagger UI.
8. Validate responses for:
o Success cases
o Invalid inputs
9. Ensure proper display of:
o Request body
o Response structure
o Error messages
Full Stack Application Development - 24SDCS02A Set -11 (React API Integration)
Product & Orders Dashboard:
An e-commerce dashboard needs to display product and order data from local files and APIs. The
system should fetch data dynamically, support filtering, and provide a clean UI. React will use fetch(),
axios, useState, and useEffect for data handling.
Tasks:
Part A – Local JSON
1. Create [Link] with 5–6 records (name, price, category).
2. Create LocalProductList component.
3. Use fetch() to load and display data.
4. Handle loading and error states.
Part B – Public API
5. Create ProductList component.
6. Fetch data from: [Link]
7. Display name, price, category.
8. Handle loading and errors.
Part C – Axios API
9. Create OrderList component.
10. Use axios to fetch data from a sample API.
11. Display order details (title/description).
12. Add a Refresh button.
Part D – Navigation
13. Create a Dashboard/Home component with links:
● Local Products
● Products API
● Orders API
14. Enable navigation between components.
15. Load Dashboard in App component.
Part E – Additional
16. Add a dropdown filter (e.g., by category).
17. Apply basic CSS styling.
Full Stack Application Development - 24SDCS02A Set -12 (REST API)
Course Management System: A university application needs backend services to manage course
details such as courseId, title, duration, and fee. The admin should be able to add new courses,
update existing courses, delete courses, and retrieve course details.
To ensure proper communication between frontend and backend, the system must return
appropriate HTTP status codes along with structured responses. Your task is to implement REST APIs
using Spring Boot and ResponseEntity to handle all CRUD operations.
Tasks:
1. Create a Course entity with fields: courseId (primary key), title, duration, fee
2. Create a Service layer to perform CRUD operations:
o Add course
o Retrieve all courses
o Retrieve course by ID
o Update course
o Delete course
3. Implement REST controller endpoints:
o POST /courses → Add a new course
o GET /courses → Retrieve all courses
o GET /courses/{id} → Retrieve course by ID
o PUT /courses/{id} → Update course
o DELETE /courses/{id} → Delete course
4. Use ResponseEntity to return:
o Success responses with appropriate data
o Error messages when course is not found
o Proper HTTP status codes such as OK, CREATED, NOT_FOUND, BAD_REQUEST
5. Implement a search endpoint:
o GET /courses/search/{title} → Retrieve courses by title
6. Test all endpoints using valid and invalid inputs.
Full Stack Application Development - 24SDCS02A Set -13 (Spring Boot – JPQL & Query
Methods Module)
E-commerce Product Search:
An e-commerce platform requires a product search feature where users can filter products
based on category, price range, and sorting order. The backend should use Spring Data JPA with
derived queries and JPQL for efficient data retrieval.
Tasks:
1. Create a Product entity with fields:
o id
o name
o category
o price
2. Create a ProductRepository with derived query methods:
o findByCategory(String category)
o findByPriceBetween(double min, double max)
3. Write JPQL queries using @Query for:
o Sorting products by price
o Fetching products above a certain price
o Fetching products by category
4. Create REST endpoints:
o /products/category/{category}
o /products/filter?min=&max=
o /products/sorted
o /products/expensive/{price}
5. Insert sample data and test different scenarios.
Full Stack Application Development - 24SDCS02A Set -14 (Global Exception Handling using
@ControllerAdvice)
Student Management System:
A university system provides student information through REST APIs. When an invalid student ID
is entered, the system currently shows technical errors. To improve user experience, the
application must return clear and structured error messages using global exception handling.
Tasks:
1. Create custom exception: StudentNotFoundException.
2. Create endpoint /student/{id}.
3. Throw exception when ID is invalid.
4. Create GlobalExceptionHandler using @ControllerAdvice.
5. Handle exception using @ExceptionHandler.
6. Return structured JSON response with:
o timestamp
o message
o statusCode
7. Test with valid and invalid IDs.
Full Stack Application Development - 24SDCS02A Set -15 (REST API)
Product Inventory System:
An e-commerce application needs backend APIs to manage product details such as productId,
name, quantity, and price. The admin should be able to perform CRUD operations and receive
meaningful responses from the server.
Tasks:
1. Create a Product entity with fields: productId, name, quantity, price.
2. Implement Service layer for CRUD operations.
3. Create REST endpoints similar to Course system.
4. Use ResponseEntity for all responses.
5. Add search endpoint /products/search/{name}.
6. Test all APIs.
Full Stack Application Development - 24SDCS02A Set -16 (React State Management using
useState)
Student Manager:
An academic portal needs a frontend application to manage student records dynamically
without page reloads using React Hooks.
Tasks:
1. Create StudentManager component.
2. Initialize students array with 5 records.
3. Use useState for:
o students
o newStudent
4. Create input fields.
5. Add student to list.
6. Display students.
7. Delete student.
8. Show message when list is empty.
9. Apply basic styling.
Full Stack Application Development - 24SDCS02A Set -17 (Spring Boot – JPQL & Query
Methods Module)
Order Management System:
An online shopping system needs to manage order details and provide filtering options based on
order status and total amount using JPQL and query methods.
Tasks:
1. Create Order entity with fields: id, status, totalAmount.
2. Implement derived queries for filtering.
3. Write JPQL queries for sorting and filtering.
4. Create REST endpoints for testing.
5. Verify results.
Full Stack Application Development - 24SDCS02A Set -18 (Global Exception Handling using
@ControllerAdvice)
Product Management System:
An e-commerce application provides product details through REST APIs. When users enter an
invalid product ID or incorrect input, the system returns technical errors that are not user-
friendly.
To improve usability, the application should return clear and structured error responses using
global exception handling. Your task is to implement centralized exception handling using
@ControllerAdvice and handle different types of errors effectively.
Tasks:
1. Create a Product entity with fields: productId, name, price, quantity.
2. Create a custom exception ProductNotFoundException.
3. Create a REST endpoint:
o GET /product/{id} to fetch product details.
4. Throw ProductNotFoundException when product ID is invalid.
5. Create a GlobalExceptionHandler using @ControllerAdvice.
6. Handle ProductNotFoundException using @ExceptionHandler and return:
o timestamp
o message
o statusCode
7. Create another custom exception InvalidInputException.
8. Handle invalid input cases (e.g., wrong ID format) with proper response.
9. Return structured JSON error responses for all exceptions.
10. Test with:
● valid ID
● invalid ID
● invalid input format
Full Stack Application Development - 24SDCS02A Set -19 (React API Integration)
User Information Dashboard:
A web dashboard needs to display user data from multiple sources such as local JSON files and
external APIs. The application should fetch data dynamically, handle loading and error states,
and allow navigation between different views. React will use useState, useEffect, fetch(), and
axios for API integration and state management.
Tasks:
Part A – Local JSON
1. Create [Link] with 5–6 records (name, email, phone).
2. Create LocalUserList component.
3. Use fetch() to load and display data.
4. Handle loading and error states.
Part B – Public API
5. Create UserList component.
6. Fetch data from: [Link]
7. Display name, email, phone.
8. Handle loading and errors.
Part C – Axios API
9. Create PostList component.
10. Use axios to fetch data from a sample API (e.g., posts).
11. Display title and description.
12. Add a Refresh button.
Part D – Navigation
13. Create a Dashboard/Home component with links:
● Local Users
● Users API
● Posts API
14. Enable navigation between components.
15. Load Dashboard in App component.
Part E – Additional
16. Add a dropdown filter (e.g., by userId).
17. Apply basic CSS styling.
Full Stack Application Development - 24SDCS02A Set -20 (React State Management using
useState)
Task Management System:
A web application needs to manage daily tasks where users can add, view, and delete tasks
without refreshing the page. The application should update the UI dynamically whenever the
data changes.
To achieve this, React’s useState hook is used to manage task data at the component level.
Tasks:
1. Create a React component named TaskManager.
2. Initialize a tasks array with at least 5 objects containing:
o id
o taskName
o status
3. Use useState to manage:
o tasks
o newTask
4. Create input fields for: id, taskName, status.
o Update newTask using onChange events.
5. Add an "Add Task" button:
o Add newTask to tasks array
o Clear input fields
6. Display all tasks in a list or table format.
7. Add a Delete button for each task:
o Remove selected task
o Update UI instantly
8. Display message "No tasks available" when list is empty.
9. Apply basic styling for readability.
Full Stack Application Development - 24SDCS02A Set -21 Deployment of Full-Stack Application
(Spring Boot + React)
Student Management Application Deployment:
A company has developed a student management system using React (frontend) and Spring Boot
(backend). Before releasing the application to users, it must be prepared for production deployment.
The development team needs to generate a production build, configure the backend, deploy the
application, and verify that the frontend and backend are properly integrated.
Tasks:
1. Generate the React production build using appropriate build command.
2. Verify that the build folder is created with optimized static files.
3. Package the Spring Boot application as a JAR file.
4. Run the backend application and ensure all APIs are working.
5. Configure necessary environment variables (if required).
6. Deploy the React build:
o Place build files in a server (or Spring Boot static folder)
7. Start the backend server and ensure the frontend is accessible.
8. Test the application in a browser:
o Verify API integration
o Check all CRUD operations
9. Ensure the application runs without errors in production mode.
Full Stack Application Development - 24SDCS02A Set -22 (API Documentation using Swagger)
Student CRUD API Documentation:
A student management system provides multiple REST APIs for CRUD operations. To help developers
and testers understand and test these APIs easily, the backend must include Swagger/OpenAPI
documentation. Swagger UI should display all endpoints, request formats, response structures, and
allow direct API testing.
Tasks:
Part I – Setup
1. Add Swagger/OpenAPI dependency in the project.
2. Configure Swagger (if required).
3. Run the application and open Swagger UI (/swagger-ui/[Link]).
Part II – Document APIs
4. Ensure the following endpoints are visible:
o POST /students
o GET /students
o GET /students/{id}
o PUT /students/{id}
o DELETE /students/{id}
5. Verify automatic schema generation for Student entity (id, name, email, course).
6. Add annotations (optional):
o @Operation (description of API)
o @ApiResponse (response details)
Part III – Testing
7. Test APIs directly in Swagger UI:
o Add student
o View students
o Update student
o Delete student
8. Test invalid cases (e.g., invalid ID).
9. Verify: Request/response structure
o Error messages
o Schema display
Full Stack Application Development - 24SDCS02A Set -23 Spring Dependency Injection
(Constructor & Setter Injection)
Student Management System:
A training institute wants to automate the management of student information in a Spring
application. The system should inject details such as studentId, name, course, and academic year
into objects without manually assigning values. This Skill demonstrates Constructor Injection and
Setter Injection using both XML and Annotation configurations.
Tasks:
1. Create a Java class named Student with fields: studentId, name, course, year.
2. Create a Constructor that accepts all fields and assigns values.
3. Create Setter methods for at least two fields (example: course, year).
4. Configure the Student bean using:
Annotation Configuration - The student should take: a POJO class , a Java class with necessary
annotations, a main class to load the container
5. Create a Spring configuration file (XML or Java-based).
6. Write a main class to load the Spring IoC container.
7. Retrieve the Student bean and print the injected values.
Full Stack Application Development - 24SDCS02A Set -24 (Spring MVC)
Online Course Portal: An online course portal allows users to browse courses, view course details,
search courses, and add new courses. The system must handle different types of web requests such
as simple responses, path variables, request parameters, and JSON data. To implement this
functionality, Spring MVC controllers will be used to handle incoming requests and return
appropriate responses.
Tasks:
1. Create a controller class named CourseController.
2. Create a method mapped to /welcome to return a welcome message.
3. Create a method mapped to /count to return total number of courses.
4. Create a method mapped to /courses using @GetMapping to return a list of course names.
5. Create a method mapped to /courses/{id} using @PathVariable to return course details
based on ID.
6. Create a method mapped to /search using @RequestParam to search courses by name.
7. Create a method mapped to /addcourse using @PostMapping to accept course data from
request body and store it in an in-memory list.
8. Create a method mapped to /viewcourses to display all added courses.
Full Stack Application Development - 24SDCS02A Set -25 Deployment of Full-Stack Application
(Spring Boot + React)
E-commerce Application Deployment:
An e-commerce application built with React and Spring Boot needs to be deployed for real-time use.
The system includes product listing, order management, and API integration.
The application must be packaged, deployed, and tested to ensure smooth functioning in a
production environment.
Tasks:
1. Generate the React production build.
2. Package the Spring Boot backend into a JAR file.
3. Run the backend application and verify APIs (products, orders).
4. Configure environment variables such as API base URL if needed.
5. Deploy the React build using:
o Web server (or Spring Boot static resources)
6. Access the application through a browser.
7. Test key functionalities:
o Product listing
o Add/update/delete operations
o API responses
8. Verify frontend and backend communication.
9. Ensure application stability after deployment.
Full Stack Application Development - 24SDCS02A Set -26 Spring Dependency Injection
(Constructor & Setter Injection)
Online Shopping – Order & Customer System
An online shopping system manages orders along with customer details. Each Order must include
associated Customer information. To avoid manual object creation, Spring Dependency Injection is
used to inject the Customer object into the Order class using both constructor injection and setter
injection.
Tasks:
1. Create a Customer class with fields: customerId, name, email
2. Create an Order class with fields: orderId, productName, amount, Customer object
Part A – Constructor Injection
3. Create a parameterized constructor in Order to accept Customer object.
4. Configure beans using XML or Java configuration.
5. Inject Customer into Order using constructor injection.
6. Load the Spring container and retrieve the Order bean.
7. Display Order and Customer details.
Part B – Setter Injection
8. Create setter methods in Order class.
9. Configure setter-based injection.
10. Inject values using setters.
11. Retrieve and display Order details.