Voder

Inspiration

With the upcoming presidential election, many Americans are voting for a candidate due to political-party loyalty or identity. As a result, uninformed voters often vote against their best interests.

If everyone were fully informed, American public opinion and elections could change dramatically. Voder strives to empower voters by presenting both candidates in an unbiased manner, focusing on the candidate's platform and policies rather than their political party.

What it does

Similar to the popular dating app Tinder, Voder presents various platforms and stances of Republican nominee Donald Trump and Democratic nominee Joe Biden for the upcoming 2020 Election. Each "card" pertains to one of 10 significant topics that directly impact voters, such as climate change, racial equality, and health care. A user swipes right on cards they agree with and swipes left on cards they don't agree with. After a specified amount of swipes, the user will be presented with the candidate who most closely aligns with their political beliefs on a spectrum.

How we built it

After identifying an important problem, we researched the platforms of President Donald Trump and Former Vice President Joe Biden to present both sides in a non-biased manner. Then, using Figma, we created the cards for the user to swipe through and decided on creating a single-page web application. We decided to create our application using Vue.js, a JavaScript framework for building user interfaces and single-page applications. We developed a shuffling algorithm to randomize the 60 policy cards. The cards were shuffled within their categories (e.g. Economy, Racial Equality, etc.). Then, the cards were ordered in the deck so that there were 6 different groups of 10 cards, one from each category, then combined into one deck. This ensures that the cards are presented in an unbiased manner. We utilized the interact.js, a wrapper component for Vue.js apps to create the "dragging" functionality for users to swipe through cards and used event handlers for particular actions so that we could record all the data from the users. Lastly, we used the SweetAlert.js library to create modal boxes that pop-up after each round, after the user swipes through 10 cards, to update the user on which political candidate they most-align with after each round.

Challenges we ran into

The biggest challenge we ran into was creating the shuffling algorithm. Because the card deck was stored as a single array of dictionaries, we found it difficult to shuffle cards within their respective categories (having 10 different categories) then create a randomized deck by alternating between each of the 10 categories. In addition, another challenge we faced was trying to identify the correct event handles to use to collect the swiping data from the user.

Accomplishments that we are proud of

This was our first time using Vue.js, interact.js, and SweetAlert.js so we were proud to develop a functioning MVP of our project using new technologies.

What's next for Voder

We hope to expand Voder to cover more elections, such as more state-wide elections or local elections.

In addition, we hope to further personalize the results by allowing the user to rank the topics they are interested in so that their results place more weight on the issues they are passionate about. We also hope to create a more detailed breakdown of the swipe results, breaking down a voter's candidate preference by issue.