Electrolux Group
Excel-like cost control for a global manufacturer
Replaced a legacy PowerOn tool with a fast web grid used across Electrolux factories.
- Role
- Sole front-end developer
- Period
- Aug 2025 – Present
- screen load and batch save
- 30–45s → 3–5s
- per-user license removed
- US$300
Try it
Edit a few cells and save them in one batch. The data is made up; the real app is internal.
Cost control
Plant A, sample data
| Item (US$ / t) | Jan | Feb | Mar | Apr |
|---|---|---|---|---|
| Steel sheet | ||||
| ABS resin | ||||
| Copper | ||||
| Packaging | ||||
| Freight |
No pending changes
Click a cell and type. Arrow keys and Enter move between cells.
Screen load and batch save
- Legacy tool
- 30–45s
- New app
- 3–5s
The problem
Costs, raw-material indexing, savings and master data for factories and service suppliers lived in a legacy PowerOn application. Screens and batch saves took 30 to 45 seconds, and every user needed a US$300 license.
The people using it think in spreadsheets: many rows, many edits at once, one save at the end. The replacement had to feel like Excel, only faster.
What I built
- An Excel-like web app in React, TypeScript and Vite, with React Datasheet Grid for spreadsheet-style editing and Tailwind CSS for the interface.
- Server state with TanStack Query, with edits collected and saved as a batch.
- Real-time notifications with SignalR, plus Excel and PDF exports.
- Tests with Vitest, Testing Library and MSW, CI on GitHub Actions, and deploys with Docker on Kubernetes.
Decisions
- Save in batches
- Changes pile up on the client and go to the server together, the way people already worked in spreadsheets.
- Mock the API from day one
- MSW handlers let the front end move ahead of the back end and keep the tests deterministic.
- Ship like a product
- Every change runs through tests and CI and goes out as a container on Kubernetes.
Stack
- React
- TypeScript
- TanStack Query
- React Datasheet Grid
- SignalR
- Vitest
- MSW
- GitHub Actions
- Docker
- Kubernetes