OnepageOnepage Tagline Editor
Um teste técnico: um editor de etiquetas com pré-visualização, ordenação por arrasto e controlos de estilo.
Maquetes em dispositivos e capturas de sites públicos de outubro de 2026. Os sites podem incluir alterações posteriores à minha participação.
Visão geral
Para uma avaliação técnica da Onepage, criei um editor para o elemento de slogan de um construtor de websites. Um painel de definições atualiza uma pré-visualização ao vivo das etiquetas, da sua ordem e do seu aspeto. É uma demo de avaliação independente. A persistência através da API é simulada.
O objetivo
Seguir o design fornecido e tornar o editor fácil de alargar com novos tipos de elementos, definições e estados de interface.
O meu trabalho
Desenvolvi o editor com React, TypeScript e MobX. Stores separadas de domínio e de interface gerem o estado, enquanto painéis reutilizáveis tratam da edição das etiquetas, da ordenação por arrastar e largar e dos estilos.
Resultados
- Painel de configurações flutuante com 3 subpainéis navegáveis (lista, criar/editar, estilos)
- Visualização ao vivo com sincronização de estilo em tempo real em todas as 4 variantes, 5 tamanhos, 5 raios
- Reordenação de tags por arrastar e soltar na lista da barra lateral e visualização do canvas
Tem um projeto em mente?
Conte-me o que pretende criar. Podemos discutir o âmbito e os próximos passos.
