Project Github


The source of inspiration came from the bomb threats at Lynbrook High School from the past week. Except those with personal connections with students there, the majority of the student body in Cupertino High School were slow to hear about this incident -- a day late in fact. The public announcement made by the Lynbrook board was a plain text message distributed by the community slowly forwarding to others. We found that a centralized platform to track and view these incidents would be beneficial to the general safety of the community. The more detailed and mapped representation of this information would make it friendlier and more helpful to the common person.

What it does

Our project addresses the safety concern universal for all communities. Our website is a community-driven platform for reporting criminal or hazardous incidents to help communities spread awareness of nearby dangers. Users can report crimes/incidents by filling out a form specifying the title, description, category, and an optional photo. Our service will extract the location and time from the user's device and publish it to our database. When a client navigates to the map page, nearby incidents and the respective information will be listed and charted on a map.

How we built it

We used Svelte and Tailwind to make a sleek and reactive frontend interface. On the backend, we used Node.js to host an Express.js server that connects to our Firebase database. We also used many APIs such as Geolocation for extracting user position, Imgur to store uploaded photos, and Google Maps API to include an interactive map.

Challenges we ran into

The Google Maps API was very challenging to work with. The obscurity and the poor documentation contributed to our struggles. After understanding its policies and how svelte affects it, we were able to resolve our issues and implement the desired features. Another issue we ran into were that some APIs used callbacks instead of manipulating the modern Javascript promises. This made some parts of the project more complex than we expected.

Accomplishments that we're proud of

We were able to design an architecture that was easy to partition into modules for synchronous development without integration conflicts. This made for a smooth development process, an improvement from previous hackathons we have done together. We are proud of making a website that is not only visually appealing and functional, but also well-written in the short time we were given. Our iterative development ensured that we build or project in small pieces and individual features, without overcomplicating our code by too much in one go without testing.

What we learned

We learned to partition tasks evenly to make sure everyone is contributing as much as they can, while also avoiding merge conflicts and other issues. Additionally, we were able to learn a lot about the technologies that we used in this project, such as Svelte, Firebase, etc. The geolocation API was very interesting to work with, since it had better accuracy than we expected, but was still well designed (user privacy was protected since they had to consent to give location). We've also learned to make websites that are accessible from a mobile device, making our service more versatile in application.

What's next for NeighbourhoodWatch

We could have improvements in the scaling and the ability to collect relevant information -- even possibly assisting victims with filling and authenticating evidence. A collaboration with the police force or law enforcement will be helpful in making this service not only helpful in the minimizing latency but also contributing the law enforcement process. We would also like to look more into web manifest and server workers, with the end goal of being able to push notifications if a crime is reported nearby. Our service will also benefit from the inclusion of existing reports, such as the Amber or Silver alert.

Built With

Share this project: