Summary

The Steam Library Creator was my final project for a Computer Science course (HarvardX CS50). It is a web app designed in Python and Flask, also making use of SQL, HTML, CSS, and JavaScript.

The concept for this project came from an exercise in that same class, which used SQL to create a web app where users could simulate buying and selling stocks. I had such a great time working with SQL databases even on something like stocks, that I decided to expand the idea into a full-fledged project using a larger, and database.

I used an online dataset of 65,000 Steam games and constructed a SQL database from it, then used that information to create a web application that simulates a customizable Steam library akin to what Letterboxd.com does for movies.

Users can create an account with a password and sign in to use it. The website’s features include: searching for games in the database, adding and removing games from one’s library, rating games from 1-10, writing reviews, deleting one’s entire library, adding a new game to the database, and viewing other users' libraries.

Coding

The Steam Library Creator’s primary code was using the Flask framework. While the web app uses HTML and CSS for the front-end display, the back-end functionality of the website is all handled by Flask and SQL queries to the large database.

Every page employs one or more Flask route, using GET and POST methods. One of the trickier examples of this was the "/updategamefromview" route. This route concerns the page that allows people to view other users' libraries.

On this page, when viewing another user’s library, I wanted every entry to have a button on the right. This button would be context-dependent; if the current user did not have the game in their library, there would be green button to “Add” the game to their library, while if they did have the game, the button would instead be a red “Remove” button.

There were two major challenges with this, the first being how to ensure the right button would be displayed, and the second was to have the buttons perform the correct functionality of adding or removing. The former was solved by checking the user’s library using templates in HTML. For the latter, I already had routes for adding and removing from the library, but those were tied to their own HTML pages. To reduce creating two near identical duplicate routes, this route was created to serve both functions in one, by simply choosing which of the two actions to take by checking the name of the input form through HTML.