OnepageOnepage Tagline Editor
Una prueba técnica: un editor de etiquetas con vista previa, ordenación por arrastre y controles de estilo.
Maquetas en dispositivos y capturas de sitios públicos de octubre de 2026. Los sitios pueden incluir cambios posteriores a mi participación.
Descripción general
Para una prueba técnica de Onepage, creé un editor para el elemento de eslogan de un creador de sitios web. Un panel de ajustes actualiza una vista previa en directo de las etiquetas, su orden y su aspecto. Es una demo de evaluación independiente. La persistencia mediante API está simulada.
El objetivo
Seguir el diseño proporcionado y hacer que el editor sea fácil de ampliar con nuevos tipos de elementos, ajustes y estados de interfaz.
Mi trabajo
Desarrollé el editor con React, TypeScript y MobX. Stores separados de dominio y de interfaz gestionan el estado, mientras que paneles reutilizables se ocupan de editar las etiquetas, ordenarlas arrastrando y soltando y aplicar estilos.
Resultados
- Panel de configuración flotante con 3 subpaneles navegables (lista, crear/editar, estilos)
- Vista previa en vivo con sincronización de estilo en tiempo real en todas las 4 variantes, 5 tamaños, 5 radios
- Reorganización por arrastrar y soltar de etiquetas en la lista de barra lateral y vista previa de lienzo
¿Tienes un proyecto?
Cuéntame qué quieres crear. Hablemos del alcance y los próximos pasos.
