Architex: Übungsplattform für System Design

Rolle: Uniprojekt · IT354 · Jahr: 2025 · Status: ausgeliefert

kurz: Eine Übungsplattform für System Design rund um Excalidraw. Studierende zeichnen einen Entwurf, reichen ihn ein und bekommen eine Bewertung mit schriftlichem Feedback. Der Ablauf Entwurf, Einreichung, Bewertung lebt auf dem Server, also kann der Client keinen Schritt überspringen.

Problem

System Design wird mit Diagrammen gelehrt, aber Diagramme wandern meist als Screenshots durch einen Chat. Es gibt keine Entwurfshistorie, keinen klaren Abgabezeitpunkt und keinen Ort für Feedback. Ich wollte ein Werkzeug, in dem man ein Szenario wählt (Rate Limiter, URL Shortener, Zahlungsabwicklung), den Entwurf zeichnet, ihn einreicht und bewertet zurückbekommt.

Rahmenbedingungen

• Diagramme sind großes, beliebiges JSON. Eine Excalidraw-Szene ist eine Liste von Elementen mit Positionen, Verbindungen und Stilen. Das Backend muss sie annehmen, ohne ihrer Form zu vertrauen.
• Der Ablauf wird serverseitig erzwungen. Ein Entwurf geht DRAFT → SUBMITTED → GRADED. Nach der Einreichung kann niemand ihn mehr ändern, und bewerten darf nur ein Admin.
• Das Deployment bleibt trivial. Ein Uniprojekt läuft auf dem Laptop der Prüfenden, also kein Datenbankserver und kein Container-Stack.

Entscheidungen

• Excalidraw als Zeichenfläche. Es kommt als React-Komponente und exportiert sauberes Szenen-JSON, der Editor war also eine Abhängigkeit statt eines eigenen Teilprojekts.
• Zwei Rollen, geprüft auf jeder Route. Nutzer zeichnen, Admins prüfen. Das JWT trägt die Rolle, eine Middleware prüft sie, und die Entwurfsrouten antworten mit 403, wenn ein Admin einen Entwurf bearbeiten will oder jemand fremde Arbeit öffnet.
• SQLite mit CHECK-Constraints. Rollen (USER, ADMIN), Entwurfsstatus, Schwierigkeit und die Bewertung von 1 bis 5 sind im Schema begrenzt. Ein falscher Wert scheitert an der Datenbank, auch wenn eine Routenprüfung fehlt.
• Ein JSON-String pro Diagramm. Die ganze Szene liegt in einem Feld, statt in Tabellen von Formen zerlegt zu werden. Die API lehnt alles ab, was kein serialisiertes Element-Array ist.

Ergebnis

Studierende entwerfen, reichen ein und lesen Feedback. Admins filtern Einreichungen nach Status und bewerten sie. Die Szene am Stück zu speichern hielt jedes Speichern bei einer Zeile und einer Abfrage, um den Preis, nie per SQL in ein Diagramm schauen zu können. Für einen Review-Ablauf war das richtig: Niemand fragt die Datenbank, welche Entwürfe einen Load Balancer enthalten.