← Work / Musterhall

Case study 01B · Cross-platform product

One product system across every surface.

Musterhall is a creator learning platform I built across web, mobile, database, design-system, and real-time room boundaries as the sole engineer.

  • Next.js
  • TypeScript
  • Flutter
  • Supabase
  • Postgres
  • LiveKit
  • Storybook
01 · Role
Sole Engineer
02 · Domain
Creator learning
03 · Surfaces
Web, mobile, live rooms

01 · Problem

The screen was not the hard part.

A cross-platform product can look consistent while quietly implementing different rules in every client. Musterhall needed one coherent product model across a TypeScript web app, Flutter mobile app, and Supabase/Postgres backend.

The hard work was deciding which rules belonged in the database, which foundations should be generated for each interface, and how a real-time capability could enter the product without destabilizing every surface at once.

02 · System

Shared rules without pretending the platforms are identical.

Each platform keeps its native implementation while receiving product rules and design foundations from deliberate shared sources.

  1. 01

    Web and mobile products

    Next.js and TypeScript power the web experience while Flutter and Dart provide the mobile surface, with both organized around the same product model.

  2. 02

    Schema-enforced invariants

    Supabase and Postgres hold rules that should not drift according to which client happens to write the data.

  3. 03

    Compiled design foundations

    A single token source produces web CSS and a generated Dart package, with Storybook making the public component system inspectable.

03 · What made it hard

Real-time rooms change more than the screen.

Live video introduces authority, moderation, and release risk. The capability needed an operating model as much as it needed an interface.

01

Host moderation

LiveKit rooms include explicit host controls so authority is part of the room model rather than an improvised client-side convention.

02

Feature-flag rollout

A rollout ladder allows real-time behavior to be introduced deliberately across surfaces instead of forcing one all-or-nothing launch.

03

One visible system

Generated tokens and public Storybook documentation make cross-platform consistency observable and maintainable.

04 · Next

Have a difficult system to make coherent?

Email StevenView experience