Inspiration

I’d like to say that throughout high school, I’ve been able to overcome my social anxiety and focus on enjoying life beyond my Crohn’s Disease. This all came to a halting crash last year with the arrival of COVID-19. Like many other people around the world, I feel a sense of dread whenever stepping out of the door. How many people will be at the grocery store? Will all of them be wearing masks and following social distancing? However, as vaccination rates rise and hospitalizations drop, I think we can all agree that it’s time to find our normal and regain confidence when going outside. This is what started Oasis.

What it does

Oasis is a web app that allows users to enter their current location and view all grocery stores and medical centers within a 3-mile radius. Each store or center is color-coded based on occupancy level, which is refreshed daily. Users can view details, such as percentage of vaccinated personnel, associated with each location by hovering over the map. Once decided on a location, users can set a route by clicking on their desired location and toggle a Directions tab, which finds the optimized driving, cycling, or walking route depending on the user’s selection. Users can also provide feedback on the occupancy level of a location, if they feel that the real-time data shown on the map is not accurate. Equipped with this accessible data, we hope users can feel less anxious about going to the grocery store or seeking medical attention.

How we built it

The website was built using HTML, CSS, Javascript, and JQuery. The map feature of the website was built using the Mapbox-GL API. The data was pulled and analyzed using the SODA API, BestTime API, and Pandas on Python.

Challenges we ran into

While initially hoping to make a web app that could provide real-time data for all grocery stores and medical centers in the United States, we realized that handling this volume of data was not realistic for our time constraints or available resources. Focusing on reliability of data and importance of user experience, we geolocked the map to Denver, Colorado.

Accomplishments that we're proud of

Only 12 hours ago from writing this, we had never heard of the Mapbox-GL API. Despite being very new to this software tool, we managed to piece together complex elements such as geocoding, route optimization, and integrating real-time data. The Directions feature was especially challenging, and therefore the most rewarding.

What we learned

We learned how to use the Mapbox-GL API to embed a map on an HTML page, display real-time data, connect a geocoding search box, and calculate an optimized route based on the mode of transportation. We also learned how we can use APIs to pull data in real-time rather than from files. We also learned there’s a surprisingly small number of medical centers in Denver despite being the capital of Colorado. And 7 are religiously affiliated.

What's next for Oasis

We hope to expand the scope of Oasis to the United States by obtaining more access to the BestTime API, allowing us to expand past the city of Denver. This way, Oasis can serve a greater population. We’d also like to increase the possible search destinations from only medical centers and grocery stores to recreation centers such as movie theaters and parks. The Directions tab can also be further optimized by factoring real-time traffic data into route calculation. Finally, we would like to create an app with the same features as the website for on-the-go research.

Share this project:

Updates