Prezzy.
Präsentieren, während das Publikum mitspielt. Eine Case Study über Folien, CRDTs und einen Editor, der ohne REST auskommt.
Worum es geht
Prezzy ist eine Web-App für interaktive Präsentationen. Folien baut man auf einem Canvas per Drag and Drop, mit Text, Bildern, Formen und Layout-Presets. Während der Präsentation scannt das Publikum einen QR-Code und beantwortet Quizfragen und Word Clouds direkt vom Handy. Ohne Konto, ohne App. Browser auf, Code eingeben, mitmachen.
Mehrere Leute können gleichzeitig am selben Deck arbeiten und sehen dabei die Cursor, die Auswahl und die aktuelle Folie der anderen. Das klingt nach einem Feature, das man am Ende dranschraubt. Bei Prezzy ist es das Fundament, auf dem der ganze Editor steht.
Der Editor redet nicht mit REST
Die interessanteste Entscheidung im Projekt: Der Editor spricht mit keinem einzigen REST-Endpoint. Jede Präsentation ist ein Yjs-Dokument. Folien, Elemente, Titel und Theme leben zusammen in einem CRDT, das der Browser lokal bearbeitet. Jede Interaktion ist sofort sichtbar, und Undo/Redo fällt mit dem Y.UndoManager praktisch gratis ab.
Der Server hält für jedes offene Dokument eine autoritative Kopie im Speicher und synchronisiert sie über socket.io mit allen verbundenen Editoren, mit den Standard-Sync-Nachrichten der y-protocols. Konflikte zwischen gleichzeitigen Bearbeitern löst das CRDT selbst. Cursor, Auswahl und aktive Folie reisen über das Awareness-Protokoll auf derselben Verbindung mit.
Gespeichert wird das Dokument als Update-Blob. Zusätzlich schreibt der Server es, leicht verzögert, zurück in ganz normale Datenbankzeilen: eine Tabelle für Folien, eine für Elemente. Presenter-Modus, Publikums-Ansichten und Dashboard lesen nur diese Zeilen über schlichtes REST und wissen nichts vom CRDT. Echtzeit da, wo sie gebraucht wird, langweilige Tabellen überall sonst.
Ein Kern ohne React
Der Kern des Editors ist reines TypeScript, ohne eine Zeile React: das Dokumentschema, die Commands, eine State Machine für Interaktionen und ein Selection Store, jeweils mit eigenen Unit-Tests. React bindet sich über eine dünne Schicht mit useSyncExternalStore an.
Das zahlt sich beim Testen aus. Die eigentliche Editor-Logik läuft in Tests ohne Browser, die API wird mit Integrationstests gegen ein echtes Postgres geprüft, und für die Klickstrecken gibt es Playwright. Drei Ebenen, jede testet das, was sie am besten kann.
Showtime
Im Presenter-Modus laufen die Folien im Vollbild, daneben zählt live mit, wie viele Antworten reinkommen. Quizze haben Timer, Punkte und ein Leaderboard. Word Clouds wachsen in Echtzeit aus den Antworten des Publikums, Wort für Wort, während die Leute noch tippen.
Damit das funktioniert, ohne dass jemand etwas installiert, läuft der Beitritt komplett anonym über einen Join-Code. Handy zückt, QR-Code scannt, antwortet. Die Hürde muss so niedrig sein, sonst macht in einem vollen Raum niemand mit.