Azion Console Kit
Vue 3, Vite, PrimeVue, TypeScript, Design Tokens, arquitetura de componentes, padrão Headless UI, open source
A reconstrução completa do front-end do console que engenheiros do Itaú, do Magazine Luiza e do iFood usam todo dia para publicar, proteger e acompanhar suas aplicações.
Desafio
Cada mudança no console custava semanas, então o trabalho de interface sempre perdia prioridade para o back-end e cada área do produto foi criando padrões próprios. Isso aparecia mais no começo, onde quem queria testar a plataforma encontrava quebras suficientes na jornada para desistir e esperar por um vendedor.
Solução
Uma reconstrução em Vue 3 sobre o PrimeVue, uma biblioteca de componentes open source, com tema e blocos próprios da Azion por cima. Os padrões foram definidos uma vez e reaproveitados, e as telas passaram a ser montadas em vez de feitas à mão. Os fluxos que as pessoas já conheciam ficaram onde estavam, e o esforço foi para a primeira hora de uso: templates, pré-configurações, importação do GitHub e orientação dentro do produto, para que um usuário novo coloque uma aplicação no ar sozinho.
O console antigo mandava você embora para criar qualquer coisa: voltar ao menu, criar a peça que faltava, achar o caminho de volta. Agora a peça que falta abre onde você está.
3x
Mais rápido para configurar uma aplicação
235%
Mais usuários novos se tornando ativos
4h
Para uma tela nova chegar ao preview
34+
Colaboradores, time Azion e clientes
O produto deixou de ser o lugar onde o trabalho de interface esperava a vez. O que levava dias agora leva horas, e uma tela pode ser proposta, construída e testada na mesma semana.
Criar no lugar
Um Firewall que falta é criado numa gaveta lateral, dentro do workload que precisa dele. A jornada não sai da tela onde começou.
Um padrão em todo produto
Descrição à esquerda, controles à direita. Criar, editar e excluir funcionam igual em Applications, Firewall e em todos os outros produtos.
Navegação por categoria
Produtos agrupados pelo que fazem: Build, Secure, Store, Deploy e Observe.
Claro e escuro
Todas as telas nos dois temas, trocados pelo menu da conta.
Azion Copilot
Um assistente de IA dentro do console responde como construir, proteger e publicar, sem sair da página.
Real-Time Metrics
Gráficos por produto, com filtros e o detalhe por trás de cada ponto.
Real-Time Events
Logs brutos de requisições e de segurança, filtrados enquanto você digita, para inspecionar um ataque ou depurar uma requisição.
Criar e publicar
Um único menu Create reúne todos os jeitos de começar: recomendações, templates prontos, sua própria aplicação importada do GitHub e pré-configurações da Azion. Escolha um e ele é publicado com o log do build na tela, e um usuário novo vê a primeira aplicação no ar antes de configurar qualquer coisa.
Projeto
Azion Console Kit
Cliente e papel
Developer Experience Director
Ano
2023-25
Tecnologias
Vue 3, Vite, PrimeVue, TypeScript, Design Tokens, arquitetura de componentes, padrão Headless UI, open source
Créditos