# cervtax/qr-attendance-system architecture

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

- Interactive diagram: https://gitdiagram.com/cervtax/qr-attendance-system
- Repository: https://github.com/cervtax/qr-attendance-system

## Overview

EScanBai is a browser-based student QR and attendance app. Users create an account or sign in, save a student profile and display its QR code, then scan a code to record attendance time in or out and review the log. The excerpts show browser-local persistence and page guards, not a server-side service. Dashboard source is partial, so camera/image decoding details and some UI connections are omitted where the call path is not visible.

Main entry points: [`dashboard.js`](https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.js) (Camera and image capture), [`common.js`](https://github.com/cervtax/qr-attendance-system/blob/main/common.js) (Account and session state), [`auth.js`](https://github.com/cervtax/qr-attendance-system/blob/main/auth.js) (Sign in and signup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_identity["Identity and access"]
  node_auth["Sign in and signup<br/>[auth.js]"]
end

subgraph group_qr["Student QR"]
  node_profile["Student profile<br/>[dashboard.js]"]
  node_qr_display["QR display and download<br/>[dashboard.js]"]
end

subgraph group_attendance["Attendance"]
  node_scan_capture["Camera and image capture<br/>[dashboard.js]"]
  node_qr_decode["QR decoding<br/>[dashboard.js]"]
  node_scan_rules["Scan validation<br/>[dashboard.js]"]
  node_attendance_log[("Attendance records<br/>[dashboard.js]")]
  node_log_view["Attendance log view<br/>[dashboard.js]"]
end

subgraph group_shared["Shared browser runtime"]
  node_identity_state[("Account and session state<br/>[common.js]")]
  node_page_guard["Page access routing<br/>[common.js]"]
end

node_user(("User"))
node_qr_library["QRCode library"]
node_jsqr_library["jsQR library"]
node_browser_storage[("Browser local storage")]
node_browser_camera["Browser camera and files"]

node_user -->|"signs in"| node_auth
node_auth -->|"reads and writes"| node_identity_state
node_auth -->|"redirects to dashboard"| node_user
node_page_guard -->|"reads session"| node_identity_state
node_page_guard -->|"redirects pages"| node_user
node_user -->|"edits profile"| node_profile
node_profile -->|"reads and writes profile"| node_identity_state
node_profile -->|"shows saved profile"| node_qr_display
node_qr_display -->|"renders QR"| node_qr_library
node_user -->|"downloads QR"| node_qr_display
node_user -->|"starts scan"| node_scan_capture
node_scan_capture -->|"requests camera"| node_browser_camera
node_user -->|"selects image"| node_scan_capture
node_scan_capture -->|"provides image"| node_qr_decode
node_scan_capture -->|"checks availability"| node_jsqr_library
node_qr_decode -.->|"passes decoded text"| node_scan_rules
node_user -->|"chooses time mode"| node_scan_rules
node_scan_rules -->|"reads and appends"| node_attendance_log
node_attendance_log -->|"supplies records"| node_log_view
node_user -->|"reviews or clears"| node_log_view
node_identity_state -->|"persists values"| node_browser_storage
node_attendance_log -->|"persists records"| node_browser_storage

click node_auth "https://github.com/cervtax/qr-attendance-system/blob/main/auth.js"
click node_identity_state "https://github.com/cervtax/qr-attendance-system/blob/main/common.js"
click node_page_guard "https://github.com/cervtax/qr-attendance-system/blob/main/common.js"
click node_profile "https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.js"
click node_qr_display "https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.js"
click node_scan_capture "https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.js"
click node_qr_decode "https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.js"
click node_scan_rules "https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.js"
click node_attendance_log "https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.js"
click node_log_view "https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.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_auth,node_user,node_browser_camera toneBlue
class node_profile,node_qr_display,node_browser_storage toneAmber
class node_scan_capture,node_qr_decode,node_scan_rules,node_attendance_log,node_log_view toneMint
class node_identity_state,node_page_guard toneRose
class node_qr_library,node_jsqr_library toneIndigo
```

## Components

### Identity and access

- [Sign in and signup](https://github.com/cervtax/qr-attendance-system/blob/main/auth.js): `auth.js`

### Student QR

- [Student profile](https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.js): `dashboard.js`
- [QR display and download](https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.js): `dashboard.js`

### Attendance

- [Camera and image capture](https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.js): `dashboard.js`
- [QR decoding](https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.js): `dashboard.js`
- [Scan validation](https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.js): `dashboard.js`
- [Attendance records](https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.js): `dashboard.js`
- [Attendance log view](https://github.com/cervtax/qr-attendance-system/blob/main/dashboard.js): `dashboard.js`

### Shared browser runtime

- [Account and session state](https://github.com/cervtax/qr-attendance-system/blob/main/common.js): `common.js`
- [Page access routing](https://github.com/cervtax/qr-attendance-system/blob/main/common.js): `common.js`

### Other components

- **User**
- **QRCode library**
- **jsQR library**
- **Browser local storage**
- **Browser camera and files**

## Connections

- User → Sign in and signup: signs in (evidence: `auth.js`)
- Sign in and signup → Account and session state: reads and writes (evidence: `auth.js`)
- Sign in and signup → User: redirects to dashboard (evidence: `auth.js`)
- Page access routing → Account and session state: reads session (evidence: `common.js`)
- Page access routing → User: redirects pages (evidence: `common.js`)
- User → Student profile: edits profile (evidence: `dashboard.js`)
- Student profile → Account and session state: reads and writes profile (evidence: `dashboard.js`)
- Student profile → QR display and download: shows saved profile (evidence: `dashboard.js`)
- QR display and download → QRCode library: renders QR (evidence: `dashboard.js`)
- User → QR display and download: downloads QR (evidence: `dashboard.js`)
- User → Camera and image capture: starts scan (evidence: `dashboard.js`)
- Camera and image capture → Browser camera and files: requests camera (evidence: `dashboard.js`)
- User → Camera and image capture: selects image (evidence: `dashboard.js`)
- Camera and image capture → QR decoding: provides image (evidence: `dashboard.js`)
- Camera and image capture → jsQR library: checks availability (evidence: `dashboard.js`)
- QR decoding → Scan validation: passes decoded text (evidence: `dashboard.js`)
- User → Scan validation: chooses time mode (evidence: `dashboard.js`)
- Scan validation → Attendance records: reads and appends (evidence: `dashboard.js`)
- Attendance records → Attendance log view: supplies records (evidence: `dashboard.js`)
- User → Attendance log view: reviews or clears (evidence: `dashboard.js`)
- Account and session state → Browser local storage: persists values (evidence: `common.js`)
- Attendance records → Browser local storage: persists records (evidence: `dashboard.js`)