3. Homepage - nimitd/SafetyAppPublic GitHub Wiki

Overview

Our homepage tab surfaces relevant information for the user as soon they open the app. This includes various built connections to different ways to get home (5Sure, 5Sure on foot, Lyft, Uber, Google Maps), emergency contact information (local police, 911, their personal emergency contacts), and personalized events with contact information for a sober monitor or on-call RA in case the user needs to contact a sober resource.

We use the term "event" to describe any on-campus time period where there is a dedicated sober person. This could include social events like All-Campuses or Special D's, an RA's on-call, or a campus-wide event like Full Moon on the Quad or Mausoleum. Each of these events is required to have a sober point of contact upon registration, and our goal is to provide the sober contact information to students who are in proximity of the event location. Our homepage surfaces events that are relevant to the user based on their location and the communities they are a member of. These events appears at the top of the screen and give the user immediate access to call and text these sober individuals.

Front-End

The homepage displays three rows of buttons. The top row is events, colored blue for the safety of sober monitors inspired by the blue lights on campus. Scrolling all the way to the right allows users to create a new event. Tapping on the plus button opens a modal that lets a user set the date, time and information for an event.

The green middle row shows users' options for getting home. Scrolling all the way to left includes connections to ride sharing apps Lyft and Uber. The bottom row, colored red for emergency, connects students to the Stanford Police, to 911 and to a customizable emergency contact. Tapping on any of the buttons prompts the user to call the relevant number.

Screenshots:

We incorporated several react native packages to build out the front end functionality, including react-native-material-dropdown, react-native-phone-call, react-native-date-picker, and react-native-elements. We used ScrollView to get the horizontal scrolling on the home page, and built out calling and texting functionality using Linking. We were also able to link to other apps such as Lyft and Uber using Linking. Additionally, we incorporated React Native Modals to project the "Publish Event" page.

Back-End

This page is connected to the backend in several ways. The most central part is that it pulls relevant events based on the user who is currently logged in, and surfaces these events to the user. Additionally, the home page can write directly to the database in the "Publish Event" Modal, and these changes are then reflected on the home page.