SafeSpace

creating ratings
main landing page
multi-factor authentication

Inspiration

I recently took the public transportation system, and although it was great for getting me around, there were some times that I could have felt a little more safe. I realized that for the minority of the population who uses public transportation regularly, an underrepresented population, they faced this fear every day. Thinking specifically for women who are more vulnerable, I want to make a website that would allow women to share their experiences and help each other feel more safe when taking public transport or walking around.

What it does

SafeSpace is a map based software that allows users to report both safe passages and unsafe passages. This way, when someone wants to check how safe their route is going to be, all they have to do is check their route against community posted safety ratings. This ensures that people can have the confidence to go wherever they want without having to feel unsafe.

How I built it

I used the Google Maps API to construct a maps in the web browser, modifying and integrating with it in order to build our location safety rating functionality on top of it. The markers and cluster markers are custom made and so are the information box that pops up when you click on a marker. Using Supabase Authentication, I build a full authentication flow, allowing the use of both Email and Google along with the option to enable Multi-Factor Authentication for the additional security. Supabase Database and the Prisma ORM is used for database operations, which are hidden behind secure API endpoints. Railway was linked to my Github repo and automatically deploys new commits.

Challenges we ran into

One of the main challenges I ran into was integrating with the Google Maps API. Given that I am using React and the Google Maps API loads directly into HTML, I needed a way to portal my React into the Google Maps HTML. This was difficult and took a lot of trial and error. Additionally the custom cluster markers required me to sift through an open source library that unfortunately did not have a ton of documentation. Another challenge I faced was going from development to production; there were some key differences between development and production that had to be sorted out before the production website worked.

Accomplishments that we're proud of

I am really proud of how responsive and clean the Maps is. The integrations inside (pop up) and outside (side bar) the map connect well using the portal I built, resulting in a smooth user experience. I also enjoy how complete and simple the Authentication flow is.

What we learned

I learned a lot about the Google Cloud API service because this was my first time using it. It is definitely a very powerful service that I hope to continue learning more about.

What's next for SafeSpace

I hope to integrate more user experience features such as a way to modify previous information from username to ratings. One big feature, if possible, would to have location A to location B route planning, which then would allow me to give a summary of the safety of a whole route compared to just a single location. This would greatly improve the user experience because I imagine most people want to travel rather then stay in a single point.