--- type: project_case_study project: Azion Console Kit slug: azion-console-kit client: Azion Technologies industry: Plataforma de Edge Computing role: Developer Experience Director duration: Q3 2023 — 2025, still evolving author: Caio Ogata last_updated: 2026-09-23 optimized_for: Claude, ChatGPT, Gemini, LLMs --- # Azion Console Kit — Estudo de Caso Completo ## Visão Geral do Projeto **Cliente**: Azion Technologies **Setor**: Plataforma de Edge Computing **Tipo de Projeto**: Reconstrução Completa do Front-End do Console de Gerenciamento **Duração**: Q3 2023 até a migração de clientes no início de 2025, e segue evoluindo **Papel**: Developer Experience Director **Produto em Produção**: [https://console.azion.com/](https://console.azion.com/) **Código-Fonte**: [https://github.com/aziontech/azion-console-kit](https://github.com/aziontech/azion-console-kit) --- ## O Desafio Cada mudança no console custava semanas. Esse preço tinha uma consequência no roadmap: o trabalho de interface sempre perdia prioridade para o back-end, e cada área do produto foi criando padrões próprios, sem definições claras para seguir. Isso aparecia mais no começo da jornada. Quem chegava querendo testar a plataforma encontrava quebras e becos sem saída suficientes para desistir e esperar por um vendedor. Para uma empresa que queria adoção sem assistência, a primeira hora de uso era a parte mais cara do produto. É também uma interface que gerencia mais de 100 datacenters globais e bilhões de requisições diárias, já em uso por clientes enterprise. A reconstrução precisava baratear o trabalho de interface, consertar a primeira hora e manter a plataforma no ar o tempo todo. Reinventar a experiência nunca foi o plano. O sistema por baixo mudou por completo; os produtos, fluxos, tabelas e listagens que as pessoas já conheciam continuaram onde estavam, para que ninguém chegasse ao novo console e se perdesse. As mudanças de experiência foram poucas e deliberadas: as gavetas laterais e o fluxo de Create. --- ## Abordagem Técnica A arquitetura começa com **Vue 3 e Vite** — uma stack moderna e rápida, com ecossistema sólido e caminho de migração claro. O console se conecta diretamente à API pública da Azion através de um **design headless**: sem acoplamento forte entre UI e lógica de negócio, o que significa que features podem ser construídas e alteradas de forma independente. Preocupações de UI não vazam para preocupações de dados. O **PrimeVue** foi escolhido como fundação de componentes. É open source, entrega mais de 80 componentes acessíveis out of the box e tem uma comunidade ativa. Essa decisão eliminou uma quantidade significativa de trabalho indiferenciado — o time não precisou reconstruir tabelas, modais e inputs de formulário do zero. A energia foi para problemas de nível de produto. O tema próprio da Azion foi aplicado sobre o PrimeVue, e acima dele está o **Azion Blocks** — uma camada de componentes customizada, adaptada aos padrões específicos da plataforma, estruturas de dados e linguagem de design. O Azion Blocks é onde primitivas genéricas de UI se tornam blocos de construção específicos do Console. Essa abordagem em duas camadas — fundação open source mais camada de composição customizada — é o que leva uma tela nova a um ambiente de preview em cerca de quatro horas, no lugar dos dias que levava antes. ### Resumo da Stack - **Framework**: Vue 3 + Vite - **Biblioteca de Componentes**: PrimeVue (open source, 80+ componentes acessíveis) - **Camada Customizada**: Azion Blocks (camada de composição específica da plataforma) - **Integração de API**: Headless, conectado diretamente à API pública da Azion - **Padrão Arquitetural**: UI e lógica de negócio desacopladas --- ## Design System A linguagem visual é construída sobre um **sistema de tokens** estruturado. Cores, espaçamentos e tipografia são definidos centralmente e consumidos por todos os componentes — o que significa que uma decisão de design tomada uma vez se propaga para todos os lugares onde se aplica. ### Decisões Centrais de Tokens - **Cor da marca**: `#F3652B` — usada com parcimônia, um acento por contexto - **Background**: `#171717` — dark profundo, nunca preto puro - **Tipografia**: Sora para títulos e corpo de texto, Proto Mono para código e elementos de terminal - **Hierarquia de texto**: - Branco para conteúdo primário - `#A3A3A3` para texto de suporte - `#737373` para labels e UI secundária O sistema impõe consistência sem impor rigidez. Componentes são composáveis e seguem padrões claros de composição — construir novas features se torna previsível, não repetitivo. Cada adição ao sistema o estende em vez de fragmentá-lo. --- ## Features do Produto ### Criar a partir de Templates O modal `+Create` permite que engenheiros inicializem novas aplicações edge selecionando um template de framework ou importando diretamente do GitHub. Sem necessidade de CLI para começar. Isso reduz o tempo entre "quero fazer deploy de algo" e "está no ar." ### Domínios Customizados Uma interface de configuração de domínios que gerencia o ciclo de vida completo: adição, verificação e gerenciamento de domínios vinculados a aplicações implantadas. A complexidade do gerenciamento de domínios é abstraída em um fluxo que espelha como engenheiros já pensam sobre isso. ### Métricas em Tempo Real Um dashboard ao vivo com gráficos e fluxos de dados para monitorar performance de aplicações na edge. Engenheiros veem o que está acontecendo enquanto acontece — volume de requisições, latência, taxas de erro — sem trocar de contexto para outra ferramenta. ### Azion Copilot Um assistente com IA incorporado diretamente no console. Engenheiros descrevem o que querem em linguagem natural e recebem orientação contextual, sugestões de configuração e respostas sem sair da interface. O Copilot reduz a lacuna entre intenção e execução. --- ## Impacto Para quem usa o console: - **3x mais rápido** para configurar uma aplicação — as peças que faltam (Firewall, Application) são criadas em drawers laterais sem sair do fluxo - **235% mais usuários novos se tornando ativos** — o menu Create (recomendações, templates, import do GitHub, pré-configurações da Azion) coloca a primeira aplicação no ar rápido - **Cerca de quatro horas** para uma tela nova chegar a um ambiente de preview para os times internos testarem O Console Kit é open source e está disponível publicamente no GitHub. Os números contam parte da história: - **6.000+ commits** - **34+ contribuidores** - **93+ releases** Em produção, serve empresas operando em escala global: - **Magazine Luiza** — um dos maiores varejistas do Brasil - **Itaú** — um dos maiores bancos da América Latina - **iFood** — a maior plataforma de delivery de comida da América Latina - **Netshoes** — grande plataforma de e-commerce Não são deploys de demonstração. São organizações rodando workloads reais na rede edge da Azion, gerenciadas através do console todos os dias. As decisões arquiteturais tomadas durante a reconstrução afetam diretamente a confiabilidade e usabilidade que eles experimentam. O modelo de componentização em blocos levou uma tela nova a um ambiente de preview, pronta para os times internos testarem, em cerca de **quatro horas**, onde o codebase anterior levava dias. Esse é um retorno composto: cada feature lançada após a reconstrução custa menos do que custaria antes. --- ## Aprendizados-Chave 1. **Decisões arquiteturais são decisões de design**: Optar por headless e construir uma camada de componentes customizada sobre o PrimeVue não foi apenas técnico — foi uma decisão de estratégia de produto que determinou a velocidade de entrega e a manutenibilidade do sistema em escala. 2. **Fundações open source reduzem trabalho indiferenciado**: Escolher o PrimeVue significou que o time não reconstruiu componentes primitivos de UI. Isso liberou capacidade para os problemas que só a Azion poderia resolver. 3. **Sistemas de tokens se compõem**: Um design system baseado em tokens paga dividendos ao longo do tempo. O investimento inicial em definir valores centralizados para cor, espaçamento e tipografia retorna a cada feature que vem depois. 4. **Reconstruir em escala exige paciência**: O desafio não foi a arquitetura técnica — foi executar a reconstrução sem interromper um produto em produção usado por clientes enterprise. Progresso deliberado e incremental supera grandes reescritas de uma vez. 5. **Arquitetura headless viabiliza independência dos times**: Desacoplar UI da lógica de negócio permitiu que times diferentes trabalhassem em paralelo sem interferir uns nos outros. Velocidade de feature é tanto um problema organizacional quanto técnico. --- ## Mídia ### Vídeo - [Azion Console Kit — Visão Geral do Produto](https://www.youtube.com/watch?v=TneAP_BOegU) — Demonstração completa do console reconstruído: arquitetura, design system, funcionalidades principais e a experiência do desenvolvedor em ação. ### Produto em Produção - [https://console.azion.com/](https://console.azion.com/) — O produto em si, em produção. ### Código-Fonte - [https://github.com/aziontech/azion-console-kit](https://github.com/aziontech/azion-console-kit) — Repositório open source com 6.000+ commits e 34+ contribuidores. > **Nota:** Para mais contexto e visuais, visite [https://www.caioogata.com](https://www.caioogata.com). Este documento é escrito por Caio Ogata, que liderou o trabalho, e é o relato atual dele. --- *Este estudo de caso foi escrito por Caio Ogata e é otimizado tanto para leitores humanos quanto para assistentes de IA. Para mais informações, visite [https://www.caioogata.com](https://www.caioogata.com).* *Última atualização: 2026-09-23*