# flytices/tswm1103-final-project architecture

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

- Interactive diagram: https://gitdiagram.com/flytices/tswm1103-final-project
- Repository: https://github.com/flytices/tswm1103-final-project

## Overview

This is a campus appointment system: students and administrators use a React interface to authenticate, view appointments, and book or manage them; the Express API handles those requests and persists appointment and user records. The frontend excerpt also shows appointment search, status filtering, summary cards, and time-slot selection. Backend endpoint behavior is sampled, but database initialization details and some frontend request handlers are omitted, so database wiring is shown as unverified where necessary.

Main entry points: [`activity-1-frontend/src/App.jsx`](https://github.com/flytices/tswm1103-final-project/blob/main/activity-1-frontend/src/App.jsx) (Application shell), [`activity-2-backend/server.js`](https://github.com/flytices/tswm1103-final-project/blob/main/activity-2-backend/server.js) (Express API), [`activity-2-backend/campus.db`](https://github.com/flytices/tswm1103-final-project/blob/main/activity-2-backend/campus.db) (Campus database)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Appointment interface"]
  node_app["Application shell<br/>[App.jsx]"]
  node_auth_ui["Sign-in and registration<br/>[App.jsx]"]
  node_booking_ui["Appointment form<br/>[App.jsx]"]
  node_appointment_view["Appointment dashboard<br/>[App.jsx]"]
end

subgraph group_backend["API and rules"]
  node_api["Express API<br/>[server.js]"]
  node_auth["Authentication<br/>[server.js]"]
  node_appointment_ops["Appointment operations<br/>[server.js]"]
  node_health["Health endpoint<br/>[server.js]"]
end

subgraph group_persistence["Stored records"]
  node_database[("Campus database<br/>[campus.db]")]
end

node_user(("Student or admin"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_auth_ui
node_app -->|"renders"| node_booking_ui
node_app -->|"renders"| node_appointment_view
node_app -->|"sends auth requests"| node_auth
node_app -->|"sends appointment requests"| node_appointment_ops
node_user -.->|"checks service"| node_health
node_api -->|"routes auth requests"| node_auth
node_api -->|"routes appointment requests"| node_appointment_ops
node_api -->|"serves health check"| node_health
node_auth -.->|"reads and writes users"| node_database
node_appointment_ops -.->|"reads and writes appointments"| node_database

click node_app "https://github.com/flytices/tswm1103-final-project/blob/main/activity-1-frontend/src/App.jsx"
click node_auth_ui "https://github.com/flytices/tswm1103-final-project/blob/main/activity-1-frontend/src/App.jsx"
click node_booking_ui "https://github.com/flytices/tswm1103-final-project/blob/main/activity-1-frontend/src/App.jsx"
click node_appointment_view "https://github.com/flytices/tswm1103-final-project/blob/main/activity-1-frontend/src/App.jsx"
click node_api "https://github.com/flytices/tswm1103-final-project/blob/main/activity-2-backend/server.js"
click node_auth "https://github.com/flytices/tswm1103-final-project/blob/main/activity-2-backend/server.js"
click node_appointment_ops "https://github.com/flytices/tswm1103-final-project/blob/main/activity-2-backend/server.js"
click node_health "https://github.com/flytices/tswm1103-final-project/blob/main/activity-2-backend/server.js"
click node_database "https://github.com/flytices/tswm1103-final-project/blob/main/activity-2-backend/campus.db"

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_app,node_auth_ui,node_booking_ui,node_appointment_view toneBlue
class node_api,node_auth,node_appointment_ops,node_health toneAmber
class node_database toneMint
class node_user toneIndigo
```

## Components

### Appointment interface

- [Application shell](https://github.com/flytices/tswm1103-final-project/blob/main/activity-1-frontend/src/App.jsx): `activity-1-frontend/src/App.jsx`
- [Sign-in and registration](https://github.com/flytices/tswm1103-final-project/blob/main/activity-1-frontend/src/App.jsx): `activity-1-frontend/src/App.jsx`
- [Appointment form](https://github.com/flytices/tswm1103-final-project/blob/main/activity-1-frontend/src/App.jsx): `activity-1-frontend/src/App.jsx`
- [Appointment dashboard](https://github.com/flytices/tswm1103-final-project/blob/main/activity-1-frontend/src/App.jsx): `activity-1-frontend/src/App.jsx`

### API and rules

- [Express API](https://github.com/flytices/tswm1103-final-project/blob/main/activity-2-backend/server.js): `activity-2-backend/server.js`
- [Authentication](https://github.com/flytices/tswm1103-final-project/blob/main/activity-2-backend/server.js): `activity-2-backend/server.js`
- [Appointment operations](https://github.com/flytices/tswm1103-final-project/blob/main/activity-2-backend/server.js): `activity-2-backend/server.js`
- [Health endpoint](https://github.com/flytices/tswm1103-final-project/blob/main/activity-2-backend/server.js): `activity-2-backend/server.js`

### Stored records

- [Campus database](https://github.com/flytices/tswm1103-final-project/blob/main/activity-2-backend/campus.db): `activity-2-backend/campus.db`

### Other components

- **Student or admin**

## Connections

- Student or admin → Application shell: uses (evidence: `activity-1-frontend/src/App.jsx`)
- Application shell → Sign-in and registration: renders (evidence: `activity-1-frontend/src/App.jsx`)
- Application shell → Appointment form: renders (evidence: `activity-1-frontend/src/App.jsx`)
- Application shell → Appointment dashboard: renders (evidence: `activity-1-frontend/src/App.jsx`)
- Application shell → Authentication: sends auth requests (evidence: `activity-1-frontend/src/App.jsx`)
- Application shell → Appointment operations: sends appointment requests (evidence: `activity-1-frontend/src/App.jsx`)
- Student or admin → Health endpoint: checks service
- Express API → Authentication: routes auth requests (evidence: `activity-2-backend/server.js`)
- Express API → Appointment operations: routes appointment requests (evidence: `activity-2-backend/server.js`)
- Express API → Health endpoint: serves health check (evidence: `activity-2-backend/server.js`)
- Authentication → Campus database: reads and writes users
- Appointment operations → Campus database: reads and writes appointments