Building Medicine Management Module using React and Spring Boot

The objective of this lab is to develop a Medicine Management module using React and integrate it with the Spring Boot backend. Students will create a medicine registration form, store medicine information in the database, and display all medicines as responsive cards with images.

• Integrate React with Spring Boot REST APIs.

• Create reusable React components.

• Send POST requests using Axios.

• Fetch backend data using GET APIs.

• Display data dynamically using map().

• Design responsive medicine cards.

• Display medicine images from the public folder.

Create MedicineService

Create MedicineService.js inside the services folder.

Responsibilities:

• Connect React with Spring Boot.

• Send POST requests.

• Fetch all medicines..

• Manage API communication using Axios.

Backend URL : http://localhost:8080/api/medicines

Create AddMedicine Component

Create AddMedicine.jsx.

The component is responsible for collecting medicine information from users.

Create the following input fields:

• Medicine Name

• Category

• Manufacturer

• Price

• Stock

• Description

• Expiry Date

• Image Name

Store all values using useState.

When the user clicks Add Medicine, send a POST request to the backend.

After successful insertion:

• Display success message.

• Clear the form.

• Refresh the medicine list automatically.

Create MedicineList Component

Develop MedicineList.jsx.

Responsibilities:

• Fetch all medicines.

• Store response using useState.

• Load data using useEffect.

• Display medicines using map().

• Show medicine information as responsive cards.

Each card displays:

• Medicine Image

• Medicine Name

• Category

• Manufacturer

• Price

• Available Stock

• Expiry Date

• Description

Instead of a table, medicines are displayed as attractive product cards similar to online pharmacy websites.

Design Medicine Cards

Use CSS Grid to create responsive medicine cards.

Apply styling for:

• Card Layout

• Rounded Corners

• Box Shadow

• Hover Animation

• Responsive Design

• Image Display

• Medicine Details

The interface should resemble an online medical store.

Add the Medicine module to the React Router configuration.

Create the following route:

Add a Medicines link in the navigation bar for easy access.

Run Spring Boot Application

Start the backend server.

Verify:

• Application starts successfully.

• MySQL connection is established.

• Medicine APIs are working correctly.

Start the frontend.

Verify:

• Medicine page opens successfully.

• Registration form is displayed.

• Medicine cards are visible.

Test Add Medicine

Enter medicine details.

Click Add Medicine.

Verify:

• POST request is executed.

• Data is stored in MySQL.

• Success message appears.

• Newly added medicine card is displayed immediately.

Test Retrieve Medicines

Refresh the application.

Verify:

• GET API is called.

• All medicines are fetched.

• Cards display complete information.

• Images are loaded successfully.

APIs Used

• Add Medicine

POST http://localhost:8080/api/medicines

• Fetch All Medicines

GET http://localhost:8080/api/medicines

Great job!

In this lab, a complete Medicine Management module was developed using React and Spring Boot. The application allows users to add new medicines, retrieve all medicine records, and display them using attractive responsive cards with images. This implementation demonstrates React component development, Axios integration, REST API communication, dynamic rendering using map(), and modern UI design principles used in real-world healthcare applications.