Game recommendation system using Machine Learning and Flask

9 min readApr 19, 2021

This article is not a step by step of how I developed it, because the project is huge. So this article is to show the difficulties that I found for my learning. If you want, you can access the repository on GitHub in the topic Conclusion.

Through Mario Filho’s course, I learned how to build a Machine Learning model to make recommendations. In the course he taught a project “How to recommend YouTube vídeos” according to the user’s preference for some subjects or video titles.

Therefore, using these techniques that he was taught, I developed a game recommendation system model. It was an extremely complex development for me, as I am still gaining experience and knowledge in Machine Learning models, so it took me a while to complete the application with the integration of this model.

Took so long to finish this project

So, for this project, I ended up developing an application in Flask so that users can register on the website and be able to add to their profile, all the games they have played or had some kind of experience (has more than 10k games).

Furthermore, it is important to say that I have never had any experience with website development using HTML, CSS, JavaScript, etc. So I had to study several tutorials and documentation to try to learn the knowledge necessary to develop the web-backend. I also used Adobe XD (but very basic) to help me with some visual and interactive organizations on the home page (Index.html).

In the diagram below, I show how the structure of this project was organized so that the Flask application works correctly.

.
└── Game-Recommendation-System
    ├── __init__.py        # setup our app
    ├── auth.py            # the auth routes for our app
    ├── Games.db           # our database
    ├── main.py            # the non-auth routes for our app
    ├── models.py          # our user model
    ├── games.py           # our ML personalized models
    ├── ml_utils.py        # our uploader ML models
    └── templates
        ├── base.html      # contains common layout and links
        ├── index.html     # show the home page
        ├── login.html     # show the login form
        ├── profile.html   # show the profile page
        └── signup.html    # show the signup form
        └── games.html     # show the games page
        └── profile.html   # show the profile page
        └── 404.html       # show the 404 error page
    └── static
        ├── img
            ├── EA-Access.png      # image for index.html
            ├── EA-Access@2x.png   # image for index.html
            ├── GitHub-Contact.png # image for index.html
            ├── GitHub-Logo.jpg    # image for index.html
            ├── Medium-Logo.jpg    # image for index.html
        ├── css
            ├── 404.css         # contais js script for 404.html
            ├── base.css        # contais js script for base.html
            ├── index.css       # contais js script for index.html
            ├── games.css       # contais js script for games.html
            ├── profile.css     # contais js script for profile.html
        ├── js
            ├── games.js        # contais js script for games.js
            ├── index.js        # contais js script for index.js
            ├── profile.js      # contais js script for profile.js
            ├── csv             # contains common csv files

I got this dataset from the website data.world through the profile of MINH HOANG DANG. I know that this dataset was obtained from a scrap from a website that I didn’t know before, but I didn’t find the article or the Python automation script, but as soon as I found it I would update it here as well.

SQL DB

For the sqlite database, since I have knowledge in BI, I chose to create a database (Games.db) to be able to store the data. So I can use the standard Python integration to make the Machine Learning model and load the data into Flask. So I created some tables and some views, to make it work locally.

To better understand the dataset, I ended up generating some plots using the plotly package according to the tables that I created in the database, and so I was able to find the features that I inserted in the machine learning model created.

1) The first chart I created was to find out the number of games released by genre. So we can see in the chart below that from the genre “Shooter”, we have half of the games available for the genre “Action”, but obviously games usually have more than one genre when it is released, however in the dataset everyone has only one genre.

2) The release year also says a lot about a game, because it has nostalgic games for a lot of people and also because of the success of the generations of the old consoles (including the generation of the N64, PS1 and PS2), many games were released because of their fame. So I created a chart with top 10 number of games released by year.

3) And as it turned out to be fun to see the data on those charts, I ended up creating a chart to find out how many games had been released by their publishers.

**Number of games released by Publisher**

Some observations:

To load the data from the CSV file I created the I_DATE, I_GAMESALES, I_PLATFORM and I_PUBLISHER tables, through which the dimension tables will be created.
For the user to add the games to his profile, I created a validation rule, where he must register on the website, so that his profile is active first and then he can add it freely. The data in this register is inserted in a table called USER in sqlite.
In order for games to be added to the user’s profile, I used POST methods from Flask to insert the data into the USERGAMESPLAYED table of the database in sqlite. Therefore, it will store the corresponding user ID and the games it has played in the table.
If the user decides to delete any game from his profile, he can select the desired games in the table, after confirmation, the POST method of Flask is triggered again to delete this data from the same USERGAMESPLAYED table.
To perform the INSERT and DELETE commands in the sqlite database, and to bring the necessary data to Python, I used the SQLAlchemy library.

HTML, CSS and JS

For HTML, CSS and JS I used the DataTables plug-in to store the games (games.html) that can be added to the profile and to later show the games that were added to the user’s profile (profile.html). Therefore, using simple commands according to the DataTables documentation, it is possible to add an interactive table that has a search field, filter, sorting and even pagination automatically.

Some observations:

For the share buttons, I used the HTML and JS script that are automatically generated by AddToAny (link in the references), so it facilitated my development, and has a great advantage for users to share their recommendations, and on top of that share my project as well.
I added the option for the user to be able to download the recommendation according to their profile, and download the added games, using Flask’s GET method and exporting this data to a CSV file.
I used Bulma’s CSS framework, a Free and open source framework to be able to customize the website according to the need.

Machine Learning Models

Regarding the Machine Learning model, I really wanted to provide a personalized recommendation, so I didn’t find any (literally none) material or article for me to study or help me with, so instead of training the profile dataset only once of the user, I train the dataset a few times during the application, that is, whenever the dataset can be changed by the user (inserted, updated, deleted, etc.). So he can have the recommendation as updated as possible, according to his profile.

I really don’t know if this is the best way to recommend games with a personalized model, “at runtime”, but I want to study other models and even improve the flow and accuracy available to each user.

So according to the files available in the repository, I ended up using the LightGBM, Random Forest and TfidfVectorizer libraries to create the matrix according to the important features. And then we can get the score for each game recommendation in a list.

Conclusion

I confess that I was extremely proud and satisfied with the result of the project, mainly because I was able to integrate so many frameworks, libraries and technologies together and see everything working in the end, it is really very rewarding.

If anyone want something else added to the tutorial available at GitHub Wiki of this repository, add an issue to the repository over there or just write in the comments as well.

New ideas for this application (Back-End, Front-End, Machine Learning model, etc), help me to improve on the GitHub ♥

In love with the result

Online Project

The project is publishing to the GitHub repository according to the files needed for execution: Game-Recommendation-System Repository

We also can get a full tutorial on how to use and get a game recommendation from the GitHub Repository Wiki.

Also the website published on Heroku is: Recommendation Game System

I had to decrease the amount of rows in some tables in the database that was published on Heroku, due to a limitation of my Free user, so it only supports 10,000 rows. However the complete database (sqlite) that I developed and that worked locally, is published in the db folder.

First I had created a database in SQLite, but to work in Heroku I had to use Postgres, so I had to export the data from the SQLite tables to .sql files.

Difficulties

I’ve always been a fan of StackOverflow (one of the best communities in my opinion ♥), and during this project, in addition to the official documentation from libraries and frameworks, it was the one that helped me the most in problems that I spent hours and days trying to solve, mainly for having so much integrated technology. So the topics below cover one of the difficulties I’ve been on this project.

Make queries using SQLAlchemy to be able to filter, join tables, delete and paginate all of this.
Create the GET method to make different downloads of different CSV files available.
Integrate with DataTables and create pagination in tables using Flask in HTML files.
Make changes to customizations in HTML and add a dropdown icon in the navbar according to the initials of the user’s name using the Bulma framework, integrated with Python and Flask.
Add personalized success and danger messages using Flask integrated with HTML.
Use a Python variable in JavaScript.
Obviously, understand how the flow and files needed for Flask to run.
Publish on Heroku (and see it working online and no longer locally), that part I suffered a lot (but still need changes)!
Show the games recommendation to the user, using the joblib library to import the saved machine learning models, and make the games recommendation interactively (this one really took me a long time).
Understanding of Relative Imports and Absolute Imports.

Future improvements

Improve the application on Heroku, because I’m totally new at deploy apps
Improve CSS and JS scripts, because I’m not an expert of those languages
Add “I forgot my password” button and workflow for the user to recover the password
Add interactive graphics using the dash library of Plotly or Power BI or Tableau, so that the user can follow the metrics of his profile.
Create an option to add games as wishlist (they were not played), and to show the difference from one to the other, so the recommendation will also consider these games.