QuizEngine – Lernkompendium

Dieses Kompendium dokumentiert alle erarbeiteten Lernstufen zum QuizEngine-Projekt. Jede Stufe folgt dem gleichen Kursformat: Motivation → Konzept → Beispiele → Projektbezug → Fallen → Tipps.

---

Lernpfad

Die Stufen bauen aufeinander auf. Empfohlene Reihenfolge von oben nach unten.

Fundament

#	Thema	Status	Datei
1	TypeScript: Typsystem-Grundlagen	✅ fertig	01_typescript.md
2	Zod: Schema-Validierung und Type-Inference	⬜ offen	02_zod.md

React-Ökosystem

#	Thema	Status	Datei
3	React: Komponenten-Architektur und Composition	⬜ offen	03_react_components.md
4	Custom Hooks	⬜ offen	04_custom_hooks.md
5	SCSS Modules und Design Tokens	⬜ offen	05_scss_tokens.md
6	Zustand: State Management	⬜ offen	06_zustand.md
7	React Query: Async State	⬜ offen	07_react_query.md
8	shadcn/ui: Komponenten korrekt einsetzen	⬜ offen	08_shadcn.md

Architektur – Content & Engine

#	Thema	Status	Datei
9	Content Layer: JSON → Zod → Typen → Loader	⬜ offen	09_content_layer.md
10	Engine: Session-State-Machine	⬜ offen	10_engine_state_machine.md
11	Engine: IndexedDB-Persistenz und Crash Recovery	⬜ offen	11_engine_persistence.md
12	Reveal Strategies	⬜ offen	12_reveal_strategies.md

Architektur – Input, Renderer & Shells

#	Thema	Status	Datei
13	Input Bus und Adapter	⬜ offen	13_input_bus.md
14	Card Renderers: Registry und Strategy	⬜ offen	14_card_renderers.md
15	Asset Loader	⬜ offen	15_asset_loader.md
16	Host Shells: Alles zusammenführen	⬜ offen	16_host_shells.md

Integration

#	Thema	Status	Datei
17	Integration: Vom JSON zur laufenden Quiz-Session	⬜ offen	17_integration.md

---

Status-Legende

Symbol	Bedeutung
⬜ offen	Noch nicht erarbeitet
🔄 in Bearbeitung	Aktuelle Lernsitzung
✅ fertig	Exportiert und abgeschlossen

---

Wie wird eine Stufe erarbeitet?

1. Neuen Chat in Claude Code öffnen (Projekt muss geöffnet sein)
2. Eingabe: Lies Learning.md, dann erläutere Stufe [Nr]. (CLAUDE.md und ARCHITECTURE.md sind automatisch im Kontext – kein explizites Lesen nötig)
3. Erklärung lesen, Fragen stellen
4. Ersten Speichervorgang auslösen: Speichere den Lerninhalt wie beschrieben im docs/learning/ Bereich ab → Datei wird angelegt, Status wird auf ✅ gesetzt
5. Bei späteren Besuchen derselben Session neue Fragen stellen, dann: Aktualisiere den Lerninhalt im docs/learning/ Bereich → Neue Q&A werden angehängt, Haupterklärung bleibt erhalten

---

Session-Benennung

Alle Lernsessions einheitlich benennen, damit sie in der Session-Liste sofort erkennbar sind und korrekt sortieren. Die Umbenennung muss manuell in der Desktop-App erfolgen (Claude kann Session-Namen nicht programmatisch setzen).

[QE] · L01 · TypeScript
[QE] · L02 · Zod
[QE] · L03 · React Components
...
[QE] · L17 · Integration

Schema: [QE] · L[Nr mit führender Null] · [Kurztitel]

Die Kurztitel für jede Stufe:

Session-Name	Stufe
[QE] · L01 · TypeScript	1
[QE] · L02 · Zod	2
[QE] · L03 · React Components	3
[QE] · L04 · Custom Hooks	4
[QE] · L05 · SCSS & Tokens	5
[QE] · L06 · Zustand	6
[QE] · L07 · React Query	7
[QE] · L08 · shadcn/ui	8
[QE] · L09 · Content Layer	9
[QE] · L10 · State Machine	10
[QE] · L11 · IndexedDB	11
[QE] · L12 · Reveal Strategies	12
[QE] · L13 · Input Bus	13
[QE] · L14 · Card Renderers	14
[QE] · L15 · Asset Loader	15
[QE] · L16 · Host Shells	16
[QE] · L17 · Integration	17

---

Hinweise

• Alle Beispiele in den Stufen-Dateien beziehen sich konkret auf dieses Projekt.
• Das vollständige Erklärungsformat ist in Learning.md (Abschnitt 2) definiert.
• Die Dateien sind unabhängig von Claude lesbar – in VS Code, GitHub oder jedem Markdown-Viewer.