Painel multi-ERP — remediação e build da landing page

A landing page de marketing para um painel de controle multi-ERP e multi-marketplace, construída para transformar um arquivo de design estruturalmente inconstruível em uma aplicação React responsiva e inspecionável. Desenvolvida ao longo de cerca de sete meses de manutenção ativa, com sessenta e um componentes sobre React, Vite e shadcn, totalizando 219 KB de TypeScript — o maior código de landing page de todo o acervo da Spaceapps.

Subcontratação de agência na Spaceapps; o relacionamento comercial com o cliente pertencia à agência e atuei como equipe interna. O produto — uma plataforma multi-ERP integrando Tiny, Bling, Mercado Livre e Shopee — foi projetado e desenvolvido ao longo de treze sprints de back-end por um desenvolvedor Bubble antes e durante minha chegada. O design da landing page foi concebido pelo Thiago, líder técnico. Minha função foi a engenharia de design: reestruturar um arquivo feito de grupos soltos e sem auto-layout no frame inspecionável "LP otimizada" no Figma e programar toda a interface responsiva em React.

A fronteira: Atribuição e remediação de design

Muitas narrativas de portfólio dependem de memória pessoal. Aqui a fronteira é simples: meu trabalho no código só começou depois que o design do produto já tinha sido entregue para desenvolvimento. O aplicativo e os painéis administrativos já estavam completamente prontos quando cheguei.

Ao receber a landing page para programar, o layout estava em um estado inviável para código: grupos soltos estilo Photoshop, ausência total de frames com auto-layout, elementos desalinhados e larguras rígidas que quebravam em telas menores. Em vez de travar o fluxo ou devolver demandas para a equipe, fiz uma revisão estrutural completa no Figma, reconstruindo a página na seção "LP otimizada". Ao contrário do Gestrif, onde o acesso ao Figma expirou, o frame corrigido do AllPrice permanece acessível e inspecionável ao lado dos frames originais.

📄219 KB

código TypeScript (o maior do acervo)

🧩61

componentes React e shadcn

Arquitetura front-end: 61 componentes e 219 KB de TypeScript

O AllPrice adota uma stack arquitetural singular dentro do acervo da Spaceapps. Enquanto projetos como Celus e SYD utilizaram o Next.js App Router, o AllPrice foi estruturado como uma SPA de alta performance com React 18, Vite, React Router e Tailwind CSS. Com 219 KB de TypeScript autoral — praticamente o dobro do volume de código do Celus e mais que o dobro do upOS —, organizou narrativas comerciais complexas através de componentes modulares:

• Seção Hero com proposta de valor, selos de compatibilidade multi-ERP e chamadas para ação.
• Quatro seções detalhadas de funcionalidades abordando login unificado, sincronização de estoque e gestão integrada de pedidos.
• Tabela interativa de preços com alternância de planos e benefícios.
• Carrossel de validação social e depoimentos de clientes.
• Acordeão estruturado de FAQ esclarecendo dúvidas sobre segurança, implantação e rotinas operacionais.
• Rotas dedicadas no cliente para Termos de Uso e Política de Privacidade.

A construção em duas versões: De WordPress para React

O AllPrice foi construído duas vezes. A landing page nasceu inicialmente em WordPress (preservada como histórico em allprice.juanpablosilva.com.br). Contudo, a precisão visual, a fluidez responsiva e a modularidade exigidas pelo design corrigido esbarravam nas limitações estruturais do CMS e de seus temas. Para alcançar a fidelidade e o desempenho necessários, reprogramei a página integralmente do zero em React e Vite. Ambas as versões continuam ativas em subdomínios próprios como registro dessa evolução técnica.

Evidência durável e preservação em mirrors

Infraestruturas web de clientes são voláteis. Após o encerramento do contrato com a agência, o domínio allprice.app.br parou de exibir a aplicação e tornou-se uma página padrão de estacionamento da HostGator. Como nenhuma captura foi feita no Wayback Machine durante o período em que o site esteve ativo, a janela original se fechou. Para manter a prova verificável do build, mantenho mirrors independentes: allprice-lp.juanpablosilva.com.br serve a SPA em React (onde todo o conteúdo de texto está compilado no pacote JS de 378 KB), enquanto allprice.juanpablosilva.com.br guarda a v1 em WordPress.

O que isto não é

• Não é o design do produto. O software multi-ERP e seus painéis já estavam concebidos antes da minha entrada na Spaceapps.
• Não é a engenharia de APIs ou back-end do ERP. A landing page promove a integração com Tiny, Bling, Mercado Livre e Shopee; essas rotinas foram entregues em 13 sprints de Bubble por outro desenvolvedor. O repositório não possui pasta de servidor.
• Não é a metodologia da agência. O fluxo de entrega pertencia à Spaceapps; participei como executor técnico em sua fase de desenvolvimento.
• Não é uma aplicação Next.js. Trata-se de uma SPA em React 18 e Vite no cliente; next-themes foi apenas uma dependência de temas.
• Não é especialização em e-commerce. Minha exposição ao segmento foi restrita à engenharia front-end da página de marketing.
• Não é um item de portfólio de design. É um crédito de build e de remediação estrutural, atestando rigor técnico e capacidade de destravar handoffs.
• Não possui métricas comerciais verificadas. O produto operou com usuários reais, mas nenhum dado analítico foi retido antes da transição da hospedagem.
• Não é um artefato único. A versão em WordPress e a versão em React são entregas distintas hospedadas em endereços separados.

O valor real da engenharia de design

O AllPrice sintetiza a realidade operacional do desenvolvimento digital. Quando arquivos de design inconstruíveis chegam aos desenvolvedores, projetos atrasam, orçamentos estouram e surgem atritos entre equipes. Um engenheiro de design elimina esse gargalo na fronteira — resolvendo falhas de layout no Figma antes do primeiro commit e convertendo o resultado em código TypeScript limpo, modular e robusto. O AllPrice comprova essa competência com datas precisas, artefatos inspecionáveis e código duradouro.

Evidência

A página foi ao ar e operou em produção antes do encerramento do contrato de hospedagem; allprice.app.br atualmente responde como uma página de estacionamento da HostGator, sem capturas preservadas no Wayback Machine. O código e o build permanecem preservados no repositório público e em mirrors próprios no meu domínio: allprice-lp.juanpablosilva.com.br exibe a versão em React, enquanto allprice.juanpablosilva.com.br guarda a v1 original em WordPress. Nenhuma métrica quantitativa de conversão foi retida — uma ausência confirmada neste acervo.