Find A Peaceful Protest

Inspiration

When I watched the news, I noticed how many protests around the world support different communities and movements. However, I also noticed many protests had violence, which often was not related to the movement itself. Violence is a reason many people who want to support their movement don’t attend these protests. For this hackathon, I decided to build something to help people connect and find peaceful protests.

What it does

Find a Peaceful Protest is an interactive map with user-generated content. It allows users to add new protests and find existing ones. It also has a review system where users can add their own account of the protest and images of the protest. To reduce the amount of fake protests and reviews, Find A Peaceful Protest has a smart system where it calculates your reliability. The more reliable you are, the greater the impact is of your new protest or review. Additionally, a color-coded map navigation system makes it easy to see which protests are right for you. Markers on the map are color-coded according to how peaceful the protest is rated, and the opacity of markers are set according to how reliable it is.

How I built it

For the map, I used Leaflet.js for the user interface, OpenStreetMap for the map content, and ESRI for geocoding and reverse geocoding. For the backend, I used Firebase Realtime Database to store data and Firebase Storage for image storage. For the general structure of the website, I used HTML/CSS and JavaScript, as well as W3.CSS. I used Firebase Hosting to host my site.

Challenges I ran into

I was not familiar with the Leaflet.js library when starting the project, so it took some time to understand and learn it. Additionally, I had some problems with getting an image URL from Firebase Storage, but eventually figured it out after reading the documentation.