# huyhoangphan2410/nhom1_medicalbookingapp architecture

> Architecture diagram of the GitHub repository huyhoangphan2410/nhom1_medicalbookingapp, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/huyhoangphan2410/nhom1_medicalbookingapp
- Repository: https://github.com/huyhoangphan2410/nhom1_medicalbookingapp

## Overview

MedBooking is a medical appointment booking application with a Vue frontend, Spring Boot API, and MySQL database. Patients browse doctors, register and verify email, book appointments, and make payments; doctors manage schedules, while administrators manage users and booking records. The graph preserves those domain branches, but several service and view implementations were not sampled, so their internal calls are not asserted. The documented deployment topology supports the frontend-to-backend-to-database links; OTP email is a documented optional integration.

Main entry points: [`backend/src/main/java/com/medbooking/MedBookingApplication.java`](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/MedBookingApplication.java) (Spring Boot API), [`frontend/src/router/index.js`](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/router/index.js) (Role-Based Routes), [`frontend/src/api/axios.js`](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/api/axios.js) (HTTP Client), [`frontend/src/App.vue`](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/App.vue) (Vue Application)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Patient and Doctor UI"]
  node_web["Vue Application<br/>[App.vue]"]
  node_routes["Role-Based Routes<br/>[index.js]"]
  node_authui["Authentication Views<br/>[AuthView.vue]"]
  node_authstore["Session Store<br/>[auth.js]"]
  node_bookingui["Booking Views<br/>[HomeView.vue]"]
  node_doctorui["Doctor Dashboard"]
  node_adminui["Admin Views<br/>[AdminDashboard.vue]"]
  node_http["HTTP Client<br/>[axios.js]"]
end

subgraph group_api["Backend API"]
  node_api["Spring Boot API"]
end

subgraph group_domain["Booking Services"]
  node_auth["Authentication"]
  node_verification["Email Verification"]
  node_appointments["Appointment Booking"]
  node_payments["Payment Confirmation"]
  node_schedules["Schedule Management"]
  node_doctorcatalog["Doctor Catalog"]
  node_records[("Booking Records<br/>[Appointment.java]")]
end

subgraph group_admin["Administration"]
  node_adminapi["Admin Management"]
end

node_users(("Patients and Doctors"))
node_mysql[("MySQL Database")]
node_smtp(("Gmail SMTP"))

node_users -->|"uses"| node_web
node_web -->|"renders routes"| node_routes
node_routes -->|"routes to"| node_authui
node_routes -->|"routes to"| node_bookingui
node_routes -->|"routes to"| node_doctorui
node_routes -->|"routes to"| node_adminui
node_authui -->|"uses"| node_authstore
node_authstore -->|"sends requests"| node_http
node_bookingui -.->|"requests data"| node_http
node_doctorui -.->|"requests data"| node_http
node_adminui -->|"requests data"| node_http
node_http -->|"calls API"| node_api
node_api -.->|"dispatches auth"| node_auth
node_api -.->|"dispatches booking"| node_appointments
node_api -.->|"dispatches payment"| node_payments
node_api -.->|"dispatches schedules"| node_schedules
node_api -.->|"dispatches catalog"| node_doctorcatalog
node_api -.->|"dispatches admin"| node_adminapi
node_auth -->|"sends OTP"| node_verification
node_verification -.->|"sends email"| node_smtp
node_appointments -.->|"persists bookings"| node_records
node_api -->|"stores application data"| node_mysql
node_adminapi -.->|"manages records"| node_mysql

click node_web "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/App.vue"
click node_routes "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/router/index.js"
click node_authui "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/views/AuthView.vue"
click node_authstore "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/stores/auth.js"
click node_bookingui "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/views/HomeView.vue"
click node_doctorui "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/views/DoctorDashboardView.vue"
click node_adminui "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/views/admin/AdminDashboard.vue"
click node_http "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/api/axios.js"
click node_api "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/MedBookingApplication.java"
click node_auth "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/service/impl/AuthServiceImpl.java"
click node_verification "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/service/EmailVerificationService.java"
click node_appointments "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/controller/AppointmentController.java"
click node_payments "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/controller/PaymentController.java"
click node_schedules "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/controller/ScheduleController.java"
click node_doctorcatalog "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/controller/DoctorController.java"
click node_adminapi "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/controller/admin/AdminUserController.java"
click node_records "https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/entity/Appointment.java"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_web,node_routes,node_authui,node_authstore,node_bookingui,node_doctorui,node_adminui,node_http toneBlue
class node_api,node_mysql toneAmber
class node_auth,node_verification,node_appointments,node_payments,node_schedules,node_doctorcatalog,node_records toneMint
class node_adminapi toneRose
class node_users,node_smtp toneIndigo
```

## Components

### Patient and Doctor UI

- [Vue Application](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/App.vue): `frontend/src/App.vue`
- [Role-Based Routes](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/router/index.js): `frontend/src/router/index.js`
- [Authentication Views](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/views/AuthView.vue): `frontend/src/views/AuthView.vue`
- [Session Store](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/stores/auth.js): `frontend/src/stores/auth.js`
- [Booking Views](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/views/HomeView.vue): `frontend/src/views/HomeView.vue`
- [Doctor Dashboard](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/views/DoctorDashboardView.vue): `frontend/src/views/DoctorDashboardView.vue`
- [Admin Views](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/views/admin/AdminDashboard.vue): `frontend/src/views/admin/AdminDashboard.vue`
- [HTTP Client](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/frontend/src/api/axios.js): `frontend/src/api/axios.js`

### Backend API

- [Spring Boot API](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/MedBookingApplication.java): `backend/src/main/java/com/medbooking/MedBookingApplication.java`

### Booking Services

- [Authentication](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/service/impl/AuthServiceImpl.java): `backend/src/main/java/com/medbooking/service/impl/AuthServiceImpl.java`
- [Email Verification](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/service/EmailVerificationService.java): `backend/src/main/java/com/medbooking/service/EmailVerificationService.java`
- [Appointment Booking](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/controller/AppointmentController.java): `backend/src/main/java/com/medbooking/controller/AppointmentController.java`
- [Payment Confirmation](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/controller/PaymentController.java): `backend/src/main/java/com/medbooking/controller/PaymentController.java`
- [Schedule Management](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/controller/ScheduleController.java): `backend/src/main/java/com/medbooking/controller/ScheduleController.java`
- [Doctor Catalog](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/controller/DoctorController.java): `backend/src/main/java/com/medbooking/controller/DoctorController.java`
- [Booking Records](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/entity/Appointment.java): `backend/src/main/java/com/medbooking/entity/Appointment.java`

### Administration

- [Admin Management](https://github.com/huyhoangphan2410/nhom1_medicalbookingapp/blob/main/backend/src/main/java/com/medbooking/controller/admin/AdminUserController.java): `backend/src/main/java/com/medbooking/controller/admin/AdminUserController.java`

### Other components

- **Patients and Doctors**
- **MySQL Database**
- **Gmail SMTP**

## Connections

- Patients and Doctors → Vue Application: uses
- Vue Application → Role-Based Routes: renders routes (evidence: `frontend/src/App.vue`)
- Role-Based Routes → Authentication Views: routes to (evidence: `frontend/src/router/index.js`)
- Role-Based Routes → Booking Views: routes to (evidence: `frontend/src/router/index.js`)
- Role-Based Routes → Doctor Dashboard: routes to (evidence: `frontend/src/router/index.js`)
- Role-Based Routes → Admin Views: routes to (evidence: `frontend/src/router/index.js`)
- Authentication Views → Session Store: uses (evidence: `frontend/src/views/AuthView.vue`)
- Session Store → HTTP Client: sends requests (evidence: `frontend/src/stores/auth.js`)
- Booking Views → HTTP Client: requests data
- Doctor Dashboard → HTTP Client: requests data
- Admin Views → HTTP Client: requests data (evidence: `frontend/src/views/admin/AdminDashboard.vue`)
- HTTP Client → Spring Boot API: calls API
- Spring Boot API → Authentication: dispatches auth
- Spring Boot API → Appointment Booking: dispatches booking
- Spring Boot API → Payment Confirmation: dispatches payment
- Spring Boot API → Schedule Management: dispatches schedules
- Spring Boot API → Doctor Catalog: dispatches catalog
- Spring Boot API → Admin Management: dispatches admin
- Authentication → Email Verification: sends OTP (evidence: `backend/src/main/java/com/medbooking/service/impl/AuthServiceImpl.java`)
- Email Verification → Gmail SMTP: sends email
- Appointment Booking → Booking Records: persists bookings (evidence: `backend/src/main/java/com/medbooking/controller/AppointmentController.java`)
- Spring Boot API → MySQL Database: stores application data
- Admin Management → MySQL Database: manages records