# zep4yrs/struct architecture

> Architecture diagram of the GitHub repository zep4yrs/struct, 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/zep4yrs/struct
- Repository: https://github.com/zep4yrs/struct

## Overview

StructVis is a browser-based learning environment for data structures, algorithms, and MySQL concepts. Learners browse the course catalog, open a lesson, and step through an interactive visualization; SQL lessons can also execute scripts or learner-written queries locally. Practice, progress tracking, review, and reporting extend that learning loop. The README documents the player pipeline and major capabilities; the sampled source excerpts show engine behavior, but not every route or integration call, so uncertain wiring is omitted.

Main entry points: [`structvis/src/lib/engines/sql/sql-executor.ts`](https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/engines/sql/sql-executor.ts) (SQL execution), [`structvis/src/lib/stores/progress.ts`](https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/stores/progress.ts) (Progress and mastery), [`structvis/src/routes/db/+page.svelte`](https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/db/%2Bpage.svelte) (Database lessons), [`structvis/src/routes/db/workbench/+page.svelte`](https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/db/workbench/%2Bpage.svelte) (SQL workbench)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_course["Course and lessons"]
  node_home["Home and navigation<br/>[+page.svelte]"]
  node_catalog["Course catalog<br/>[+page.svelte]"]
  node_topicdata["Topic and chapter content<br/>[topics.ts]"]
  node_lesson["Lesson pages<br/>[+page.svelte]"]
  node_db_lessons["Database lessons<br/>[+page.svelte]"]
end

subgraph group_playback["Playback and rendering"]
  node_algo_player["Algorithm player<br/>[AlgoPlayer.svelte]"]
  node_script_player["SQL script player"]
  node_engines["Algorithm and DB engines"]
  node_sql_scripts["SQL scripts and stages"]
  node_timeline["Timeline controls"]
  node_renderer["Visualization renderers"]
  node_sql_executor["SQL execution<br/>[sql-executor.ts]"]
end

subgraph group_practice["Practice and progress"]
  node_quiz["Quiz and chapter practice<br/>[+page.svelte]"]
  node_workbench["SQL workbench<br/>[+page.svelte]"]
  node_practice_engine["Workbench stages and scoring"]
  node_progress_store[("Progress and mastery<br/>[progress.ts]")]
  node_persistent["Browser persistence<br/>[persistent.ts]"]
  node_progress_page["Progress report<br/>[+page.svelte]"]
end

subgraph group_tools["Learning tools"]
  node_skill_graph["Skill graph<br/>[skill-graph.ts]"]
  node_race["Sorting race lab<br/>[+page.svelte]"]
  node_settings[("Learner settings<br/>[settings.ts]")]
end

node_learner(("Learner"))
node_sqljs[("sql.js in-memory database")]

node_learner -->|"opens"| node_home
node_learner -->|"browses"| node_catalog
node_catalog -->|"derives listings"| node_topicdata
node_learner -->|"selects lesson"| node_lesson
node_learner -->|"selects topic"| node_db_lessons
node_lesson -->|"assembles"| node_algo_player
node_db_lessons -->|"assembles"| node_algo_player
node_algo_player -->|"requests steps"| node_engines
node_engines -->|"provides keyframes"| node_timeline
node_timeline -->|"drives playback"| node_renderer
node_db_lessons -->|"presents scripts"| node_script_player
node_script_player -->|"loads script stages"| node_sql_scripts
node_sql_scripts -->|"supplies SQL"| node_sql_executor
node_sql_executor -.->|"executes locally"| node_sqljs
node_sql_executor -->|"returns results"| node_renderer
node_learner -->|"writes SQL"| node_workbench
node_workbench -->|"runs query"| node_sql_executor
node_workbench -->|"requests scoring"| node_practice_engine
node_practice_engine -->|"updates mastery"| node_progress_store
node_learner -->|"answers questions"| node_quiz
node_quiz -->|"records practice"| node_progress_store
node_progress_store -->|"persists locally"| node_persistent
node_progress_page -->|"reads learning data"| node_progress_store
node_progress_page -->|"shows skill map"| node_skill_graph
node_learner -->|"compares sorts"| node_race
node_learner -->|"configures"| node_settings
node_settings -->|"persists locally"| node_persistent

click node_home "https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/home/%2Bpage.svelte"
click node_catalog "https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/catalog/%2Bpage.svelte"
click node_topicdata "https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/content/topics.ts"
click node_lesson "https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/ds/%2Bpage.svelte"
click node_db_lessons "https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/db/%2Bpage.svelte"
click node_algo_player "https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/components/player/AlgoPlayer.svelte"
click node_script_player "https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/components/player/ScriptPlayer.svelte"
click node_engines "https://github.com/zep4yrs/struct/tree/master/structvis/src/lib/engines"
click node_sql_scripts "https://github.com/zep4yrs/struct/tree/master/structvis/src/lib/engines/sql/scripts"
click node_timeline "https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/components/player/TimelineController.ts"
click node_renderer "https://github.com/zep4yrs/struct/tree/master/structvis/src/lib/visualization"
click node_sql_executor "https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/engines/sql/sql-executor.ts"
click node_quiz "https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/quiz/%2Bpage.svelte"
click node_workbench "https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/db/workbench/%2Bpage.svelte"
click node_practice_engine "https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/engines/sql/scripts/workbench-levels.ts"
click node_progress_store "https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/stores/progress.ts"
click node_persistent "https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/stores/persistent.ts"
click node_progress_page "https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/progress/%2Bpage.svelte"
click node_skill_graph "https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/content/skill-graph.ts"
click node_race "https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/race/%2Bpage.svelte"
click node_settings "https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/stores/settings.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_home,node_catalog,node_topicdata,node_lesson,node_db_lessons toneBlue
class node_algo_player,node_script_player,node_engines,node_sql_scripts,node_timeline,node_renderer,node_sql_executor,node_sqljs toneAmber
class node_quiz,node_workbench,node_practice_engine,node_progress_store,node_persistent,node_progress_page toneMint
class node_skill_graph,node_race,node_settings toneRose
class node_learner toneIndigo
```

## Components

### Course and lessons

- [Home and navigation](https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/home/%2Bpage.svelte): `structvis/src/routes/home/+page.svelte`
- [Course catalog](https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/catalog/%2Bpage.svelte): `structvis/src/routes/catalog/+page.svelte`
- [Topic and chapter content](https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/content/topics.ts): `structvis/src/lib/content/topics.ts`
- [Lesson pages](https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/ds/%2Bpage.svelte): `structvis/src/routes/ds/+page.svelte`
- [Database lessons](https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/db/%2Bpage.svelte): `structvis/src/routes/db/+page.svelte`

### Playback and rendering

- [Algorithm player](https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/components/player/AlgoPlayer.svelte): `structvis/src/lib/components/player/AlgoPlayer.svelte`
- [SQL script player](https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/components/player/ScriptPlayer.svelte): `structvis/src/lib/components/player/ScriptPlayer.svelte`
- [Algorithm and DB engines](https://github.com/zep4yrs/struct/tree/master/structvis/src/lib/engines): `structvis/src/lib/engines`
- [SQL scripts and stages](https://github.com/zep4yrs/struct/tree/master/structvis/src/lib/engines/sql/scripts): `structvis/src/lib/engines/sql/scripts`
- [Timeline controls](https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/components/player/TimelineController.ts): `structvis/src/lib/components/player/TimelineController.ts`
- [Visualization renderers](https://github.com/zep4yrs/struct/tree/master/structvis/src/lib/visualization): `structvis/src/lib/visualization`
- [SQL execution](https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/engines/sql/sql-executor.ts): `structvis/src/lib/engines/sql/sql-executor.ts`

### Practice and progress

- [Quiz and chapter practice](https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/quiz/%2Bpage.svelte): `structvis/src/routes/quiz/+page.svelte`
- [SQL workbench](https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/db/workbench/%2Bpage.svelte): `structvis/src/routes/db/workbench/+page.svelte`
- [Workbench stages and scoring](https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/engines/sql/scripts/workbench-levels.ts): `structvis/src/lib/engines/sql/scripts/workbench-levels.ts`
- [Progress and mastery](https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/stores/progress.ts): `structvis/src/lib/stores/progress.ts`
- [Browser persistence](https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/stores/persistent.ts): `structvis/src/lib/stores/persistent.ts`
- [Progress report](https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/progress/%2Bpage.svelte): `structvis/src/routes/progress/+page.svelte`

### Learning tools

- [Skill graph](https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/content/skill-graph.ts): `structvis/src/lib/content/skill-graph.ts`
- [Sorting race lab](https://github.com/zep4yrs/struct/blob/master/structvis/src/routes/race/%2Bpage.svelte): `structvis/src/routes/race/+page.svelte`
- [Learner settings](https://github.com/zep4yrs/struct/blob/master/structvis/src/lib/stores/settings.ts): `structvis/src/lib/stores/settings.ts`

### Other components

- **Learner**
- **sql.js in-memory database**

## Connections

- Learner → Home and navigation: opens
- Learner → Course catalog: browses
- Course catalog → Topic and chapter content: derives listings
- Learner → Lesson pages: selects lesson
- Learner → Database lessons: selects topic
- Lesson pages → Algorithm player: assembles
- Database lessons → Algorithm player: assembles
- Algorithm player → Algorithm and DB engines: requests steps
- Algorithm and DB engines → Timeline controls: provides keyframes
- Timeline controls → Visualization renderers: drives playback
- Database lessons → SQL script player: presents scripts
- SQL script player → SQL scripts and stages: loads script stages
- SQL scripts and stages → SQL execution: supplies SQL
- SQL execution → sql.js in-memory database: executes locally
- SQL execution → Visualization renderers: returns results
- Learner → SQL workbench: writes SQL
- SQL workbench → SQL execution: runs query
- SQL workbench → Workbench stages and scoring: requests scoring
- Workbench stages and scoring → Progress and mastery: updates mastery
- Learner → Quiz and chapter practice: answers questions
- Quiz and chapter practice → Progress and mastery: records practice
- Progress and mastery → Browser persistence: persists locally
- Progress report → Progress and mastery: reads learning data
- Progress report → Skill graph: shows skill map
- Learner → Sorting race lab: compares sorts
- Learner → Learner settings: configures
- Learner settings → Browser persistence: persists locally