Twin Science Admin Panel
Twin Science's content and operations panel, rewritten from Angular 10 to React 19 — as the only developer.
The admin panel is where Twin Science's team creates and runs everything the platform serves: curricula, lessons, quizzes, interactive videos, users and reports. The legacy version was an Angular 10 / Nebular app built by four-plus developers between 2019 and 2022, and I have looked after the panel since February 2024 — first that version, then my own rewrite. I rebuilt it from scratch in React 19 and TypeScript, on my own: 347 of its 364 commits and 98.8% of today's ~54k lines, across 70 releases from v1.0.0 to v1.5.14.
Context
Content editors and admins use it every day to publish to the teacher and student platform. It is an internal tool, so there is no public link; it talks to the backend through one typed API service of 157 methods.
Problem
Maintaining the old panel from 2024 showed me where it hurt. It sat on Angular 10 and an admin template, and every content type the platform added — curricula, lesson plans, interactive cards, H5P videos — had to be forced into it. Editors uploading videos in several tabs at once were also overwriting each other's drafts.
Approach
Migration. on the legacy panel I adapted challenges to the new content model, added language and premium fields and shipped release 1.3.0 in 2024. The React rewrite started on 19 August 2025, with v1.0.0 tagged a month later. All 23 legacy routes were ported, each React module written from scratch rather than translated.
New modules. curricula, lesson plans, simulations, forum topics, webinars, interactive cards, school reports, an H5P and interactive-video editor, and AI lesson flows — none of which existed in the old panel.
AI authoring. a lesson-flow builder that drafts a five-step lesson from a performance standard and the content pool inside a 40-minute budget, with 20–60 s requests the editor can cancel; AI title suggestions and UN Sustainable Development Goal tagging across eight content types.
H5P and video. an authoring framework for 13 H5P types with per-type forms and validators, time-coded questions on videos, and a parser that pulls questions straight out of a video script. Uploads show real progress and can be cancelled; Cloudflare Stream HLS is polled until ready and played with hls.js, recovering from network and media errors.
Editing. Tiptap 3 with custom right-to-left text and resizable-image extensions, and per-tab draft autosave — a refreshed tab keeps its draft, a duplicated tab gets its own — which ended the cross-tab collisions. Any of eight record types can be duplicated into a new one.
Operations. user moderation with bans and bulk tagging of up to 5,000 users, achievements and badges, trivia CSV import, school report CSV export, role-based access, a ⌘K command palette and light and dark themes. GitHub Actions deploys to Azure Static Web Apps with preview environments per pull request; about 244 Jest and React Testing Library tests.
Outcome
v1.0.0 was tagged a month after the first commit. Since then the panel has grown to 33 sections and about 40 routes over 70 releases, and 98.8% of its current code is mine.