ABC Logistics: Real-Time GIS Tracking Platform

Quick Summary

• Role: Lead Developer & Frontend Project Manager
• Duration: January 2023 – October 2024 (1 year 10 months)
• Modules: Identity, Operation Tracking, Reservation, Warehouse, Demand Management
• Real-time: WebSocket broadcasts + event-driven status streams
• GIS: OpenStreetMap + Google Maps + Mapbox (multi-provider)
• CI/CD: Bitbucket Pipelines, Docker, blue-green, approval gates
• Mobile: React Native (iOS/Android)
• Data/ML: MongoDB, PostgreSQL/PostGIS, Elasticsearch, Django API, OSRM, scikit-learn/PyTorch
• Delivery: Self-hosted GitLab CE pipeline → EC2; continuous security scanning

Technical case studies

Backend and frontend experiences were separated into separate playbook series (Case Studies):

• Logistics Micro Frontend Platform
• Fleet Wait Geofence
• Partner Ferry Booking Desk
• Logistics Ops Control Plane
• Logistics Polyglot Data Platform
• Fleet Route Intelligence ML
• Logistics Django API & Delivery

Logistics Industry Digital Transformation Platform: Enterprise Scale with Micro-frontend Architecture

For ABC Logistics, I developed real-time logistics tracking infrastructure that integrates different parts of the operation into a single platform. The goal was to manage distributed processes with central visibility and synchronize the data flow between the field and the center.

We chose the micro-frontend approach to clarify domain boundaries and enable teams to deploy independently. By integrating real-time GIS flow into this modular structure, we created a consistent tracking experience on both web and mobile sides.

Problems and Constraints

Problem

• Operational processes were dispersed across different systems; There was no real-time visibility.
• Vehicle and shipment tracking was manual; Customer notification was delayed.- Mobile access was limited; field teams could not work with up-to-date data.
• Data analysis and reporting were insufficient to support strategic decisions.

Restrictions

• Multiple GIS providers and different API behaviors
• High data volume and instant location updates
• The need to reduce inter-module dependencies
• integration with legacy systems and team capacity limits

Solution Summary

• Identity and Authorization: A central identity module was installed with JWT-based session management and RBAC.
• Operation Tracking: Vehicle and shipment flows can be monitored in real time.
• Reservation and Planning: Capacity, timing and resource planning are gathered in a single panel.
• Warehouse Management: Stock flow and warehouse movements are linked to operation screens.
• Demand Management: Capacity/demand forecasts supported with data scraping + ML pipeline.

Architecture Overview

• MFE Composition: Shell implementation + Module Federation runtime merging with remote modules.
• Authentication: Central identity module; All modules can be accessed with a single session.
• Shared Libraries: interface kit and common utility packages; Semantic versioning for version compatibility.
• Runtime Loading: Remote entry points are loaded based on media; Gradual expansion with feature flag.
• Error Fallback: Module based cascading degradation when remote module cannot be reached.

Real Time Tracking and GIS

Location data from GPS devices is verified in the backend, cached via Redis, and broadcast to clients via WebSocket channels. Thanks to event-driven flow, order statuses and vehicle movements appear simultaneously.On the GIS side, OpenStreetMap, Google Maps and Mapbox were used together. This structure reduced the risk of supplier lock-in and optimized the cost/performance balance according to the usage scenario. Clustering, viewport filtering, and geofencing have been implemented to reduce map density under load. In scaling up, WebSocket gateways are designed to be horizontally scalable (metrics can be added: number of devices, event frequency, concurrent users).

DevOps and Release Strategy

CI/CD pipeline set up with Bitbucket Pipelines + Docker. Environment separation (development/pre-production/production) clarified; After the release candidate was confirmed in pre-production, production started. Seamless version transitions were aimed with blue-green distribution, and manual approval gates were used for critical versions.

Impact / Results

• Operational efficiency increase - 40% (can be added if verified) - (period: [X], baseline: manual processes before conversion, measurement method: process times + labor hours)
• Customer satisfaction increase - 35% (may be added if confirmed) - (period: [X], measurement method: CSAT/NPS)
• Operational cost reduction - 25% (may be added if verified) - (period: [X], baseline: financial expense reports)
• Availability - 99.9% (may be added if verified) - (period: [X], measurement method: CloudWatch + uptime monitoring)
• Deployment frequency - weekly to daily - (can be added if verified) - (measurement method: CI/CD release logs)
• Mobile downloads- 10k/first 3 months (may be added if verified)- (measurement method: App Store/Play Console reports)

Basic Tradeoffs

• Micro-frontend architecture enabled independent deployment, but version compatibility and common dependency management added operational overhead.
• GIS vendor mix reduced the risk of vendor lock-in, but increased maintenance cost and API differences.- Real-time streams provided speed; idempotency, retry, and consistency management added extra complexity.

Technology Stack (Categories)

• Front-End: React, TypeScript
• MFE: Module Federation, Shell + Remote module structure
• Real-time: WebSockets, event-driven streaming
• GIS: OpenStreetMap, Google Maps, Mapbox
• Mobile: React Native
• Data/ML: MongoDB, Redis, Random Forest
• DevOps: Bitbucket Pipelines, Docker, AWS

Key Technologies

React, Micro-Frontends, Module Federation, WebSockets, GIS, React Native, AWS, CI/CD, MongoDB, Redis, OpenStreetMap, Mapbox

Learnings

• DDD-based module boundaries significantly reduce operational cost at micro-frontend scale.
• In real-time streams, consistency and traceability are as critical as speed.
• GIS provider mix provides cost/performance flexibility but requires operational coordination.

FAQ

Why was micro-frontend preferred?

So that operation modules can be developed independently and distributed separately.

What was the advantage of Module Federation?

It strengthened the modular structure by providing module loading and version independence at run time.

Why were multiple GIS providers used?

To reduce the risk of supplier lock-in and optimize cost/performance in different scenarios.

How has real-time streaming scaled?

WebSocket gateways are designed to be horizontally scalable; Load balanced with caching and rate limiting.

How was real-time consistency managed?

With idempotency, retry policies and event-driven balancing strategies.

How was the CI/CD process managed?

Seamless versioning was achieved with staging verification, manual approval gates, and blue-green deployment.### How is offline behavior configured in the mobile application? With the client-side queuing and resynchronization approach, data was sent when the connection was restored.

Related Projects

• Kayra Export: Marketplace & E-Commerce Platform
• Rapid Render: Real-Time 3D Product Configurator
• Dunelm: LiDAR Supported AR “View-in-Room” Experience