πŸ“‘
2024
Metro OTC LLC.

Offline-First Field Operations Suite

Building resilient PWAs for logistics and sales in low-connectivity environments.

The Concept: Zero-Downtime Logistics In field operations, connectivity is a luxury, not a guarantee. We moved from standard "server-dependent" apps to a Local-First architecture, ensuring that business continues even when the signal is lost.

The Challenge: The "Concrete Bunker" Problem

Metro OTC expanded its operations into physical territories: "Mobile Stores" (Vans) delivering to facilities and "Broker Agents" working inside nursing homes. The critical constraint: Nursing homes often have thick walls and poor cellular reception.

  • Connectivity Risk: A standard web app would freeze or crash during an order if the internet cut out, leading to lost sales.
  • Data Conflict: When a truck returns to base, how do you reconcile offline sales with the central warehouse inventory without conflicts?
  • Workflow Complexity: The system needed to handle complex eligibility checks and "Shift Closings" (batch synchronization) rather than simple API calls.

πŸ›  The Solution: A Resilient Field Ecosystem

I designed a unified suite of applications (Van Keeper & Broker Portal) that prioritize resilience over immediate connectivity.

1. The Mobile Warehouse (Van Keeper)

For the delivery trucks, I built a specialized tablet interface that acts as both a Point of Sale (POS) and an Inventory Manager.

  • Cross-System Orchestration: The app bridges the gap between the internal CRM and the external Inventory System (SkuVault).
  • Shift Lifecycle: Instead of real-time syncing which is risky on the road, I implemented a "Shift" logic. Sales accumulate locally and are batch-processed upon "Shift Ending" when a stable connection is verified.
  • Rich Product Context: Drivers can pull up detailed allergen and ingredient info offline to assist clients instantly.
Van Keeper Tablet Interface
Van Keeper Tablet Interface

2. Proactive API Design (Broker Portal)

For external agents, the challenge was architectural. We couldn't just "hook up" an API; we had to design it.

  • Contract-First Development: I formulated strict API requirements for the backend team to support Offline Synchronization. We defined exactly how data chunks should be stored and re-transmitted.
  • PWA & Local Storage: The application is architected to save orders locally (IndexedDB) and automatically sync in the background once connectivity is restored.
  • Optimistic UI: The interface assumes success, allowing agents to move through "Eligibility Checks" and "Bulk Ordering" smoothly, queuing server validations for later.

3. Service Reliability

To support the field team, I integrated a "Service Loop" directly into the app.

  • Ticketing System: Agents can report issues or request manual overrides (e.g., for insurance card failures) directly from the field interface.

πŸš€ Business Outcomes

By engineering for the "Worst Case Scenario" (no internet):

  • Business Continuity: Sales and orders never stop, regardless of the nursing home's Wi-Fi quality.
  • Data Integrity: The "Shift Closing" mechanism eliminated inventory drift between the truck and the warehouse.
  • Scalable Foundation: The "Tech Draft" and architecture I provided became the blueprint for scaling the broker network without rewriting the core logic.
Offline Sync Architecture
Offline Sync Architecture
Offline-First Architecture
PWA (Progressive Web Apps)
Optimistic UI / Sync Strategies
Quasar & Nuxt 3