Shifl — Real-Time Shipment Tracking & Logistics Management Dashboard

Project Overview

Shifl is a New York-based digital freight forwarding platform founded in 2019, with operations across China, India, Vietnam, Philippines, Bangladesh, and Georgia. Their product digitises what is traditionally a fragmented, paper-heavy industry — giving importers and exporters a single platform to book, track, and manage international shipments from origin to final delivery.

The platform serves two audiences: shippers (importers/exporters managing cargo movement) and industry providers (carriers, terminals, freight forwarders, trucking companies, and warehouses). My role was frontend development of the web application — building out core modules of the SPA/PWA that shippers interact with daily.

Business Outcomes

• Gave shippers end-to-end visibility into cargo status, replacing email chains and phone calls with a live tracking dashboard
• Enabled proactive disruption management through real-time ETA change notifications, reducing surprise delays for operations teams
• Accelerated booking workflows with structured digital forms replacing manual quote requests, cutting booking time significantly
• Supported Shifl's expansion into fintech (Shifl.Capital) by providing a clean UI foundation for payment and banking features integrated into the logistics flow
• Contributed to SHIFEX — a proprietary ocean spot freight rate index for Trans-Pacific routes — giving shippers transparent market rate benchmarks directly in-app
• Delivered a PWA that works across desktop and mobile without a separate native codebase, reducing engineering overhead

What I Built

• Shipment tracking dashboard — live overview of all active shipments with status indicators, ETA countdowns, milestone timelines (gate-in, departure, arrival, delivery), and container-level detail views
• Booking management module — multi-step booking flow covering route selection, cargo details, container type, and approval routing; integrated with carrier and route data from the backend
• PO & consolidation management — purchase order linking to shipments, with consolidation grouping for LCL cargo across multiple POs
• Document centre — upload, categorise, and download shipping documents (Bill of Lading, Commercial Invoice, Packing List, Customs entries) per shipment
• Notification system — in-app notification feed for ETA changes, booking approvals, customs holds, and delivery confirmations
• SHIFEX rate viewer — embedded ocean freight rate index displaying real-time spot rates for Trans-Pacific trade lanes with historical trend charting
• Shifl.Capital UI — payment dashboard surfaces for no-fee ACH transfers and credit card payments with cashback, integrated into the shipment payment flow
• Carrier & provider directory — filterable listing of terminals, CFS sites, trucking partners, and exam facilities with status and contact details
• Customs clearance tracker — step-by-step customs status views tied to individual shipments, surfacing exam holds and release confirmations
• Open API integration UI — settings panel for API key management and webhook configuration for customers integrating Shifl into their own systems

Stack

• Vue.js 3, TypeScript
• State Management
• Pinia
• Custom component library + Tailwind CSS
• Vue Router 4
• Chart.js / Vue-Chartjs
• Axios
• WebSocket (live shipment status)
• Google Analytics 4 (G-C9FZW10SSE)
• Vite PWA Plugin (Service Worker, offline support)
• Vite
• pnpm
• AWS (S3 + CloudFront)

Rendering Strategy

Progressive Web App (PWA) with Client-Side Rendering, built on Vite and deployed via AWS CloudFront.

• Registered Service Worker enables offline fallback and installability on mobile and desktop
• Route-level code splitting keeps the initial bundle lean; heavy modules (charting, document viewer) are async chunks loaded on demand
• GA4 integrated for page-level and event-level analytics tracking across all key user flows (booking initiated, shipment viewed, document downloaded)
• API responses for reference data (carrier lists, port directories) are cached at the service layer to reduce repeated round-trips
• PWA manifest configured for both iOS (Apple touch icons, status bar) and Android home screen installation

Key Engineering Challenges Solved

1. Real-time shipment status without polling overload Shipment statuses change as vessels move, containers get gated in/out, and customs updates arrive. Solved with a WebSocket connection that pushes milestone updates to the active dashboard, with a fallback to periodic polling for inactive tabs — keeping the UI live without hammering the API.

2. Complex multi-step booking flow with branching logic The booking flow branches based on shipment type (FCL vs LCL), cargo category, and route availability. Built a wizard-style form with a state machine approach — each step validates independently, and the flow tree is driven by config rather than hardcoded conditionals, making it easy to add or remove steps per shipment type.

3. Document management with large file handling Shipping documents can be large PDFs. Built a chunked upload flow with progress indicators and retry logic on failed chunks, ensuring document uploads survive unstable connections — common for users operating from ports and warehouses.

4. Consolidating data from multiple upstream sources Shipment data is assembled from carriers, terminal APIs (via Terminal49 partnership), customs systems, and Shifl's own booking engine. Built a normalisation layer in the frontend service classes that maps inconsistent field names and status codes from each source into a unified shipment model, so UI components never deal with raw third-party shapes.

5. SHIFEX rate index with live data refresh The freight rate index needs to feel live without overwhelming the data pipeline. Implemented a stale-while-revalidate pattern: the last fetched rate data renders immediately from cache while a background refresh runs, updating the UI once new data arrives — giving users instant load with up-to-date rates.

6. PWA offline experience for field users Users in ports and warehouses often have unreliable connectivity. Configured the Service Worker to cache the app shell and static assets aggressively, and implemented an offline banner that gracefully degrades data-heavy views (showing last-known state with a staleness indicator) rather than blank screens or error states.