# okayabedin/diu-cgpa architecture

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

- Interactive diagram: https://gitdiagram.com/okayabedin/diu-cgpa
- Repository: https://github.com/okayabedin/diu-cgpa

## Overview

1. **Project type and runtime**
   - This is a **single-page, browser-based academic calculator** for DIU students.
   - The core app runs as **static HTML/CSS/Vanilla JavaScript** in the browser.
   - There is **no persistent database** or authenticated backend in the repo; results are processed locally after retrieval.

2. **Primary entry point**
   - `index.html` is the main application shell.
   - It likely wires in the stylesheet(s), UI containers, and the JavaScript modules under `js/`.
   - `assets/` holds static visuals and styling; `robots.txt`, `sitemap.xml`, and `_headers` indicate deployment-oriented static-site setup.

3. **Client-side application boundary**
   - The browser app is the main architecture boundary: user input enters through the UI, data is fetched from the university-facing API, then transformed and rendered entirely on the client.
   - The README emphasizes privacy by keeping academic data local after retrieval, so the main flow is **fetch → calculate → render/export**.

4. **Data acquisition layer**
   - `js/api.js` is the front-end API integration layer.
   - It is paired with `netlify/functions/api-proxy.js`, which exists to **proxy university API requests and handle CORS issues**.
   - This introduces a small serverless boundary: the browser talks to a Netlify Function, which forwards requests to the external DIU academic system.

5. **Calculation and domain logic**
   - `js/calculator.js` contains the CGPA/GPA computation logic.
   - The README indicates weighted GPA calculation, retake handling, and special treatment of grades like `F` and `I`.
   - This is the main domain engine of the app: it converts raw academic records into semester GPA, cumulative CGPA, and derived summaries.

6. **Manual planning workflow**
   - `js/manual-input.js` supports the “manual CGPA calculator” path described in the README.
   - This path is separate from fetched academic records: users can add hypothetical courses and grades to simulate future semesters.
   - `assets/styles/manual-calculator.css` suggests this workflow has its own UI treatment and layout.

7. **Presentation components**
   - `js/components/StudentInfo.js`, `SemesterList.js`, and `ResultCard.js` are the primary UI building blocks.
   - Their names imply a presentation-layer split into:
     - student summary/header,
     - semester-by-semester transcript list,
     - result/CGPA display cards.
   - This keeps rendering concerns separate from API and calculation logic.

8. **Navigation and app orchestration**
   - `js/navigation.js` likely manages switching between major views such as fetch mode, manual calculator, and result views.
   - `js/ui.js` is the broader UI controller that coordinates rendering, state updates, and user interactions.
   - Together they act as the orchestration layer between input, data, calculation, and output.

9. **Utilities and shared helpers**
   - `js/utils/helpers.js` contains shared helper functions.
   - `js/utils/Iterator.js` suggests a custom iteration abstraction, likely used for traversing semester/course collections in a consistent way.
   - These modules are supporting infrastructure rather than primary app flows.

10. **Static assets and visual system**
   - `assets/styles/main.css` holds the core styling for the app shell and responsive layout.
   - `assets/img/` contains logos and icons used in branding and UI.
   - The README mentions Bootstrap, FontAwesome, Chart.js, and HTML2PDF.js, so the UI likely depends on those libraries for responsive layout, icons, charts, and PDF generation, even though they are not shown in the file tree.

11. **Output and reporting**
   - The app supports transcript-style output, CSV export, and visual GPA tracking.
   - These capabilities likely originate from the calculated result model and are rendered or exported from the UI layer rather than from a backend service.
   - Chart rendering is a client-side concern tied to the result presentation flow.

12. **Deployment architecture**
   - `netlify.toml` plus the `netlify/functions/` directory indicate deployment on **Netlify**.
   - The serverless function is used primarily as an integration shim, not as an application server.
   - This means the deployment model is: static frontend assets served from Netlify, with a lightweight function layer for API proxying.

13. **Testing/debug artifacts**
   - `test-semester-names.js`, `test-sorting.js`, and `debug-sort.js` suggest the repo includes small targeted scripts for validating transcript parsing/sorting behavior.
   - These are likely developer-side tools around the data transformation layer, not part of production runtime.

14. **Overall data flow**
   - The typical architecture flow is:
     - user enters a student ID or manual course data,
     - the client calls the API layer,
     - the Netlify proxy forwards external requests when needed,
     - raw academic records are normalized and processed by calculator logic,
     - the UI components render semester history, CGPA summary, charts, and exportable outputs.
   - The main architectural separation is between **static client UI**, **domain calculation logic**, and a **minimal proxy function** for external API access.

Main entry points: [`js/ui.js`](https://github.com/okayabedin/diu-cgpa/blob/main/js/ui.js) (UI), [`js/calculator.js`](https://github.com/okayabedin/diu-cgpa/blob/main/js/calculator.js) (Calculator), [`index.html`](https://github.com/okayabedin/diu-cgpa/blob/main/index.html) (index.html), [`netlify/functions/api-proxy.js`](https://github.com/okayabedin/diu-cgpa/blob/main/netlify/functions/api-proxy.js) (API Proxy)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client App"]
  node_index["index.html<br/>app shell<br/>[index.html]"]
end

subgraph group_presentation["Presentation"]
  node_student["Student Info<br/>view component<br/>[StudentInfo.js]"]
  node_semester["Semester List<br/>view component<br/>[SemesterList.js]"]
  node_result["Result Card<br/>view component<br/>[ResultCard.js]"]
  node_maincss["Main CSS<br/>stylesheet<br/>[main.css]"]
  node_manualcss["Manual CSS<br/>stylesheet"]
  node_assetsimg["Images<br/>static assets"]
end

subgraph group_logic["Logic"]
  node_ui["UI<br/>controller<br/>[ui.js]"]
  node_nav["Navigation<br/>view router<br/>[navigation.js]"]
  node_api["API<br/>client service<br/>[api.js]"]
  node_calc["Calculator<br/>domain engine<br/>[calculator.js]"]
  node_manual["Manual Input<br/>manual workflow<br/>[manual-input.js]"]
  node_helpers["Helpers<br/>shared utils<br/>[helpers.js]"]
  node_iter["Iterator<br/>collection helper<br/>[Iterator.js]"]
end

subgraph group_deployment["Deployment"]
  node_proxy["API Proxy<br/>serverless function<br/>[api-proxy.js]"]
  node_netlify["Netlify Config<br/>deployment config<br/>[netlify.toml]"]
  node_pkg["Package Config<br/>npm config<br/>[package.json]"]
  node_robots["SEO Files<br/>static site files<br/>[robots.txt]"]
end

subgraph group_tools["Tools"]
  node_testsort["Sort Test<br/>debug script<br/>[test-sorting.js]"]
  node_testnames["Name Test<br/>debug script"]
  node_debugsort["Debug Sort<br/>debug script<br/>[debug-sort.js]"]
end

node_index -->|"boots"| node_ui
node_ui -->|"routes"| node_nav
node_ui -->|"fetches"| node_api
node_ui -->|"computes"| node_calc
node_ui -->|"manual mode"| node_manual
node_ui -->|"renders"| node_student
node_ui -->|"renders"| node_semester
node_ui -->|"renders"| node_result
node_api -->|"proxied by"| node_proxy
node_proxy -.->|"supplies data"| node_calc
node_manual -->|"simulates"| node_calc
node_calc -->|"uses"| node_helpers
node_calc -->|"iterates"| node_iter
node_student -->|"styled by"| node_maincss
node_semester -->|"styled by"| node_maincss
node_result -->|"styled by"| node_maincss
node_manual -->|"styled by"| node_manualcss
node_index -->|"includes"| node_assetsimg
node_netlify -->|"deploys"| node_proxy
node_netlify -->|"serves"| node_index
node_pkg -.->|"depends on"| node_ui
node_pkg -.->|"depends on"| node_proxy
node_testsort -.->|"validates"| node_calc
node_testnames -.->|"validates"| node_semester
node_debugsort -.->|"ad hoc"| node_testsort
node_robots -.->|"publishes"| node_index

click node_index "https://github.com/okayabedin/diu-cgpa/blob/main/index.html"
click node_ui "https://github.com/okayabedin/diu-cgpa/blob/main/js/ui.js"
click node_nav "https://github.com/okayabedin/diu-cgpa/blob/main/js/navigation.js"
click node_api "https://github.com/okayabedin/diu-cgpa/blob/main/js/api.js"
click node_calc "https://github.com/okayabedin/diu-cgpa/blob/main/js/calculator.js"
click node_manual "https://github.com/okayabedin/diu-cgpa/blob/main/js/manual-input.js"
click node_helpers "https://github.com/okayabedin/diu-cgpa/blob/main/js/utils/helpers.js"
click node_iter "https://github.com/okayabedin/diu-cgpa/blob/main/js/utils/Iterator.js"
click node_student "https://github.com/okayabedin/diu-cgpa/blob/main/js/components/StudentInfo.js"
click node_semester "https://github.com/okayabedin/diu-cgpa/blob/main/js/components/SemesterList.js"
click node_result "https://github.com/okayabedin/diu-cgpa/blob/main/js/components/ResultCard.js"
click node_maincss "https://github.com/okayabedin/diu-cgpa/blob/main/assets/styles/main.css"
click node_manualcss "https://github.com/okayabedin/diu-cgpa/blob/main/assets/styles/manual-calculator.css"
click node_assetsimg "https://github.com/okayabedin/diu-cgpa/tree/main/assets/img"
click node_proxy "https://github.com/okayabedin/diu-cgpa/blob/main/netlify/functions/api-proxy.js"
click node_netlify "https://github.com/okayabedin/diu-cgpa/blob/main/netlify.toml"
click node_pkg "https://github.com/okayabedin/diu-cgpa/blob/main/package.json"
click node_robots "https://github.com/okayabedin/diu-cgpa/blob/main/robots.txt"
click node_testsort "https://github.com/okayabedin/diu-cgpa/blob/main/test-sorting.js"
click node_testnames "https://github.com/okayabedin/diu-cgpa/blob/main/test-semester-names.js"
click node_debugsort "https://github.com/okayabedin/diu-cgpa/blob/main/debug-sort.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_index toneBlue
class node_student,node_semester,node_result,node_maincss,node_manualcss,node_assetsimg toneAmber
class node_ui,node_nav,node_api,node_calc,node_manual,node_helpers,node_iter toneMint
class node_proxy,node_netlify,node_pkg,node_robots toneRose
class node_testsort,node_testnames,node_debugsort toneIndigo
```

## Components

### Client App

Static browser application for fetching, calculating, and rendering academic results.

- [index.html](https://github.com/okayabedin/diu-cgpa/blob/main/index.html): app shell · Main HTML entry point that mounts the single-page calculator UI. · `index.html`

### Presentation

UI components and styling that render student, semester, and result views.

- [Student Info](https://github.com/okayabedin/diu-cgpa/blob/main/js/components/StudentInfo.js): view component · Renders student summary and header information. · `js/components/StudentInfo.js`
- [Semester List](https://github.com/okayabedin/diu-cgpa/blob/main/js/components/SemesterList.js): view component · Renders semester-by-semester transcript history. · `js/components/SemesterList.js`
- [Result Card](https://github.com/okayabedin/diu-cgpa/blob/main/js/components/ResultCard.js): view component · Displays GPA, CGPA, and summary outcome cards. · `js/components/ResultCard.js`
- [Main CSS](https://github.com/okayabedin/diu-cgpa/blob/main/assets/styles/main.css): stylesheet · Core app styling and responsive layout. · `assets/styles/main.css`
- [Manual CSS](https://github.com/okayabedin/diu-cgpa/blob/main/assets/styles/manual-calculator.css): stylesheet · Dedicated styling for the manual CGPA calculator workflow. · `assets/styles/manual-calculator.css`
- [Images](https://github.com/okayabedin/diu-cgpa/tree/main/assets/img): static assets · Branding and UI icons used by the application. · `assets/img`

### Logic

Calculation, navigation, input, and shared helper modules.

- [UI](https://github.com/okayabedin/diu-cgpa/blob/main/js/ui.js): controller · Coordinates rendering, state updates, and user interactions. · `js/ui.js`
- [Navigation](https://github.com/okayabedin/diu-cgpa/blob/main/js/navigation.js): view router · Switches between major calculator views and workflows. · `js/navigation.js`
- [API](https://github.com/okayabedin/diu-cgpa/blob/main/js/api.js): client service · Browser-side integration layer for academic data requests. · `js/api.js`
- [Calculator](https://github.com/okayabedin/diu-cgpa/blob/main/js/calculator.js): domain engine · Computes GPA, CGPA, retake handling, and grade normalization. · `js/calculator.js`
- [Manual Input](https://github.com/okayabedin/diu-cgpa/blob/main/js/manual-input.js): manual workflow · Supports hypothetical course entry and manual CGPA planning. · `js/manual-input.js`
- [Helpers](https://github.com/okayabedin/diu-cgpa/blob/main/js/utils/helpers.js): shared utils · Common helper functions used across the client app. · `js/utils/helpers.js`
- [Iterator](https://github.com/okayabedin/diu-cgpa/blob/main/js/utils/Iterator.js): collection helper · Custom iteration abstraction for semester and course traversal. · `js/utils/Iterator.js`

### Deployment

Netlify-specific static hosting and proxy boundary.

- [API Proxy](https://github.com/okayabedin/diu-cgpa/blob/main/netlify/functions/api-proxy.js): serverless function · Netlify function that forwards university API requests and avoids CORS issues. · `netlify/functions/api-proxy.js`
- [Netlify Config](https://github.com/okayabedin/diu-cgpa/blob/main/netlify.toml): deployment config · Deployment settings for static hosting and function wiring. · `netlify.toml`
- [Package Config](https://github.com/okayabedin/diu-cgpa/blob/main/package.json): npm config · Dependency and script manifest for the project. · `package.json`
- [SEO Files](https://github.com/okayabedin/diu-cgpa/blob/main/robots.txt): static site files · robots, sitemap, and headers used for static deployment. · `robots.txt`

### Tools

Developer-side scripts for sorting and transcript behavior checks.

- [Sort Test](https://github.com/okayabedin/diu-cgpa/blob/main/test-sorting.js): debug script · Targeted script for transcript sorting behavior. · `test-sorting.js`
- [Name Test](https://github.com/okayabedin/diu-cgpa/blob/main/test-semester-names.js): debug script · Targeted script for semester name handling. · `test-semester-names.js`
- [Debug Sort](https://github.com/okayabedin/diu-cgpa/blob/main/debug-sort.js): debug script · Ad hoc script for inspecting sorting behavior. · `debug-sort.js`

## Connections

- index.html → UI: boots · Loads the main client controller.
- UI → Navigation: routes · Delegates view switching and workflow selection.
- UI → API: fetches · Requests academic records through the client API layer.
- UI → Calculator: computes · Sends normalized records to the GPA/CGPA engine.
- UI → Manual Input: manual mode · Enables the manual planning workflow.
- UI → Student Info: renders · Shows student summary information.
- UI → Semester List: renders · Shows semester history and transcript rows.
- UI → Result Card: renders · Displays calculated GPA/CGPA results.
- API → API Proxy: proxied by · Uses the Netlify proxy for external academic API calls when needed.
- API Proxy → Calculator: supplies data · Returns academic records that feed calculation logic.
- Manual Input → Calculator: simulates · Feeds hypothetical courses into the calculation engine.
- Calculator → Helpers: uses · Relies on shared helper functions.
- Calculator → Iterator: iterates · Traverses semester and course collections consistently.
- Student Info → Main CSS: styled by · Uses the core stylesheet.
- Semester List → Main CSS: styled by · Uses the core stylesheet.
- Result Card → Main CSS: styled by · Uses the core stylesheet.
- Manual Input → Manual CSS: styled by · Uses the manual workflow stylesheet.
- index.html → Images: includes · References static branding and icons.
- Netlify Config → API Proxy: deploys · Declares the function boundary on Netlify.
- Netlify Config → index.html: serves · Publishes the static application shell.
- Package Config → UI: depends on · Provides project dependencies and scripts for the browser app.
- Package Config → API Proxy: depends on · Provides function/runtime dependencies.
- Sort Test → Calculator: validates · Checks sorting behavior related to transcript processing.
- Name Test → Semester List: validates · Checks semester naming behavior.
- Debug Sort → Sort Test: ad hoc · Alternative debugging path for the same sorting concerns.
- SEO Files → index.html: publishes · Supports deployment and indexing of the static site.