# shubh02284/face-attendance-app architecture

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

- Interactive diagram: https://gitdiagram.com/shubh02284/face-attendance-app
- Repository: https://github.com/shubh02284/face-attendance-app

## Overview

FaceAttend is a web-based attendance system for managing students and classes, recording attendance from classroom photos with face recognition, and viewing history and reports. The principal flow is an instructor selecting class details and uploading a photo; the Attendance page obtains enrolled students, asks the AI service to detect faces, matches results, and saves attendance through the backend. The backend also provides authentication and student/class management. Page capabilities are identified from routing and the tree; unsampled page internals and API wiring are not expanded.

Main entry points: [`src/App.jsx`](https://github.com/shubh02284/face-attendance-app/blob/main/src/App.jsx) (App routing), [`backend/server.js`](https://github.com/shubh02284/face-attendance-app/blob/main/backend/server.js) (API server), [`backend/models`](https://github.com/shubh02284/face-attendance-app/tree/main/backend/models) (Data models), [`src/pages/Attendance.jsx`](https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/Attendance.jsx) (Attendance workflow)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web application"]
  node_app["App routing<br/>[App.jsx]"]
  node_authpages["Sign in / register"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_attendance["Attendance workflow<br/>[Attendance.jsx]"]
  node_students["Student management<br/>[Students.jsx]"]
  node_classes["Class management<br/>[Classes.jsx]"]
  node_history["Attendance history<br/>[History.jsx]"]
  node_reports["Reports<br/>[Reports.jsx]"]
  node_settings["Settings<br/>[Settings.jsx]"]
  node_apiutil["API client<br/>[api.js]"]
end

subgraph group_recognition["Face recognition"]
  node_ai["Face analysis service<br/>[main.py]"]
end

subgraph group_backend["Backend API"]
  node_server["API server<br/>[server.js]"]
  node_authroutes["Authentication routes<br/>[authRoutes.js]"]
  node_authmw["Token middleware<br/>[authMiddleware.js]"]
  node_studentroutes["Student routes<br/>[studentRoutes.js]"]
  node_classroutes["Class routes<br/>[classRoutes.js]"]
  node_attendanceroutes["Attendance routes"]
end

subgraph group_data["Persistent data"]
  node_models["Data models"]
  node_dbconfig["Database connection<br/>[db.js]"]
end

node_instructor(("Instructor"))
node_mongodb[("MongoDB")]

node_instructor -->|"uses"| node_app
node_app -->|"routes"| node_authpages
node_app -->|"routes"| node_dashboard
node_app -->|"routes"| node_attendance
node_app -->|"routes"| node_students
node_app -->|"routes"| node_classes
node_app -->|"routes"| node_history
node_app -->|"routes"| node_reports
node_app -->|"routes"| node_settings
node_attendance -->|"requests classes, students, attendance"| node_apiutil
node_attendance -->|"uploads photo"| node_ai
node_ai -->|"returns detected faces"| node_attendance
node_apiutil -->|"HTTP requests"| node_server
node_server -->|"dispatches"| node_authroutes
node_server -->|"dispatches"| node_studentroutes
node_server -->|"dispatches"| node_classroutes
node_server -->|"dispatches"| node_attendanceroutes
node_studentroutes -->|"authenticates"| node_authmw
node_classroutes -->|"authenticates"| node_authmw
node_attendanceroutes -->|"authenticates"| node_authmw
node_studentroutes -->|"reads and writes"| node_models
node_classroutes -->|"reads and writes"| node_models
node_attendanceroutes -->|"reads and writes"| node_models
node_authroutes -->|"reads and writes"| node_models
node_authmw -->|"loads user"| node_models
node_server -->|"connects"| node_dbconfig
node_dbconfig -->|"opens connection"| node_mongodb

click node_app "https://github.com/shubh02284/face-attendance-app/blob/main/src/App.jsx"
click node_authpages "https://github.com/shubh02284/face-attendance-app/tree/main/src/pages"
click node_dashboard "https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/Dashboard.jsx"
click node_attendance "https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/Attendance.jsx"
click node_students "https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/Students.jsx"
click node_classes "https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/Classes.jsx"
click node_history "https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/History.jsx"
click node_reports "https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/Reports.jsx"
click node_settings "https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/Settings.jsx"
click node_apiutil "https://github.com/shubh02284/face-attendance-app/blob/main/src/utils/api.js"
click node_ai "https://github.com/shubh02284/face-attendance-app/blob/main/ai-service/main.py"
click node_server "https://github.com/shubh02284/face-attendance-app/blob/main/backend/server.js"
click node_authroutes "https://github.com/shubh02284/face-attendance-app/blob/main/backend/routes/authRoutes.js"
click node_authmw "https://github.com/shubh02284/face-attendance-app/blob/main/backend/middleware/authMiddleware.js"
click node_studentroutes "https://github.com/shubh02284/face-attendance-app/blob/main/backend/routes/studentRoutes.js"
click node_classroutes "https://github.com/shubh02284/face-attendance-app/blob/main/backend/routes/classRoutes.js"
click node_attendanceroutes "https://github.com/shubh02284/face-attendance-app/blob/main/backend/routes/attendanceRoutes.js"
click node_models "https://github.com/shubh02284/face-attendance-app/tree/main/backend/models"
click node_dbconfig "https://github.com/shubh02284/face-attendance-app/blob/main/backend/config/db.js"

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_authpages,node_dashboard,node_attendance,node_students,node_classes,node_history,node_reports,node_settings,node_apiutil toneBlue
class node_ai,node_mongodb toneAmber
class node_server,node_authroutes,node_authmw,node_studentroutes,node_classroutes,node_attendanceroutes toneMint
class node_models,node_dbconfig toneRose
class node_instructor toneIndigo
```

## Components

### Web application

- [App routing](https://github.com/shubh02284/face-attendance-app/blob/main/src/App.jsx): `src/App.jsx`
- [Sign in / register](https://github.com/shubh02284/face-attendance-app/tree/main/src/pages): `src/pages`
- [Dashboard](https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/Dashboard.jsx): `src/pages/Dashboard.jsx`
- [Attendance workflow](https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/Attendance.jsx): `src/pages/Attendance.jsx`
- [Student management](https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/Students.jsx): `src/pages/Students.jsx`
- [Class management](https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/Classes.jsx): `src/pages/Classes.jsx`
- [Attendance history](https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/History.jsx): `src/pages/History.jsx`
- [Reports](https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/Reports.jsx): `src/pages/Reports.jsx`
- [Settings](https://github.com/shubh02284/face-attendance-app/blob/main/src/pages/Settings.jsx): `src/pages/Settings.jsx`
- [API client](https://github.com/shubh02284/face-attendance-app/blob/main/src/utils/api.js): `src/utils/api.js`

### Face recognition

- [Face analysis service](https://github.com/shubh02284/face-attendance-app/blob/main/ai-service/main.py): `ai-service/main.py`

### Backend API

- [API server](https://github.com/shubh02284/face-attendance-app/blob/main/backend/server.js): `backend/server.js`
- [Authentication routes](https://github.com/shubh02284/face-attendance-app/blob/main/backend/routes/authRoutes.js): `backend/routes/authRoutes.js`
- [Token middleware](https://github.com/shubh02284/face-attendance-app/blob/main/backend/middleware/authMiddleware.js): `backend/middleware/authMiddleware.js`
- [Student routes](https://github.com/shubh02284/face-attendance-app/blob/main/backend/routes/studentRoutes.js): `backend/routes/studentRoutes.js`
- [Class routes](https://github.com/shubh02284/face-attendance-app/blob/main/backend/routes/classRoutes.js): `backend/routes/classRoutes.js`
- [Attendance routes](https://github.com/shubh02284/face-attendance-app/blob/main/backend/routes/attendanceRoutes.js): `backend/routes/attendanceRoutes.js`

### Persistent data

- [Data models](https://github.com/shubh02284/face-attendance-app/tree/main/backend/models): `backend/models`
- [Database connection](https://github.com/shubh02284/face-attendance-app/blob/main/backend/config/db.js): `backend/config/db.js`

### Other components

- **Instructor**
- **MongoDB**

## Connections

- Instructor → App routing: uses
- App routing → Sign in / register: routes
- App routing → Dashboard: routes
- App routing → Attendance workflow: routes
- App routing → Student management: routes
- App routing → Class management: routes
- App routing → Attendance history: routes
- App routing → Reports: routes
- App routing → Settings: routes
- Attendance workflow → API client: requests classes, students, attendance
- Attendance workflow → Face analysis service: uploads photo
- Face analysis service → Attendance workflow: returns detected faces
- API client → API server: HTTP requests
- API server → Authentication routes: dispatches
- API server → Student routes: dispatches
- API server → Class routes: dispatches
- API server → Attendance routes: dispatches
- Student routes → Token middleware: authenticates
- Class routes → Token middleware: authenticates
- Attendance routes → Token middleware: authenticates
- Student routes → Data models: reads and writes
- Class routes → Data models: reads and writes
- Attendance routes → Data models: reads and writes
- Authentication routes → Data models: reads and writes
- Token middleware → Data models: loads user
- API server → Database connection: connects
- Database connection → MongoDB: opens connection