Reconstrução de Plataforma de Catálogo para 27 Países

Contexto

Na Singular Apps, trabalhei em uma plataforma de catálogo de engenharia em larga escala para clientes corporativos em 27 países. Em 2023, um rebranding global tornou necessária uma reconstrução completa: a plataforma legada não sustentava a nova identidade e sua arquitetura não atendia aos requisitos de SEO e distribuição internacional que o rebranding trouxe. Liderei o desenvolvimento do substituto — uma plataforma Next.js de alta performance construída do zero — cobrindo arquitetura de renderização, camada de busca de dados, fluxos de importação em lote para dados corporativos de catálogo e uma reestruturação do funil de onboarding junto a produto e design. A função central da plataforma era técnica: usuários navegam hierarquias profundas de catálogo e visualizam peças por um sistema de navegação 2D/3D, então o frontend precisava suportar páginas públicas carregadas de conteúdo e ferramentas interativas densas.

Decisões

Reconstruir do zero em vez de migrar incrementalmente. Uma migração incremental preserva comportamentos funcionando, mas carrega restrições legadas para toda decisão nova. O rebranding já invalidava boa parte da superfície existente, e SEO internacional é difícil de adaptar depois — ele precisa ser arquitetural. Next.js nos deu páginas de catálogo renderizadas no servidor e indexáveis para distribuição em 27 países. O custo de começar de novo é perder tratamento de casos de borda acumulados; compensamos com padrões de frontend e code reviews estruturados.

Upload em segundo plano com polling para importação em lote. Usuários corporativos importam catálogos em escala de mais de 100 mil itens técnicos. Amarrar isso a um ciclo de requisição síncrono bloqueava a UI e falhava por timeout. Desenhei a importação como um sistema de upload e processamento em segundo plano: o cliente envia o job, o servidor processa de forma independente e a UI consulta o status. Polling é menos elegante que um canal push, mas mantém o cliente sem estado, sobrevive a conexões interrompidas e não exige infraestrutura de conexão persistente — a troca certa para operações longas que não podem travar a interface.

React Query como camada de cache deliberada, não conveniência. Com tráfego intenso de API entre as views de catálogo, o risco vinha dos dois lados: refetches redundantes aumentavam latência, e caching descuidado servia dados obsoletos em um sistema onde importações em lote mudam grandes partes do catálogo. Estruturei a camada de dados com cache keys explícitas, invalidação ligada a mutações e sincronização em segundo plano — minimizando chamadas redundantes e mantendo as views consistentes após a chegada das importações.

Iterar no onboarding em vez de redesenhá-lo uma vez. O onboarding em múltiplas etapas foi refeito com produto e design como uma série de simplificações e melhorias mensuráveis de UI, não como um grande redesign único. Entregar iterativamente permitiu avaliar cada mudança por si, e o trabalho acumulado contribuiu para aumento de 35% na aquisição de clientes.

Impacto

A plataforma reconstruída foi entregue em 27 países com renderização otimizada para SEO e distribuição internacional. O sistema de importação em lote suportou mais de 100 mil catálogos técnicos sem bloquear a UI, um ganho operacional relevante para os times corporativos que executam essas importações. A otimização da busca de dados minimizou chamadas redundantes de API e reduziu significativamente a latência da interface na navegação do catálogo. A reestruturação do onboarding contribuiu para aumento de 35% na aquisição de clientes. Os padrões de frontend e práticas de review que estabeleci melhoraram a manutenção e a consistência de entrega do time além do meu próprio trabalho.

Notas de stack

Next.js sustentou a arquitetura de renderização — a construção do zero foi organizada em torno de renderização no servidor amigável a SEO para páginas de catálogo. React e TypeScript sustentaram as ferramentas interativas, incluindo o sistema de navegação 2D/3D para exploração técnica em múltiplos níveis e visualização de peças. React Query concentrou os dados do cliente: caching, invalidação e sincronização em segundo plano. O pipeline de importação em lote foi mais um problema de desenho assíncrono do que de escolha de biblioteca — processamento em segundo plano com polling, mantido intencionalmente simples para que operações longas continuassem observáveis e recuperáveis.