# dendennnnn/csit340-g6-midterms-ibale architecture

> Architecture diagram of the GitHub repository dendennnnn/csit340-g6-midterms-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/csit340-g6-midterms-ibale
- Repository: https://github.com/dendennnnn/csit340-g6-midterms-ibale

## Overview

Cloudline is a small React plan-pricing interface: users adjust seat and month counts, compare three plans, and see totals calculated from those values. The active screen is implemented directly in App.jsx; main.jsx mounts it. The repository also contains a separate, currently unmounted enterprise waitlist component and reusable plan-card components. The excerpts show the active flow and the PlanCard-to-Feature relationship; they do not show the standalone components being wired into App.

Main entry points: [`src/main.jsx`](https://github.com/dendennnnn/csit340-g6-midterms-ibale/blob/main/src/main.jsx) (React mount), [`src/App.jsx`](https://github.com/dendennnnn/csit340-g6-midterms-ibale/blob/main/src/App.jsx) (Plan builder screen), [`src/components/PlancCard.jsx`](https://github.com/dendennnnn/csit340-g6-midterms-ibale/blob/main/src/components/PlancCard.jsx) (Reusable plan card), [`src/components/Feature.jsx`](https://github.com/dendennnnn/csit340-g6-midterms-ibale/blob/main/src/components/Feature.jsx) (Plan feature item)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Application runtime"]
  node_mount["React mount<br/>[main.jsx]"]
  node_app["Plan builder screen<br/>[App.jsx]"]
end

subgraph group_pricing["Plan pricing"]
  node_plan_card["Reusable plan card<br/>[PlancCard.jsx]"]
  node_feature["Plan feature item<br/>[Feature.jsx]"]
end

subgraph group_waitlist["Enterprise waitlist"]
  node_waitlist["Waitlist panel<br/>[Waitlist.jsx]"]
end

node_browser(("Browser user"))

node_browser -->|"opens app"| node_mount
node_mount -->|"renders"| node_app
node_browser -->|"changes plan inputs"| node_app
node_plan_card -->|"renders"| node_feature

click node_mount "https://github.com/dendennnnn/csit340-g6-midterms-ibale/blob/main/src/main.jsx"
click node_app "https://github.com/dendennnnn/csit340-g6-midterms-ibale/blob/main/src/App.jsx"
click node_plan_card "https://github.com/dendennnnn/csit340-g6-midterms-ibale/blob/main/src/components/PlancCard.jsx"
click node_feature "https://github.com/dendennnnn/csit340-g6-midterms-ibale/blob/main/src/components/Feature.jsx"
click node_waitlist "https://github.com/dendennnnn/csit340-g6-midterms-ibale/blob/main/src/components/Waitlist.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_mount,node_app,node_browser toneBlue
class node_plan_card,node_feature toneAmber
class node_waitlist toneMint
```

## Components

### Application runtime

- [React mount](https://github.com/dendennnnn/csit340-g6-midterms-ibale/blob/main/src/main.jsx): `src/main.jsx`
- [Plan builder screen](https://github.com/dendennnnn/csit340-g6-midterms-ibale/blob/main/src/App.jsx): `src/App.jsx`

### Plan pricing

- [Reusable plan card](https://github.com/dendennnnn/csit340-g6-midterms-ibale/blob/main/src/components/PlancCard.jsx): `src/components/PlancCard.jsx`
- [Plan feature item](https://github.com/dendennnnn/csit340-g6-midterms-ibale/blob/main/src/components/Feature.jsx): `src/components/Feature.jsx`

### Enterprise waitlist

- [Waitlist panel](https://github.com/dendennnnn/csit340-g6-midterms-ibale/blob/main/src/components/Waitlist.jsx): `src/components/Waitlist.jsx`

### Other components

- **Browser user**

## Connections

- Browser user → React mount: opens app (evidence: `src/main.jsx`)
- React mount → Plan builder screen: renders (evidence: `src/main.jsx`)
- Browser user → Plan builder screen: changes plan inputs (evidence: `src/App.jsx`)
- Reusable plan card → Plan feature item: renders (evidence: `src/components/PlancCard.jsx`)