COVID-19 is by far the biggest crisis faced by the world in 2020. Recording more than 3000 deaths globally, the epidemic is currently brewing up concerns from all regions. Even in low-risk regions like Vancouver, the communal panic is causing people to scramble for masks, toiletry, emergency supplies, etc, leading to an overall decrease in supplies for those in actual need. Our project aims to support these individuals in finding the closest resource for their needed supplies, in attempt to devise a more efficient method of fairly distributing the available medical aid.

What it does

Given the location of the user, our web app pins the nearest drug store that carries one of the three most needed supplies in store: masks, hand-sanitizers, and toilet paper. The main page of the app is an interactive map interface, which the user can scroll, zoom in/out, rotate the screen as needed. On a sidebar, the app also ranks the results in terms of proximity from the user’s current location. If there are no available stores, the app suggests alternative methods of accessing medical aid by directing the user to recipes for DIY hand-sanitizers, how to make hand-made masks, etc.

How I built it

We built our product using both java and javascript. In java we implemented the Google places API, retrieving real time data about the nearest grocery stores from our location. From there we attempted to get data from the grocery stores about the availability and price of the desired products. In javascript, using the Maps javascript API we started designing our website. We designed buttons the user could select to find either toilet paper, face masks, or hand sanitizers. This seamlessly transitioned the user to the closest store, placing a marker on the place retrieved from our places API. In addition, the sidebar shows additional stores that still carry the product. If no products are found, pressing another button will lead the user to a new webpage filled with google searches of DIY recipes to make the desired products.

Challenges I ran into

We ran into countless challenges as we were developing our project. One of our main issues in the beginning was using an API in our program as none of us were experienced in using them. We also ran into issues of connecting the frontend with the backend. Some of our challenges we ran into was deciding on which language to code certain parts of our program in as we are all fairly new to programming. So, we did not all know the same languages which created challenges in piecing together the whole project.Another challenge we ran into was with certain websites preventing people from scraping their data. This caused us to be unable to scrape data from those websites despite our continuous efforts.

Accomplishments that I'm proud of

We are really proud of the improvements we made both in front end and back end development. As first time hackathon participants and first year students, we have limited experience with both components of making a website. This project showed us the challenges and obstacles that many programmers face. From starting with a blank slate to having a finished, somewhat usable product, we were able to work together as a team and pull through. For front end, we were really proud of making the slider work and displaying the location pin. We were able to learn a new functionality and for some of us even a whole new language.

What I learned

There were a lot of skills we learned and developed throughout cmd-f. The skills we developed relate to both programming and communication skills. We challenged ourselves to develop a program that we strongly believe in and made us step out of our comfort zones. Some skills we learned is how to implement an API into our program. APIs were something that our group was very inexperienced with however, after countless struggles and hurdles along the way we were able to successfully implement the API into our project. Another skill we learned throughout cmd-f was how important effective communication between a team is. We learned how we should communicate more effectively to work together.

What's next for Hack The Corona

A component that we would like to incorporate into our final project is the element of price of these medical supplies. By creating an interactive slide bar across a general price range, or the option to filter the results by increasing price, we would allow the users to consider the real-time price of the supplies when choosing a store to buy them from. This could widen the range of users we could target, as it accommodates for the various financial availability of the individual user. Another idea that we had was to imitate a functionality of Google Maps, where if the user clicks on a store in the sidebar, the map would automatically zoom in/out to display that location in the center and provide more information in the form of a pop-up window next to the location pin.

Built With

Share this project: