Rather than reinventing the wheel, at the top of this section you will find a table of contents that is auto populated by GitHub. This will remain fixed to the top, even when you scroll through the readme.
The aim behind this project is to demonstrate my skills in the following areas:
-
Data handling: Build a Relational Database backed Flask project for a web application that allows users to store and manipulate data records about a particular domain.
-
Database structure: Design a database structure well-suited for my domain. Using relationships between records of different entities.
-
User functionality: Create functionality for users to create, locate, display, edit and delete records (CRUD functionality).
-
Use of technologies: Use HTML and custom CSS for the website's front-end, and Python for the back-end.
-
Structure: Incorporate a main navigation menu and structured layout using Materialize.
-
Documentation: Write a README.md file for your project that explains what the project does and the value that it provides to its users.
-
Version control: Use Git & GitHub for version control.
-
Deployment: Deploy the final version of your code to a hosting platform such as Heroku.
-
Testing: Test and deploy frontend web application to a cloud platform.
-
-
As a first time visitor, I want to easily understand the main purpose of the site.
-
As a first time visitor, I want to be able to navigate the site to find content easily.
-
As a first time visitor, I want to be able to create a new account.
-
As a first time visitor, I want to be able to look through the games, and read reviews left by other users.
-
-
-
As a returning visitor, I want to find reviews on games I haven't played yet.
-
As a returning visitor, I want to leave reviews on games I have played.
-
As a returning visitor, I want to login to my user profile.
-
As a returning visitor, I want to view the reviews I have created.
-
As a returning visitor, I want to like reviews by other users.
-
-
-
As a frequent visitor, I want to update my review to reflect my view on the game since the last time the game was updated.
-
As a frequent visitor, I want to remove a review that I feel no longer applies to the game.
-
As a frequent visitor, I want to change my account password.
-
As a frequent visitor, I want to view all reviews a particular user has created.
-
As a returning visitor, I want to remove my like from a review.
-
As a frequent visitor, I want to delete my profile.
-
-
-
As an Admin, I want to view a list of all registered users.
-
As an Admin, I want to view a list of all reviews created.
-
As an Admin, I want to remove a user.
-
As an Admin, I want to edit a review.
-
As an Admin, I want to remove a review.
-
As an Admin, I want to change my account password.
-
A contrast grid was used to ensure that the contrast between background and foreground elements are compliant with WCAG 2.0 minimum contrast Contrast Grid.
- Two fonts are used throughout the project, Roboto is used for all main text. With Saira Stencil One being used for headings. Sans Serif as the fallback font in case for any reason the font is not being imported into the site correctly.
- Imagery is especially important in this project, the background image is used throughout the website, with the exception where a game is being displayed, and a game image is available.
This is the page that the user will be greeted with upon arriving at the site, and can be accessed at anytime by clicking either the GameStar Logo or Home link in the navigation bar/menu.
This page will consist of a navigation bar/menu along the top, containing the GameStar logo, along with links to other pages within the web application, providing different links if the user is logged in, and if the user is Admin.
Below the navigation bar/menu will be displayed the GameStar logo, tag line, and a paginated list of games that users have created reviews for.
Finally at the bottom of the page will be the extended version of the footer.
This page will be available by clicking the Register link in the navigation bar/menu, and via various user prompts throughout the site.
A user will be able to create a profile by choosing a username, and setting a password.
If a user chooses a username that already exists, or the passwords entered do not match, they will be presented with the relevant error message.
Once the user has registered they will be automatically logged in, and returned to the Home Page.
This page will be available by clicking the Login link in the navigation bar/menu, and via various user prompts throughout the site.
A user will be able to log in to a previously created user profile.
If a user enters a username that does not exist, or the if password is incorrect, they will be presented with the relevant error message.
Once the user has logged in, they will be redirected to the Home Page.
This page will be available by clicking the Profile link in the navigation bar/menu, allowing a user to change their password after first confirming their current password, followed by their new password and matching confirm password.
This page will be available by clicking the Manage Reviews link in the navigation bar/menu.
On this page a user with be greeted by one of two outcomes.
-
If a user has not submitted any reviews, the page will display "You have not added any reviews yet". Followed by a prompt to add a review.
-
If a user has submitted a review, this page will display a list of the reviews they have created, each opening a modal so that the user can view the review, while providing the user with the option to delete or edit their review.
This page will be available by clicking the add review link/button found on the home page if the user is logged in, or via the Manage Reviews page.
Once loaded the user will be greeted with a search bar, allowing the user to enter the name of a game they wish to leave a review for.
This will make a request to the IGDB api, returning a list of games matching the users search criteria.
Each game returned from the api will generate a collapsible list containing the game cover art, game name and a summary of the game.
Within the collapsible list the user will also find a button prompting them to add a review.
This page will be available by clicking the add review button found in the collapsible list of the relevant game from the Search Page.
Once loaded the user will be greeted with a form asking them to give the game a rating, and give the review a heading, describe what they liked about the game, describe what they disliked about the game and how many hours they played the game.
The user will be able to rate the game, by using a range slider that has a range between 0-5. When the user activates the slider, the user will also see that the "rating stars" will update dynamically with the value of the range slider.
The user will then need to click the submit button in order for their review to be submitted. This will submit their review and return them to the home screen, displaying a message if the review has/not been successfully submitted.
If the review was not successfully submitted, the user will be returned to the Add Review Page, with each field populated with what the user attempted to submit.
This page will be visible after a user selects to view reviews on a particular game, selected from the home page.
At the top of the page there will be an image depicting the game cover art, a heading displaying the name of the game, followed by the official summary of the game.
The user will then see a list of all the reviews created for the relevant game as a summary, displaying the review heading, the rating, the number of likes the review has, along with the username of the user that created the review and the date it was created.
The user will be able to click on a review which renders a modal allowing the user to view the full review, and allow them to add/remove a like.
If a user adds/removes their like, the like counter on the review is immediately updated, without the page reloading.
Each review contains a link to the User Reviews page.
There will also be buttons displayed to edit or delete the review, but these will only be visible to either the user that created the review, or the site Admin.
This page will be visible after a user clicks on a username within a game review element.
At the top of the page there will be a heading, "Reviews By" followed by the username of the selected user.
Below the heading will be a list of all the reviews the selected user has created, containing a summary of the review, and a view button that renders a modal containing the full review.
If the username of the logged in user is Admin, they will be presented with an Admin button in the nav bar/menu, that when clicked will provide two options.
- Users - This will direct the Admin to the User Manager page.
- Reviews - This will direct the Admin to the User Reviews page.
This page will be only visible to the site Admin user.
It will contain a list of all the registered users, displaying the username, along with a button to delete that particular user.
There is also a Search Users input above the list of users, to aid in the Admin finding a particular username.
This page will be only visible to the site Admin user.
It will contain a list of all the created reviews, displaying the username and game name, along with a button to view the full review, where there will be a further two buttons, one to edit the review, and the other to delete the review.
To organize and streamline the development process, I created wireframes for the main pages of this project, to help me during the development process and to prevent scope creep.
Below are links to each wireframe page of the project, created to cover both Mobile and Desktop versions.
Using drawSQL i created custom models, which I predicted would be required when building the website.
In order for users to create reviews custom user, game and review models are required, the user id will be used as a foreign key in the review model, along with the game id being used as a foreign key also in the review model.
During development I made the decision to remove the dislike counter, as I felt this was redundant.
Although I am capable of linking a Mongo DB to the project, there wasn't really a developmental need to do so, and in my opinion would be bad practice to include it just for the sake of including it. So for this reason I made the decision to not include a Non-Relational database, such as MongoDB.
-
Google Fonts: Google fonts was used to import the 'Roboto' & Saira Stencil One fonts into the style.css file which is used on all pages throughout the project.
-
Font Awesome: Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
-
Git: Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
-
GitHub: GitHub is used to store the projects code after being pushed from Git.
-
Balsamiq: Balsamiq was used to create the wireframes during the design process.
-
GitPod: Open-source developer platform used for development.
-
MaterializeCSS: MaterializeCSS was used to help in constructing an attractive, consistent, and functional web page.
-
Flask: Flask is a micro web framework written in Python.
-
SQLAlchemy: SQLAlchemy is an open-source SQL toolkit and object-relational mapper (ORM) for the Python programming language
Testing has been documented separately, please see the Testing documentation linked below:
Before you can deploy your app to Heroku, initialize a local Git repository and commit your application code to it.
Git remotes are versions of your repository that live on other servers. You deploy your app by pushing its code to a special Heroku-hosted remote that’s associated with your app.
The heroku create CLI command creates a new empty application on Heroku, along with an associated empty Git repository. If you run this command from your app’s root directory, the empty Heroku Git repository is automatically set as a remote for your local repository.
heroku create -a gamestar-app
You can use the "git remote -v" command to confirm that a remote named heroku has been set for your app.
Add a remote to your local repository with the heroku git:remote command. All you need is your Heroku app’s name:
heroku git:remote -a gamestar-app
To deploy your app to Heroku, use the "git push" command to push the code from your local repository’s main branch to your heroku remote. For example:
git push heroku main
Use this same command whenever you want to deploy the latest committed version of your code to Heroku.
Heroku only deploys code that you push to the master or main branches of the remote. Pushing code to another branch of the heroku remote has no effect.
By forking the GitHub Repository you make a copy of the original repository on your GitHub account to view and/or make changes without affecting the original repository.
You can do this by completing the following steps:
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/Niki-Tester/gamestar.git
- All code was written and validated by the developer
-
Main Background image from Unsplash.com
- Source: Carl Raw
-
Dynamic Game Backgrounds are licensed to the relevant game publisher, and are sourced from the IGDB API
-
My Mentor for continuous helpful feedback.
-
Tutor support at Code Institute for their support.