# booksbigchange-rgb/bigchange_academy_hub architecture

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

- Interactive diagram: https://gitdiagram.com/booksbigchange-rgb/bigchange_academy_hub
- Repository: https://github.com/booksbigchange-rgb/bigchange_academy_hub

## Overview

BigChange Academy Hub is a school-management app with a fictional, browser-only demo and a Supabase-backed live mode. In the demo, staff preview and manage courses, classes, academics, assessments, family information, and finance screens; changes are not persisted. In live mode, users sign in and see role-specific screens whose actions use the API layer to read and update Supabase. The README also documents payment approval, attendance, reminders, and class-level notices. Edges reflect shown imports/calls or README statements; unsampled live internals are represented at subsystem level.

Main entry points: [`src/App.tsx`](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/App.tsx) (Demo application), [`src/live/LiveApp.tsx`](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/LiveApp.tsx) (Live application), [`src/live/api.ts`](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/api.ts) (Supabase API), [`src/main.tsx`](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/main.tsx) (Mode selection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry and modes"]
  node_entrypoint["Mode selection<br/>[main.tsx]"]
  node_demoapp["Demo application<br/>[App.tsx]"]
  node_secure["Secure shell<br/>[SecureApp.tsx]"]
  node_liveapp["Live application<br/>[LiveApp.tsx]"]
end

subgraph group_demo["Demo school workflows"]
  node_operations["Classes and directory"]
  node_courses["Course catalog"]
  node_academics["Lessons and attendance"]
  node_assessments["Assessments"]
  node_family["Family view<br/>[AcademyFamily.tsx]"]
  node_finance["Fees and payments<br/>[AcademyFeePlan.tsx]"]
  node_guardians["Guardian administration"]
  node_reports["Reports and reminders<br/>[AcademyReports.tsx]"]
  node_classmodel["Classroom model<br/>[operations.mjs]"]
  node_academicmodel["Academic model<br/>[academics.mjs]"]
  node_assessmentmodel["Assessment model<br/>[assessments.mjs]"]
end

subgraph group_live["Live role workflows"]
  node_livefees["Live fees<br/>[LiveFees.tsx]"]
  node_liveguardians["Live guardians<br/>[LiveGuardians.tsx]"]
  node_livefamily["Live family<br/>[LiveFamily.tsx]"]
  node_liveoverview["Live overview<br/>[LiveOverview.tsx]"]
  node_livenotices["Level notices<br/>[LiveNotices.tsx]"]
end

subgraph group_data["Live data services"]
  node_api["Supabase API<br/>[api.ts]"]
  node_validation["Input validation<br/>[validation.mjs]"]
  node_shared["Shared live state<br/>[shared.ts]"]
end

node_user(("School users"))
node_supabase[("Supabase database")]

node_user -->|"opens app"| node_entrypoint
node_entrypoint -->|"selects demo"| node_demoapp
node_entrypoint -->|"selects live"| node_secure
node_secure -->|"renders"| node_liveapp
node_user -->|"previews roles"| node_demoapp
node_demoapp -->|"renders"| node_operations
node_demoapp -->|"renders"| node_courses
node_demoapp -->|"renders"| node_academics
node_demoapp -->|"renders"| node_assessments
node_demoapp -->|"renders"| node_family
node_demoapp -->|"renders"| node_finance
node_demoapp -->|"renders"| node_guardians
node_demoapp -->|"renders"| node_reports
node_operations -->|"updates model"| node_classmodel
node_academics -->|"reads classes"| node_classmodel
node_academics -->|"updates lessons"| node_academicmodel
node_assessments -->|"filters classes"| node_classmodel
node_assessments -->|"submits work"| node_assessmentmodel
node_user -->|"signs in"| node_liveapp
node_liveapp -->|"routes to"| node_livefees
node_liveapp -->|"routes to"| node_liveguardians
node_liveapp -->|"routes to"| node_livefamily
node_liveapp -->|"routes to"| node_liveoverview
node_liveapp -->|"routes to"| node_livenotices
node_liveapp -->|"loads data"| node_api
node_liveapp -->|"uses state"| node_shared
node_livefees -->|"reads and writes"| node_api
node_liveguardians -->|"reads and writes"| node_api
node_api -->|"validates inputs"| node_validation
node_api -->|"queries tables"| node_supabase
node_liveapp -->|"persists live data"| node_supabase

click node_entrypoint "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/main.tsx"
click node_demoapp "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/App.tsx"
click node_secure "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/SecureApp.tsx"
click node_liveapp "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/LiveApp.tsx"
click node_operations "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyOperations.tsx"
click node_courses "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyCourseCatalog.tsx"
click node_academics "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyAcademics.tsx"
click node_assessments "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyAssessments.tsx"
click node_family "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyFamily.tsx"
click node_finance "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyFeePlan.tsx"
click node_guardians "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyGuardianAdmin.tsx"
click node_reports "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyReports.tsx"
click node_classmodel "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/lib/operations.mjs"
click node_academicmodel "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/lib/academics.mjs"
click node_assessmentmodel "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/lib/assessments.mjs"
click node_livefees "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/LiveFees.tsx"
click node_liveguardians "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/LiveGuardians.tsx"
click node_livefamily "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/LiveFamily.tsx"
click node_liveoverview "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/LiveOverview.tsx"
click node_livenotices "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/LiveNotices.tsx"
click node_api "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/api.ts"
click node_validation "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/validation.mjs"
click node_shared "https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/shared.ts"

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_entrypoint,node_demoapp,node_secure,node_liveapp,node_user toneBlue
class node_operations,node_courses,node_academics,node_assessments,node_family,node_finance,node_guardians,node_reports,node_classmodel,node_academicmodel,node_assessmentmodel,node_supabase toneAmber
class node_livefees,node_liveguardians,node_livefamily,node_liveoverview,node_livenotices toneMint
class node_api,node_validation,node_shared toneRose
```

## Components

### App entry and modes

- [Mode selection](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/main.tsx): `src/main.tsx`
- [Demo application](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/App.tsx): `src/App.tsx`
- [Secure shell](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/SecureApp.tsx): `src/SecureApp.tsx`
- [Live application](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/LiveApp.tsx): `src/live/LiveApp.tsx`

### Demo school workflows

- [Classes and directory](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyOperations.tsx): `src/components/AcademyOperations.tsx`
- [Course catalog](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyCourseCatalog.tsx): `src/components/AcademyCourseCatalog.tsx`
- [Lessons and attendance](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyAcademics.tsx): `src/components/AcademyAcademics.tsx`
- [Assessments](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyAssessments.tsx): `src/components/AcademyAssessments.tsx`
- [Family view](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyFamily.tsx): `src/components/AcademyFamily.tsx`
- [Fees and payments](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyFeePlan.tsx): `src/components/AcademyFeePlan.tsx`
- [Guardian administration](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyGuardianAdmin.tsx): `src/components/AcademyGuardianAdmin.tsx`
- [Reports and reminders](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/components/AcademyReports.tsx): `src/components/AcademyReports.tsx`
- [Classroom model](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/lib/operations.mjs): `src/lib/operations.mjs`
- [Academic model](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/lib/academics.mjs): `src/lib/academics.mjs`
- [Assessment model](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/lib/assessments.mjs): `src/lib/assessments.mjs`

### Live role workflows

- [Live fees](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/LiveFees.tsx): `src/live/LiveFees.tsx`
- [Live guardians](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/LiveGuardians.tsx): `src/live/LiveGuardians.tsx`
- [Live family](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/LiveFamily.tsx): `src/live/LiveFamily.tsx`
- [Live overview](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/LiveOverview.tsx): `src/live/LiveOverview.tsx`
- [Level notices](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/LiveNotices.tsx): `src/live/LiveNotices.tsx`

### Live data services

- [Supabase API](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/api.ts): `src/live/api.ts`
- [Input validation](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/validation.mjs): `src/live/validation.mjs`
- [Shared live state](https://github.com/booksbigchange-rgb/bigchange_academy_hub/blob/main/src/live/shared.ts): `src/live/shared.ts`

### Other components

- **School users**
- **Supabase database**

## Connections

- School users → Mode selection: opens app (evidence: `README.md`)
- Mode selection → Demo application: selects demo (evidence: `src/main.tsx`)
- Mode selection → Secure shell: selects live (evidence: `src/main.tsx`)
- Secure shell → Live application: renders (evidence: `src/SecureApp.tsx`)
- School users → Demo application: previews roles (evidence: `README.md`)
- Demo application → Classes and directory: renders (evidence: `src/App.tsx`)
- Demo application → Course catalog: renders (evidence: `src/App.tsx`)
- Demo application → Lessons and attendance: renders (evidence: `src/App.tsx`)
- Demo application → Assessments: renders (evidence: `src/App.tsx`)
- Demo application → Family view: renders (evidence: `src/App.tsx`)
- Demo application → Fees and payments: renders (evidence: `src/App.tsx`)
- Demo application → Guardian administration: renders (evidence: `src/App.tsx`)
- Demo application → Reports and reminders: renders (evidence: `src/App.tsx`)
- Classes and directory → Classroom model: updates model (evidence: `src/components/AcademyOperations.tsx`)
- Lessons and attendance → Classroom model: reads classes (evidence: `src/components/AcademyAcademics.tsx`)
- Lessons and attendance → Academic model: updates lessons (evidence: `src/components/AcademyAcademics.tsx`)
- Assessments → Classroom model: filters classes (evidence: `src/components/AcademyAssessments.tsx`)
- Assessments → Assessment model: submits work (evidence: `src/components/AcademyAssessments.tsx`)
- School users → Live application: signs in (evidence: `README.md`)
- Live application → Live fees: routes to (evidence: `src/live/LiveApp.tsx`)
- Live application → Live guardians: routes to (evidence: `src/live/LiveApp.tsx`)
- Live application → Live family: routes to (evidence: `src/live/LiveApp.tsx`)
- Live application → Live overview: routes to (evidence: `src/live/LiveApp.tsx`)
- Live application → Level notices: routes to (evidence: `src/live/LiveApp.tsx`)
- Live application → Supabase API: loads data (evidence: `src/live/LiveApp.tsx`)
- Live application → Shared live state: uses state (evidence: `src/live/LiveApp.tsx`)
- Live fees → Supabase API: reads and writes (evidence: `src/live/LiveFees.tsx`)
- Live guardians → Supabase API: reads and writes (evidence: `src/live/LiveGuardians.tsx`)
- Supabase API → Input validation: validates inputs (evidence: `src/live/api.ts`)
- Supabase API → Supabase database: queries tables (evidence: `src/live/api.ts`)
- Live application → Supabase database: persists live data (evidence: `README.md`)