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

A course is a folder of JSON files. Edit one, the app picks it up — no database, no CMS, no migration
40+ hand-drawn Mermaid styles built from SVG displacement filters: sketched, blueprint, chalkboard, watercolour
Six quiz types feed one per-topic mastery model with an 80% threshold, so progress means something specific
Ten progress views over the same data — skill tree, galaxy map, calendar heatmap, periodic table of concepts
Ships with a full narrative course on Go microservices and OpenTelemetry, not a lorem-ipsum sample

Technologies

ReactEducationTipTapMermaidElevenLabs