# dendennnnn/csit340g6-lab3-ibale architecture

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

- Interactive diagram: https://gitdiagram.com/dendennnnn/csit340g6-lab3-ibale
- Repository: https://github.com/dendennnnn/csit340g6-lab3-ibale

## Overview

This is a minimal React course-summary page, not a broader product platform. The browser-loaded entry point mounts the app, which renders course details and student information; the course view displays its header, parts, and summed units. Component behavior is defined together in `src/App.jsx`.

Main entry points: [`src/App.jsx`](https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx) (Course view), [`src/main.jsx`](https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/main.jsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_browser(("Browser"))
node_entry["React entry<br/>[main.jsx]"]
node_app["App data<br/>[App.jsx]"]
node_course["Course view<br/>[App.jsx]"]
node_header["Course header<br/>[App.jsx]"]
node_content["Course parts<br/>[App.jsx]"]
node_part["Part display<br/>[App.jsx]"]
node_total["Unit total<br/>[App.jsx]"]
node_footer["Student footer<br/>[App.jsx]"]

node_browser -->|"loads page"| node_entry
node_entry -->|"mounts"| node_app
node_app -->|"renders"| node_course
node_app -->|"renders"| node_footer
node_course -->|"renders"| node_header
node_course -->|"renders"| node_content
node_course -->|"renders"| node_total
node_content -->|"renders"| node_part

click node_entry "https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/main.jsx"
click node_app "https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx"
click node_course "https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx"
click node_header "https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx"
click node_content "https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx"
click node_part "https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx"
click node_total "https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx"
click node_footer "https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx"

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_browser,node_course toneBlue
class node_entry,node_app,node_header,node_content,node_part,node_total,node_footer toneTeal
```

## Components

### Other components

- **Browser**
- [React entry](https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/main.jsx): `src/main.jsx`
- [App data](https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx): `src/App.jsx`
- [Course view](https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx): `src/App.jsx`
- [Course header](https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx): `src/App.jsx`
- [Course parts](https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx): `src/App.jsx`
- [Part display](https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx): `src/App.jsx`
- [Unit total](https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx): `src/App.jsx`
- [Student footer](https://github.com/dendennnnn/csit340g6-lab3-ibale/blob/main/src/App.jsx): `src/App.jsx`

## Connections

- Browser → React entry: loads page (evidence: `src/main.jsx`)
- React entry → App data: mounts (evidence: `src/main.jsx`)
- App data → Course view: renders (evidence: `src/App.jsx`)
- App data → Student footer: renders (evidence: `src/App.jsx`)
- Course view → Course header: renders (evidence: `src/App.jsx`)
- Course view → Course parts: renders (evidence: `src/App.jsx`)
- Course view → Unit total: renders (evidence: `src/App.jsx`)
- Course parts → Part display: renders (evidence: `src/App.jsx`)