Zero-Latency UI: Escalando WilGo Core con React 19 y Zustand
Migrar un sistema heredado hacia una arquitectura Single Page Application (SPA) de alto rendimiento. Cómo eliminé los cuellos de botella en el mostrador y aseguré la integridad financiera de las transacciones usando NestJS y criptografía.
El Origen: Tomando el Control de Nuestro Propio Negocio
A diferencia de otros proyectos, WilGo Parts no nació de observar el problema de un cliente, sino de una necesidad personal urgente. Mi esposa y yo decidimos emprender y montar un negocio físico de repuestos y accesorios para motocicletas. Durante nuestra investigación de mercado, visitamos varios locales del rubro y nos dimos cuenta de un patrón alarmante en la forma en que administraban sus ventas.
Algunos usaban hojas de Excel mal estructuradas donde solo anotaban el inventario físico y el precio, sin historial ni capacidad de auditoría. Otros utilizaban software genérico con interfaces incomprensibles. Y en los peores casos, simplemente buscaban el repuesto en los estantes y lo facturaban sin tener idea de su stock real o márgenes de ganancia.
Decidimos que nuestro negocio no operaría a ciegas. Necesitábamos un control absoluto. Así nació WilGo Core (el motor de software): un ecosistema en línea diseñado exclusivamente para nosotros, donde cada transacción, ajuste de inventario y corte de caja se refleja en tiempo real en cualquier dispositivo donde iniciemos sesión.
Nos construí un panel de auditoría de grado empresarial que nos da libertad total para gestionar las finanzas. Y lo más crucial: una arquitectura 100% segura y respaldada en la nube, eliminando para siempre el terror de que un fallo de hardware (un disco duro quemado) nos haga perder años de esfuerzo empresarial.
El Desafío Técnico: El Cuello de Botella del Mostrador
A nivel técnico, el mayor dolor de cabeza de una empresa de repuestos con alto volumen de ventas en mostrador es la latencia del sistema. En iteraciones anteriores o sistemas legados, cada vez que un cajero agregaba un producto al carrito o escaneaba un código de barras, el cliente web hacía un round-trip a la base de datos, bloqueando la interfaz por 1 o 2 segundos.
Cuando tienes una fila de 15 mecánicos esperando por repuestos, 2 segundos de latencia por producto es una eternidad que se traduce directamente en clientes perdidos.
La Solución: Estado Local Agresivo (Zustand)
Reescribí el frontend utilizando React 19 y delegué el 100% de la lógica del carrito a un almacén de estado en memoria usando Zustand.
Desacoplando la Interfaz de la Base de Datos
Al implementar Zustand, logré una arquitectura Zero-Latency. Ahora, cuando el cajero escanea un repuesto, este se añade al carrito visualmente de manera instantánea. Todos los cálculos de impuestos, descuentos y conversiones multi-moneda ocurren en la memoria RAM del navegador.
La base de datos (PostgreSQL administrada por NestJS) solo es contactada al final del proceso, cuando el cajero presiona "Facturar". Esto redujo la carga del servidor en un 90% y eliminó por completo las filas en el mostrador físico.
El Panel de Auditoría y la Verdad Absoluta en el Backend
Al mover el estado al cliente (Zustand) para ganar velocidad, surge un reto arquitectónico clásico: Nunca confíes en el cliente. Si el navegador dice que un repuesto cuesta $1, el servidor no puede simplemente aceptarlo.
Para mantener la integridad financiera de WilGo Core, implementé un motor de validación estricta en NestJS. El frontend proporciona una experiencia instantánea al usuario, pero en segundo plano, el backend recalcula cada céntimo, impuesto y descuento consultando la base de datos maestra en PostgreSQL.
Si hay una discrepancia de un solo centavo entre lo que calculó la memoria RAM del navegador y lo que dictamina la base de datos, la transacción es rechazada de inmediato y registrada en nuestro Panel de Auditoría de grado empresarial. Esto nos garantiza a mi esposa y a mí que nadie puede vulnerar las finanzas del negocio ni alterar los precios de los repuestos, manteniendo una trazabilidad perfecta de cada movimiento en tiempo real en todos nuestros dispositivos.
Conclusión
Construir un POS web que sea tan rápido como una aplicación nativa requiere delegar responsabilidades inteligentemente. Al empujar el estado a la capa de cliente (Zustand) obtenemos una experiencia hiper-rápida, pero debemos compensarlo con arquitecturas de seguridad criptográficas estrictas en la capa de transporte para garantizar que el servidor siempre tenga la última palabra.