# mq313qdu-ux/gpa-calculator architecture

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

- Interactive diagram: https://gitdiagram.com/mq313qdu-ux/gpa-calculator
- Repository: https://github.com/mq313qdu-ux/gpa-calculator
- Video tour (about a minute): https://gitdiagram.com/mq313qdu-ux/gpa-calculator/video

## Overview

BEAM is a browser-based GPA calculator for a radiology technology program. A student selects a study stage, enters course grades, and calculates a stage GPA; the interface can show the result and let the student edit or reset grades. The sampled source places the curriculum data, calculation helpers, state, and interface in one React component file, so these are shown as logical responsibilities rather than separate modules. The README also documents empty stages and GitHub Pages deployment; deployment is excluded as delivery infrastructure.

Main entry points: [`src/App.jsx`](https://github.com/mq313qdu-ux/gpa-calculator/blob/main/src/App.jsx) (Calculator UI), [`src/main.jsx`](https://github.com/mq313qdu-ux/gpa-calculator/blob/main/src/main.jsx) (React entry), [`src/App.css`](https://github.com/mq313qdu-ux/gpa-calculator/blob/main/src/App.css) (Interface styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Calculator"]
  node_entry["React entry<br/>[main.jsx]"]
  node_calculator["Calculator UI<br/>[App.jsx]"]
  node_curriculum["Stage curriculum<br/>[App.jsx]"]
  node_gpa["GPA logic<br/>[App.jsx]"]
  node_styling["Interface styling<br/>[App.css]"]
end

node_student(("Student"))

node_entry -->|"renders"| node_calculator
node_student -->|"enters grades"| node_calculator
node_calculator -->|"reads stages"| node_curriculum
node_calculator -->|"calculates GPA"| node_gpa
node_gpa -->|"returns result"| node_calculator
node_calculator -->|"uses styles"| node_styling

click node_entry "https://github.com/mq313qdu-ux/gpa-calculator/blob/main/src/main.jsx"
click node_calculator "https://github.com/mq313qdu-ux/gpa-calculator/blob/main/src/App.jsx"
click node_curriculum "https://github.com/mq313qdu-ux/gpa-calculator/blob/main/src/App.jsx"
click node_gpa "https://github.com/mq313qdu-ux/gpa-calculator/blob/main/src/App.jsx"
click node_styling "https://github.com/mq313qdu-ux/gpa-calculator/blob/main/src/App.css"

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_entry,node_calculator,node_curriculum,node_gpa,node_styling toneBlue
class node_student toneIndigo
```

## Components

### Calculator

- [React entry](https://github.com/mq313qdu-ux/gpa-calculator/blob/main/src/main.jsx): `src/main.jsx`
- [Calculator UI](https://github.com/mq313qdu-ux/gpa-calculator/blob/main/src/App.jsx): `src/App.jsx`
- [Stage curriculum](https://github.com/mq313qdu-ux/gpa-calculator/blob/main/src/App.jsx): `src/App.jsx`
- [GPA logic](https://github.com/mq313qdu-ux/gpa-calculator/blob/main/src/App.jsx): `src/App.jsx`
- [Interface styling](https://github.com/mq313qdu-ux/gpa-calculator/blob/main/src/App.css): `src/App.css`

### Other components

- **Student**

## Connections

- React entry → Calculator UI: renders
- Student → Calculator UI: enters grades
- Calculator UI → Stage curriculum: reads stages
- Calculator UI → GPA logic: calculates GPA
- GPA logic → Calculator UI: returns result
- Calculator UI → Interface styling: uses styles