Electrolux Group
Controle de custos estilo Excel para uma multinacional
Substituí uma ferramenta legada em PowerOn por uma grade web rápida, usada entre fábricas da Electrolux.
- Papel
- Único dev front-end
- Período
- ago. de 2025 – Atual
- carregamento e salvamento em lote
- 30–45s → 3–5s
- de licença por usuário eliminados
- US$ 300
Experimente
Edite algumas células e salve tudo num lote só. Os dados são fictícios; a aplicação real é interna.
Controle de custos
Fábrica A, dados de exemplo
| Item (US$ / t) | jan. | fev. | mar. | abr. |
|---|---|---|---|---|
| Chapa de aço | ||||
| Resina ABS | ||||
| Cobre | ||||
| Embalagem | ||||
| Frete |
Nenhuma alteração pendente
Clique numa célula e digite. Setas e Enter movem entre as células.
Carregar e salvar em lote
- Ferramenta legada
- 30–45s
- App novo
- 3–5s
O problema
Custos, indexação de matérias-primas, savings e dados mestres de fábricas e fornecedores de serviço ficavam numa aplicação legada em PowerOn. Telas e salvamentos em lote levavam de 30 a 45 segundos, e cada usuário precisava de uma licença de US$ 300.
Quem usa pensa em planilha: muitas linhas, muitas edições de uma vez, um salvamento no fim. O substituto tinha que parecer Excel, só que mais rápido.
O que construí
- Uma aplicação web estilo Excel em React, TypeScript e Vite, com React Datasheet Grid para edição de planilha e Tailwind CSS na interface.
- Estado de servidor com TanStack Query, com as edições juntadas e salvas em lote.
- Notificações em tempo real com SignalR, além de exportação para Excel e PDF.
- Testes com Vitest, Testing Library e MSW, CI no GitHub Actions e deploy com Docker em Kubernetes.
Decisões
- Salvar em lote
- As mudanças se acumulam no cliente e vão para o servidor juntas, do jeito que o pessoal já trabalhava na planilha.
- Mockar a API desde o primeiro dia
- Os handlers do MSW deixaram o front-end andar na frente do back-end e mantiveram os testes determinísticos.
- Entregar como produto
- Toda mudança passa por testes e CI e sai como container em Kubernetes.
Stack
- React
- TypeScript
- TanStack Query
- React Datasheet Grid
- SignalR
- Vitest
- MSW
- GitHub Actions
- Docker
- Kubernetes