# gcalacdayuniv/2026lms architecture

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

- Interactive diagram: https://gitdiagram.com/gcalacdayuniv/2026lms
- Repository: https://github.com/gcalacdayuniv/2026lms

## Overview

Online Portal is a student-and-lecturer course management SPA backed by a Cloudflare Worker API. Users register or sign in, reach role-specific dashboards, and access course rosters, attendance, performance summaries, and student submissions. The browser modules separate authentication, routing, course workflows, and UI templates; the Worker handles API operations and D1 data, with Google Apps Script/Drive as an optional document-storage integration. Source excerpts show frontend orchestration and API calls; backend and several README-described features are represented at subsystem level where implementation details were not excerpted.

Main entry points: [`js/globals.js`](https://github.com/gcalacdayuniv/2026lms/blob/main/js/globals.js) (Session and API client), [`js/course.js`](https://github.com/gcalacdayuniv/2026lms/blob/main/js/course.js) (Course action coordinator), [`js/app.js`](https://github.com/gcalacdayuniv/2026lms/blob/main/js/app.js) (App startup), [`js/router.js`](https://github.com/gcalacdayuniv/2026lms/blob/main/js/router.js) (Hash router)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Browser application"]
  node_app["App startup<br/>[app.js]"]
  node_router["Hash router<br/>[router.js]"]
  node_ui["UI components<br/>[components.js]"]
  node_authui["Auth templates<br/>[components-auth.js]"]
  node_dashboardui["Dashboard templates"]
  node_classui["Class templates"]
  node_state["Session and API client<br/>[globals.js]"]
end

subgraph group_identity["Identity and profiles"]
  node_auth["Authentication and admin<br/>[auth.js]"]
  node_avatar["Avatar utility"]
end

subgraph group_courses["Course operations"]
  node_courseflow["Course action coordinator<br/>[course.js]"]
  node_dashboard["Course dashboards"]
  node_class["Class roster<br/>[course-class.js]"]
  node_attendance["Attendance"]
  node_recitation["Recitation picker"]
end

subgraph group_edge["API and persistence"]
  node_worker["Worker API<br/>[worker.js]"]
  node_d1[("D1 database")]
end

subgraph group_documents["Document storage"]
  node_gas["Drive webhook<br/>[Code.gs]"]
  node_drive[("Google Drive")]
end

node_user(("Portal user"))

node_user -->|"opens portal"| node_app
node_app -->|"initializes"| node_state
node_app -->|"initializes"| node_auth
node_app -->|"initializes"| node_courseflow
node_app -->|"initializes"| node_router
node_router -->|"renders views"| node_ui
node_router -->|"loads class"| node_class
node_router -->|"loads dashboard"| node_dashboard
node_router -->|"loads programs"| node_auth
node_ui -->|"exports templates"| node_authui
node_ui -->|"exports templates"| node_dashboardui
node_ui -->|"exports templates"| node_classui
node_auth -->|"uses session"| node_state
node_auth -->|"formats avatars"| node_avatar
node_classui -->|"formats avatars"| node_avatar
node_dashboardui -->|"formats avatars"| node_avatar
node_courseflow -->|"delegates actions"| node_dashboard
node_courseflow -->|"delegates actions"| node_class
node_courseflow -->|"saves attendance"| node_attendance
node_courseflow -->|"coordinates picker"| node_recitation
node_class -->|"renders metrics"| node_attendance
node_class -->|"renders class"| node_ui
node_dashboard -->|"reads user"| node_state
node_attendance -->|"uses API client"| node_state
node_auth -->|"sends API requests"| node_state
node_courseflow -->|"sends API requests"| node_state
node_class -->|"loads course data"| node_state
node_state -->|"calls API"| node_worker
node_worker -->|"reads and writes"| node_d1
node_worker -.->|"proxies uploads"| node_gas
node_gas -->|"stores files"| node_drive

click node_app "https://github.com/gcalacdayuniv/2026lms/blob/main/js/app.js"
click node_router "https://github.com/gcalacdayuniv/2026lms/blob/main/js/router.js"
click node_ui "https://github.com/gcalacdayuniv/2026lms/blob/main/js/components.js"
click node_authui "https://github.com/gcalacdayuniv/2026lms/blob/main/js/components-auth.js"
click node_dashboardui "https://github.com/gcalacdayuniv/2026lms/blob/main/js/components-dashboard.js"
click node_classui "https://github.com/gcalacdayuniv/2026lms/blob/main/js/components-class.js"
click node_auth "https://github.com/gcalacdayuniv/2026lms/blob/main/js/auth.js"
click node_avatar "https://github.com/gcalacdayuniv/2026lms/blob/main/js/components-utils.js"
click node_state "https://github.com/gcalacdayuniv/2026lms/blob/main/js/globals.js"
click node_courseflow "https://github.com/gcalacdayuniv/2026lms/blob/main/js/course.js"
click node_dashboard "https://github.com/gcalacdayuniv/2026lms/blob/main/js/course-dashboard.js"
click node_class "https://github.com/gcalacdayuniv/2026lms/blob/main/js/course-class.js"
click node_attendance "https://github.com/gcalacdayuniv/2026lms/blob/main/js/course-attendance.js"
click node_recitation "https://github.com/gcalacdayuniv/2026lms/blob/main/js/course-recitation.js"
click node_worker "https://github.com/gcalacdayuniv/2026lms/blob/main/worker/worker.js"
click node_gas "https://github.com/gcalacdayuniv/2026lms/blob/main/gas/Code.gs"

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_router,node_ui,node_authui,node_dashboardui,node_classui,node_state,node_user toneBlue
class node_auth,node_avatar toneAmber
class node_courseflow,node_dashboard,node_class,node_attendance,node_recitation toneMint
class node_worker,node_d1 toneRose
class node_gas,node_drive toneIndigo
```

## Components

### Browser application

- [App startup](https://github.com/gcalacdayuniv/2026lms/blob/main/js/app.js): `js/app.js`
- [Hash router](https://github.com/gcalacdayuniv/2026lms/blob/main/js/router.js): `js/router.js`
- [UI components](https://github.com/gcalacdayuniv/2026lms/blob/main/js/components.js): `js/components.js`
- [Auth templates](https://github.com/gcalacdayuniv/2026lms/blob/main/js/components-auth.js): `js/components-auth.js`
- [Dashboard templates](https://github.com/gcalacdayuniv/2026lms/blob/main/js/components-dashboard.js): `js/components-dashboard.js`
- [Class templates](https://github.com/gcalacdayuniv/2026lms/blob/main/js/components-class.js): `js/components-class.js`
- [Session and API client](https://github.com/gcalacdayuniv/2026lms/blob/main/js/globals.js): `js/globals.js`

### Identity and profiles

- [Authentication and admin](https://github.com/gcalacdayuniv/2026lms/blob/main/js/auth.js): `js/auth.js`
- [Avatar utility](https://github.com/gcalacdayuniv/2026lms/blob/main/js/components-utils.js): `js/components-utils.js`

### Course operations

- [Course action coordinator](https://github.com/gcalacdayuniv/2026lms/blob/main/js/course.js): `js/course.js`
- [Course dashboards](https://github.com/gcalacdayuniv/2026lms/blob/main/js/course-dashboard.js): `js/course-dashboard.js`
- [Class roster](https://github.com/gcalacdayuniv/2026lms/blob/main/js/course-class.js): `js/course-class.js`
- [Attendance](https://github.com/gcalacdayuniv/2026lms/blob/main/js/course-attendance.js): `js/course-attendance.js`
- [Recitation picker](https://github.com/gcalacdayuniv/2026lms/blob/main/js/course-recitation.js): `js/course-recitation.js`

### API and persistence

- [Worker API](https://github.com/gcalacdayuniv/2026lms/blob/main/worker/worker.js): `worker/worker.js`
- **D1 database**

### Document storage

- [Drive webhook](https://github.com/gcalacdayuniv/2026lms/blob/main/gas/Code.gs): `gas/Code.gs`
- **Google Drive**

### Other components

- **Portal user**

## Connections

- Portal user → App startup: opens portal (evidence: `README.md`)
- App startup → Session and API client: initializes (evidence: `js/app.js`)
- App startup → Authentication and admin: initializes (evidence: `js/app.js`)
- App startup → Course action coordinator: initializes (evidence: `js/app.js`)
- App startup → Hash router: initializes (evidence: `js/app.js`)
- Hash router → UI components: renders views (evidence: `js/router.js`)
- Hash router → Class roster: loads class (evidence: `js/router.js`)
- Hash router → Course dashboards: loads dashboard (evidence: `js/router.js`)
- Hash router → Authentication and admin: loads programs (evidence: `js/router.js`)
- UI components → Auth templates: exports templates (evidence: `js/components.js`)
- UI components → Dashboard templates: exports templates (evidence: `js/components.js`)
- UI components → Class templates: exports templates (evidence: `js/components.js`)
- Authentication and admin → Session and API client: uses session (evidence: `js/auth.js`)
- Authentication and admin → Avatar utility: formats avatars (evidence: `js/auth.js`)
- Class templates → Avatar utility: formats avatars (evidence: `js/components-class.js`)
- Dashboard templates → Avatar utility: formats avatars (evidence: `js/components-dashboard.js`)
- Course action coordinator → Course dashboards: delegates actions (evidence: `js/course.js`)
- Course action coordinator → Class roster: delegates actions (evidence: `js/course.js`)
- Course action coordinator → Attendance: saves attendance (evidence: `js/course.js`)
- Course action coordinator → Recitation picker: coordinates picker (evidence: `README.md`)
- Class roster → Attendance: renders metrics (evidence: `js/course-class.js`)
- Class roster → UI components: renders class (evidence: `js/course-class.js`)
- Course dashboards → Session and API client: reads user (evidence: `js/course-dashboard.js`)
- Attendance → Session and API client: uses API client (evidence: `js/course-attendance.js`)
- Authentication and admin → Session and API client: sends API requests (evidence: `js/auth.js`)
- Course action coordinator → Session and API client: sends API requests (evidence: `js/course.js`)
- Class roster → Session and API client: loads course data (evidence: `js/course-class.js`)
- Session and API client → Worker API: calls API (evidence: `README.md`)
- Worker API → D1 database: reads and writes (evidence: `README.md`)
- Worker API → Drive webhook: proxies uploads (evidence: `README.md`)
- Drive webhook → Google Drive: stores files (evidence: `README.md`)