Zero-Latency UI: Scaling WilGo Core with React 19 and Zustand
Migrating a legacy system to a high-performance Single Page Application (SPA) architecture. How I eliminated counter bottlenecks and ensured financial transaction integrity using NestJS and cryptography.
The Origin: Taking Control of Our Own Business
Unlike other projects, WilGo Parts wasn't born from observing a client's problem, but from an urgent personal need. My wife and I decided to start our own physical motorcycle parts and accessories business. During our market research, we visited several local shops in the industry and noticed an alarming pattern in how they managed their sales.
Some used poorly structured Excel sheets where they only noted physical inventory and prices, with no transaction history or auditing capabilities. Others used generic software with incomprehensible interfaces. In the worst cases, they simply pulled parts off the shelves and billed them without having any real idea of their actual stock levels or profit margins.
We decided our business would not operate blindly. We needed absolute control. That's how WilGo Core (the software engine) was born: an online ecosystem designed exclusively for us, where every transaction, inventory adjustment, and cash register close is reflected in real-time on any device we log into.
I built us an enterprise-grade auditing panel that gives us total freedom to manage our finances. Most crucially, the architecture is 100% secure and cloud-backed, permanently eliminating the terror of a hardware failure (like a fried hard drive) destroying years of business effort.
The Technical Challenge: The Counter Bottleneck
On a technical level, the biggest headache for a high-volume retail auto parts company is system latency. In earlier iterations or legacy systems, every time a cashier added a product to the cart or scanned a barcode, the web client made a round-trip to the database, blocking the interface for 1 to 2 seconds.
When you have a line of 15 mechanics waiting for parts, 2 seconds of latency per product is an eternity that translates directly into lost customers.
The Solution: Aggressive Local State (Zustand)
I rewrote the frontend using React 19 and delegated 100% of the cart logic to an in-memory state store using Zustand.
Decoupling the Interface from the Database
By implementing Zustand, I achieved a Zero-Latency architecture. Now, when the cashier scans a part, it is added to the cart visually instantly. All tax calculations, discounts, and multi-currency conversions happen in the browser's RAM.
The database (PostgreSQL managed by NestJS) is only contacted at the very end of the process, when the cashier presses "Checkout". This reduced server load by 90% and completely eliminated the lines at the physical counter.
The Audit Panel and the Backend's Absolute Truth
By moving the state to the client (Zustand) to gain speed, a classic architectural challenge arises: Never trust the client. If the browser says a part costs $1, the server simply cannot accept it blindly.
To maintain WilGo Core's financial integrity, I implemented a strict validation engine in NestJS. The frontend provides an instantaneous experience to the user, but in the background, the backend recalculates every cent, tax, and discount by querying the master PostgreSQL database.
If there is a discrepancy of even a single cent between what the browser's RAM calculated and what the database dictates, the transaction is immediately rejected and flagged in our Enterprise-grade Audit Panel. This guarantees my wife and me that no one can breach the business's finances or alter parts prices, maintaining perfect traceability of every movement in real-time across all our devices.
Conclusion
Building a web POS that is as fast as a native application requires delegating responsibilities intelligently. By pushing the state to the client layer (Zustand), we achieve a hyper-fast experience, but we must compensate with strict cryptographic security architectures at the transport layer to ensure the server always has the final word.