We are building the application as a multi-tenant web app. Three independent product sections share one base of components, store, and composables, instead of three parallel builds that drift apart over time. Authentication runs through SSO with a token-exchange mechanism, and routes are protected by a navigation guard.
Most of the work lives in a few substantial editors.
- Curriculum editor. A full editor for the XML structure behind a curriculum, with Strands, Topics, and Concepts arranged in a hierarchy and version control over that structure. A side panel holds tabs for details, metadata, and the prerequisite and postrequisite links between nodes. Structural and metadata changes run through an undo and redo system, so an author can try something and step back if it goes wrong, without risking the tree.
- Question editor. A rich text editor over HTML content, with mathematical expressions edited through MathLive and MathML. Authors can also import QTI question packages, and the archive structure is validated as it comes in.
- Strategy diagram. An interactive flow diagram, built on Vue Flow, that shows how a learner moves through the material. Edge routing and layout are handled by ELK.js, so a complicated learner flow arranges itself cleanly instead of being dragged into place by hand.
Alongside the editors, we built a custom UI library shared across all three product sections, and migrated the styling layer from Tailwind CSS v3 to v4 partway through.