Dois produtos construídos do zero para personal shoppers: Hero Mobile para uso em campo e Hero Desktop para gestão. Cobertura de testes estabelecida desde o primeiro commit — qualidade como parte do fluxo, não como etapa final.
DesignMySide
01
Visão Geral
O Hero é uma plataforma desenvolvida na MySide para atender o fluxo de trabalho de personal shoppers. O projeto foi dividido em dois produtos: Hero Mobile, uma PWA voltada para uso em campo, e Hero Desktop, destinado à gestão e operação em tela maior. Ambos precisavam operar de forma independente sem perder coerência visual e funcional entre si.
Os dois produtos precisavam operar de forma independente sem perder coerência visual e funcional entre si. Testes automatizados com Jest e React Testing Library foram integrados desde o início do desenvolvimento — cobertura como parte do workflow, não como etapa posterior.
02
Desafio
Criar dois produtos distintos do zero exigiu decisões arquiteturais logo de início: o que seria reaproveitado entre plataformas e o que exigiria implementações independentes. Uma separação mal calibrada levaria a acoplamento desnecessário ou duplicação de código sem ganho real.
A PWA precisava de comportamento próximo ao nativo em condições de campo — conexões instáveis, transições suaves, carregamento confiável. Isso colocou performance e estratégia de cache como restrições reais desde o primeiro sprint, não como otimizações posteriores.
Estabelecer padrões de testes desde o primeiro commit foi uma decisão deliberada: consolidar cobertura como parte do fluxo, não como etapa final, exigiu disciplina da equipe durante o crescimento do produto.
03
Solução
Hero Mobile e Hero Desktop foram separados em experiências independentes, com componentes compartilhados apenas onde havia reaproveitamento real — a distinção foi feita caso a caso, não como regra geral.
A PWA foi implementada com service workers e estratégias de cache que garantiam boa experiência mesmo em conexões degradadas. O design mobile-first orientou cada decisão de layout no produto de campo.
A estrutura de testes com Jest e React Testing Library foi estabelecida no início do projeto, consolidando cobertura como parte do workflow de desenvolvimento e tornando a expansão do produto mais segura ao longo do tempo.