A content studio for an adaptive learning platform

Programming Languages: TypeScript (strict)
Frontend: Vue 3 (Composition API), Pinia, PrimeVue 4, Tailwind CSS v4, Vue Router
Visualization: Vue Flow + ELK.js, Chart.js, MathLive (MathML)
Infrastructure: AWS S3 + CloudFront, GitHub Actions (CI/CD)
Testing: Mocha, Chai, Cypress
Backend: Client-owned
An adaptive learning platform runs on carefully structured content: curricula, questions, exams, and the logic that decides what a learner sees next. The teams building that content needed a proper tool to do it in. We are building the front end of that tool, from scratch, and it is in active use while the work continues.

The Client

The client runs an adaptive learning platform that serves several customers, each in a different business domain, from one shared foundation. The people who use the tool day to day are content managers and curriculum developers, the teams who build the courses, questions, learning strategies, and exams that the platform then delivers to learners.

The Challenge

Content for adaptive learning is not flat. A curriculum breaks into a hierarchy. Questions carry embedded math. Learning strategies route a learner through the material based on how they are doing. Authoring all of that is real work, and the teams doing it needed an interface built around the shape of the content rather than something generic bent to fit.

A few things made it harder. The platform serves several tenants in different domains, so the tool had to support three independent product sections without splitting into three separate codebases. The content types were demanding on their own: XML curriculum structures, mathematical notation, question packages imported in standard formats. And because real teams use this daily, editing had to forgive mistakes, with structural changes that could be undone and versions that could be recovered.
One line ran through the project from the start: the backend belongs to the client. We build the front end against their API, which keeps our scope clear and our side of the system fast to move on.

Our Approach

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.

The Solution

The content teams get one place to create, edit, structure, and version the full range of learning material: curricula, questions, strategies, exams, and the media tied to them, across three client domains on a single shared codebase. The parts of the job that used to demand a developer's eye, XML hierarchies, math notation, learner-flow logic, are now things an author can handle directly inside the tool.

Outcome

The system has been built from the ground up over roughly twelve months and is in active use, with the work still ongoing. It runs across more than five deployment environments, from dev and sandbox through to several production targets, on a GitHub Actions pipeline into AWS S3 and CloudFront, and it now spans more than a hundred components, pages, and composables behind three client domains.
Feel like your project would win from our work? Let's talk!
sales@smartificial-ai.com
Made on
Tilda