Galaxies Survey Builder
Backoffice de uma plataforma de pesquisa de games reescrito do zero em três semanas — compatibilidade total de schema, gerenciamento de estado cirúrgico e administradores que pararam de depender do desenvolvedor.
- TypeScript
- React
- GraphQL
A Galaxies construía uma plataforma de inteligência de dados para a indústria brasileira de games — agregando respostas de gamers e transformando-as em insights de mercado para estúdios e publishers. O backoffice que sustentava essa pesquisa dependia de um construtor de formulários que havia se tornado frágil: administradores precisavam adivinhar o comportamento da interface ou consultar o desenvolvedor original para entender como funcionava.
Entrei no projeto para assumir a reescrita completa desse construtor, da v1 para a v2, com um prazo de três semanas e um time completamente remoto de cinco pessoas.
Os Desafios
O construtor v1 tinha um schema já em uso em todas as pesquisas existentes. Qualquer reescrita precisava manter compatibilidade total com versões anteriores — formulários já salvos no banco deveriam carregar corretamente na nova UI, e tudo que fosse gerado precisava continuar sendo lido pelo mesmo renderizador de formulários. Alterar o schema estava fora de cogitação.
A implementação v1 também carregava e rastreava estado em massa, o que causava problemas de performance conforme os formulários cresciam — um problema que precisava ser resolvido sem quebrar nada upstream ou downstream.
Backoffice
Reconstruindo o construtor de pesquisas
Projetei e construí o construtor v2 do zero. A página permitia que administradores configurassem dinamicamente cada aspecto de uma pergunta de pesquisa: categoria, imagem, caption, tipo de pergunta (texto corrido, multi seleção e outros), metadados de acessibilidade e strings de i18n — tudo em uma única interface.
Redesenhei o modelo de estado para ser cirúrgico, rastreando apenas o que estava sendo ativamente editado em vez de manter o formulário inteiro em memória. A arquitetura foi baseada em padrões construídos na FDTE para interfaces de formulários dinâmicos similares — priorizando simplicidade e previsibilidade.
O desafio mais difícil foi a compatibilidade de schema: o output gerado pela nova UI precisava ser parseável pelo renderizador existente, enquanto todos os formulários já no banco carregavam corretamente sem migração.
A v2 foi para produção dentro do prazo. O resultado mais significativo foi a usabilidade: administradores passaram a configurar pesquisas de forma independente, sem precisar perguntar ao desenvolvedor que escreveu a v1 o que cada campo significava.
Tecnologias
- React — árvore de componentes do construtor de pesquisas dinâmico
- Material UI — sistema de design usado na UI do backoffice
- GraphQL — queries e mutations para carregar e persistir configurações de pesquisa
- TypeScript — tipagem fim a fim em todo o schema de formulários
Destaques Técnicos
- Reescrita com compatibilidade de schema — a nova UI precisava produzir output parseável pelo renderizador existente e carregar todos os formulários legados sem migração, tornando a compatibilidade retroativa o principal driver de design
- Gerenciamento de estado cirúrgico — a v1 mantinha o formulário inteiro em memória; a reescrita rastreava apenas o escopo de edição ativo, eliminando os problemas de performance que tornavam o construtor antigo lento em pesquisas complexas
- Arquitetura baseada em padrões anteriores — modelada a partir de sistemas de formulários construídos na FDTE, priorizando uma estrutura simples e previsível