-
-
Snapshot of the map we present in our website
-
Snapshot of our code
Inspiration
In light of recent events that took place in Davis, we realized that our community was in need of a way to communicate effectively with eachother in order to keep each other safe. In those hard times students were forced to rely on police radios and scanners for updates on the events happening around them. Social media simply wasn't enough to keep track of all the locations over Davis to stay away from and not everyone was properly alerted of the attacks and events taking place.
What it does
We have designed a web application called "SafeZone" which allows for a better means of communication that allows the community to be aware of all suspicious activity happening around them, thus the app will help our community feel safer. On opening the application there is a view of points of suspicious activity that were dropped previously by other people in the community. This data is stored in Firestore in Firebase. After calculating distance and other metrics, the application provides a radius around your current location so you can see where you are in relation to the suspicious activity occurring. In addition, it also gives a count of each kind crime that happened which gives our users an idea of the nature of the crimes.
In order to add a point on the map, users simply have to search and select the location in the search bar and select a descriptor for the activity in the dropdown and click submit. They will see an icon pop up on the map at the selected address that is color coded based on its descriptor. An index for the colors and labels of descriptors is shown on the left hand sidebar.
How we built it
This application integrates the Google Maps API to present a map of the suspicious activity happening around you by using geolocation to sense your current location. This project uses JavaScript in React and TypeScript. In addition, we used Firebase to store our data on the crimes being committed.
Challenges we ran into
This is the first time for both of us using react. We were both extremely unfamiliar with the syntax of this language which made it extremely difficult to solve bugs every step of the way through. We had to get a lot of guidance from online videos, but there were many times where the steps shown in the videos did not translate exactly when we did it on our local computers due to changes in the version of react and firebase. In addition, we had a time crunch which made it rather stressful to debug when it came towards the end.
Accomplishments that we're proud of
Every error we ran into was a hurdle for us as we would be stuck for hours not knowing what to do. The satisfaction we felt after fixing our bugs led to tears of joy. Since both of us are beginners, we were very happy with how the maps panned out to be very functional while also looking professional. We were extremely proud of integrating the google maps api.
What we learned
Both of us got a good exposure to React as well as learning how to integrate APIs. We learnt to use firebase effectively and utilizing libraries to efficiently code the functionalities we need.
What's next for SafeZone
We hope to add some things that we were unable to finish in the 24hrs in the future, such as color coding of the data points to represent their type of crime, as well as being able to hover over the points for more detailed descriptions of what the crime consisted of, such as description of perpetrator which would be added by the user who recorded that piece of data. In addition, we would like to add an expiration feature where the added points expire after two weeks. All in all, we believe we can make our application more sophisticated given more time and hope to do so in the future.
Log in or sign up for Devpost to join the conversation.