
Longread library
A reusable content layer: block editor and student-facing renderer in one package
- React
- TypeScript
- Zustand
- Ant Design
- +5
An authoring tool for learning programmes: module tree, longreads, tests, publishing
Details and code are covered by an agreement: I describe the problems and solutions without exposing internals.

The tool where instructional designers and teachers assemble courses: a module and lesson tree, a longread content editor, a test builder, projects and publishing to the player. My longest-running project — over seven hundred commits.
Context
The builder is the entry point for course authors. Here the programme is assembled: modules, lessons, longreads, webinars, tests and projects. The result goes to the player where students take it.
The product is alive: requirements come from instructional designers, teachers and administrators, so the editor constantly gains new content types and rules.
Problem
The editor’s main difficulty is state. The course tree, block drafts, element order, uncommitted edits and validation all live at once, while the user expects nothing to be lost.
The second is content shared with the player. The same longread must be editable in the builder and render identically for the student, otherwise the author cannot tell what the group will see.
The third is codebase growth. Over several years the editor turned from a set of pages into a large application, and without formal dependency rules the links between modules would quickly become tangled.
Solution
The builder and the player share one content layer: the author edits the same blocks the student sees. New material types can be added without breaking courses that already exist.
Outcome
The builder is the product I worked on the longest and where the accumulated effect is visible: the application structure survived several waves of new requirements, and a typical feature no longer requires edits across half of the codebase.
This is the project I am most proud of: it combines architectural work, product scenarios and a reusable library that lives its own life in other applications.


A reusable content layer: block editor and student-facing renderer in one package
Taking a course: longreads, webinars, drag-and-drop tests, GPT hints on selected text

A Next.js course catalogue plus an LMS for students, teachers and administrators