Guardian

Texts being automatically sent to multiple emergency contacts from our application at the same time, and customized to the recipient.

Project Track

Women Empowerment & Social Good

Inspiration

50% of women feel unsafe walking alone at night. According to research conducted by YouGov RealTime, most American women are over three times as likely as men to feel unsafe doing day-to-day activities such as getting a taxi or ride-share by themselves. In the same survey, one in five women stated that they often or always feel unsafe going on a first date, while only 9% of men stated the same thing. 61% of American women also stated that they _ regularly _ take steps to avoid being sexually assaulted (Source: https://today.yougov.com/topics/lifestyle/articles-reports/2019/03/28/women-safety-sexual-assault-awareness).

Recently, many of us have come across videos on social media (tagged #SAFETYCALL) that are created with the intention of helping people get out of an uncomfortable and potentially dangerous situation by simulating a phone call from a loved one (example: https://www.youtube.com/watch?v=TKoWbGuRmKQ). The audio would generally go along the lines of “Hey! You’re on your way home right? Awesome, I’ll wait for you outside,” with pauses in the middle for someone to respond. This video could be saved and played by the user in any situation where they may feel unsafe, whether it’s in an Uber, walking down the street, or any other situation.

While many of us have these videos saved, we thought a lot about how if we were in a situation where we actually needed those videos, it would take too long and be too cumbersome to find a video that could be used, and it probably wouldn’t be our first instinct to do so either. In that situation, we’d probably want to text our family/friends to ask for help and to tell them that we are in a potentially unsafe situation, or would be too panicked to know what to do in the first place.

The idea for our project, Guardian, came from this - we wanted to create one simple platform that could be used by anyone in an unsafe situation to play an audio that could deter someone from hurting them and to reach out to friends/family in a matter of seconds. While this could be used by anyone, knowing especially how many of us women feel unsafe in day-to-day activities, such as walking down the street, further inspired us to create this project.

What it does

Guardian allows the user to create an account and log into our web app. The user is able to navigate to the contacts page and populate emergency contacts that are saved to their account by entering in names and corresponding phone numbers. When the app is needed, the user is able to access the home page, from which they can press a single button to send out a text to all of their saved contacts within the app. On the same page, the user is also able to play an audio that simulates a phone call from a family member or friend.

How we built it

Guardian was created using a number of technologies, many of which we had never used before! We used Firebase to do user authentication and store user contact info. We also implemented functionalities such as “Forgot my password,” changing your password, changing your username, and being able to sign up, log in, and logout. We also are able to collect user emergency contact info via a form. This data is then pulled from when the text feature is called. All of this is stored in our Firestore database. We also have a page integrating audio files mimicking phone calls that can be played along with their scripts. The web app is also partly compatible with various screen sizes: if the screen is small, the navigation bar collapses into a drop down. We used React as the framework for our application, and we learned a lot from the workshop on React on being able to use create-react-app. We investigated how to integrate Firebase with React, how to use state hooks, and how to use the React router to navigate to the multiple pages within our app. Within React, we used HTML, CSS, JSX, and material-ui to code the pages and their functionalities. We also used the Textbelt API to send SMS messages to desired phone numbers.

Challenges we ran into

We ran into a couple of challenges during this hackathon. One of the biggest challenges we ran into was deciding how to store user preferences and data. We ended up deciding on Firebase Firestore to store persisted data about each user, such as their emergency contacts. Another challenge we ran into was connecting user-specific data from the Firestore to a User ID in some form. We ended up identifying users by their emails and saving those as well in the Firebase. Another challenge we ran into was finding an appropriate API for sending texts and finding the user’s location. Unfortunately we couldn’t find one for the user’s current location that worked with http as opposed to https, but we found a SMS API (Textbelt) that worked for almost half of the hackathon, and then the API went down in the middle of the night. We contacted the customer support, they got back to us in the morning, and restored our API key so that the code would work, but it was stressful to navigate! Another major challenge we had was implementing the audio files. While this is a relatively simple task to do in HTML, since we were doing it in React and JSX, it led to many complications. Inputting an audio file in react required several external programs that we were not previously familiar with. After creating our initial code and tweaking as necessary, we realized that the start and stop buttons could only be initialized once. Therefore, when adding multiple audio files the subsequent files would not stop playing due to the double implementation of the command. We tried a different method using react-sound and a user audio player, but we had to download a program for the audio command to work, and the command was not compatible with the windows qualifications we were using. Unfortunately, we could not find a work around and had to implement one singular audio file for the user.

Accomplishments that we're proud of

Apart from our final product with its functional features aforementioned, its design, and the modeled features, we are proud of our ability to learn new technologies very quickly. We very quickly and efficiently became familiar with Firebase authentication and Firestore, both of which were technologies we had never used before. We hadn’t coded in React or JSX before, and some of us were also new to HTML and CSS, so we were proud of everyone’s willingness to learn new technologies and step out of their comfort zone. We’re proud of the workshops we were able to attend and how quickly we were able to implement the knowledge from the workshops, and we are also proud of how much we were able to learn from one another and leverage all of our strengths. We are also proud of how much we were able to stay connected and collaborate during the Hackathon, despite being far away and even in different timezones (thank you, Zoom!). We were also so excited to meet so many new people during the Hackathon, and bond so well over such a short period of time.

What we learned

We learned a lot about different technologies and APIs, and how to implement them, along with learning a lot about the web development process and web frameworks. We learned about differences between JavaScript and JSX, and we learned a lot about how to collaborate effectively over Zoom. We learned a ton about Firebase and how to organize code effectively, as we went from having no framework, to learning and implementing React, using hooks and state effectively as well. We also learned about the value of prototyping our website first and spending time on ideating so that everyone has the same vision and understands their roles, avoiding conflict down the road.

What's next for Guardian

For our project’s future, we would love to find a free API to send SMS texting that is also reliable. This API costs $3 for every 50 texts. We would also love to find a way to import contacts into the app from the contacts on the user’s phone, so that they don’t have to manually retype the contacts in. We would also love to turn this into a mobile app, to enable this import contact feature. As of now, this is a web app, but a mobile app could have greater usage. We would also love to expand the variety and lengths of the audio files as well - so far there is only one audio, but we would want to expand this. For now, our contacts page and our settings page only have presentational components, but we would ultimately want to sync this up so that the adding contact form is on the same page as the contacts page and the user can add multiple emergency contacts that would then update the contacts page and display in the way it appears now. We would also want a settings page connected to a back-end so that the user can see their usage of the app and any relevant information. Lastly, we would want to host the app via Heroku or with Firebase to create a production version.