OnepageOnepage Tagline Editor
Een technische opdracht: een tageditor met live voorbeeld, slepen om te sorteren en stijlinstellingen.
Apparaatmockups en schermafbeeldingen van openbare websites uit oktober 2026. De sites kunnen wijzigingen bevatten die na mijn bijdrage zijn aangebracht.
Overzicht
Voor een technische opdracht van Onepage bouwde ik een editor voor het tagline-element van een websitebouwer. Een instellingenpaneel werkt een livevoorbeeld bij van de tags, hun volgorde en hun uiterlijk. Dit is een losstaande sollicitatiedemo. Opslag via de API wordt gesimuleerd.
Het doel
Het aangeleverde ontwerp volgen en de editor eenvoudig uitbreidbaar maken met nieuwe elementtypen, instellingen en interfacestatussen.
Mijn werk
Ik bouwde de editor met React, TypeScript en MobX. Aparte domein- en interfacestores beheren de state, terwijl herbruikbare panelen het bewerken van tags, de volgorde via slepen en neerzetten en de stijlen verzorgen.
Resultaten
- Zwevend instellingenpaneel met 3 navigeerbare subpanelen (lijst, aanmaken/bewerken, stijlen)
- Live-voorbeeld met real-time stijlsynchronisatie voor alle 4 varianten, 5 maten, 5 stralen
- Tag-herordening via slepen in zijbalklijst en canvasvoorbeeld
Een project in gedachten?
Vertel wat u wilt bouwen. We bespreken de omvang en de volgende stappen.
