Algedi

Initial interface
afterwards

Inspiration

According to the CDC, hand-washing is one of the most effective methods of preventing the spread of coronavirus. However, access to restrooms is not always easy to find, especially in public areas. Thus, I decided to build a website that would allow anyone with an internet connection to find the closest restrooms in a city.

What it does

Algedi displays a map with pointers indicating nearby restrooms. Restrooms can be found either by searching near the user as determined by geolocation, or imputing a city name. The city name can be inputted through typing or by voice recognition. Hovering over a restroom pin gives more information like how to access the restroom and a link to the address on Google Maps.

How I built it

I used React for the front-end, with a wrapper for the Google Maps API. Restroom info was received from the refugeerestrooms.org API through Express. Voice recognition was achieved through the Web Speech API from MDN, which uses ML models to interpret speech.

Challenges I ran into

I had much difficulty dropping map points based on data received from the restroom API. Thus, I found a wrapper class for React that allowed me to add points on a map by updating state. In addition, I also struggled with displaying information about restrooms after they had been received. The fix was to store the corresponding information of each point in the state and change the displayed information upon hovering over a point. The voice recognition also required the testing of several different APIs before I settled on the MDN API, which combined the power of ML with an easy implementation.

Accomplishments that I'm proud of

I'm proud of being able to tie together React and Express in an app that runs smoothly and is able to interact with 3rd party APIs. I hope this tool is able to assist others.