OnepageOnepage Tagline Editor
Un exercice technique : un éditeur de tags avec aperçu en direct, tri par glisser-déposer et réglages de style.
Maquettes sur appareils et captures de sites publics d’octobre 2026. Les sites peuvent inclure des modifications apportées après mon intervention.
Aperçu
Pour une évaluation technique d’Onepage, j’ai créé un éditeur pour l’élément de slogan d’un constructeur de sites. Un panneau de réglages met à jour un aperçu en direct des tags, de leur ordre et de leur apparence. Il s’agit d’une démo d’évaluation autonome. La persistance via l’API est simulée.
L’objectif
Respecter la maquette fournie et rendre l’éditeur facile à étendre avec de nouveaux types d’éléments, réglages et états d’interface.
Mon travail
J’ai réalisé l’éditeur avec React, TypeScript et MobX. Des stores séparés pour le domaine et l’interface gèrent l’état, tandis que des panneaux réutilisables prennent en charge l’édition des tags, leur ordre par glisser-déposer et les styles.
Résultats
- Panneau de paramètres flottant avec 3 sous-panneaux navigables (liste, créer/modifier, styles)
- Aperçu en direct avec synchronisation de style en temps réel sur toutes les 4 variantes, 5 tailles, 5 rayons
- Réorganisation par glisser-déposer des balises dans la liste de la barre latérale et l'aperçu du canevas
Un projet en tête ?
Décrivez ce que vous souhaitez créer. Discutons du périmètre et des prochaines étapes.
