Inspiration

In critical emergencies, every second is crucial. Even though we have advanced technology in the medical field, our very first chain of the survival chain is still dependent on incomplete systems and fragmented manual callings, which cause delays and cost precious lives. We were inspired to build CodeBlue because we believed that a platform like this is badly needed. Our aim was to develop a centralized, smart solution for emergency response, which would connect all the stakeholders, such as citizens, fleet managers from hospitals, and dispatchers, in a unified system.

What it does

CodeBlue is an end-to-end solution for optimizing the entire emergency dispatching process, from requesting an ambulance to ambulance tracking. This includes the following four types of users: Citizens (Mobile-first): When there is an emergency situation, citizens have to press one button on CodeBlue and request an ambulance right away. Afterward, without even logging in, the application will immediately locate the citizen and direct the closest ambulance to assist, showing him or her the precise ETA via Google Maps. Drivers (Mobile/Tablet): CodeBlue sends instant notifications about dispatches to the ambulance driver. Once he or she accepts the notification, the application provides exact coordinates of where he or she should go. Hospital Administrators: Each hospital has its own dashboard that enables managing the hospital's ambulances: tracking their status (idle, en route, busy), and overseeing ongoing dispatches. Superadmins/Dispatchers: Central dispatchers can look at a bird's eye view of all live ambulances in the area and view analytics (volume per 30 days and utilisation) on a heat map.

How we built it

CodeBlue was designed as a resilient mono-repo which is built with state-of-the-art web technologies: Frontend: The frontend application was developed using React, TypeScript and Vite for lightning-fast performance. For styling, we leveraged the power of TailwindCSS, while Recharts was used for the analytics dashboard. Geospatial visualization was achieved with the help of Leaflet that allows to display live locations of ambulances and emergencies. Backend: The backend relies on Node.js and Express, with Socket.io being employed to facilitate real-time bi-directional communications between the dispatch center and the ambulances. Database: The database chosen was PostgreSQL, provided by Supabase and storing the data on users, fleet, and calls. Intelligent Dispatching: To identify the closest ambulance from those available in response to an emergency situation of a citizen, the application uses the great-circle distance formula known as the Haversine formula. The great-circle distance $d$ between two points on the surface of the Earth specified by their latitude ($\varphi_1$, $\varphi_2$) and longitude ($\lambda_1$, $\lambda_2$) is given by: $$ d = 2r \arcsin\left(\sqrt{\sin^2\left(\frac{\varphi_2 - \varphi_1}{2}\right) + \cos(\varphi_1) \cos(\varphi_2) \sin^2\left(\frac{\lambda_2 - \

Challenges we ran into

  1. Real-Time State Synchronization: Keeping the map state in sync with that of the Citizens, Drivers, and even the Superadmin Dashboard in real-time proved to be a challenge. We had to set up Socket.io broadcasting protocols in place to prevent anyone from accessing outdated location information.
  2. Race Conditions in Assignment Process: There were instances wherein multiple dispatchers would attempt to assign or reassign an ambulance at the same time. To fix this problem, we employed state locking mechanisms and set a maximum 2-minute allowance in the process of reassigning a dispatched ambulance.
  3. Geographic Overlapping Issues: Adding the leaflet SDK within React applications created occasional overlaps in terms of visual layer placement (map hints overlapping navigation controls, for example). We made sure to work on z-index values to create the perfect mobile user experience for citizens and drivers alike.

Accomplishments that we're proud of

  1. Seamless UX for Citizens: During medical emergencies, mental loads are high. Our team successfully created a user-friendly mobile-first interface where no one has to go through unnecessary sign-ups, but everyone can send an SOS right away.
  2. Concurrency Problem Solved: We successfully introduced strict state locking rules that eliminate dispatch race conditions (like multiple dispatchers giving orders for the same ambulance) as well as restrictions like 2-minute limitation on reassignments.
  3. Superadmin Dashboard: Creating a scalable Superadmin Dashboard able to deal with concurrent fleet information, hotspots, and statistics without complicating the user interface.

What we learned

The creation of CodeBlue provided invaluable experience in developing applications in full-stack architecture. We gained an understanding of how to properly set up a TypeScript monorepo, create robust WebSocket connections for tracking purposes, and develop a fast-reacting UI that will work equally well on the panicked citizen’s phone as it would on the dispatcher’s multi-monitor desktop computer. Moreover, dealing with geospatial data made us understand how distance-based queries work.

What's next for CodeBlue

  1. AI-Assisted ETA & Routing: Machine learning models will be integrated to help estimate ETAs and route optimizations based on traffic patterns, weather conditions, and timing.
  2. Integration with Municipal Traffic Systems ("Green Corridor"): In partnership with municipal traffic systems to help synchronize traffic lights in order to clear a "green corridor" for ambulances responding to emergencies.
  3. Integration with Wearable Health Technologies: Citizens have the option to link their wearable technology data to the app, which can provide the heart rate and blood oxygen levels for the citizen in real time when the ambulance is on its way.
  4. Multilingual Support: Adding language support in the Citizen app in addition to English and enabling voice activation for the SOS call button.
Share this project:

Updates

Submission history