Inspiration

When reading the news about a female Seattle resident, Morgan Zion, being attacked when exercising in Seattle's Capitol Hill district, we felt sad and concerned. As female-identifying students living in big cities with high street crime rates, knowing that we no longer felt safe in public areas struck us. We want to take action to ensure our public area remains a safe place for our community to enjoy, walk in, and interact with others.

What it does

“Safe Together Seattle” is a website supporting female-identifying users to find real-time nearby safe places and a local community.

On the ‘Map’ page, users can check the real-time open buildings where they could enter for help in cases of emergency, when they are being stalked, or if they simply need a rest. Similarly, they could check the nearby police stations where they could seek protection.

How we built it

We used Google Maps / Places / Geolocations API to detect the user’s current location, display the map, and add/remove selected markers on the map. We used HTML, CSS, and JavaScript to build up the front-end interactive webpage We used Figma to design the layout, font sizes, topography, and the color palette We added Firebase to the javascript project and use Firebase Authentication to let users sign in or sign up. This is very important because we want to protect users’ privacy. We used Azure static web app to host our website.

Challenges we ran into

We’re all new to Google Map API so learning it within 48 hours is a big challenge. (But we made it!) We cannot adjust the scale of the Google Map Control Bar which is not user-friendly. We solve it by creating personalized control bars using HTML,CSS, and javascript

Accomplishments that we're proud of

We established a pipeline of adding markers to the map so that we could easily add new options of locations (eg. Hospitals, Convenient Stores, etc) in the future We created a cohesive structure for the website that can host many features in the future (forums, user to user interactions). We have a mostly functioning website that users can interact with.

What we learned

What is Google API and how to use it. How to use JavaScript. How to use HTML/CSS to visually structure our website. How to use Firebase for authentication and storing user information. How to use Azure to host the website.

What's next for Stay Safe Seattle

Add ‘Directions’ function to map Improve the accuracy of opening buildings (since the ‘open_now’ attribute of Google Places we use is optional, we plan to match real-time and mandatory attribute (open hours) to improve accuracy) Build Up a Forum webpage. The initial purpose of having user log-in / out system is to create a localized female supporting community. We plan to create a forum where females could ask for help or simply make friends

Share this project:

Updates