Überblick
Scrumlr.io ist ein Open-Source-Echtzeit-Retrospektive-Tool für agile Teams. Teams können damit gemeinsam Retro-Boards mit Karten, Reaktionen und Abstimmungen erstellen und verwalten, alles live via WebSockets synchronisiert.
Während meiner Zeit bei inovex habe ich zum gesamten Stack beigetragen: React-Frontend, Go-Backend, Redux State Management, CI/CD und Dokumentation.
Beiträge
Vollständiges Emoji-Reaktionssystem
Die größte Feature-Arbeit war das Reaktionssystem. Das ursprüngliche System unterstützte nur 7 fest kodierte Emojis, ich habe es durch einen vollständigen Emoji-Picker ersetzt.
Das zog Änderungen auf beiden Seiten des Stacks nach sich. Im Backend wurde ReactionType von einem Enum zu einem freien String umgebaut, mit Validierung auf maximal 50 Zeichen und Legacy-Mappings für Abwärtskompatibilität. Im Frontend entstand eine neue EmojiPickerReactionBar-Komponente mit Portal-Rendering, viewport-bewusster Positionierung (damit der Picker nie über den Bildschirmrand hinausragt), 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. Die Kollisionserkennungs-Schwellenwerte waren ungünstig kalibriert: Karten ließen sich zu leicht versehentlich zusammenfassen und zu schwer verschieben. Durch Anpassen von COMBINE_THRESHOLD und MOVE_THRESHOLD wurde das Verhalten deutlich intuitiver.
Dazu kam ein klassischer Mutationsbug: items.reverse() veränderte das Array direkt, was zu inkonsistentem Zustand über mehrere Clients führte. Die Lösung war [...items].reverse(), eine kleine Änderung mit echtem Gewicht in einer kollaborativen Umgebung.
Anonyme Nutzer: Board-Erstellung steuern
Ein Full-Stack-Feature, mit dem Admins über eine neue Umgebungsvariable (SCRUMLR_ALLOW_ANONYMOUS_BOARD_CREATION) steuern können, ob nicht eingeloggte Nutzer neue Boards anlegen dürfen.
Im Backend kamen eine neue Context-Middleware und eine erweiterte Server-Info-API hinzu. Im Frontend habe ich den Redux-State erweitert und bedingte UI-Einschränkungen mit Tooltip-Hinweisen für anonyme Nutzer gebaut. Zusätzlich habe ich eine zweite Middleware für das Erstellen von Custom Templates nach derselben Konfigurationslogik implementiert 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. Ein neuer Redux-Selector (anyColumnHasDescription) sorgt dafür, dass alle Spalten gleichmäßige Höhe halten, 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 Thema in Code-Reviews. 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, damit Fehler schon lokal auffallen, nicht erst im Review. Die Entwicklerdokumentation wurde mit IDE-Konfigurationsbeispielen für VS Code und GoLand ergänzt.