# prince19112003/treadcode architecture

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

- Interactive diagram: https://gitdiagram.com/prince19112003/treadcode
- Repository: https://github.com/prince19112003/treadcode

## Overview

TreadCode is an offline-first teaching application for exploring program execution visually and drawing alongside lessons. Its principal workflow is choosing a subject and lesson, stepping or scrubbing through a lesson’s execution states, and viewing synchronized explanations and visual stages. Major companion capabilities include ML and networking visualizers, a classroom SmartBoard, offline course packs, and licensing/update management. The graph follows the supplied tree and excerpts; several UI-to-feature details and unsampled subsystem internals are represented only at the directory level, so uncertain call relationships are omitted.

Main entry points: [`src/pages/VisualizerPage.tsx`](https://github.com/prince19112003/treadcode/blob/main/src/pages/VisualizerPage.tsx) (Visualizer Page), [`src/app/App.tsx`](https://github.com/prince19112003/treadcode/blob/main/src/app/App.tsx) (Application Router), [`src/shared/hooks/useUpdateChecker.ts`](https://github.com/prince19112003/treadcode/blob/main/src/shared/hooks/useUpdateChecker.ts) (Update Checker), [`src/lessons/LessonContext.tsx`](https://github.com/prince19112003/treadcode/blob/main/src/lessons/LessonContext.tsx) (Lesson Context)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Learning Navigation"]
  node_app["Application Router<br/>[App.tsx]"]
  node_shell["Global App Shell<br/>[GlobalAppShell.tsx]"]
  node_selection["Course Selection"]
  node_visualizer_page["Visualizer Page<br/>[VisualizerPage.tsx]"]
  node_search["Lesson Search<br/>[searchCatalog.ts]"]
end

subgraph group_learning["Lesson Runtime"]
  node_lesson_context["Lesson Context<br/>[LessonContext.tsx]"]
  node_lesson_registry["Curriculum Registry<br/>[registry.ts]"]
  node_lesson_store["Execution Stepper<br/>[useLessonStore.ts]"]
  node_visual_workspace["Algorithm Visualizer"]
  node_ml_workspace["ML Visualizers"]
  node_network_workspace["Network Visualizer"]
end

subgraph group_classroom["Classroom Tools"]
  node_smart_dock["SmartBoard Dock"]
  node_smart_modal["SmartBoard Canvas"]
  node_ink["Ink Renderer<br/>[inkEngine.ts]"]
  node_eraser["Stroke Eraser<br/>[eraserEngine.ts]"]
end

subgraph group_platform["Platform Services"]
  node_packs["Offline Pack Manager<br/>[useModuleStore.ts]"]
  node_native["Tauri Runtime<br/>[lib.rs]"]
  node_updates["Update Checker"]
end

subgraph group_integrations["External Services"]
  node_firebase_config["Firebase Licensing<br/>[firebase.ts]"]
  node_firebase[("Firebase Services")]
  node_pack_archive["Course Pack Archive"]
  node_updater_service["Update Service"]
end

node_learner(("Learner / Instructor"))

node_learner -->|"opens"| node_app
node_app -->|"renders routes"| node_shell
node_learner -->|"chooses course"| node_selection
node_selection -->|"opens lesson"| node_visualizer_page
node_search -->|"indexes lessons"| node_selection
node_visualizer_page -->|"loads lesson context"| node_lesson_context
node_lesson_context -->|"resolves curriculum"| node_lesson_registry
node_lesson_context -->|"sets lesson state"| node_lesson_store
node_visualizer_page -->|"renders lesson"| node_visual_workspace
node_visual_workspace -->|"reads execution state"| node_lesson_store
node_lesson_store -->|"provides current step"| node_visual_workspace
node_visualizer_page -->|"opens ML course"| node_ml_workspace
node_visualizer_page -->|"opens networking course"| node_network_workspace
node_shell -->|"renders dock"| node_smart_dock
node_smart_dock -->|"opens canvas"| node_smart_modal
node_smart_modal -->|"renders strokes"| node_ink
node_smart_modal -->|"erases strokes"| node_eraser
node_app -->|"manages course packs"| node_packs
node_packs -.->|"downloads packs"| node_pack_archive
node_app -->|"checks license"| node_firebase_config
node_firebase_config -.->|"validates device"| node_firebase
node_native -->|"provides native runtime"| node_app
node_updates -->|"checks native updates"| node_native
node_updates -.->|"checks release data"| node_updater_service
node_updates -.->|"reads fallback update data"| node_firebase

click node_app "https://github.com/prince19112003/treadcode/blob/main/src/app/App.tsx"
click node_shell "https://github.com/prince19112003/treadcode/blob/main/src/app/layout/GlobalAppShell.tsx"
click node_selection "https://github.com/prince19112003/treadcode/blob/main/src/pages/LanguageSelectionPage.tsx"
click node_visualizer_page "https://github.com/prince19112003/treadcode/blob/main/src/pages/VisualizerPage.tsx"
click node_search "https://github.com/prince19112003/treadcode/blob/main/src/shared/data/searchCatalog.ts"
click node_lesson_context "https://github.com/prince19112003/treadcode/blob/main/src/lessons/LessonContext.tsx"
click node_lesson_registry "https://github.com/prince19112003/treadcode/blob/main/src/lessons/registry.ts"
click node_lesson_store "https://github.com/prince19112003/treadcode/blob/main/src/lessons/useLessonStore.ts"
click node_visual_workspace "https://github.com/prince19112003/treadcode/blob/main/src/features/visualizer/VisualizerWorkspace.tsx"
click node_ml_workspace "https://github.com/prince19112003/treadcode/blob/main/src/features/ml/MlVisualizerWorkspace.tsx"
click node_network_workspace "https://github.com/prince19112003/treadcode/blob/main/src/features/networking/NetworkingVisualizerWorkspace.tsx"
click node_smart_dock "https://github.com/prince19112003/treadcode/blob/main/src/app/layout/SmartBoardSideDock.tsx"
click node_smart_modal "https://github.com/prince19112003/treadcode/blob/main/src/features/smartboard/SmartBoardModal.tsx"
click node_ink "https://github.com/prince19112003/treadcode/blob/main/src/features/smartboard/engine/inkEngine.ts"
click node_eraser "https://github.com/prince19112003/treadcode/blob/main/src/features/smartboard/engine/eraserEngine.ts"
click node_packs "https://github.com/prince19112003/treadcode/blob/main/src/shared/hooks/useModuleStore.ts"
click node_native "https://github.com/prince19112003/treadcode/blob/main/src-tauri/src/lib.rs"
click node_updates "https://github.com/prince19112003/treadcode/blob/main/src/shared/hooks/useUpdateChecker.ts"
click node_firebase_config "https://github.com/prince19112003/treadcode/blob/main/src/shared/config/firebase.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_shell,node_selection,node_visualizer_page,node_search toneBlue
class node_lesson_context,node_lesson_registry,node_lesson_store,node_visual_workspace,node_ml_workspace,node_network_workspace toneAmber
class node_smart_dock,node_smart_modal,node_ink,node_eraser toneMint
class node_packs,node_native,node_updates toneRose
class node_firebase_config,node_firebase,node_pack_archive,node_updater_service,node_learner toneIndigo
```

## Components

### Learning Navigation

- [Application Router](https://github.com/prince19112003/treadcode/blob/main/src/app/App.tsx): `src/app/App.tsx`
- [Global App Shell](https://github.com/prince19112003/treadcode/blob/main/src/app/layout/GlobalAppShell.tsx): `src/app/layout/GlobalAppShell.tsx`
- [Course Selection](https://github.com/prince19112003/treadcode/blob/main/src/pages/LanguageSelectionPage.tsx): `src/pages/LanguageSelectionPage.tsx`
- [Visualizer Page](https://github.com/prince19112003/treadcode/blob/main/src/pages/VisualizerPage.tsx): `src/pages/VisualizerPage.tsx`
- [Lesson Search](https://github.com/prince19112003/treadcode/blob/main/src/shared/data/searchCatalog.ts): `src/shared/data/searchCatalog.ts`

### Lesson Runtime

- [Lesson Context](https://github.com/prince19112003/treadcode/blob/main/src/lessons/LessonContext.tsx): `src/lessons/LessonContext.tsx`
- [Curriculum Registry](https://github.com/prince19112003/treadcode/blob/main/src/lessons/registry.ts): `src/lessons/registry.ts`
- [Execution Stepper](https://github.com/prince19112003/treadcode/blob/main/src/lessons/useLessonStore.ts): `src/lessons/useLessonStore.ts`
- [Algorithm Visualizer](https://github.com/prince19112003/treadcode/blob/main/src/features/visualizer/VisualizerWorkspace.tsx): `src/features/visualizer/VisualizerWorkspace.tsx`
- [ML Visualizers](https://github.com/prince19112003/treadcode/blob/main/src/features/ml/MlVisualizerWorkspace.tsx): `src/features/ml/MlVisualizerWorkspace.tsx`
- [Network Visualizer](https://github.com/prince19112003/treadcode/blob/main/src/features/networking/NetworkingVisualizerWorkspace.tsx): `src/features/networking/NetworkingVisualizerWorkspace.tsx`

### Classroom Tools

- [SmartBoard Dock](https://github.com/prince19112003/treadcode/blob/main/src/app/layout/SmartBoardSideDock.tsx): `src/app/layout/SmartBoardSideDock.tsx`
- [SmartBoard Canvas](https://github.com/prince19112003/treadcode/blob/main/src/features/smartboard/SmartBoardModal.tsx): `src/features/smartboard/SmartBoardModal.tsx`
- [Ink Renderer](https://github.com/prince19112003/treadcode/blob/main/src/features/smartboard/engine/inkEngine.ts): `src/features/smartboard/engine/inkEngine.ts`
- [Stroke Eraser](https://github.com/prince19112003/treadcode/blob/main/src/features/smartboard/engine/eraserEngine.ts): `src/features/smartboard/engine/eraserEngine.ts`

### Platform Services

- [Offline Pack Manager](https://github.com/prince19112003/treadcode/blob/main/src/shared/hooks/useModuleStore.ts): `src/shared/hooks/useModuleStore.ts`
- [Tauri Runtime](https://github.com/prince19112003/treadcode/blob/main/src-tauri/src/lib.rs): `src-tauri/src/lib.rs`
- [Update Checker](https://github.com/prince19112003/treadcode/blob/main/src/shared/hooks/useUpdateChecker.ts): `src/shared/hooks/useUpdateChecker.ts`

### External Services

- [Firebase Licensing](https://github.com/prince19112003/treadcode/blob/main/src/shared/config/firebase.ts): `src/shared/config/firebase.ts`
- **Firebase Services**
- **Course Pack Archive**
- **Update Service**

### Other components

- **Learner / Instructor**

## Connections

- Learner / Instructor → Application Router: opens
- Application Router → Global App Shell: renders routes
- Learner / Instructor → Course Selection: chooses course
- Course Selection → Visualizer Page: opens lesson
- Lesson Search → Course Selection: indexes lessons
- Visualizer Page → Lesson Context: loads lesson context
- Lesson Context → Curriculum Registry: resolves curriculum
- Lesson Context → Execution Stepper: sets lesson state
- Visualizer Page → Algorithm Visualizer: renders lesson
- Algorithm Visualizer → Execution Stepper: reads execution state
- Execution Stepper → Algorithm Visualizer: provides current step
- Visualizer Page → ML Visualizers: opens ML course
- Visualizer Page → Network Visualizer: opens networking course
- Global App Shell → SmartBoard Dock: renders dock
- SmartBoard Dock → SmartBoard Canvas: opens canvas
- SmartBoard Canvas → Ink Renderer: renders strokes
- SmartBoard Canvas → Stroke Eraser: erases strokes
- Application Router → Offline Pack Manager: manages course packs
- Offline Pack Manager → Course Pack Archive: downloads packs
- Application Router → Firebase Licensing: checks license
- Firebase Licensing → Firebase Services: validates device
- Tauri Runtime → Application Router: provides native runtime
- Update Checker → Tauri Runtime: checks native updates
- Update Checker → Update Service: checks release data
- Update Checker → Firebase Services: reads fallback update data