# programmersagara-cell/sqlprof architecture

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

## Overview

SQL·LAB is a static, browser-based SQL learning workbench. The main workflow is learner → practice workspace → SQL editor → local SQLite execution → displayed results; challenge attempts also run a reference solution and compare result sets before updating local progress. Separate learning, cheat-sheet, database-explorer, and query-history capabilities support that workflow. The graph reflects sampled call sites and README-documented features; some view-to-content wiring is inferred from module responsibilities, while unsampled implementation details are omitted.

Main entry points: [`src/ui/practice.js`](https://github.com/programmersagara-cell/sqlprof/blob/main/src/ui/practice.js) (Practice Workspace), [`src/main.js`](https://github.com/programmersagara-cell/sqlprof/blob/main/src/main.js) (Bootstrap & Navigation), [`src/ui/views.js`](https://github.com/programmersagara-cell/sqlprof/blob/main/src/ui/views.js) (Learning Views), [`src/engine/sqlEngine.js`](https://github.com/programmersagara-cell/sqlprof/blob/main/src/engine/sqlEngine.js) (SQLite WASM Engine)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_main["Bootstrap &amp; Navigation<br/>[main.js]"]
  node_practice["Practice Workspace<br/>[practice.js]"]
  node_views["Learning Views<br/>[views.js]"]
  node_helpers["UI Helpers<br/>[helpers.js]"]
  node_editor["SQL Editor<br/>[editor.js]"]
end

subgraph group_learning["Learning Content"]
  node_challenges["Challenge Registry<br/>[index.js]"]
  node_lessons["Lesson Content<br/>[lessons.js]"]
  node_cheatsheet["Cheat Sheet Content<br/>[cheatsheet.js]"]
  node_validator["Result Validator<br/>[validator.js]"]
end

subgraph group_runtime["SQL Runtime"]
  node_engine["SQLite WASM Engine<br/>[sqlEngine.js]"]
  node_registry["Database Registry<br/>[databases.js]"]
  node_companydb["Company Schema<br/>[companyDb.js]"]
  node_otherdbs["Other Sample Schemas<br/>[otherDbs.js]"]
end

subgraph group_state["Local State"]
  node_progress["Progress &amp; Rewards<br/>[progress.js]"]
  node_history["Query History<br/>[history.js]"]
end

node_learner(("Learner"))
node_localstorage[("Browser localStorage")]
node_sqlcdn{{"sql.js CDN"}}
node_codemirror{{"CodeMirror CDN"}}

node_learner -->|"opens app"| node_main
node_main -->|"initializes workspace"| node_practice
node_main -->|"renders views"| node_views
node_main -->|"initializes database"| node_engine
node_main -->|"sets theme"| node_editor
node_main -->|"shows errors"| node_helpers
node_learner -->|"writes queries"| node_practice
node_practice -->|"reads SQL"| node_editor
node_practice -->|"executes SQL"| node_engine
node_practice -->|"checks attempts"| node_validator
node_validator -->|"returns outcome"| node_practice
node_practice -->|"loads challenges"| node_challenges
node_practice -->|"records attempts"| node_progress
node_practice -->|"manages history"| node_history
node_practice -->|"renders feedback"| node_helpers
node_views -->|"reads lesson content"| node_lessons
node_views -->|"reads reference content"| node_cheatsheet
node_views -->|"lists challenges"| node_challenges
node_views -->|"shows progress"| node_progress
node_engine -->|"loads schema"| node_registry
node_registry -->|"uses schema"| node_companydb
node_registry -->|"uses schemas"| node_otherdbs
node_progress -->|"counts challenges"| node_challenges
node_progress -->|"persists progress"| node_localstorage
node_history -->|"persists queries"| node_localstorage
node_main -->|"persists theme"| node_localstorage
node_engine -.->|"loads WASM"| node_sqlcdn
node_editor -.->|"uses editor library"| node_codemirror

click node_main "https://github.com/programmersagara-cell/sqlprof/blob/main/src/main.js"
click node_practice "https://github.com/programmersagara-cell/sqlprof/blob/main/src/ui/practice.js"
click node_views "https://github.com/programmersagara-cell/sqlprof/blob/main/src/ui/views.js"
click node_helpers "https://github.com/programmersagara-cell/sqlprof/blob/main/src/ui/helpers.js"
click node_editor "https://github.com/programmersagara-cell/sqlprof/blob/main/src/editor/editor.js"
click node_challenges "https://github.com/programmersagara-cell/sqlprof/blob/main/src/challenges/index.js"
click node_lessons "https://github.com/programmersagara-cell/sqlprof/blob/main/src/lessons/lessons.js"
click node_cheatsheet "https://github.com/programmersagara-cell/sqlprof/blob/main/src/cheatsheet/cheatsheet.js"
click node_validator "https://github.com/programmersagara-cell/sqlprof/blob/main/src/validation/validator.js"
click node_engine "https://github.com/programmersagara-cell/sqlprof/blob/main/src/engine/sqlEngine.js"
click node_registry "https://github.com/programmersagara-cell/sqlprof/blob/main/src/data/databases.js"
click node_companydb "https://github.com/programmersagara-cell/sqlprof/blob/main/src/data/companyDb.js"
click node_otherdbs "https://github.com/programmersagara-cell/sqlprof/blob/main/src/data/otherDbs.js"
click node_progress "https://github.com/programmersagara-cell/sqlprof/blob/main/src/progress/progress.js"
click node_history "https://github.com/programmersagara-cell/sqlprof/blob/main/src/history/history.js"

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_main,node_practice,node_views,node_helpers,node_editor toneBlue
class node_challenges,node_lessons,node_cheatsheet,node_validator,node_localstorage toneAmber
class node_engine,node_registry,node_companydb,node_otherdbs toneMint
class node_progress,node_history toneRose
class node_learner,node_sqlcdn,node_codemirror toneIndigo
```

## Components

### Application

- [Bootstrap & Navigation](https://github.com/programmersagara-cell/sqlprof/blob/main/src/main.js): `src/main.js`
- [Practice Workspace](https://github.com/programmersagara-cell/sqlprof/blob/main/src/ui/practice.js): `src/ui/practice.js`
- [Learning Views](https://github.com/programmersagara-cell/sqlprof/blob/main/src/ui/views.js): `src/ui/views.js`
- [UI Helpers](https://github.com/programmersagara-cell/sqlprof/blob/main/src/ui/helpers.js): `src/ui/helpers.js`
- [SQL Editor](https://github.com/programmersagara-cell/sqlprof/blob/main/src/editor/editor.js): `src/editor/editor.js`

### Learning Content

- [Challenge Registry](https://github.com/programmersagara-cell/sqlprof/blob/main/src/challenges/index.js): `src/challenges/index.js`
- [Lesson Content](https://github.com/programmersagara-cell/sqlprof/blob/main/src/lessons/lessons.js): `src/lessons/lessons.js`
- [Cheat Sheet Content](https://github.com/programmersagara-cell/sqlprof/blob/main/src/cheatsheet/cheatsheet.js): `src/cheatsheet/cheatsheet.js`
- [Result Validator](https://github.com/programmersagara-cell/sqlprof/blob/main/src/validation/validator.js): `src/validation/validator.js`

### SQL Runtime

- [SQLite WASM Engine](https://github.com/programmersagara-cell/sqlprof/blob/main/src/engine/sqlEngine.js): `src/engine/sqlEngine.js`
- [Database Registry](https://github.com/programmersagara-cell/sqlprof/blob/main/src/data/databases.js): `src/data/databases.js`
- [Company Schema](https://github.com/programmersagara-cell/sqlprof/blob/main/src/data/companyDb.js): `src/data/companyDb.js`
- [Other Sample Schemas](https://github.com/programmersagara-cell/sqlprof/blob/main/src/data/otherDbs.js): `src/data/otherDbs.js`

### Local State

- [Progress & Rewards](https://github.com/programmersagara-cell/sqlprof/blob/main/src/progress/progress.js): `src/progress/progress.js`
- [Query History](https://github.com/programmersagara-cell/sqlprof/blob/main/src/history/history.js): `src/history/history.js`

### Other components

- **Learner**
- **Browser localStorage**
- **sql.js CDN**
- **CodeMirror CDN**

## Connections

- Learner → Bootstrap & Navigation: opens app
- Bootstrap & Navigation → Practice Workspace: initializes workspace
- Bootstrap & Navigation → Learning Views: renders views
- Bootstrap & Navigation → SQLite WASM Engine: initializes database
- Bootstrap & Navigation → SQL Editor: sets theme
- Bootstrap & Navigation → UI Helpers: shows errors
- Learner → Practice Workspace: writes queries
- Practice Workspace → SQL Editor: reads SQL
- Practice Workspace → SQLite WASM Engine: executes SQL
- Practice Workspace → Result Validator: checks attempts
- Result Validator → Practice Workspace: returns outcome
- Practice Workspace → Challenge Registry: loads challenges
- Practice Workspace → Progress & Rewards: records attempts
- Practice Workspace → Query History: manages history
- Practice Workspace → UI Helpers: renders feedback
- Learning Views → Lesson Content: reads lesson content
- Learning Views → Cheat Sheet Content: reads reference content
- Learning Views → Challenge Registry: lists challenges
- Learning Views → Progress & Rewards: shows progress
- SQLite WASM Engine → Database Registry: loads schema
- Database Registry → Company Schema: uses schema
- Database Registry → Other Sample Schemas: uses schemas
- Progress & Rewards → Challenge Registry: counts challenges
- Progress & Rewards → Browser localStorage: persists progress
- Query History → Browser localStorage: persists queries
- Bootstrap & Navigation → Browser localStorage: persists theme
- SQLite WASM Engine → sql.js CDN: loads WASM
- SQL Editor → CodeMirror CDN: uses editor library