please see TODO.md
This is my milestone two project for the Code Institute's 'Level 5 Diploma in Web Application Development'. The goal of this project is to Design, develop and implement a Back end for a web application using Python and a micro-framework. To this end I am building a webapp utilising Flask & postgreSQL, that will alow users to create, modify, and track reviews for video games. The app will be aimed at gamers, people who are invested in tracking their relationship with videogames and offer a place for users to conveniently archive and keep a track of all the games that they have played and the thoughts that they had on them. Reviews will be able to be tagged as public or private, and other visitors to the site will be able to browse reviews by game or by user. The site will also aggregate scores of reviews allowing users to accurately assess potential new purchases.
- browse the database of reviews
- a place to keep track of games played
- get more information on unplayed games
- provide a reliable and secure platform for potential monetization through affiliate links
- provide a good UX to enable growth of the userbase and accuracy of scores and breadth of database
- develop further skill working with postgres and Flask
- develop a site that satisfies goals of the user and site operator and fulfils the project goals
- create a good UX
- build a performant and efficient site that has room for extensibility
The site's user interface will be designed using the Materialize CSS framework, ensuring a consistent and visually appealing appearance across all pages. To maintain a uniform layout and enhance user experience, I will implement template inheritance using Jinja2, Flask's templating engine. This approach allows for the creation of a base template containing common elements (such as header and footer), which can then be extended by individual pages. This method not only ensures consistency but also reduces code duplication, leading to more maintainable and efficient front-end development.
For the database management system, I will employ PostgreSQL. This robust, open-source relational database will be used to create and manage multiple tables necessary for storing user data, game information, reviews, and the relationships between these entities. PostgreSQL's advanced features and reliability make it a good choice for handling complex queries and maintaining data integrity in a web application of this scale.
-
Video game players are the primary audience, but more specifically:
- Casual gamers: Those who play games occasionally and want quick insights before purchasing.
- Hardcore gamers: Enthusiasts who play frequently and desire in-depth reviews and discussions.
- Game collectors: People who maintain large game libraries and want to catalog their experiences.
- Trophy/achievement hunters: Players who focus on completing games and may want to track their progress.
- Retro gamers: Individuals interested in older games and their historical context.
- easy and intuitive navigation
- secure login procedures
- accessible
- able to browse review by category (game, author, aggregate score etc. )
- able to write, delete, edit reviews
- As a first time user I want to encounter a landing page that succinclty and clearly explains the functionality of the site
- As a first time user I want to be able to browse review of games I am interested in
- As a first time user I want to be able to sign up to the site in order to login and start posting reviews
- As a first time user I want to be able navigate the site easily and intuitively
- As a returning visitor I want to be able to login quickly and easily
- As a returning visitor I want to be able to intuitively find all my prior reviews
- As a returning visitor I want to be able to delete reviews I have previously written
- As a returning visitor I want to be able to view the profiles of others
- As a returning visitor I want to be able to write new reviews
- As a returning visitor I want to be able to edit games to the database if they are not currently there
| Features | Importance (1 -5) |
|---|---|
| site is easy to navigate | 5 |
| site is responsive | 5 |
| browsing the collection of games | 5 |
| browsing all reviews of a given game | 4 |
| user profiles that can be securely logged in to | 3 |
| user profiles allow viewing/manipulation of existing reviews | 3 |
| allow users to edit games to the database | 2 |
| profile pages for each user, detailing reviews and some user stats (no. of reviews etc.) | 3 |
| site is accessible | 5 |
| site stores user information securely | 5 |
| site sends useers to a 404 with links to home if game/review/user not found | 4 |
| search existing games | 5 |
Things to take into consideration:
- appropriate use and structure of semantic HTML
- descriptive links
- use of aria-label
- colour contrast
- font usage and readability
- alt text for images
- well structured and labelled forms
- base.html
Contains header and footer of site, the rest of the pages will extend from this page. Header to contain login/sign-up links, footer to contain social links, links to tos etc. design credits
- signup.html
sign up form
- login.html
login page for users with account,
- user_profile.html
allow users to change account details such as screenname, update password, view number of reviews/games posted, edit/delete posted content.
- games.html
gallery page for games added to the data base, displayed in a grid with information modals over the top of large images. Search bar for users to query the database at the top of the page.
- game.html
information page for a given game, including image, title, publisher/developer information etc.
- add_game.html
form with details required to add a game to the database, possibly pending admininstrative approval.
- edit_game.html
edit a game you have added to the database. This functionality will be exclusive to games that users have added to the database not all games.
- add_review.html
form to attach a review to a given game.
- edit_review.html
form to edit an existing review
- 404.html
page to send users to if a game/review is somehow not found in the database
The database will contain 4 tables. One for the games, one for reviews, one for users, and a join table that gives me access to all games reviewed for a given user and all reviews from users for a given game.
The game table will need a primary key that is an assigned id number that is auto-incrementing, then the data for each game (publisher, developer etc.) these fields should all be required, as users should not be able to add games with incomplete information into the db. image_url is a development feature, and would need to be replaced with an image upload dialogue linking to some backend storage. This is for many reasons, not least that hotlinking images is both impolite and very slow.
| Column Name | Data Type | Constraints | Key | Nullable |
|---|---|---|---|---|
| game_id | int | AUTO_INCREMENT | PK | No |
| title | string(255) | No | ||
| publisher | string(255) | Yes | ||
| developer | string(255) | Yes | ||
| release_date | date | Yes | ||
| genre | string(100) | Yes | ||
| image_url | string(512) | Yes |
The review table will need to assign each review an ID that is autoincrementing, and will again be the primary key. However it will additionally require the foreign keys of user_id and game_id to link the review to the user to the game. we will also need to assign the current date/time to the review.
| Column Name | Data Type | Constraints | Key | Nullable |
|---|---|---|---|---|
| review_id | int | AUTO_INCREMENT | PK | No |
| game_id | int | FK (Game) | No | |
| user_id | int | FK (User) | No | |
| content | text | No | ||
| hours_played | float | No | ||
| completed | bool | No | ||
| rating | int | CHECK (rating BETWEEN 1 AND 10) | No | |
| created_at | datetime | CURRENT TIMESTAMP | No |
The user table, like the other tables, will use an auto-incrementing integer and assign this to users as an ID which serves as the tables primary key, The rest of the information will relate to the user themselves, username, email address etc.
| Column Name | Data Type | Constraints | Key | Nullable |
|---|---|---|---|---|
| user_id | int | AUTO_INCREMENT | PK | No |
| username | string(50) | UNIQUE | No | |
| string(255) | UNIQUE | No | ||
| password_hash | string(255) | No | ||
| location | string(255) | Yes | ||
| created_at | datetime | DEFAULT CURRENT_TIMESTAMP | No | |
| is_admin | Bool | No |
The final table is a junction table that implements a composite primary key. This key consists of two columns: user_id and game_id. Each of these columns serves as both a foreign key and part of the primary key. The user_id references the User table, while the game_id references the Game table. This table will be crucial for features such as the user's "My Games" and "My Reviews" pages. By using this structure, we transform the many-to-many relationship between users and games into two one-to-many relationships: one user can have many games, and one game can be associated with many users. This allows for efficient querying of user-game associations and simplifies the implementation of user-specific game collections and reviews. Towards the end of development I established that a Bool for admin priviliges would be neccessary to add to the User table to restrict sensitive actions such as removing users/games etc.
| Column Name | Data Type | Constraints | Key | Nullable |
|---|---|---|---|---|
| user_id | int | PK, FK (User) | No | |
| game_id | int | PK, FK (Game) | No | |
| added_at | datetime | DEFAULT CURRENT_TIMESTAMP | No |
I converted the above markup tables into DBML (Database Markup Language) and used dbdiagram.io to generate a .sql file of my schema to potentially use further into coding my project
- account creation
- account deletion
- login/logout functionality
- main page displaying all games in database
- search bar querying app api as user types
- if no game is found on searching the db, users are given the option to add a new game
- button to add to My Games on each game not currently in user's My Games collection
- indicator that game is currently in My Games
- cards displaying an image and information on each game and link to each games page
- games in My Games are displayed and can be removed from My Games
- My Review page, aggregating all of a users reviews
- Individual reviews can be edited/deleted from My reviews
- Game Detail page displays game details, aggregate user score, and all reviews of the game
- Game Detail page contains contextually appropriate Edit/Add Review buttons
- Games can be deleted from the database from the game detail page
- reviews on Game Detail page display user avatar and link to profile
- User Profiles can be viewed and contain: - user stats - links to users My Games and My Review pages
- users that are not logged in may browse the game collection but not change any of the present data
- users navigating to their own My Profile page can update password, email and avatar link
I will be using the Materialize framework for the structure and styling of this project. This will allow me to more easily focus on the data and functionality of the app while still maintaining an aesthetically pleasing and intuitve to navigate web app.
I wanted the typography and design of the site to evoke the retro videogame aesthetic, while being clear, readable, and screenreader friendly
I choose a chunky retro pixel font for the headers:
and a slimmer, monospaced console font for the body text:
I wanted to keep this project simple and clean, so I decided to present the site primarily in black and white, using green as an accent colour which hearkens back to greenscreen monitors, which the texture in the header background image reinforces with CRT scan lines.
-
HTML
-
CSS
-
JavaScript
-
Python
-
SQL
-
Flask/Jinja2
-
MaterializeCSS
see also requirements.txt
- fontAwesome
- postgreSQL
- Google Chrome
- Firefox
- git
- lunarVim
- GitHub
- Heroku
- Pencil
- Google Fonts
- Photopea
- amiresponsive
- W3C HTML Validator
- W3C CSS Validator
- CodeQL
- WAVE - Accessibility Tool
- Google Lighthouse
- while writing the profile page, I encountered a bug where the browser would autofill the new password box, I solved this by changing the type of input to text from password and processing it as a password
- while working on the Add Game functionality, I encountered a bug where the date would only validate if given in a specific format. I solved this by implementing a datepicker that submits to the from in the correct format
- fixed a long-standing bug where the search javascript was triggering on loading other pages, and not handling the resultant null input gracefully. Fixed by wrapping the function that adds the eventlistener in a conditional check that returns nothing if the input is null.
- getting the conditional checks to correctly display contextually relevent buttons
- during deployment I ran into an issue in which I was not able to get flask-migrate to function correctly during deployment to heroku, it led to a lot of inexplicable tracebacks and weird build errors. I believe the issue was something to do with the order in which flask-migrate was used, in that it seemed to be trying to access a table that didn't currently exist.
- during updating my models to use is_admin, I had to rebase the entire database, as one of the migrations I used was somehow incorrect, and eventually I had to drop all the tables on the db and then use flask db init to reinitialise the entire thing.
-
clone the repo:
-
$
git clone https://github.com/Oxymetaphoric/milestone_project_3
-
-
if you wish to make changes and/or run locally prior to deploying. Some of these steps, especially those related to system packages may vary depending on your operating system:
-
navigate to the repo:
$
cd path/to/milestone_project_3 -
create and activate a python virtual environment:
$
python -m venv .$
source bin/activate -
use pip to install the projects required dependencies:
$
pip install -r requirements.txt -
create and populate env.py:
$
touch env.py$
vim env.py -
paste the following settings into the created env.py, save and exit:
import os
os.environ.setdefault("IP","0.0.0.0")os.environ.setdefault("PORT","5000")
os.environ.setdefault("SECRET_KEY","_your secret key_")
os.environ.setdefault("DEBUG","True")
os.environ.setdefault("DEVELOPMENT","True")
os.environ.setdefault("DB_URL","postgres:///quest_log") -
install postgresql and create a quest_log database:
$
pacman -S postgresql$
sudo -u postgres psql$
CREATE DATABASE [user] quest_log -
it is important to correctly assign the [user] when creating the db or you will need to manually grant permissions to read/write. If you are unsure, you can check your current username with:
$
whoami -
from this point you can run locally with:
$
python3 app.py
-
-
To deploy online, navigate to the heroku website and create an account/login.
-
create a new app, and in the Settings page click 'Show Environment Vars', and input:
variable value IP 0.0.0.0 PORT 5000 SECRET_KEY your secret key DATABASE_URL your remotely accessible postgres db's url -
navigate to the Deployment section of Heroku and follow the instructions to deploy via cli or from a github repo.
-
once deployed the db will need to be built, click the More menu button on the project pages header and then Run to open the heroku commandline webtool and enter:
$
python3$
from quest_log import app, db$
with app.app_context():$
db.create_all()
it is important to note that the white spaces prior to the 'db.create_all()' command must be typed out or the command will not run due to the python interpreter receiving incorrectly indented instructions
- Once the build process has completed the project should now be accessible online
see TESTING.md
- Paul Bowers for the insight and wisdom!
- favicon from: https://iconscout.com/icons/scroll-and-quill?price=free
- header texture based on: https://www.freepik.com/free-vector/vhs-effect-background_37443185.htm#fromView=search&page=1&position=35&uuid=c9af7fee-97a0-43a8-8f8e-4fe205ddae25
- My wonderful family!