# nouralbaarini/data-visualisation- architecture

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

- Interactive diagram: https://gitdiagram.com/nouralbaarini/data-visualisation-
- Repository: https://github.com/nouralbaarini/data-visualisation-

## Overview

Under the Hood is a browser-based, six-track computer-science learning platform. Learners sign up, choose a track, study interactive lessons, complete labs and quizzes, practise challenges, and build progress through XP, streaks and badges. The graph highlights the route into track content, the visual-and-engine layer that powers demonstrations, the database case-study workflow, and local account/progress state. The README documents the wider track capabilities; sampled source confirms key routing, scenario database, query visualization, and progress relationships.

Main entry points: [`src/pages`](https://github.com/nouralbaarini/data-visualisation-/tree/main/src/pages) (Learning pages), [`src/components/viz`](https://github.com/nouralbaarini/data-visualisation-/tree/main/src/components/viz) (Interactive visuals), [`src/app/progress.ts`](https://github.com/nouralbaarini/data-visualisation-/blob/main/src/app/progress.ts) (Progress records), [`src/App.tsx`](https://github.com/nouralbaarini/data-visualisation-/blob/main/src/App.tsx) (App router)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_application["App and accounts"]
  node_app["App router<br/>[App.tsx]"]
  node_auth["Local accounts<br/>[localProvider.ts]"]
  node_learning_pages["Learning pages"]
end

subgraph group_learning["Learning content"]
  node_track_registry["Track registry<br/>[registry.ts]"]
  node_track_content["Track content"]
  node_lesson_content["Database lessons"]
end

subgraph group_interactive["Interactive learning"]
  node_labs["Labs and challenges"]
  node_visualizations["Interactive visuals"]
  node_sql_playground["SQL playground<br/>[SqlPlayground.tsx]"]
  node_scenario_context["Scenario selection"]
  node_scenario_models["Database scenarios"]
end

subgraph group_engines["Learning engines"]
  node_scenario_db["Scenario database"]
  node_sqlite[("In-browser SQLite<br/>[database.ts]")]
  node_course_engines["Course algorithms"]
end

subgraph group_learner_state["Learner state"]
  node_progress[("Progress records<br/>[progress.ts]")]
  node_game_state["XP and badges<br/>[useGame.ts]"]
  node_browser_storage[("Browser storage<br/>[storage.ts]")]
end

node_learner(("Learner"))

node_learner -->|"opens platform"| node_app
node_app -->|"routes to"| node_learning_pages
node_app -.->|"guards access"| node_auth
node_learning_pages -->|"loads tracks"| node_track_registry
node_track_registry -->|"aggregates content"| node_track_content
node_learning_pages -->|"presents lessons"| node_lesson_content
node_learning_pages -->|"opens practice"| node_labs
node_labs -->|"renders demonstrations"| node_visualizations
node_lesson_content -->|"embeds demonstrations"| node_visualizations
node_visualizations -->|"replays algorithms"| node_course_engines
node_learning_pages -->|"selects case study"| node_scenario_context
node_scenario_context -->|"resolves scenario"| node_scenario_models
node_scenario_db -->|"builds scenario"| node_scenario_models
node_scenario_db -->|"creates database"| node_sqlite
node_visualizations -->|"loads scenario data"| node_scenario_db
node_visualizations -->|"runs query stages"| node_sqlite
node_learner -->|"signs up"| node_auth
node_auth -->|"binds account progress"| node_progress
node_progress -->|"persists records"| node_browser_storage
node_progress -->|"derives game state"| node_game_state
node_learning_pages -.->|"records completion"| node_progress
node_learner -->|"reviews progress"| node_progress

click node_app "https://github.com/nouralbaarini/data-visualisation-/blob/main/src/App.tsx"
click node_auth "https://github.com/nouralbaarini/data-visualisation-/blob/main/src/app/auth/localProvider.ts"
click node_track_registry "https://github.com/nouralbaarini/data-visualisation-/blob/main/src/tracks/registry.ts"
click node_track_content "https://github.com/nouralbaarini/data-visualisation-/tree/main/src/tracks"
click node_lesson_content "https://github.com/nouralbaarini/data-visualisation-/tree/main/src/content/lessons"
click node_learning_pages "https://github.com/nouralbaarini/data-visualisation-/tree/main/src/pages"
click node_labs "https://github.com/nouralbaarini/data-visualisation-/tree/main/src/labs"
click node_visualizations "https://github.com/nouralbaarini/data-visualisation-/tree/main/src/components/viz"
click node_sql_playground "https://github.com/nouralbaarini/data-visualisation-/blob/main/src/components/sql/SqlPlayground.tsx"
click node_scenario_context "https://github.com/nouralbaarini/data-visualisation-/blob/main/src/app/ScenarioContext.tsx"
click node_scenario_models "https://github.com/nouralbaarini/data-visualisation-/tree/main/src/scenarios"
click node_scenario_db "https://github.com/nouralbaarini/data-visualisation-/blob/main/src/app/useScenarioDatabase.ts"
click node_sqlite "https://github.com/nouralbaarini/data-visualisation-/blob/main/src/lib/sql/database.ts"
click node_course_engines "https://github.com/nouralbaarini/data-visualisation-/tree/main/src/lib"
click node_progress "https://github.com/nouralbaarini/data-visualisation-/blob/main/src/app/progress.ts"
click node_game_state "https://github.com/nouralbaarini/data-visualisation-/blob/main/src/app/game/useGame.ts"
click node_browser_storage "https://github.com/nouralbaarini/data-visualisation-/blob/main/src/app/storage.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_app,node_auth,node_learning_pages toneBlue
class node_track_registry,node_track_content,node_lesson_content toneAmber
class node_labs,node_visualizations,node_sql_playground,node_scenario_context,node_scenario_models toneMint
class node_scenario_db,node_sqlite,node_course_engines toneRose
class node_progress,node_game_state,node_browser_storage,node_learner toneIndigo
```

## Components

### App and accounts

- [App router](https://github.com/nouralbaarini/data-visualisation-/blob/main/src/App.tsx): `src/App.tsx`
- [Local accounts](https://github.com/nouralbaarini/data-visualisation-/blob/main/src/app/auth/localProvider.ts): `src/app/auth/localProvider.ts`
- [Learning pages](https://github.com/nouralbaarini/data-visualisation-/tree/main/src/pages): `src/pages`

### Learning content

- [Track registry](https://github.com/nouralbaarini/data-visualisation-/blob/main/src/tracks/registry.ts): `src/tracks/registry.ts`
- [Track content](https://github.com/nouralbaarini/data-visualisation-/tree/main/src/tracks): `src/tracks`
- [Database lessons](https://github.com/nouralbaarini/data-visualisation-/tree/main/src/content/lessons): `src/content/lessons`

### Interactive learning

- [Labs and challenges](https://github.com/nouralbaarini/data-visualisation-/tree/main/src/labs): `src/labs`
- [Interactive visuals](https://github.com/nouralbaarini/data-visualisation-/tree/main/src/components/viz): `src/components/viz`
- [SQL playground](https://github.com/nouralbaarini/data-visualisation-/blob/main/src/components/sql/SqlPlayground.tsx): `src/components/sql/SqlPlayground.tsx`
- [Scenario selection](https://github.com/nouralbaarini/data-visualisation-/blob/main/src/app/ScenarioContext.tsx): `src/app/ScenarioContext.tsx`
- [Database scenarios](https://github.com/nouralbaarini/data-visualisation-/tree/main/src/scenarios): `src/scenarios`

### Learning engines

- [Scenario database](https://github.com/nouralbaarini/data-visualisation-/blob/main/src/app/useScenarioDatabase.ts): `src/app/useScenarioDatabase.ts`
- [In-browser SQLite](https://github.com/nouralbaarini/data-visualisation-/blob/main/src/lib/sql/database.ts): `src/lib/sql/database.ts`
- [Course algorithms](https://github.com/nouralbaarini/data-visualisation-/tree/main/src/lib): `src/lib`

### Learner state

- [Progress records](https://github.com/nouralbaarini/data-visualisation-/blob/main/src/app/progress.ts): `src/app/progress.ts`
- [XP and badges](https://github.com/nouralbaarini/data-visualisation-/blob/main/src/app/game/useGame.ts): `src/app/game/useGame.ts`
- [Browser storage](https://github.com/nouralbaarini/data-visualisation-/blob/main/src/app/storage.ts): `src/app/storage.ts`

### Other components

- **Learner**

## Connections

- Learner → App router: opens platform (evidence: `README.md`)
- App router → Learning pages: routes to (evidence: `src/App.tsx`)
- App router → Local accounts: guards access
- Learning pages → Track registry: loads tracks (evidence: `src/pages/DashboardPage.tsx`)
- Track registry → Track content: aggregates content (evidence: `README.md`)
- Learning pages → Database lessons: presents lessons (evidence: `README.md`)
- Learning pages → Labs and challenges: opens practice (evidence: `README.md`)
- Labs and challenges → Interactive visuals: renders demonstrations (evidence: `src/labs/QueryPipelineLab.tsx`)
- Database lessons → Interactive visuals: embeds demonstrations (evidence: `src/content/lessons/implementation/QueryProcessing.tsx`)
- Interactive visuals → Course algorithms: replays algorithms (evidence: `README.md`)
- Learning pages → Scenario selection: selects case study
- Scenario selection → Database scenarios: resolves scenario (evidence: `src/app/ScenarioContext.tsx`)
- Scenario database → Database scenarios: builds scenario (evidence: `src/app/useScenarioDatabase.ts`)
- Scenario database → In-browser SQLite: creates database (evidence: `src/app/useScenarioDatabase.ts`)
- Interactive visuals → Scenario database: loads scenario data (evidence: `src/components/viz/QueryPipeline.tsx`)
- Interactive visuals → In-browser SQLite: runs query stages (evidence: `src/components/viz/QueryPipeline.tsx`)
- Learner → Local accounts: signs up (evidence: `README.md`)
- Local accounts → Progress records: binds account progress (evidence: `src/app/auth/AuthContext.tsx`)
- Progress records → Browser storage: persists records (evidence: `src/app/progress.ts`)
- Progress records → XP and badges: derives game state (evidence: `src/app/game/useGame.ts`)
- Learning pages → Progress records: records completion (evidence: `src/pages/DashboardPage.tsx`)
- Learner → Progress records: reviews progress (evidence: `README.md`)