The issue we wanted to solve was bias in media and how all news sources skew their reports towards a political standpoint. If an individual has a preferred media source, they will inevitably receive a biased viewpoint on a certain topic, so we wanted to combat this bias by exposing the user to news from the other side of the political spectrum.

What it does

Fair News is a website that generates two news articles from different news sources, randomized across the political spectrum. The user chooses their preferred media source and a topic they want to learn about. The left column will populate with a related article from the preferred media source while the right column populates with a related article from a differing news source.

How we built it

We used HTML, CSS, Bootstrap and JavaScript to build the base of the website. We implemented the News API to gather our news sources and display them on the website. We assigned "bias values" to the news sources based on the Ad Fontes Media media bias chart and Media Bias/Fact Check. Each news source was categorized from the numbers 1 to 8 based on their liberal vs conservative leaning. To store the various news sources, we created map objects in JavaScript that stored the news source as a key and their bias value as the value and vice versa. Using the iframe tag in HTML, we displayed the news articles in two columns and made their respective titles correspond to the news source. For the website's frontend, we used Bootstrap formatting to achieve our minimalist design. We uploaded the final site to Google's Cloud service using the Google App Engine.

Challenges we ran into

Getting started on the project and figuring out what tools we needed to used was a challenge. We were all unfamiliar with Bootstrap and exact API deployment, to utilizing these tools was a learning curve. Another challenge was getting all of the articles to display fully on the website. Since the iframe tag in HTML basically displays another website within our site, some of the source sites did not allow the iframe to load for security reasons. We circumvented this issue by adding an article link for each article so that the user can still view the site that is suggested.

Accomplishments that we're proud of

We are proud that we have a working project that reflects the one we envisioned at the beginning of the project, albeit slightly simplified. Additionally, committing to learn Bootstrap, the News API implementation, and how to upload the website to the cloud in such a short amount of time is something we're proud of. The merging of the frontend of the website and the backend with fetching the news data was also smoother than we expected. We're also proud that we all stayed up together to work on the project, creating a very supportive and motivated environment within the team.

What we learned

In terms of technical knowledge, we learned everything we needed to use for the project from scratch apart from HTML and CSS. We needed to learn Bootstrap, API usage, how to use cloud services, advanced Javascript, and some JSON to complete the project. We also learned how to use Github efficiently and how to prevent merge conflicts. As for project management skills, we learned how to work on separate parts of the project and merge them together for the final product.

What's next for Fair News

If we had more time, we would like to fix the article-not-displaying issue by using a method other than iframe. We would also want to add more news sources to our current list and refined the article searching through a smarter search API.

Share this project: