How prince19112003/treadcode works
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: VisualizerPage.tsx Visualizer Page · App.tsx Application Router · useUpdateChecker.ts Update Checker · LessonContext.tsx Lesson Context
Components 23
Learning Navigation
- Application Router
src/app/App.tsx - Global App Shell
src/app/layout/GlobalAppShell.tsx - Course Selection
src/pages/LanguageSelectionPage.tsx - Visualizer Page
src/pages/VisualizerPage.tsx - Lesson Search
src/shared/data/searchCatalog.ts
Lesson Runtime
- Lesson Context
src/lessons/LessonContext.tsx - Curriculum Registry
src/lessons/registry.ts - Execution Stepper
src/lessons/useLessonStore.ts - Algorithm Visualizer
src/features/visualizer/VisualizerWorkspace.tsx - ML Visualizers
src/features/ml/MlVisualizerWorkspace.tsx - Network Visualizer
src/features/networking/NetworkingVisualizerWorkspace.tsx
Classroom Tools
- SmartBoard Dock
src/app/layout/SmartBoardSideDock.tsx - SmartBoard Canvas
src/features/smartboard/SmartBoardModal.tsx - Ink Renderer
src/features/smartboard/engine/inkEngine.ts - Stroke Eraser
src/features/smartboard/engine/eraserEngine.ts
Platform Services
- Offline Pack Manager
src/shared/hooks/useModuleStore.ts - Tauri Runtime
src-tauri/src/lib.rs - Update Checker
src/shared/hooks/useUpdateChecker.ts
External Services
- Firebase Licensing
src/shared/config/firebase.ts - Firebase Services
- Course Pack Archive
- Update Service
Other components
- Learner / Instructor
Connections 25
- 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