Mini Mobility Race Simulator

• 

  Mini Mobility Race Simulator Mockup

Inspiration

In Formula E, MotoGP, and autonomous mobility systems, performance is sometimes a question of how fast data-driven decisions can be made. We envisioned developing a light solution to simulate and visualize race dynamics — from pit stops to overtakes — without the need for complicated physics engines. Our aim was to integrate mobility modeling, live data visualization, and competition analytics into a single interactive web tool that could simulate the excitement of actual racing.

What it does

The Mini Mobility Race Simulator simulates a virtual racing event in which multiple autonomous agents (cars, drones, or delivery bots) navigate the event track based on variable speed, energy consumption, and decision-making logic. The simulation maintains a continuously updating live scoreboard with ranking positions, average speeds, and results of events such as pit stops or crashes. Users can watch all events unfold visually in real-time via a web interface - similar to real-world racing telemetry systems adapted to a simplified and entertaining format.

How we built it

-We created a prototype based on: -Frontend: React + Canvas API for the race visualization and animation -Backend (optional): Node.js + Socket.io for real-time event streaming -Logic Engine: A lightweight Javascript model with the logic for controlling the agents’ movements, the random behavior, and the events that will trigger. -Leaderboard Module: Instant state updates in React to track ranks and stats in real-time. -Styling: Tailwind CSS for a nice modern dashboard styling. -Overall, this technology stack enables it to be completely browser-based and fast, without any need for heavy infrastructure.

Challenges we ran into

-Creating agent movement logic that appears natural without implementing full-scale physics simulation. -Synchronizing the state of many agents to the live leaderboard in real-time. -Balancing visual performance (smoothness of animations) with data updates across various screen sizes. -Ensuring the simulation is realistic but light enough to be run on fundamental devices.

Accomplishments that we're proud of

-Successfully developed a fluent, real-time simulation, that functions entirely in the browser. -Built a modular system for easily adding new mobility agents (cars, drones, bots). -Created a clean, professional UI/UX which makes the simulator fun to watch. -Incorporated a live leaderboard and stats engine — making data a live visual experience.

What we learned

-How to design event-driven simulations using React states and asynchronous updates. -The importance of optimizing animations for real-time data-driven visualization. -How racing principles like lap timing, pit stops, and overtake logic can be modeled using basic math and probability. -Collaboration, debugging, and rapid prototyping within short deadlines — essential hackathon skills.

What's next for Mini Mobility Race Simulator

-Incorporate AI-powered agents that learn race strategies over multiple runs -Implement data export capabilities for analytics and ML model training. -Provide a multiplayer or remote viewer mode, allowing others to participate in or view the race live. -Extend capabilities to simulate city traffic or drone swarm behavior in addition to racing. -Deploy the app online using real-time hosting on the backend for live or real-time events and competitions.

Built With

• canvas
• javascript
• node.js
• react
• three.js