Onepage · 2025
Onepage - Tagline Element Editor
Overzicht
Onepage is a no-code website and landing page builder used by 14,000+ customers. The test task required building an interactive editor for the Tagline element, following a Figma design and implementing all unspecified states through independent UI judgment. The result is a split-view editor: a canvas preview renders tag chips in a flex-wrap layout with live style updates, while a floating panel (absolutely positioned next to the element) provides three sub-panels - a tag list with drag-and-drop reordering, a create/edit item form, and a full styles panel (4 variants, 5 sizes, 5 border-radius options, 3 alignment modes). Every mutation simulates a POST to a mock API endpoint. Architecture was designed for extensibility: adding new element types, controls, or style parameters requires no structural changes.
De Uitdaging
The task explicitly evaluated scalable architecture - the code had to be structured so that new element types, panel controls, and style parameters could be added without refactoring. UI decisions for states not covered in the Figma (hover, empty states, edge cases) were left to developer judgment.
De Oplossing
Built with React 19 + TypeScript + MobX (stack required by the task). Domain stores (TaglineStore, UIStore) keep state clean and reactive. @dnd-kit handles drag-and-drop in both the sidebar list and the preview. CSS Modules provide scoped styling. The panel system is component-driven - each sub-panel is an independent slice, making the architecture straightforward to extend.
