Inspiration

We were inspired by the growing need to orchestrate end-to-end logistics in real-time. As trucks traverse vast distances with critical shipments, we wanted to create an intuitive system that allows dispatchers and stakeholders to plan routes, analyze their progress, and visualize everything in 3D or on a map—all in a seamless, user-friendly experience.

What it does

Trackonomy Challenge 2 | Plan, Analyse, Visualize is a three-stage single-page web application that:

Plans a route for a truck based on a chosen departure preference (now, at a certain time, or flexible). Assigns a truck to that planned route and simulates movement in real-time using location data. Visualizes both the route and the truck’s live position on a Google Map, with the option to see a 3D Globe view for a more global perspective.

How we built it

Backend (Node.js & Express): Handles route planning with Google Directions API, storing route geometry and truck data in MongoDB. Maintains real-time simulations via Socket.IO, broadcasting truck movement updates every few seconds. Frontend (React & Material UI): Guides users through a three-step process—Plan, Assign, Track—in an elegant single-page flow. Integrates Google Maps for local route visualization and a 3D Globe (using globe.gl) for global arcs. Uses Socket.IO client to subscribe to live updates, drawing the truck’s location on the map or globe in real time. MongoDB: Stores route plans (including departure details and route geometry) and truck locations (updated in real time).

Challenges we ran into

Dealing with “NaN” Coordinates: Ensuring each route had valid lat/lng data from Google Directions and that we properly handled start/end points to avoid bounding-sphere errors in the 3D globe. Multi-Step UI & State Persistence: Managing form data and route details across different steps, especially upon page reload, required careful use of query parameters and state synchronization. Real-Time Simulation: Getting consistent updates from the backend via Socket.IO and reconciling them with the front-end map and globe rendering demanded thoughtful event handling.

Accomplishments that we're proud of

Successfully creating a comprehensive end-to-end solution that merges route planning, assignment, live simulation, and multi-visualization in a single app. Overcoming data synchronization hurdles Building a 3D globe feature that displays arcs for each route, plus real-time truck icons, to give stakeholders a global overview.

What we learned

How to integrate multiple APIs (Google Directions, Google Maps, globe.gl) and unify them in a smooth user flow. Effective ways to maintain real-time data in React using Socket.IO, ensuring minimal re-renders and stable performance.

What's next for Trackonomy Challenge 2 | Plan, Analyse, Visualize Enhanced Analytics: Display deeper metrics like fuel consumption, traffic-based ETA recalculations, and geofencing alerts. Multi-Truck Routing: Support multiple vehicles on the map/globe simultaneously, each with distinct route overlays. Advanced 3D Visual Effects: Use improved arc animations, dynamic altitude changes, or even time-lapse playback for route replays on the globe. Tighter Security & Auth: Integrate user roles (e.g., dispatcher, driver, manager) with role-based access control and secure endpoints.

Built With

• mern
• socket.io