Plataforma mobile-first para personal shoppers composta por Hero Mobile (PWA) e Hero Desktop, construída do zero com Next.js, TypeScript e testes automatizados desde o primeiro commit.
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.
A stack foi construída em torno de Next.js, React e TypeScript, com Tailwind CSS como sistema de estilização compartilhado. Autenticação com Auth.js, gerenciamento de estado servidor com React Query, validação com Zod e React Hook Form, e componentes de UI com shadcn/ui e Radix UI. Testes automatizados com Jest e React Testing Library foram integrados desde o início do desenvolvimento.
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
Separei Hero Mobile e Hero Desktop 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.