# muhammadui/campuss-id architecture

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

- Interactive diagram: https://gitdiagram.com/muhammadui/campuss-id
- Repository: https://github.com/muhammadui/campuss-id
- Video tour (about a minute): https://gitdiagram.com/muhammadui/campuss-id/video

## Overview

Campus ID lets students submit school details and request an ID card, with payment and request storage; administrators can view and search requests. The principal flow is the Home form to the server payment endpoint, which contacts Flutterwave and stores the request after a successful response. The frontend also has a separate Flutterwave callback that saves data. The README describes the product capabilities; the graph uses sampled source for wiring, and does not assume the two payment paths are unified.

Main entry points: [`client/src/App.tsx`](https://github.com/muhammadui/campuss-id/blob/main/client/src/App.tsx) (App routes), [`server/index.js`](https://github.com/muhammadui/campuss-id/blob/main/server/index.js) (Express API), [`client/src/pages/Home/Home.tsx`](https://github.com/muhammadui/campuss-id/blob/main/client/src/pages/Home/Home.tsx) (Home page), [`server/DB/DB.js`](https://github.com/muhammadui/campuss-id/blob/main/server/DB/DB.js) (Database pool)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_student["Student request"]
  node_app["App routes<br/>[App.tsx]"]
  node_home["Request form<br/>[Home.tsx]"]
  node_facultydata["Faculty catalog<br/>[faculties.json]"]
  node_homepage["Home page<br/>[Home.tsx]"]
end

subgraph group_server["Request backend"]
  node_backend["Express API<br/>[index.js]"]
  node_payments["Flutterwave"]
  node_database[("MySQL")]
  node_dbpool["Database pool<br/>[DB.js]"]
end

subgraph group_admin["Admin tools"]
  node_dashboard["Dashboard<br/>[Dashboard.tsx]"]
  node_requestlist["Request list<br/>[IDCardRequests.tsx]"]
end

subgraph group_identity["Authentication"]
  node_login["Login page<br/>[Login.tsx]"]
  node_signup["Sign-up page<br/>[SignUp.tsx]"]
  node_clerk["Clerk"]
end

node_student(("Student"))
node_admin(("Administrator"))

node_student -->|"opens"| node_app
node_app -->|"routes to"| node_homepage
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_signup
node_homepage -->|"reads options"| node_facultydata
node_homepage -->|"posts payment request"| node_backend
node_homepage -->|"posts saved details"| node_backend
node_homepage -->|"starts payment"| node_payments
node_backend -->|"creates payment"| node_payments
node_backend -->|"stores request"| node_dbpool
node_backend -->|"reads requests"| node_dbpool
node_dbpool -->|"queries"| node_database
node_admin -->|"opens"| node_dashboard
node_dashboard -->|"renders"| node_requestlist
node_requestlist -->|"fetches requests"| node_backend
node_login -->|"uses sign-in"| node_clerk
node_signup -->|"uses sign-up"| node_clerk
node_app -->|"provides auth"| node_clerk

click node_app "https://github.com/muhammadui/campuss-id/blob/main/client/src/App.tsx"
click node_home "https://github.com/muhammadui/campuss-id/blob/main/client/src/pages/Home/Home.tsx"
click node_facultydata "https://github.com/muhammadui/campuss-id/blob/main/client/src/pages/Home/faculties.json"
click node_backend "https://github.com/muhammadui/campuss-id/blob/main/server/index.js"
click node_dbpool "https://github.com/muhammadui/campuss-id/blob/main/server/DB/DB.js"
click node_dashboard "https://github.com/muhammadui/campuss-id/blob/main/client/src/pages/Dashboard/Dashboard.tsx"
click node_requestlist "https://github.com/muhammadui/campuss-id/blob/main/client/src/components/IDCardRequests.tsx"
click node_login "https://github.com/muhammadui/campuss-id/blob/main/client/src/pages/Login/Login.tsx"
click node_signup "https://github.com/muhammadui/campuss-id/blob/main/client/src/pages/SignUp/SignUp.tsx"
click node_homepage "https://github.com/muhammadui/campuss-id/blob/main/client/src/pages/Home/Home.tsx"

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_home,node_facultydata,node_homepage toneBlue
class node_backend,node_payments,node_database,node_dbpool toneAmber
class node_dashboard,node_requestlist toneMint
class node_login,node_signup,node_clerk toneRose
class node_student,node_admin toneIndigo
```

## Components

### Student request

- [App routes](https://github.com/muhammadui/campuss-id/blob/main/client/src/App.tsx): `client/src/App.tsx`
- [Request form](https://github.com/muhammadui/campuss-id/blob/main/client/src/pages/Home/Home.tsx): `client/src/pages/Home/Home.tsx`
- [Faculty catalog](https://github.com/muhammadui/campuss-id/blob/main/client/src/pages/Home/faculties.json): `client/src/pages/Home/faculties.json`
- [Home page](https://github.com/muhammadui/campuss-id/blob/main/client/src/pages/Home/Home.tsx): `client/src/pages/Home/Home.tsx`

### Request backend

- [Express API](https://github.com/muhammadui/campuss-id/blob/main/server/index.js): `server/index.js`
- **Flutterwave**
- **MySQL**
- [Database pool](https://github.com/muhammadui/campuss-id/blob/main/server/DB/DB.js): `server/DB/DB.js`

### Admin tools

- [Dashboard](https://github.com/muhammadui/campuss-id/blob/main/client/src/pages/Dashboard/Dashboard.tsx): `client/src/pages/Dashboard/Dashboard.tsx`
- [Request list](https://github.com/muhammadui/campuss-id/blob/main/client/src/components/IDCardRequests.tsx): `client/src/components/IDCardRequests.tsx`

### Authentication

- [Login page](https://github.com/muhammadui/campuss-id/blob/main/client/src/pages/Login/Login.tsx): `client/src/pages/Login/Login.tsx`
- [Sign-up page](https://github.com/muhammadui/campuss-id/blob/main/client/src/pages/SignUp/SignUp.tsx): `client/src/pages/SignUp/SignUp.tsx`
- **Clerk**

### Other components

- **Student**
- **Administrator**

## Connections

- Student → App routes: opens
- App routes → Home page: routes to
- App routes → Dashboard: routes to
- App routes → Login page: routes to
- App routes → Sign-up page: routes to
- Home page → Faculty catalog: reads options
- Home page → Express API: posts payment request
- Home page → Express API: posts saved details
- Home page → Flutterwave: starts payment
- Express API → Flutterwave: creates payment
- Express API → Database pool: stores request
- Express API → Database pool: reads requests
- Database pool → MySQL: queries
- Administrator → Dashboard: opens
- Dashboard → Request list: renders
- Request list → Express API: fetches requests
- Login page → Clerk: uses sign-in
- Sign-up page → Clerk: uses sign-up
- App routes → Clerk: provides auth