Traceo — Field Force Tracking & Geofenced Route Operations
Core Mission: Bridge the field-to-office gap by enforcing physical proof-of-presence, eliminating ghost visits, and providing uninterrupted offline reliability.
1. Executive Summary
- A real-time supervisory web portal for route scheduling, point-of-interest sequencing, and live monitoring.
- An offline-first Progressive Web App (PWA) for field reps that enforces physical proximity (default 30-meter geofence) before unlocking visit check-ins.
- A local IndexedDB queue with idempotent background sync that guarantees zero data loss in low-connectivity or dead-zone environments.
100%Verified check-in authenticity via hardware GPS
0Visits lost in remote offline territories
< 30mConfigurable geofence radius threshold
3xFaster route creation and stop reordering
2. The Problem & Industry Pain Points
A. "Ghost Check-ins" & Fraudulent Field Reports
B. Chaos in Recurring Route Planning
C. Severe Connectivity Degradation in Remote Territories
D. Single-Active-Route Conflicts
3. Product Vision & Core Architecture
- Hardware-Enforced Proximity: The client UI physically disables check-in submission until GPS telemetry confirms the agent is within the geofence radius. The backend repeats the exact mathematical verification upon ingestion.
- Offline-First by Design: The mobile PWA treats network connectivity as an opportunistic enhancement, not a requirement. All reads and writes target an IndexedDB local store first.
- Deterministic Multi-Tenant Governance: Hierarchical RBAC (SUPERADMIN → ADMIN → REP) enforcing strict resource quotas (maxReps, maxPoints, maxRoutes) and isolation.
4. Backend Engineering Deep Dive (NestJS + Prisma + PostgreSQL)
A. Geofencing & Haversine Distance Calculation
Typescript
B. Idempotent Batch Synchronization Pipeline
- IDOR Prevention: Ensures REP users can only submit logs where repId === currentUser.id.
- Idempotency Guarantee: Checks idempotencyKey (UUIDv4) to prevent duplicate processing on network retries.
- Route Point Verification: Confirms the target route stop exists in the database.
- Ownership Verification: Validates that the active route is currently assigned to the submitting representative.
- Temporal Date Resolution: Verifies that the visit occurred on a scheduled date according to weekly recurrence rules (isRouteScheduledOnDate).
- Server-Side Geofence Audit: Recomputes distance against settings.geofenceRadius. If distance exceeds the threshold, the visit is flagged as REJECTED with an explicit reason string.
- Daily Limit Guard: Enforces that only one successful SYNCED check-in is logged per point per day.
Typescript
C. Data Schema & Relationships
Prisma
5. Frontend & Mobile PWA Engineering (React + RTK Query + IndexedDB)
A. Mobile-Optimized Field Agent PWA (/rep)
- Continuous GPS Watcher: Real-time polling of browser Geolocation API with accuracy indicators (accuracy < 15m).
- Dynamic Proximity HUD: Live distance calculation showing meters remaining until within range.
- Visual Radar Animations: Pulse indicators highlighting active target points on the interactive Leaflet map.
- Modal Check-In Bottom Sheet: Fluid bottom sheets for rapid note entry and instant local submission.
Typescript
B. Supervisor Operations Portal (/admin)
- Live Activity Feed: Real-time stream of incoming check-ins, reporting agent identity, client site, timestamp, and registered check-in distance.
- Route Sequencer: Interactive ordering of client stops with immediate sequence re-indexing and rep assignment.
- Interactive Geospatial Dashboard: Leaflet map visualizer rendering agent paths, point clusters, and visit status color codes (Green = Visited, Grey = Pending, Red = Rejected).
C. Route Scheduling & Geospatial Point Management
Route Sequencer & Cyclical Assignment
Geospatial Point-of-Interest Directory
6. Design System & UI Craft
A. Color Architecture (HSL Design Tokens)
- Brand Teal (#155E63 / 185 65% 24%): Primary brand identity, communicating precision and enterprise reliability.
- Verified Emerald (#1F9D55 / 146 67% 37%): Clear visual confirmation for authenticated visits within geofence range.
- Alert Crimson (#C0362C / 4 63% 46%): Instant feedback for distance breaches or route discrepancies.
- Surface Neutrals (#F5F7F5 / #15211E): Low eye-strain background and ink contrast adhering to WCAG AAA standards.
B. Multi-Tenant Governance & Operational Flow
Field Agent Quota & Role Administration
Standardized Field Workflow Guides
7. Measurable Impact & Production Results
8. Key Technical Takeaways
- Dual-Layer Geospatial Defense: Client-side geofencing is essential for user experience (giving immediate feedback), but server-side recalculation is the only way to guarantee tamper-proof security.
- Idempotency is Mandatory for Offline Sync: Offline queues will experience network drops mid-request. Assigning immutable client-side UUIDs (idempotencyKey) ensures network retries never duplicate transactional data.
- Prisma Lean Selects Prevent Mobile Over-Fetching: Mobile field agents require lean payloads. Explicit Prisma selects trimmed unnecessary payload weight by over 70%, accelerating offline synchronization over degraded mobile networks.
Case study written and engineered for portfolio presentation. Built with NestJS, Prisma, PostgreSQL, React 18, RTK Query, and Leaflet.