MEDICARE HEALTHCARE MANAGEMENT SYSTEM

In this lab, we will explore the architecture and development approach for the Medicare Healthcare Management System, a full-stack app using React, Spring Boot, and MySQL.

Project Introduction & Development Guidelines

What is the Project All About?

A patient can register, log in, search for doctors, apply filters, book an appointment, make a payment, track appointment status, and view prescriptions after the consultation.

A doctor can log in, manage their professional profile, view scheduled appointments, complete consultations, and create prescriptions for patients.

Why Did We Choose This Project?

Healthcare appointment systems are commonly used in hospitals, clinics, telemedicine applications, and healthcare platforms.

We selected this project because it allows us to understand several important full-stack development concepts within a single application.

Through this project, students will learn how different technologies communicate with each other in a real application.

The project covers:

What Are We Going to Create?

• We are going to build a complete Healthcare Appointment Management System.

• The system will mainly contain the following modules.

Patient Module

• Register into the system

• Login using email and password

• View their dashboard

• View their profile

• Search for doctors

• Search doctors by name

• Filter doctors by specialization

• Select a doctor

• Select appointment date

• Select available time slot

• Book an appointment

• Make payment using Razorpay Test Mode

• View appointment history

• Cancel an unpaid appointment

Patient Module

• Filter doctors by consultation fee

• Sort doctors

• View doctors using pagination

• View appointment status

• View payment status

• View prescription after consultation

• Receive appointment confirmation email

Patient Module

• Login into the system

• View doctor dashboard

• Create and manage doctor profile

• Add specialization

• Add years of experience

• Set consultation fees

• ​​View payment status

• Complete confirmed appointments

• Create prescription

• Add diagnosis

• Add multiple medicines

• Add dosage

Doctor Module

• Add profile photo URL

• View scheduled patient appointments

• View patient information

• View appointment date and time

• Add frequency

• Add duration

• Add doctor notes

Technologies Used

The project uses the following technologies:

• Frontend

React, Vite, JavaScript, Bootstrap, Axios, React Router, Context API

• Backend

Java, Spring Boot, Spring Web, Spring Data JPA, Hibernate, Spring Security, JWT Authentication, Bean Validation

• Database

MySql

• External Integrations

Razorpay Payment Gateway, Email / SMTP Service

• Development Tools

Eclipse / Spring Tool Suite, Visual Studio , Postma, MySQL Workbench, Git, GitHub

       USER
         │
         ▼
   React Frontend
         │
      REST API
         ▼
 Spring Boot Backend
         │
    ┌────┼────┐
    ▼    ▼    ▼
 MySQL Razorpay Email

Technologies Used

• The application follows a standard frontend-backend-database architecture.

• React is responsible for the user interface.

• Spring Boot handles backend logic

• MySQL stores application data permanently.

Complete Application Flow

• Patient Flow

• Doctor Flow

• Appointment status flow

• If the patient cancels before payment:

PENDING + UNPAID
        │
        ▼
    CANCELLED

• A paid appointment cannot be cancelled in the current project because a refund module is outside the project scope.

ER Diagram of the Project

• The ER Diagram represents how different database tables are connected with each other.

• The main entities represented in the database include: Users, Doctor Profiles, Appointments, Prescriptions, Prescription Medicines

• Note About the ER Diagram

The supplied ER diagram currently shows both doctors and: doctor_profiles

• The final project architecture primarily uses the doctor_profiles table connected to the users table.

How Should We Approach This Project and how to read and use Each phase?

Build the foundation before starting the labs

Before beginning project implementation, the trainer should take at least 3 foundation sessions of approximately 2 hours each.

Initialize Git before starting development

• Create one parent project folder and initialize Git inside that parent folder.

medicare-healthcare-system/
│
├── medicare-backend/
│
└── medicare-frontend/

•  The structure should be: 

• Create one parent project folder and initialize Git inside that parent folder.

• Both frontend and backend should therefore be maintained inside the same parent Git repository.

Read the phase objective first

• Before writing or copying any code, understand what functionality is being developed in that phase.

• Identify what the application should be able to do after completing that phase.

Check the files involved in the phase

• Identify: Files that need to be created, Files that need to be modified, Existing files that will be reused

• Always paste or write code in the exact file and folder mentioned in the lab

Understand the flow before implementing

• Understand how the feature moves through the application.

• For example:

React -> Controllerc->Servicec-> Repository -> MySQL

Follow the phases in sequence

• Each phase is built on top of the previous phase.

• Do not randomly skip phases unless specifically instructed.

• Keep previously completed functionality working while adding the next feature.

Focus on understanding rather than manually typing everything

• These labs are unintentionally large, so students are not expected to manually type every line of code.

• Students are encouraged to copy suitable code provided in the labs to save implementation time.

• However, copied code must be understood before it is used.

Do not blindly copy and paste

• Before copying code, understand: What the code is doing, Why it is required, Which file it belongs to, How it connects with existing code, What input and output it expects

Use the labs to practise AI-assisted development

Write a clear prompt
      ↓
Generate or obtain code
      ↓
Understand the generated code
      ↓
Rectify it if required
      ↓
Place it in the correct file
      ↓
Run and test it

Backend Layered Architecture

• The backend should follow a clean layered structure.

Project Folder Structure

Spring Boot Backend

src/main/java/com/medicare/
├── controller/
├── service/
├── repository/
├── entity/
├── dto/
├── exception/
├── security/
└── MedicareBackendApplication.java

React Frontend

src/
├── api/
├── components/
├── pages/
├── services/
├── context/
├── routes/
└── main.jsx

• This keeps the project easy to understand and maintain.

Naming Practices Followed in the Project

• Consistent naming is important because it makes code easier to understand.

Java Class Naming    

Use PascalCase.

Java Variable and Method Naming

Use camelCase.

Database Naming

Use snake_case

React Component Naming

Use PascalCase.

JavaScript Variables and Functions

Use camelCase.

Service File Naming

Use camelCase.

Frontend Best Practices Followed

• The React frontend follows several important practices.

Use createBrowserRouter

Separate Pages and Reusable Components

Separate API Calls From UI Components

Central Axios Configuration

Context API for Authentication

Bootstrap for Styling

Reusable Components

Backend Best Practices Followed

• The backend also follows several important practices.

ResponseEntity

Validation

Global Exception Handling

Password Encryption

JWT Authentication

Backend as Final Security Authority

How Can We Utilize AI While Building This Project?

• AI should be used as a development assistant, not as a replacement for understanding the project.

• Students can use AI for several tasks.

Requirement Understanding

Code Explanation

Debugging

API Testing

Test Data Generation

Documentation

1. Working Source Code
2. Correct Project Structure
3. .gitignore
4. No Secrets / Credentials
5. Meaningful Commits
6. README
7. Documentation / Screenshots

GitHub Prioritization for This Project

• For this project, GitHub should prioritize working source code, security, clarity, and meaningful commit history.

Suggested GitHub Repository Structure

Final Expected Outcome

• By the end of this project, students should understand how to build a complete full-stack application where multiple technologies work together.

• They should be able to explain:

React UI
    ↓
REST API
    ↓
Spring Boot
    ↓
Spring Security
    ↓
JWT
    ↓
Service Layer
    ↓
JPA / Hibernate
    ↓
MySQL

• as well as external integrations:

Spring Boot
   ├── Razorpay
   └── Email Service

• The objective is not only to create a working healthcare application but also to understand how professional full-stack applications are planned, structured, secured, integrated, tested, and maintained.