Überblick
Scrumlr.io ist ein Open-Source Echtzeit-Retrospektive-Tool für agile Teams. Es ermöglicht Teams, gemeinsam Retro-Boards mit Karten, Reaktionen und Abstimmungen zu erstellen und zu verwalten – alles live via WebSockets synchronisiert.
Ich habe während meiner Zeit bei inovex zu Scrumlr.io beigetragen und dabei am gesamten Stack gearbeitet: React-Frontend, Go-Backend, Redux State Management, CI/CD und Dokumentation.
Beiträge
Vollständiges Emoji-Reaktionssystem
Die größte Feature-Arbeit war die Erweiterung des Reaktionssystems: Das ursprüngliche System unterstützte nur 7 fest kodierte Emojis. Ich habe es durch ein vollständiges Emoji-Picker-Interface ersetzt.
Das bedeutete Änderungen auf beiden Ebenen des Stacks. Im Backend wurde der ReactionType von einem Enum zu einem freien String umgebaut, mit Validierung auf maximal 50 Zeichen und Abwärtskompatibilität zu den bisherigen Reaktionstypen über Legacy-Mappings. Im Frontend entstand eine neue EmojiPickerReactionBar-Komponente mit Portal-Rendering, viewport-bewusstem Positioning (damit der Picker nie aus dem Bildschirm ragt), Dark/Light/Auto-Theme-Integration und lokalem Speichern der zuletzt verwendeten Emojis via localStorage.
Drag-and-Drop-Verbesserungen
Beim Drag-and-Drop für Karten gab es zwei konkrete Probleme. Erstens waren die Kollisionserkennungs-Schwellenwerte ungünstig kalibriert: Karten wurden zu leicht in Gruppen geworfen und zu schwer verschoben. Ich habe COMBINE_THRESHOLD und MOVE_THRESHOLD angepasst, sodass das Verhalten intuitiver wurde.
Zweitens gab es einen klassischen Mutationsbug: items.reverse() veränderte das Array direkt, was zu inkonsistentem Zustand über mehrere Clients führte. Der Fix war [...items].reverse() – eine kleine Änderung mit großem Effekt in einer kollaborativen Umgebung.
Anonyme Nutzer: Board-Erstellung steuern
Ein vollständiger Full-Stack-Feature: Admins können über eine neue Umgebungsvariable (SCRUMLR_ALLOW_ANONYMOUS_BOARD_CREATION) steuern, ob nicht eingeloggte Nutzer neue Boards erstellen dürfen.
Im Backend: neuer Context-Middleware, Server-Info-API-Erweiterung. Im Frontend: Redux-State-Erweiterung, bedingte UI-Einschränkungen mit Tooltip-Erklärungen für anonyme Nutzer. Zusätzlich habe ich eine zweite Middleware für das Erstellen von Custom Templates unter gleicher Konfigurationslogik gebaut und Docker Compose sowie Kubernetes-Deployments aktualisiert.
Spalten-UX
Mehrere kleinere Verbesserungen rund um Spalten ergaben zusammen eine deutlich bessere Nutzererfahrung:
Inline-Bearbeitung von Spaltenbeschreibungen – Per Doppelklick kann man Beschreibungen direkt im Board bearbeiten. Dafür habe ich eine readOnly-Prop zur TextArea-Komponente hinzugefügt und das Interaktionsmuster mit Tests abgesichert.
Konsistente Spaltenhöhe – Wenn eine Spalte eine Beschreibung hat, andere aber nicht, sprangen die Layouts auseinander. Über einen neuen Redux-Selector (anyColumnHasDescription) sorgen jetzt alle Spalten für gleichmäßige Höhe, sobald mindestens eine Beschreibung vorhanden ist.
Enter-Taste zum Abschicken – In Spaltentitel- und Beschreibungsfeldern funktioniert Enter jetzt als Submit, Shift+Enter als Zeilenumbruch im Beschreibungsfeld.
Backend: Board-Löschung
Wenn ein Board gelöscht wurde, bekamen verbundene Clients kein BOARD_DELETED-Event, sondern nur eine generische Fehlermeldung. Ich habe den Event-Publish-Schritt im Backend korrigiert und mit Tests abgesichert, sodass alle Mitglieder korrekt auf die Startseite weitergeleitet werden.
CI/DevEx: Go-Formatierung
Inkonsistente Go-Formatierung war ein wiederkehrendes Review-Thema. Ich habe gofmt in die CI-Pipeline integriert (make format-check vor dem Lint-Schritt) und einen Git-Pre-Commit-Hook über ein Setup-Skript bereitgestellt, sodass Fehler schon lokal auffallen. Die Entwicklerdokumentation wurde mit IDE-Konfigurationsbeispielen für VS Code und GoLand ergänzt.