# toobabutt306/weekend-project-student-management-system architecture

> Architecture diagram of the GitHub repository toobabutt306/weekend-project-student-management-system, 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/toobabutt306/weekend-project-student-management-system
- Repository: https://github.com/toobabutt306/weekend-project-student-management-system

## Overview

The repository is a browser-based student-record ledger for an administrator: sign in, view and manage student records, and inspect academic summaries or export records. The sampled JavaScript shows login and UI state, record search/filter/sort, grade and summary calculations, charts, and JSON export; the data file supplies subjects, departments, and seed records. The excerpts do not establish all event-handler or persistence wiring, so uncertain links are omitted.

Main entry points: [`js/app.js`](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js) (Application controller), [`index.html`](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/index.html) (Ledger page), [`js/data.js`](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/data.js) (Student records)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Admin interface"]
  node_page["Ledger page<br/>[index.html]"]
  node_app["Application controller<br/>[app.js]"]
  node_login["Login screen<br/>[app.js]"]
  node_navigation["Tab navigation<br/>[app.js]"]
end

subgraph group_records["Student records"]
  node_recorddata["Student records<br/>[data.js]"]
  node_seed["Seed records<br/>[data.js]"]
  node_recordlist["Record listing<br/>[app.js]"]
  node_recordfilter["Search and filters<br/>[app.js]"]
  node_recordedit["Record management<br/>[app.js]"]
  node_validation["Form validation<br/>[app.js]"]
end

subgraph group_insights["Results and insights"]
  node_gradecalc["Grade calculations<br/>[app.js]"]
  node_summary["Dashboard summaries<br/>[app.js]"]
  node_charts["Academic charts<br/>[app.js]"]
  node_export["JSON export<br/>[app.js]"]
end

node_admin(("Administrator"))
node_chartlib["Chart.js"]
node_browser["Browser download"]

node_admin -->|"uses"| node_page
node_page -->|"hosts"| node_app
node_app -->|"shows"| node_login
node_app -->|"switches tabs"| node_navigation
node_app -->|"renders"| node_recordlist
node_recordlist -->|"filters and sorts"| node_recordfilter
node_recordlist -->|"reads records"| node_recorddata
node_app -->|"manages records"| node_recordedit
node_recordedit -->|"validates input"| node_validation
node_app -->|"uses seed data"| node_seed
node_app -->|"calculates grades"| node_gradecalc
node_app -->|"updates dashboard"| node_summary
node_summary -->|"uses averages"| node_gradecalc
node_app -->|"renders charts"| node_charts
node_charts -->|"creates charts"| node_chartlib
node_app -->|"exports records"| node_export
node_export -->|"downloads JSON"| node_browser

click node_page "https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/index.html"
click node_app "https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js"
click node_login "https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js"
click node_navigation "https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js"
click node_recorddata "https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/data.js"
click node_seed "https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/data.js"
click node_recordlist "https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js"
click node_recordfilter "https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js"
click node_recordedit "https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js"
click node_validation "https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js"
click node_gradecalc "https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js"
click node_summary "https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js"
click node_charts "https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js"
click node_export "https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.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_page,node_app,node_login,node_navigation,node_browser toneBlue
class node_recorddata,node_seed,node_recordlist,node_recordfilter,node_recordedit,node_validation toneAmber
class node_gradecalc,node_summary,node_charts,node_export toneMint
class node_admin,node_chartlib toneIndigo
```

## Components

### Admin interface

- [Ledger page](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/index.html): `index.html`
- [Application controller](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js): `js/app.js`
- [Login screen](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js): `js/app.js`
- [Tab navigation](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js): `js/app.js`

### Student records

- [Student records](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/data.js): `js/data.js`
- [Seed records](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/data.js): `js/data.js`
- [Record listing](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js): `js/app.js`
- [Search and filters](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js): `js/app.js`
- [Record management](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js): `js/app.js`
- [Form validation](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js): `js/app.js`

### Results and insights

- [Grade calculations](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js): `js/app.js`
- [Dashboard summaries](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js): `js/app.js`
- [Academic charts](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js): `js/app.js`
- [JSON export](https://github.com/toobabutt306/weekend-project-student-management-system/blob/main/js/app.js): `js/app.js`

### Other components

- **Administrator**
- **Chart.js**
- **Browser download**

## Connections

- Administrator → Ledger page: uses
- Ledger page → Application controller: hosts
- Application controller → Login screen: shows
- Application controller → Tab navigation: switches tabs
- Application controller → Record listing: renders
- Record listing → Search and filters: filters and sorts
- Record listing → Student records: reads records
- Application controller → Record management: manages records
- Record management → Form validation: validates input
- Application controller → Seed records: uses seed data
- Application controller → Grade calculations: calculates grades
- Application controller → Dashboard summaries: updates dashboard
- Dashboard summaries → Grade calculations: uses averages
- Application controller → Academic charts: renders charts
- Academic charts → Chart.js: creates charts
- Application controller → JSON export: exports records
- JSON export → Browser download: downloads JSON