Onepage · 2025
Onepage - Tagline Element Editor
Überblick
Onepage ist ein No-Code-Website- und Landing-Page-Builder, der von 14.000+ Kunden genutzt wird. Die Testaufgabe erforderte den Aufbau eines interaktiven Editors für das Tagline-Element, nach einem Figma-Design und eigenständiger Implementierung aller nicht spezifizierten Zustände. Das Ergebnis ist ein Split-View-Editor: Eine Canvas-Vorschau rendert Tag-Chips in einem Flex-Wrap-Layout mit Live-Style-Updates, während ein schwebendes Panel (absolut neben dem Element positioniert) drei Sub-Panels bietet - eine Tag-Liste mit Drag-and-Drop-Sortierung, ein Erstellen/Bearbeiten-Formular und ein vollständiges Styles-Panel (4 Varianten, 5 Größen, 5 Border-Radius-Optionen, 3 Ausrichtungsmodi). Jede Mutation simuliert einen POST an einen Mock-API-Endpoint. Die Architektur wurde für Erweiterbarkeit konzipiert: Das Hinzufügen neuer Element-Typen, Steuerelemente oder Style-Parameter erfordert keine strukturellen Änderungen.
Die Herausforderung
Die Aufgabe bewertete explizit skalierbare Architektur - der Code musste so strukturiert sein, dass neue Element-Typen, Panel-Steuerelemente und Style-Parameter ohne Refactoring hinzugefügt werden können. UI-Entscheidungen für nicht im Figma abgedeckte Zustände (Hover, Leerzustände, Randfälle) lagen im Ermessen des Entwicklers.
Die Lösung
Aufgebaut mit React 19 + TypeScript + MobX (Stack vom Task vorgegeben). Domain-Stores (TaglineStore, UIStore) halten den State sauber und reaktiv. @dnd-kit behandelt Drag-and-Drop sowohl in der Sidebar-Liste als auch in der Vorschau. CSS Modules bieten scoped Styling. Das Panel-System ist komponentengetrieben - jedes Sub-Panel ist ein unabhängiger Slice, was die Architektur einfach erweiterbar macht.
