# fariqul/web-lms architecture

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

- Interactive diagram: https://gitdiagram.com/fariqul/web-lms
- Repository: https://github.com/fariqul/web-lms

## Overview

This is SMA 15 Makassar’s role-based learning management system. Admins, teachers and students use the Next.js application to manage school operations, attend sessions, take and monitor exams, and view learning results; the frontend calls a separate Laravel API backed by persistent models. The principal workflow spans exam setup, student exam-taking with browser and camera monitoring, result handling and reporting. Attendance, learning content, public-school information and real-time notifications are additional product branches. The README and tree establish several capabilities whose detailed wiring is not visible in the sampled source, so those links are represented only at subsystem level.

Main entry points: [`backend/app/Models`](https://github.com/fariqul/web-lms/tree/main/backend/app/Models) (School records), [`backend/routes/api.php`](https://github.com/fariqul/web-lms/blob/main/backend/routes/api.php) (API routing), [`src/app`](https://github.com/fariqul/web-lms/tree/main/src/app) (Role pages), [`src/services/api.ts`](https://github.com/fariqul/web-lms/blob/main/src/services/api.ts) (API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web application"]
  node_webpages["Role pages"]
  node_auth["Authentication<br/>[AuthContext.tsx]"]
  node_api_client["API client<br/>[api.ts]"]
  node_attendance_ui["Attendance screens<br/>[page.tsx]"]
  node_exam_ui["Exam screens"]
  node_exam_mode["Exam safeguards<br/>[useExamMode.ts]"]
  node_landing["Public information<br/>[LandingClient.tsx]"]
end

subgraph group_school["School workflows"]
  node_api_routes["API routing<br/>[api.php]"]
  node_school_api["School operations API"]
  node_attendance_api["Attendance API"]
  node_school_data[("School records")]
  node_exports["Reports and exports"]
end

subgraph group_assessment["Assessment and safety"]
  node_exam_api["Exam and results API<br/>[ExamController.php]"]
  node_proctor_hook["Browser monitoring<br/>[useExamMode.ts]"]
  node_proctor_api["Proctoring API"]
  node_proctor_service["AI snapshot analysis<br/>[main.py]"]
end

subgraph group_services["Realtime and analysis"]
  node_socket["Realtime events<br/>[server.js]"]
  node_session_events["Session event handler"]
end

node_admin(("Admin"))
node_teacher(("Teacher"))
node_student(("Student"))
node_external_db[("PostgreSQL / Supabase")]

node_admin -->|"uses"| node_webpages
node_teacher -->|"uses"| node_webpages
node_student -->|"uses"| node_webpages
node_webpages -->|"authenticates via"| node_auth
node_attendance_ui -->|"requests data"| node_api_client
node_exam_ui -->|"requests data"| node_api_client
node_landing -->|"loads content"| node_api_client
node_exam_mode -->|"sends heartbeat"| node_api_client
node_api_client -->|"calls"| node_api_routes
node_api_routes -->|"dispatches"| node_school_api
node_api_routes -->|"dispatches"| node_attendance_api
node_api_routes -->|"dispatches"| node_exam_api
node_attendance_api -->|"reads and writes"| node_school_data
node_school_api -->|"reads and writes"| node_school_data
node_exam_api -->|"reads and writes"| node_school_data
node_exam_ui -->|"enables safeguards"| node_exam_mode
node_exam_mode -->|"submits monitoring"| node_proctor_api
node_proctor_api -->|"analyzes snapshots"| node_proctor_service
node_proctor_api -->|"records monitoring"| node_school_data
node_webpages -->|"handles session events"| node_session_events
node_session_events -->|"subscribes to events"| node_socket
node_socket -->|"validates sessions"| node_api_routes
node_admin -->|"requests reports"| node_exports
node_teacher -->|"requests reports"| node_exports
node_exports -->|"reads records"| node_school_data
node_school_data -->|"persists through"| node_external_db

click node_webpages "https://github.com/fariqul/web-lms/tree/main/src/app"
click node_auth "https://github.com/fariqul/web-lms/blob/main/src/context/AuthContext.tsx"
click node_api_client "https://github.com/fariqul/web-lms/blob/main/src/services/api.ts"
click node_attendance_ui "https://github.com/fariqul/web-lms/blob/main/src/app/absensi/page.tsx"
click node_exam_ui "https://github.com/fariqul/web-lms/tree/main/src/app/ujian"
click node_exam_mode "https://github.com/fariqul/web-lms/blob/main/src/hooks/useExamMode.ts"
click node_landing "https://github.com/fariqul/web-lms/blob/main/src/app/_components/LandingClient.tsx"
click node_api_routes "https://github.com/fariqul/web-lms/blob/main/backend/routes/api.php"
click node_school_api "https://github.com/fariqul/web-lms/tree/main/backend/app/Http/Controllers/Api"
click node_attendance_api "https://github.com/fariqul/web-lms/blob/main/backend/app/Http/Controllers/Api/AttendanceController.php"
click node_school_data "https://github.com/fariqul/web-lms/tree/main/backend/app/Models"
click node_exam_api "https://github.com/fariqul/web-lms/blob/main/backend/app/Http/Controllers/Api/ExamController.php"
click node_proctor_hook "https://github.com/fariqul/web-lms/blob/main/src/hooks/useExamMode.ts"
click node_proctor_api "https://github.com/fariqul/web-lms/blob/main/backend/app/Http/Controllers/Api/ProctoringDiagnosticController.php"
click node_proctor_service "https://github.com/fariqul/web-lms/blob/main/backend/proctoring-service/main.py"
click node_socket "https://github.com/fariqul/web-lms/blob/main/socket-server/server.js"
click node_session_events "https://github.com/fariqul/web-lms/blob/main/src/components/auth/SessionEventHandler.tsx"
click node_exports "https://github.com/fariqul/web-lms/blob/main/backend/app/Http/Controllers/Api/ExportController.php"

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_webpages,node_auth,node_api_client,node_attendance_ui,node_exam_ui,node_exam_mode,node_landing toneBlue
class node_api_routes,node_school_api,node_attendance_api,node_school_data,node_exports,node_external_db toneAmber
class node_exam_api,node_proctor_hook,node_proctor_api,node_proctor_service toneMint
class node_socket,node_session_events toneRose
class node_admin,node_teacher,node_student toneIndigo
```

## Components

### Web application

- [Role pages](https://github.com/fariqul/web-lms/tree/main/src/app): `src/app`
- [Authentication](https://github.com/fariqul/web-lms/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`
- [API client](https://github.com/fariqul/web-lms/blob/main/src/services/api.ts): `src/services/api.ts`
- [Attendance screens](https://github.com/fariqul/web-lms/blob/main/src/app/absensi/page.tsx): `src/app/absensi/page.tsx`
- [Exam screens](https://github.com/fariqul/web-lms/tree/main/src/app/ujian): `src/app/ujian`
- [Exam safeguards](https://github.com/fariqul/web-lms/blob/main/src/hooks/useExamMode.ts): `src/hooks/useExamMode.ts`
- [Public information](https://github.com/fariqul/web-lms/blob/main/src/app/_components/LandingClient.tsx): `src/app/_components/LandingClient.tsx`

### School workflows

- [API routing](https://github.com/fariqul/web-lms/blob/main/backend/routes/api.php): `backend/routes/api.php`
- [School operations API](https://github.com/fariqul/web-lms/tree/main/backend/app/Http/Controllers/Api): `backend/app/Http/Controllers/Api`
- [Attendance API](https://github.com/fariqul/web-lms/blob/main/backend/app/Http/Controllers/Api/AttendanceController.php): `backend/app/Http/Controllers/Api/AttendanceController.php`
- [School records](https://github.com/fariqul/web-lms/tree/main/backend/app/Models): `backend/app/Models`
- [Reports and exports](https://github.com/fariqul/web-lms/blob/main/backend/app/Http/Controllers/Api/ExportController.php): `backend/app/Http/Controllers/Api/ExportController.php`

### Assessment and safety

- [Exam and results API](https://github.com/fariqul/web-lms/blob/main/backend/app/Http/Controllers/Api/ExamController.php): `backend/app/Http/Controllers/Api/ExamController.php`
- [Browser monitoring](https://github.com/fariqul/web-lms/blob/main/src/hooks/useExamMode.ts): `src/hooks/useExamMode.ts`
- [Proctoring API](https://github.com/fariqul/web-lms/blob/main/backend/app/Http/Controllers/Api/ProctoringDiagnosticController.php): `backend/app/Http/Controllers/Api/ProctoringDiagnosticController.php`
- [AI snapshot analysis](https://github.com/fariqul/web-lms/blob/main/backend/proctoring-service/main.py): `backend/proctoring-service/main.py`

### Realtime and analysis

- [Realtime events](https://github.com/fariqul/web-lms/blob/main/socket-server/server.js): `socket-server/server.js`
- [Session event handler](https://github.com/fariqul/web-lms/blob/main/src/components/auth/SessionEventHandler.tsx): `src/components/auth/SessionEventHandler.tsx`

### Other components

- **Admin**
- **Teacher**
- **Student**
- **PostgreSQL / Supabase**

## Connections

- Admin → Role pages: uses
- Teacher → Role pages: uses
- Student → Role pages: uses
- Role pages → Authentication: authenticates via
- Attendance screens → API client: requests data
- Exam screens → API client: requests data
- Public information → API client: loads content
- Exam safeguards → API client: sends heartbeat
- API client → API routing: calls
- API routing → School operations API: dispatches
- API routing → Attendance API: dispatches
- API routing → Exam and results API: dispatches
- Attendance API → School records: reads and writes
- School operations API → School records: reads and writes
- Exam and results API → School records: reads and writes
- Exam screens → Exam safeguards: enables safeguards
- Exam safeguards → Proctoring API: submits monitoring
- Proctoring API → AI snapshot analysis: analyzes snapshots
- Proctoring API → School records: records monitoring
- Role pages → Session event handler: handles session events
- Session event handler → Realtime events: subscribes to events
- Realtime events → API routing: validates sessions
- Admin → Reports and exports: requests reports
- Teacher → Reports and exports: requests reports
- Reports and exports → School records: reads records
- School records → PostgreSQL / Supabase: persists through