Outbreak Navigator

Real-time, crowdsourced map app to safely locate essentials and steer clear of danger zones in crises.

Comment 1

Inspiration

The inspiration for this project came from the early pandemic days. When COVID first started to surface, lots of people rushed to essential stores and cleared all their inventories. This moment in time hits home for me as I actually have friends who's grandparents got hurt in all the chaos just trying to buy some toilet paper. This project attempts to combat this problem by crowdsourcing information from users to provide real time information about what is currently happening at a place at a given time. It also includes other useful information for a pandemic / society collapse event such as danger zones and information on essential stores.

What it does

Think of my app like Waze but instead of crowdsourcing traffic information, it crowdsources information about essential locations.

Map 1: Essential survival map This map populates various location pins throughout the map that users can select to get information about. Alongside information, a modal pops up containing real time updates from other users that are currently at the location. Say for example we are at the start of COVID again and you want to go to the mtero near your house, little do you know there is a riot there and people are clearing shelves of all essential goods. Users in the area can post a comment containing that information to our database which will then be fetched for all users looking at that location. Users can also filter the types of locations they want to see using a filter drop down.

Map 2: Danger Zone Map The danger zone map utilizes GeoJSON data from Princeton University to populate polygon objects throughout the map. Each polygon indicates the area it covers is a danger zone due to high population density.

Both maps Both maps contain default locations users are able to explore such as the OSU campus, the Googleplex offices in San Jose, and one of the central Pokemon stores in Japan. Users can also drag and drop the pin all throughout the map. And lastly, both maps contain an autocomplete feature where users can type any address in the world and be recommended locations based on the input as with any traditional map.

How I built it

The frontend was built using React, Material UI, and bootstrap alongside 2 different packages for google map components. The backend enviornment was built in Node.js, and the server was in Express.js. I used the Google Places API, the Google Maps API, and the Google Geocode API. Fortunately Google made these APIs really easy to use by building a Node.js library to support its various Maps services. The database for crowdsourced comments is in MySQL and the schema for the table is attached below. The biggest aid that I had that I also want to note although not code related was the use of Postman to test my endpoints, It really reduced the amount of API calls I had to make during testing as the Places API is quite expensive and adds up quick.

Challenges I ran into

The biggest challenge I had was regarding documentation. There are so many different packages and libraries built for the various Maps APIs it became very hard to find documentation for packages that were compatible with each other. For example, as mentioned in the demo, it was hard finding documentation for the maps autocomplete feature that relied on frontend component libraries that look good. It deffinetly took a couple hours to fix. Furthermore, the package used for the essential places map is very new so its documentation was also limited as a whole. This was the "vis.gl/react-google-maps package". Fortunately Google has a great playlist to document how to get things started, but beyond the bare basics of just rendering a map, any documentation on added functionality is limited.

Accomplishments that I am proud of

I'm really proud that I was able to get this project done. I am used to doing hackathons in groups and so this was my first time working under a time constraint alone.

What I learned

The most notable thing I learned or rather improved upon were my research skills. I've never built an app that had this many API integrations before and so reading and researching how to make everything work taught me a lot. Also, I learned about the basics of feature driven development and how having a development framework can help with the creation of an app.

What's next for Outbreak Navigator

I think the most important aspect is lowering the API costs by cacheing results instead of having to make new requests that populate the same data with very minimal differences. I racked up nearly $60 in fees throughout the development process and I think in an actual production environment this price must come down to be feasible.

Share this project:

Updates