10 / 10 · Shop-floor tablet app (PWA)
Refabrikacija
Tablet app for a production line, with scales and barcode scanners.
- Period
- Sep – Dec 2024
- My commits
- 98 of 100
- Modules
- 9
- Devices
- scales · scanners · tablets
TDR reworks material from returned and faulty tobacco products on a refabrication line. Operators work standing, in gloves, between scales and containers, so the application had to live on a tablet and be driven by barcodes and the scale rather than by typing.
Codel built the backend; I built the whole frontend between September and December 2024, from the first screen to the PWA install. 98 of the repository's 100 commits are mine.
Context
- Every container on the line has a code. Material is paired to a production order, tared and weighed on a connected scale, moved between containers when the contents are compatible, and finally booked as consumed, together with the tax stamps that go with the finished goods.
- The app replaced paper and a desktop program that nobody could use at the scale. The constraint was simple: everything must work with one hand on a 10-inch tablet, with the scanner doing the typing.
What I built
- Operator login by scanning a badge, with a numeric keypad fallback, auto-focus and automatic login once the code is complete.
- Maker: production orders in preparation, activating and stopping an order for a machine.
- Container filling: pair an incoming container to the active order, show the instructions, finish or cancel it.
- Taring and weighing: pick a scale, read it live every five seconds, set the tare, save the content weight, with scan-to-scan flow from one container to the next.
- Refabrication: input and output container, a compatibility check and the transfer of contents between them; consumption of refabricated material by work centre.
- Tax-stamp consumption with item images (upload and carousel) and an order settlement dialog, plus a stock overview and material verification.
How it works
- React 18, TypeScript, Vite, MUI with Data Grid Pro, TanStack Query, Zustand and i18next with the language saved per operator.
- Scanners through Web Serial on a desktop and a WebSocket bridge on tablets; the app detects the device and connects accordingly.
- Installable as a PWA; the UI shows the git hash and build date, and in-progress containers are kept in localStorage so a reload does not lose the step.
- Automatic logout, a test-database switch for training, and dynamic dialogs with numeric inputs sized for gloves.
Outcome
- Built and handed over between September and December 2024 as the only frontend developer on the project.
- The system is internal to the client, so there are no public screenshots.