How nouralbaarini/data-visualisation- works
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: pages Learning pages · viz Interactive visuals · progress.ts Progress records · App.tsx App router
Components 18
App and accounts
- App router
src/App.tsx - Local accounts
src/app/auth/localProvider.ts - Learning pages
src/pages
Learning content
- Track registry
src/tracks/registry.ts - Track content
src/tracks - Database lessons
src/content/lessons
Interactive learning
- Labs and challenges
src/labs - Interactive visuals
src/components/viz - SQL playground
src/components/sql/SqlPlayground.tsx - Scenario selection
src/app/ScenarioContext.tsx - Database scenarios
src/scenarios
Learning engines
- Scenario database
src/app/useScenarioDatabase.ts - In-browser SQLite
src/lib/sql/database.ts - Course algorithms
src/lib
Learner state
- Progress records
src/app/progress.ts - XP and badges
src/app/game/useGame.ts - Browser storage
src/app/storage.ts
Other components
- Learner
Connections 22
- Learner → App router: opens platform
README.md - App router → Learning pages: routes to
src/App.tsx - App router → Local accounts: guards access
- Learning pages → Track registry: loads tracks
src/pages/DashboardPage.tsx - Track registry → Track content: aggregates content
README.md - Learning pages → Database lessons: presents lessons
README.md - Learning pages → Labs and challenges: opens practice
README.md - Labs and challenges → Interactive visuals: renders demonstrations
src/labs/QueryPipelineLab.tsx - Database lessons → Interactive visuals: embeds demonstrations
src/content/lessons/implementation/QueryProcessing.tsx - Interactive visuals → Course algorithms: replays algorithms
README.md - Learning pages → Scenario selection: selects case study
- Scenario selection → Database scenarios: resolves scenario
src/app/ScenarioContext.tsx - Scenario database → Database scenarios: builds scenario
src/app/useScenarioDatabase.ts - Scenario database → In-browser SQLite: creates database
src/app/useScenarioDatabase.ts - Interactive visuals → Scenario database: loads scenario data
src/components/viz/QueryPipeline.tsx - Interactive visuals → In-browser SQLite: runs query stages
src/components/viz/QueryPipeline.tsx - Learner → Local accounts: signs up
README.md - Local accounts → Progress records: binds account progress
src/app/auth/AuthContext.tsx - Progress records → Browser storage: persists records
src/app/progress.ts - Progress records → XP and badges: derives game state
src/app/game/useGame.ts - Learning pages → Progress records: records completion
src/pages/DashboardPage.tsx - Learner → Progress records: reviews progress
README.md