News Website

For my final project in CS50 I have created a news website with Flask. This website uses NewsAPI to find information about news articles from a number of different websites and display them in a user friendly format using HTML, CSS and Bootstrap elements. I made the project outside the CS50 IDE using Sublime Text and a Python virtual environment, and I have hosted it on Heroku. While developing the project, I found it useful to use Git and Github to save working versions of the code while working on new features.

The main backend part of the website is written in app.py and contains the Flask routes for the different pages in the website. Here, the article information is retrieved from NewsAPI and loaded into the frontend programatically using Jinja. I created custom functions in Python to retrieve a list of articles from the API, along with basic error checking to see if results were not found. There is a seach feature in the website to allow users to search for an article which uses these functions after retrieving the seach query. The login, register and account pages each use POST requests within forms to allow users to login, create accounts and change their password.

In the backend, requests are made to an SQLite database, info.db, to hold information about user accounts and articles. While articles are loaded using NewsAPI, users have an option to save articles to their profile. Information about the article title, description, URL and image URL are saved into this database from the API in an articles table. Another table holds the user ID, username and password hash of every user. In a separate table, the user ID and article ID are given to show which articles each user has saved. A user's saved articles can therefore be shown in the website using appropriate SQLite queries. This schema of database tables was used to avoid storing redundant information, as each article is only stored once in the database.

The front end part of the website is stored in the static and templates folders which hold the CSS, HTML and Javascript content. CSS and Bootstrap were used to create a user friendly interface designed for desktop use. I used Javascript functions to send, via an ajax request, information to the server when a user saves an article. This allows the database to be updated without the page being refreshed. Another function is used which loops through a user's saved articles every time the page loads to indicate if any of the displayed articles are have been saved. If they have been saved, an active class is added to the corresponding save buttons to indicate that clicking the button will remove the article from the list of saved articles.

The remaining files are required for the project to be hosted via Heroku. A link to the website can be found at http://news-website-graham.herokuapp.com/.