According to a recent Reuters/Ipsos poll, one third of the registered US voters don't know the candidates they are voting for in their congressional district. Meanwhile, there is fake news" flying around in news media and political ads. So such lack of knowledge of the candidates in important elections like the upcoming senate midterm elections really motivated us to find a way to better educate voters/general public about their candidates. Furthermore, looking for information scattered across the internet can be a tedious task. Instead of letting the voters google around about the candidates and compare them manually, we collected some of the major campaign issues of each candidate from their websites and showed them side by side so that the voters can get a better comparison to see who on what issue they agree with more.

What it does

Our web app's main function is to compare where the candidates stand on some major issues like health care, economy, etc. All the information is extracted from the candidates' websites, to make sure no bias is introduced.

Instructions: (try it out here)If you click a state on the map, that state will be highlighted, and the candidates running for the senate in that state and their campaign issues (if available on their websites) will be shown below the map. Only states with open senate seats (in purple) can be clicked.

How we built it

We built this web page using mainly Javascript/JQuery, HTML/CSS, PHP, and MySQL. The map API was based on the prototype from us-map, without some customized configuration. The backend was written in PHP to fetch the candidates' data stored in the MySQL database. Ajax technique was used to retrieve the data.

Challenges we ran into

  1. The map API, although good enough for this app, still has some minor configuration issues, like it's difficult to add legend and labels.

  2. Since we couldn't come up with an efficient way to automatically extract and parse data from the internet, and the data size isn't too big, we just manually inserted the data into the database. It was a little time consuming but manageable.

  3. Data format conversion was an issue too. We had to make sure the data encoding (utf8) is consistent from back end to front end. And the JSON encoded data transferred to the front end from the back end needed to be parsed carefully.

Accomplishments that we're proud of

First and foremost, we are really proud that we have a finished product to showcase. We are only a small team of two, but we worked very closely and very hard to get things done. We managed to go through a whole process of web development from design to code to test to release. We also believe that our product will be useful and relevant in the real world, hoping to help the voters to make better decisions in the upcoming elections.

What we learned

During this hackathon, we practiced our full stack web development skills, learned how to work as a team, how to analyze and solve problems, how to remain focused for a long period of time in a competitive setting. Last but not least, we had a good time!

What's next for Know Your Candidates

We are going to scale up this app to include more important political races. At the same time, we need to find a better efficient way to extract correct and useful information from online. Furthermore, more style will be added to the website to make it more user friendly.

Share this project: