• It is really heartbroken to see people from Asian community are being beaten, pushed, cursed and humiliated. The hate crime incidents bring trauma to the elderly/young people, who just passing on the street, unreasonably get hit by strangers.

What it does

  • The map displays the locations of anti-Asian hate crimes and the Asian communities in United States and Canada. The purpose of this is when hate crimes take place, people can go to nearby communities to ask for help. The map also helps user to avoid the dangerous areas that hate crimes commonly take place (Seattle, Los Angeles, New York).
  • The X marks represents crime scene and the icon that has yellow, blue represents communities

How we built it

  • In terms of tech stack, we use React, Google Cloud Platform APIs such as Maps JavaScript API, Places API. We also use USE-PLACES-AUTOCOMPLETE, a React hook for Google Maps Places Autocomplete.
  • In terms of statistics and data, we mainly use website to scrape the data of hate crimes.

Challenges we ran into

  • This is the first time we use React, Google Cloud Platform and Firebase Hosting to create a website. We spent a lot of time learn how to code in React.
  • We had trouble of hiding the Google Map API keys, inserting Google Map into React app
  • Insert the datasets for the Anti-Asian hate crimes. We could not find CVG or JSON dataset file for the list of hate crimes take place in U.S. and Canada, thus we had to learn how to make one and insert 15 Asian communities information (COMMUNITY_ID, NAME, ADDRESS, WEBSITE, TELEPHONE, WEBSITE, EMAIL, DESCRIPTION), and 101 hate crimes information (CRIME_ID, DATE_OF_INCIDENT, PLACE_OF_INCIDENT, SUMMARY, TYPES_OF_INCIDENT, NEWS_SOURCE, LATITUDE, LONGTITUDE).

Accomplishments that we're proud of

  • Although we have a difficult time to understand React language and implementing Google Maps into React app and using different APIs for Google Maps, the website works! :)

What we learned

  • Learned how to host website using Firebase Hosting
  • Learned how to hide Google Map API key. First, we installed dotenv module and created .env.local (plain text file) to store API key as a variable, and the variable is called REACT_APP_GOOGLE_KEY="YOUR API KEY". At first, we put .env.local file inside the src folder but it did not work. Thus, we try to put the file outside the src folder and place it the same location as package.json. We can only see .env.local file if we use Visual Studio Code to see it.

What's next for Stop Asian Hate Now

  • When the user experience hate crime, they can report it by clicking the area where the crime occurs into the Google Maps. We would like to explore if we can save the user's reports and update the hate crime dataset after the user report hate crimes.
  • Add the police station markers to help user know which police station they should go if hate crimes do occur to them.
  • Add more communities into the map (and perhaps find datasets of United States and Canada communities)
  • Add the dark mode of the map


Share this project: