Black Lives Matter: Dallas

An interactive activism platform for the Black Lives Matter movement

Comment

Inspiration

After seeing people spread awareness about the Black Lives Matter movement, we wanted to ensure that we played our own parts in the effort to make sure that Black folk were treated to the same standards that everyone else in society is. One method that we realized we could do was email our local representatives and urge for social change. However, some people are confused about exactly what to write, who their representative was, and how they could carry out this process. Furthermore, we learned that another way we could help was the support of local black businesses in the DFW metroplex. We wanted to create a platform that combined both of the functionalities that would make social activism for the BLM movement much easier in the DFW metroplex.

What it does

There are two main functionalities that our project has.

The first is an interactive Google Map that automatically generates on the user location using IPAPI (Geolocation API). Then, we used the Google Maps JavaScript API in order to generate red markers at local black businesses in the DFW metroplex from a database that was stored in MySQL. These markers are also interactive and allow the user to gather information about a black business such as their website, address, and type of business with a simple click.

The second functionality that our project has is using the JavaMail API in order to automatically send an email to the user's local representative. We created a database in MySQL with user zip codes and their corresponding representative in the House of Representatives. Then, the user zip code is automatically collected using IPAPI, and thus, allows the congressman to be shown on the page. Then, the user simply enters their email credentials to send a customized email with information about the user (first name, last name, city - generated from IPAPI) which one, simple click. The email is specifically about qualified immunity and how we should get rid of it in order for all members of society to be treated equally.

How we built it

We used a Java backend using a Spring framework in order to retrieve values from the database that we created in MySQL. The Angular framework was used for the frontend which combined HTML, CSS, and TypeScript code. Details are below:

JavaMail API

  • Created connection to SMTP (Simple Mail Transfer Protocol) server.
  • Created personalized email template about qualified immunity
  • Added parameters to the email
  • Used object of the properties class for username and password connection
  • Sent email user Transport.send method
  • Retrieved names and email for the representative from MySQL database (manually created)

Google Maps API

  • Retrieved user location from IPAPI
  • Automatically centers map on user location
  • Generates red markers at local black businesses
  • When markers are clicked, information about the black business is displayed, such as their address, phone number, etc.
  • Used mail merge in order to generate the TypeScript code for the markers

IPAPI

  • With the API key, once the page loads the user's location is used for both of the functionalities described above.

Challenges we ran into

Some challenges that we ran into were collecting data, as there is not a database online with columns for zip code and corresponding local representative. Thus, we had to do that research on our own and create that database manually, which took up some time. We also came across some challenges in implementing the CSS with the Angular project, but with some quick troubleshooting, we were able to solve these problems and create our final product. One last challenge we had was when the backend of the project was working, but when we ran it from the UI, we were getting null values for the congressman of the user. At first, we had no idea what the problem was but then realized that the IPAPI was giving us a zipcode that was not in the MySQL database that we had created. Thus, there was no corresponding congressman, resulting in an error. We then simply added the zipcode in the database, which resolved the error.

Accomplishments that we're proud of

We are proud of creating our full-stack project that is composed of a relatively complex back and frontend. Furthermore, we were proud of being able to include 3+ APIs together in order to create our final product in such a short amount of time.

What we learned

We learned how to implement various APIs together, how to use dependencies in a Maven project, how to get and call HTTP requests, and how to connect to a Gmail server in the backend. In the front end, we expanded more on our HTML/CSS. We also learned how to use Angular for the first time. More importantly, we learned how to use technology for social good.

What's next for Black Lives Matter: Dallas

We want to create an even bigger platform with greater and more functionalities. Furthermore, we want to be able to get into contact with social organizations and understand how we can leverage our technical knowledge for the greater good.

Share this project:

Updates