A platform for an online music school, built around a distinctive visual progression system that makes learning feel tangible for young students. Nine musical disciplines, three levels of achievement per discipline, four user roles with separate interfaces over the same data, and a gamification layer where every milestone is earned through teacher-approved work.
This is a confidential commission for a company launching an online music school. The client has given us permission to describe the technology we built, but not to identify them. The platform includes a number of proprietary features, particularly the visual progression system and its underlying metaphor, that are central to the client's brand and educational philosophy. These are among the most technically and creatively demanding elements of the build. Their specifics remain confidential.
What follows describes the platform's scope, the role system, and the technical architecture in full.
At the centre of the platform is an animated SVG visualisation that represents each student's progress across all nine musical disciplines. The visualisation is not decorative. It is a direct rendering of the student's data: each discipline maps to a position in the visual, and each level of achievement within that discipline changes what the student sees. As students advance, the visualisation grows and animates, building toward a complete picture that represents mastery across the full curriculum.
The effect is designed for children. Young students interact with their learning by clicking directly on the visualisation. When they achieve a new level, the platform responds with animated celebrations (sparkle effects, confetti on major milestones) that mark the moment. These are not optional polish. They are wired into the state transition logic. The platform treats every achievement as something worth celebrating.
Students, teachers, parents, and administrators each see a different interface, but all four are reading from and writing to the same underlying data.
Teachers create goals linked to a specific student, discipline, and level. Goals have a title, description, and optionally attached resources from the library. Students log practice sessions against active goals, recording duration, mood on a five-point scale, notes, and which resources they used. When a student has a recording ready, they submit it through the platform. The submission creates a video entity in the graph, stored in object storage.
The teacher sees a review queue showing all pending submissions. They watch the recording, write feedback, and approve or reject. On approval, four things happen automatically: the goal is marked complete, points are awarded, the submission enters the student's portfolio where parents can see it, and any relevant certificate trigger is checked.
Discuss your project today. Call +44 7494 618 651 Mon-Fri, 9am-6pm
Certificates are issued automatically by the system, not manually by teachers. The platform checks for triggers on each state change:
Reaching mastery triggers a sparkle animation on the visualisation. Completing all disciplines triggers a full celebration across the entire visual. These moments are designed to feel significant, particularly for younger students for whom the visual feedback is a core part of the learning experience.
New students do not begin at level zero by assumption. The starter assessment, configurable by administrators, asks about the student's background: instrument, years of experience, prior formal training, ability to read music, familiarity with different repertoire. Answers map to ability levels. The most common level across all answers becomes the student's starting position. Students begin where they actually are.
A school-wide view shows a grid of miniature progression visualisations, one per student, with their name, tier badge, and total achievement score. A spotlight at the top highlights the student with the most progress in the current week. Teachers can filter to their own students. The wall is visible to all roles: a shared community view that gives the school a sense of collective progress.
Multi-teacher delegation. A student can have multiple teachers, each assigned with specific metadata: role type, instruments covered, disciplines covered, and notes. The system queries this dynamically on each interaction to determine which teacher has authority over which domain for that student.
Acting on behalf. Teachers can log practice sessions on behalf of students, useful during lessons. The request carries the student's identity as a delegation header. The session is owned by the student; the teacher is the recorder. The authorisation model handles this distinction at the graph level.
Progress narratives. The parent view includes a prose summary of their child's progress, not a data table but a generated sentence like "Your child is making strong progress in Music Theory and is approaching the next level in Reading." This is generated from the graph data, not manually authored. Parents receive language; the system enters data.
Tech stack: React · TypeScript · Vite · MinIO (video storage) · Graph API (engage.re) · JWT with delegation headers
ESRE Media runs its entire pipeline, partner network, and commission tracking on a system we built ourselves, on the same graph architecture. We are growing fast, and if you know organisations that need better digital systems, referral partners earn 15% on project delivery.
Find out how partnerships work