The main UI of the app, where users can drop pins to mark unsafe locations.
Every time you drop a pin, an alert bar will confirm your decision to indicate that there is a serious incident taking place.
The React Native code that handles the formatting and rendering of the markers and map layout on iOS and Android platforms.
Given the recent events which have occurred on school campuses, we wanted to create a way to help students and faculty find a safe zone and avoid danger during these crises. These events are hard to predict and can lead to serious consequences, and SafePlace can pinpoint locations of incidents to alert others early on and reduce the scope/consequences of the situation.
What it does
Users of the mobile app can place a pin on the map to report an unsafe location so that other people can avoid going to that area. They can also add notes to go into the specifics of what is happening. We incorporated the SafeTrek API into our app so that local authorities would be notified of the location and severity of the situation. Then, they can respond to the scene and text the user if they need additional info. Other students who have the app can receive notifications about new pins, and view a map that will be updated in real-time. This way, they can make quicker decisions and move away from danger as fast as possible. In most incidents, the students’ first instinct is to call 911. However, this app will provide a more efficient way to notify the police and other civilians, with just two taps of a finger.
How we built it
We used React Native to build a cross-platform app with the Google Maps API and the SafeTrek API. The app was tested with the Expo Client app on iOS, and we scanned a QR code generated by the ‘npm’ package manager to load new updates from the computer to the mobile device. The front-end consisted of a map UI that was built using react-native-maps, and the back-end involved the Google Firebase cloud server that stored the coordinates of each pin. This information can be stored in school and police databases.
Challenges we ran into
Initially, we had trouble to get the alarms for the SafeTrek API because we were not familiar with the right methods to use with React Native to make a post request. This was also the team's first time developing in React Native. The biggest challenge was to figure out how to retrieve data from the Firebase server, and rendering multiple markers on a single-map layout. Since the markers were dynamic, we had to make sure that we don’t re-render the entire map every time we add a new marker.
Accomplishments that we're proud of
We were proud to be able to create a partially functional app in a 24 hour period especially since we are not familiar with the development environment. A majority of the day was spent on installing the right versions of Node.js and React Native. After that, we incorporated the Google Maps API and SafeTrek API with React Native code. In the end, we put in a significant amount of effort to build an app that displays markers and sends location information to the database.
What we learned
We learned to develop an app in React Native, and how to brainstorm and develop an idea that solves an important problem in society. In addition, we gained valuable experience in connecting to multiple APIs and writing code for a cross-platform application. The time constraints motivated us to research/learn more efficiently and make the most of our resources.
What's next for SafePlace
In the future, we will aim to place multiple pins and incorporate a different type of UI for authorities. We also want to implement a verification system where people can join an organization (such as a school or a workplace) so people will be held accounted for dropping pins under false pretenses. Finally, we need to implement the real-time feature that updates the map on everyone else’s devices once a pin is added.