# erchulo/learn-alpine architecture

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

## Overview

learn-alpine is an exercise-driven Alpine.js course: learners study 18 curriculum modules, build solutions in isolated browser sandboxes, receive automated checks and quiz credit, and track mastery. The app also provides reference material, actuarial calculators, reading preferences, and locally persisted/exportable progress. The graph follows documented and excerpted wiring; several route implementations and the harness protocol are not fully sampled, so uncertain links are omitted.

Main entry points: [`src/app.js`](https://github.com/erchulo/learn-alpine/blob/main/src/app.js) (App shell and router), [`src/store.js`](https://github.com/erchulo/learn-alpine/blob/main/src/store.js) (Course store), [`src/content/01-foundations.js`](https://github.com/erchulo/learn-alpine/blob/main/src/content/01-foundations.js) (18-module curriculum), [`src/lib/runner.js`](https://github.com/erchulo/learn-alpine/blob/main/src/lib/runner.js) (Sandbox runner)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Course application"]
  node_application["App shell and router<br/>[app.js]"]
  node_dashboard["Dashboard<br/>[home.js]"]
  node_module_view["Module view<br/>[module.js]"]
  node_study_path["Study path<br/>[path.js]"]
  node_quiz_view["Quiz view<br/>[quiz.js]"]
  node_workshop_view["Workshop view<br/>[workshop.js]"]
  node_insights["Insights view<br/>[insights.js]"]
end

subgraph group_learning["Learning content"]
  node_curriculum["18-module curriculum<br/>[01-foundations.js]"]
  node_course_data["Exercise datasets<br/>[data.js]"]
  node_ladder["Worked ladder example<br/>[ladder.js]"]
  node_reference["Framework reference<br/>[reference.js]"]
  node_cheatsheet["Cheatsheet view<br/>[cheatsheet.js]"]
end

subgraph group_assessment["Practice and assessment"]
  node_workbench["Exercise workbench<br/>[workbench.js]"]
  node_workshop_runner["Sandbox runner<br/>[runner.js]"]
  node_sandbox_harness["Sandbox checks runtime<br/>[index.js]"]
  node_check_dsl["Assertion checks<br/>[checks.js]"]
  node_quiz_item["Quiz item<br/>[quiz-item.js]"]
  node_quiz_battery["Quiz battery<br/>[quiz-battery.js]"]
end

subgraph group_progress["Progress and preferences"]
  node_course_store["Course store<br/>[store.js]"]
  node_mastery_engine["Mastery engine<br/>[engine.js]"]
  node_local_storage[("Safe local storage<br/>[storage.js]")]
  node_settings["Reading settings<br/>[settings.js]"]
end

subgraph group_toolkit["Actuarial toolkit"]
  node_calculator_view["Calculator view<br/>[calculator.js]"]
  node_calculator_tools["Actuarial calculators<br/>[tools.js]"]
end

node_learner(("Learner"))

node_learner -->|"uses"| node_application
node_application -->|"creates"| node_course_store
node_application -->|"registers"| node_workbench
node_application -->|"registers"| node_quiz_item
node_application -->|"registers"| node_quiz_battery
node_application -->|"registers"| node_settings
node_application -->|"renders"| node_module_view
node_course_store -->|"loads"| node_curriculum
node_dashboard -->|"reads"| node_curriculum
node_module_view -->|"uses"| node_ladder
node_study_path -->|"reads"| node_curriculum
node_quiz_view -->|"reads"| node_curriculum
node_workbench -->|"runs exercises"| node_workshop_runner
node_workshop_view -.->|"runs workshop"| node_workshop_runner
node_workshop_runner -->|"messages"| node_sandbox_harness
node_sandbox_harness -->|"uses checks"| node_check_dsl
node_quiz_item -.->|"records answers"| node_course_store
node_course_store -->|"creates and refreshes"| node_mastery_engine
node_mastery_engine -->|"persists progress"| node_local_storage
node_course_store -->|"persists preferences"| node_local_storage
node_learner -.->|"opens toolkit"| node_calculator_view
node_calculator_view -->|"uses calculator scopes"| node_calculator_tools
node_calculator_tools -->|"computes from datasets"| node_course_data
node_learner -->|"consults"| node_cheatsheet
node_cheatsheet -->|"reads"| node_reference
node_learner -->|"adjusts reading"| node_settings
node_insights -.->|"shows progress"| node_course_store

click node_application "https://github.com/erchulo/learn-alpine/blob/main/src/app.js"
click node_dashboard "https://github.com/erchulo/learn-alpine/blob/main/src/views/home.js"
click node_module_view "https://github.com/erchulo/learn-alpine/blob/main/src/views/module.js"
click node_study_path "https://github.com/erchulo/learn-alpine/blob/main/src/views/path.js"
click node_quiz_view "https://github.com/erchulo/learn-alpine/blob/main/src/views/quiz.js"
click node_workshop_view "https://github.com/erchulo/learn-alpine/blob/main/src/views/workshop.js"
click node_insights "https://github.com/erchulo/learn-alpine/blob/main/src/views/insights.js"
click node_curriculum "https://github.com/erchulo/learn-alpine/blob/main/src/content/01-foundations.js"
click node_course_data "https://github.com/erchulo/learn-alpine/blob/main/src/content/data.js"
click node_ladder "https://github.com/erchulo/learn-alpine/blob/main/src/content/ladder.js"
click node_reference "https://github.com/erchulo/learn-alpine/blob/main/src/content/reference.js"
click node_workbench "https://github.com/erchulo/learn-alpine/blob/main/src/components/workbench.js"
click node_workshop_runner "https://github.com/erchulo/learn-alpine/blob/main/src/lib/runner.js"
click node_sandbox_harness "https://github.com/erchulo/learn-alpine/blob/main/src/harness/index.js"
click node_check_dsl "https://github.com/erchulo/learn-alpine/blob/main/src/lib/checks.js"
click node_quiz_item "https://github.com/erchulo/learn-alpine/blob/main/src/components/quiz-item.js"
click node_quiz_battery "https://github.com/erchulo/learn-alpine/blob/main/src/components/quiz-battery.js"
click node_course_store "https://github.com/erchulo/learn-alpine/blob/main/src/store.js"
click node_mastery_engine "https://github.com/erchulo/learn-alpine/blob/main/src/lib/engine.js"
click node_local_storage "https://github.com/erchulo/learn-alpine/blob/main/src/lib/storage.js"
click node_settings "https://github.com/erchulo/learn-alpine/blob/main/src/components/settings.js"
click node_calculator_view "https://github.com/erchulo/learn-alpine/blob/main/src/views/calculator.js"
click node_calculator_tools "https://github.com/erchulo/learn-alpine/blob/main/src/components/tools.js"
click node_cheatsheet "https://github.com/erchulo/learn-alpine/blob/main/src/views/cheatsheet.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_application,node_dashboard,node_module_view,node_study_path,node_quiz_view,node_workshop_view,node_insights toneBlue
class node_curriculum,node_course_data,node_ladder,node_reference,node_cheatsheet toneAmber
class node_workbench,node_workshop_runner,node_sandbox_harness,node_check_dsl,node_quiz_item,node_quiz_battery toneMint
class node_course_store,node_mastery_engine,node_local_storage,node_settings toneRose
class node_calculator_view,node_calculator_tools,node_learner toneIndigo
```

## Components

### Course application

- [App shell and router](https://github.com/erchulo/learn-alpine/blob/main/src/app.js): `src/app.js`
- [Dashboard](https://github.com/erchulo/learn-alpine/blob/main/src/views/home.js): `src/views/home.js`
- [Module view](https://github.com/erchulo/learn-alpine/blob/main/src/views/module.js): `src/views/module.js`
- [Study path](https://github.com/erchulo/learn-alpine/blob/main/src/views/path.js): `src/views/path.js`
- [Quiz view](https://github.com/erchulo/learn-alpine/blob/main/src/views/quiz.js): `src/views/quiz.js`
- [Workshop view](https://github.com/erchulo/learn-alpine/blob/main/src/views/workshop.js): `src/views/workshop.js`
- [Insights view](https://github.com/erchulo/learn-alpine/blob/main/src/views/insights.js): `src/views/insights.js`

### Learning content

- [18-module curriculum](https://github.com/erchulo/learn-alpine/blob/main/src/content/01-foundations.js): `src/content/01-foundations.js`
- [Exercise datasets](https://github.com/erchulo/learn-alpine/blob/main/src/content/data.js): `src/content/data.js`
- [Worked ladder example](https://github.com/erchulo/learn-alpine/blob/main/src/content/ladder.js): `src/content/ladder.js`
- [Framework reference](https://github.com/erchulo/learn-alpine/blob/main/src/content/reference.js): `src/content/reference.js`
- [Cheatsheet view](https://github.com/erchulo/learn-alpine/blob/main/src/views/cheatsheet.js): `src/views/cheatsheet.js`

### Practice and assessment

- [Exercise workbench](https://github.com/erchulo/learn-alpine/blob/main/src/components/workbench.js): `src/components/workbench.js`
- [Sandbox runner](https://github.com/erchulo/learn-alpine/blob/main/src/lib/runner.js): `src/lib/runner.js`
- [Sandbox checks runtime](https://github.com/erchulo/learn-alpine/blob/main/src/harness/index.js): `src/harness/index.js`
- [Assertion checks](https://github.com/erchulo/learn-alpine/blob/main/src/lib/checks.js): `src/lib/checks.js`
- [Quiz item](https://github.com/erchulo/learn-alpine/blob/main/src/components/quiz-item.js): `src/components/quiz-item.js`
- [Quiz battery](https://github.com/erchulo/learn-alpine/blob/main/src/components/quiz-battery.js): `src/components/quiz-battery.js`

### Progress and preferences

- [Course store](https://github.com/erchulo/learn-alpine/blob/main/src/store.js): `src/store.js`
- [Mastery engine](https://github.com/erchulo/learn-alpine/blob/main/src/lib/engine.js): `src/lib/engine.js`
- [Safe local storage](https://github.com/erchulo/learn-alpine/blob/main/src/lib/storage.js): `src/lib/storage.js`
- [Reading settings](https://github.com/erchulo/learn-alpine/blob/main/src/components/settings.js): `src/components/settings.js`

### Actuarial toolkit

- [Calculator view](https://github.com/erchulo/learn-alpine/blob/main/src/views/calculator.js): `src/views/calculator.js`
- [Actuarial calculators](https://github.com/erchulo/learn-alpine/blob/main/src/components/tools.js): `src/components/tools.js`

### Other components

- **Learner**

## Connections

- Learner → App shell and router: uses (evidence: `README.md`)
- App shell and router → Course store: creates (evidence: `src/app.js`)
- App shell and router → Exercise workbench: registers (evidence: `src/app.js`)
- App shell and router → Quiz item: registers (evidence: `src/app.js`)
- App shell and router → Quiz battery: registers (evidence: `src/app.js`)
- App shell and router → Reading settings: registers (evidence: `src/app.js`)
- App shell and router → Module view: renders (evidence: `src/app.js`)
- Course store → 18-module curriculum: loads (evidence: `src/store.js`)
- Dashboard → 18-module curriculum: reads (evidence: `src/views/home.js`)
- Module view → Worked ladder example: uses (evidence: `src/views/module.js`)
- Study path → 18-module curriculum: reads (evidence: `src/views/path.js`)
- Quiz view → 18-module curriculum: reads (evidence: `src/views/quiz.js`)
- Exercise workbench → Sandbox runner: runs exercises (evidence: `src/components/workbench.js`)
- Workshop view → Sandbox runner: runs workshop
- Sandbox runner → Sandbox checks runtime: messages (evidence: `src/lib/runner.js`)
- Sandbox checks runtime → Assertion checks: uses checks (evidence: `src/harness/index.js`)
- Quiz item → Course store: records answers
- Course store → Mastery engine: creates and refreshes (evidence: `src/store.js`)
- Mastery engine → Safe local storage: persists progress (evidence: `src/lib/engine.js`)
- Course store → Safe local storage: persists preferences (evidence: `src/store.js`)
- Learner → Calculator view: opens toolkit
- Calculator view → Actuarial calculators: uses calculator scopes (evidence: `README.md`)
- Actuarial calculators → Exercise datasets: computes from datasets (evidence: `src/components/tools.js`)
- Learner → Cheatsheet view: consults (evidence: `README.md`)
- Cheatsheet view → Framework reference: reads (evidence: `src/views/cheatsheet.js`)
- Learner → Reading settings: adjusts reading (evidence: `README.md`)
- Insights view → Course store: shows progress