SupplyDash

Inspiration

The idea was inspired by my uncle’s ongoing frustration while managing his import–export business. His supply chain dashboards were cluttered with static charts, spreadsheets, and endless KPIs — yet they still failed to answer a simple question:

“Who’s actually performing better?”

Watching him struggle to interpret disconnected data made me realize how little life there was in traditional analytics tools. That’s when the idea struck — what if we could visualize supply chains like a race, where each shipment competes to reach its destination?

This concept aimed to turn dry logistics metrics into something visual, dynamic, and instantly understandable.

What it does

Supply Chain Race Visualizer transforms real-time delivery data into an interactive race simulation, where:

Each shipment becomes an agent competing to reach its endpoint.

Suppliers are ranked on a live leaderboard based on delivery speed, reliability, and delay rates.

Users can filter by region, supplier, or time window to instantly see who’s leading, lagging, or stalling.

This gamified approach helps logistics and operations teams spot inefficiencies faster than with traditional dashboards.

How we built it

Frontend: Built using React and D3.js to enable smooth, data-driven animations showing shipments in motion.

Backend: Developed with Node.js and Express, powered by MongoDB for real-time shipment tracking.

Data Flow: Implemented WebSockets and Socket.io to stream live updates and synchronize race positions.

Visualization Logic: Race progress was computed using:

Progress = Distance Covered x 100 Total Distance

This formula allowed us to dynamically update agent positions in real time.

Built With

• amazon-web-services
• canvas
• chart.js
• chart.js-(for-secondary-analytics)-development-tools:-vs-code
• d3.js
• express.js
• express.js-database:-mongodb-(via-mongoose-orm)-real-time-communication:-websockets
• figma
• git
• github
• mongodb
• node.js
• postman
• react
• rest
• rest-apis-for-mock-logistics-data-version-control:-git-&-github-visualization-&-performance-tools:-canvas-api
• socket.io-cloud-&-deployment:-vercel-(frontend)-and-render-/-aws-ec2-(backend)-data-simulation-&-apis:-custom-shipment-data-simulator
• tailwind
• tailwind-css-backend:-node.js
• vscode
• websockets