Profissional · Magazord Digital Commerce
Modernizando e-commerce em escala
Migração de aplicações legadas para React, Next.js e TypeScript.
- Atuação
- Desenvolvedor Front-end
- Período
- fev/2022 — ago/2025
- Empresa
- Magazord Digital Commerce
- Status
- 2.000+ lojas
- React
- Next.js
- TypeScript
- Storybook
- Design System
01 / Visão geral
A Magazord é uma plataforma de commerce digital usada por mais de 2.000 lojas. Entrei como Desenvolvedor Front-end e passei três anos e meio na modernização e evolução das aplicações.
Boa parte desse trabalho foi tirar interfaces de PHP e Twig e levá-las para React, Next.js e TypeScript — inclusive a Área do Cliente — integrando com APIs já existentes e melhorando a qualidade do próprio Front-end.
02 / Contexto
O contexto.
A plataforma já atendia um grande número de lojas. Parte do Front-end ainda vivia em templates PHP renderizados no servidor. Essa stack entregava páginas, mas tornava reuso, consistência e performance mais difíceis do que precisavam ser.
O trabalho não era um rewrite do zero. Era migrar e evoluir superfícies reais de produto sem quebrar a experiência das lojas que já estavam no ar.
03 / Desafio
O desafio.
Templates legados acumulam exceções com o tempo. Migrá-los significa decidir quais exceções são regras de negócio e quais são só resíduo.
O Front-end também precisava de uma forma mais durável: TypeScript, um Design System, Storybook e um modelo de componentes que reduzisse duplicação em vez de copiar markup de um template para o outro.
04 / Atuação
Minha atuação.
Atuei como Desenvolvedor Front-end nas aplicações que os clientes das lojas de fato usam. Isso incluiu migrar views PHP/Twig para React e Next.js, integrar APIs e contribuir com o Design System.
Performance fazia parte do mesmo trabalho. Uma migração que parece moderna, mas entrega um bundle mais pesado, não é modernização.
05 / O que desenvolvi
O que desenvolvi.
Migração de legado
Reconstruir interfaces PHP/Twig em React e Next.js, em TypeScript, sem tratar os templates antigos como uma spec visual para copiar no piloto automático.
Área do Cliente
Desenvolver e evoluir a Área do Cliente — uma superfície densa, logada — na stack nova.
Design System
Componentes compartilhados e Storybook, para a UI comum deixar de ser reimplementada em cada template.
Integração com API
Conectar o novo Front-end às APIs existentes e tratar explicitamente os estados de loading, erro e vazio.
Performance
Reduzir o JavaScript enviado ao navegador. O tamanho de bundle nas superfícies em que trabalhei caiu cerca de metade.
Migração
Superfície legada
- PHP / Twig
- Markup repetido
- UI específica por página
Migração incremental
Novo Front-end
- React / Next.js / TypeScript
- Componentes compartilhados
- Design System
- Storybook
Migração por superfície de produto, não um rewrite de uma vez
06 / Engenharia
Decisões que eu manteria.
Migrar por fatias de produto, não como um rewrite de uma vez
As lojas já estavam no ar. Trocar uma superfície só quando a nova conseguia carregar as mesmas regras — e então remover o template antigo — manteve o risco contido.
Um Design System custa menos do que mais uma cópia do mesmo componente
A UI legada repetia o mesmo markup entre templates. Componentes compartilhados e Storybook tornaram o novo Front-end mais lento para começar e mais rápido para mudar.
Performance é requisito de produto
Ir para React não é automaticamente mais rápido. A redução de ~50% no bundle veio de ter cuidado com o que o cliente realmente precisava baixar.
07 / Stack
- React
- Next.js
- TypeScript
- Storybook
- Design System
08 / Impacto
Impacto.
- Lojas na plataforma
- 2.000+
- Conversão de avaliações
- 6,7% → 9,2%
- Redução de bundle
- ~50%
09 / Aprendizados
O que aprendi com esse trabalho.
Precisei ler os templates legados para entender as regras de negócio antes de substituí-los.
Um Design System ajuda quando várias superfícies compartilham a mesma linguagem de UI — e só se esses componentes de fato forem reutilizados.