Investigations

CourseCraft

TypeScript February 2026

A course authoring platform that turns JSON files into rich, interactive learning experiences with AI podcasts, quizzes, and ten visualisation styles.

CourseCraft refuses to compromise between authoring flexibility and learner experience. Content lives as plain JSON files on disk — edit a file and the app picks it up, no database or CMS required. But what learners see is anything but plain.

Pages render with syntax-highlighted code, 40+ hand-drawn Mermaid diagram styles using SVG displacement filters (hand-sketched, blueprint, chalkboard, watercolour, cyberpunk, retro), and AI-generated podcast conversations via ElevenLabs with two AI voices and ambient sound layers like rain or library sounds.

There are six types of interactive quizzes — Multiple Choice, True/False, Multiple Select, Matching, Ordering, and Code Analysis — feeding into a per-topic mastery model with an 80% threshold. Progress is visualised through ten completely different styles: an RPG skill tree, a galaxy map, a GitHub-style calendar heatmap, a periodic table of concepts, and more.

The TipTap-based editor (the same engine behind Notion) supports formatting, code blocks with language detection, callouts, and embedded diagrams. The architecture is deliberately simple: React 19 with Vite on the frontend, Express 5 serving JSON files on the backend. It ships with three example courses including a full-length narrative-driven course on Go Microservices with OpenTelemetry.

What this project demonstrates

Courses as plain JSON files — no database, no CMS
40+ Mermaid diagram styles with SVG displacement filters
AI-powered podcast audio via ElevenLabs with ambient sounds
Six quiz types feeding a per-topic mastery model
Ten progress visualisation styles: Skill Tree, Galaxy, Heatmap, etc.
TipTap rich text editor, React 19, Express 5

Technologies

ReactEducationTipTapMermaidElevenLabs

© 2026 Jonathan Leahy · v0.8.1-31-g196fa14