Building My Appointments Module using React and Spring Boot

The objective of this lab is to develop a My Appointments module in the Medicare Management System. The application retrieves only the appointments of the currently logged-in user by using the user's unique ID stored after login. The appointment details are fetched from the Spring Boot backend through REST APIs and displayed dynamically in the React frontend.

Introduction

A Hospital Management System contains multiple users and thousands of appointment records. Displaying every appointment to every user is neither secure nor useful. Therefore, each user should be able to view only their own appointments after successful login.

In this lab, the logged-in user's information is stored in Local Storage after authentication. React retrieves the stored user ID and sends it to the Spring Boot backend. The backend filters appointments using the user ID and returns only the relevant appointment records. These records are then displayed in an attractive card layout containing doctor details, appointment information, payment status, and billing details.

This implementation demonstrates secure data retrieval, frontend-backend integration, REST API communication, state management using React Hooks, and dynamic rendering using JSX.

• Integrate React with Spring Boot REST APIs using Axios.
• Fetch logged-in user data and appointments using Local Storage and React Hooks.
• Build reusable components and dynamic personalized dashboards.
• Implement real-world appointment management with One-to-Many entity mapping.

Project Structure

Frontend

src

│

├── components

│      MyAppointment.jsx

│

├── services

│      AppointmentService.js

├── css

│      MyAppointment.css

│

└── App.jsx

Backend

controller

    AppointmentController

service

    AppointmentService

repository

    AppointmentRepository

entity

    Appointment

 Create Repository Method

Create a repository method to retrieve appointments using the logged-in user's ID.

Responsibilities:

• Receive user ID.

• Search database.

• Return matching appointments.

Create a service method that calls the repository.

Responsibilities:

• Accept user ID.

• Fetch appointments.

• Return appointment list.

Create Controller API

Create a REST API.

Method

GET API

http://localhost:8080/api/appointments/user/{id}

Example

http://localhost:8080/api/appointments/user/1

Responsibilities:

• Accept user ID.

• Call service layer.

• Return JSON response.

Test Backend API

Open Postman.

Select GET request.

Enter

http://localhost:8080/api/appointments/user/1

Verify:

• Status Code 200 OK

• JSON response

• Nested User object

• Nested Doctor object

Create AppointmentService.js

Create a React service class.

Responsibilities:

• Connect frontend with backend.

• Send GET request.

• Return API response.

Create MyAppointment Component

Create MyAppointment.jsx.

Responsibilities:

• Display appointment page.

• Read logged-in user.

• Call backend API.

• Store appointments.

• Display appointment cards.

Read Logged-in User

Retrieve user information from Local Storage.

Responsibilities:

• Read user object.

• Extract user ID.

• Use ID while calling backend API.

Fetch Appointment Data

Use useEffect.

Responsibilities:

• Automatically execute after page load.

• Call AppointmentService.

• Retrieve appointment records.

• Update state.

Axios API Call

Store Response

Store backend response inside useState.

Responsibilities:

• Maintain appointment list.

• Trigger UI rendering.

• Refresh component automatically.

Display Appointment Cards

Create responsive appointment cards.

Each card displays:

• Doctor Image

• Doctor Name

• Specialization

• Appointment Date

• Time Slot

• Appointment Reason

• Booking Status

• Payment Status

• Payment Mode

• Bill Amount

Display cards using map(). Appointment Cards

Display Doctor Image

Load doctor image dynamically.

Responsibilities:

• Read image name.

• Display image.

• Handle local image folder.

Doctor Image Display

Design the page using CSS.

Apply:

• Card Layout

• Responsive Grid

• Hover Animation

• Rounded Corners

• Shadow Effects

• Image Styling

• Purple and Green Theme

Configure Routing

Add routing.

Example : /myappointments

Update Navbar.

Add

"My Appointments"

navigation link.
Navigation Bar

Run Backend

Start Spring Boot application.

Verify:

• Backend starts successfully.

• API executes correctly.

• Database connection established.

Run React Application

Execute

npm run dev

Verify:

• React starts successfully.

• My Appointments page opens.

React Console

Verify Output

Login using a valid user.

Navigate to

My Appointments

Verify:

• Only logged-in user's appointments are displayed.

• Other users' appointments are hidden.

• Doctor details appear correctly.

• Payment details are visible.

• Billing information is displayed.

APIs Used

Login API

POST

http://localhost:8080/api/users/login

Get User Appointments

GET

http://localhost:8080/api/appointments/user/1

Great job!

• Built a personalized My Appointments module using React and Spring Boot.
• Retrieved logged-in user appointments through secure REST APIs using Axios and React Hooks.
• Implemented real-world hospital appointment management with responsive UI and user-specific data.