This website has been created for users to write reviews for a selection of games and compare their scores.

The live site can be found here

• User Experience

  • User stories
  • Admin Stories

• Planning

• Features

• Future Features

• Django apps and models

• Testing

• Languages and Programs Used

  • Languages

  • Libraries and Frameworks

  • Development tools

  • Required modules

• Credits

As a user I would like to be able to...

• View the list of Video Games so that I can select one to review
• View a paginated list of videogames so that I can easily select a videogame to view
• Click on a game so that I can read the full details and reviews of the game and I can review it
• View a list of reviews so that I can select one to read
• Register an account so that I can review, comment, and like
• Leave a review for a game so that my opinion is heard and I can be involved in rating the game
• Edit or delete my review in order to show my change of opinion or remove mistakes

As an admin I would like to be able to...

• Create draft games so that I can finish writing the content later
• Create, read, update and delete games so that I can manage the site content
• Create, read, update and delete reviews so that I can manage the site content
• Approve or disapprove reviews so that I can filter out objectionable content

• Colour Scheme

  • Simple black and yellow colours for most of site and purple for logo to represent royalty
  • contrsating colours for easy legiblity and style

  

• Font taken from Google Fonts

  

• Pages were planned out on Figma using wireframes

• Logo
  • The logo was made using Canva
  • Used as link to return to the home page
  • Logo uses purple to represent royalty

• Base Template

  • Header with navigation bar

  

  • Footer with social media links

  

• Index Page

  • Introduction telling you about the site and what to do

  

  • List of Games to choose
  • Games ordered by average review scores
  • Images, titles, scores and developer shown on each game card

  

  • Paginated if above 6 games

  

• Game Detail Page

  • Game detail with average review score and description

  

  • Game reviews with the ability for user's to edit and delete their own reviews

  

  • Review Form with stars that reflect the users rating

  

• Edit Review Page

  • Will fill the inputs with the review of that instance to be edited
  • Submits an updated review to be approved again

  

• Delete Modal

  • An 'are you sure?' modal to prevent users from accidentaly deleting

  

• Messages

  • Review submission, sign in and out message confirmation
  • Times out after 2.5 seconds

• Account pages

  • Login logout and signup pages connected with allauth

• Users can add games
• Add a spoiler-free tag on reviews

• Tested using the official W3C Validator

• Tested using the official Jigsaw W3C Validator

• Tested using JSHint JavaScript Validator

• Tested on Google Chrome, Internet Explorer, Microsoft Edge and even the Samsung Internet App on Mobile and Tablet

• Tested responsiveness on a Samsung A21 Phone, Samsung Galaxy Tablet and Desktop
• Tested with Google Chrome Development tools for different screen sizes

• Tested using a web accessibility evaluation tool called Wave
• Semantic HTML is used
• Headers are in order and not skipped (h1, h2, h3)

• The starRating function would produce undefined sometimes, so an if statement was used to filter them out to avoid errors
• The fixed bottom footer would overlap onto the main content, so using flexbox and a mininum height of 100vh for the body element fixed this instead of fixing it to the bottom
• The game list contents overflowed out of their cards, boostrap classes was used to change the size of the cards accordingly while keeping them all the same height
• The edit review page wouldn't fill the inputs with the rewview data, so redefining the review instance tended to fix this

• HTML5 for site structure
• CSS3 for styling
• JavaScript for star ratings and message timeouts
• Python 3.0 for Django

• Django's model view template structure was used to create apps and run them
• Boostrap4 framework used for responsive styling and templates

• Git for version control
• VS Code as IDE (integrated development environment)
• PIP to install packages
• Postgresql for the database to create content and manage data
• Heroku used for deployment

All modules required are located in the requirements.txt file.

• JavaScript code for star ratings is based on code from Brad Traversy
• Bootstrap cheatsheet helped by listing boostrap classes in an easy to find manner
• Boostrap Templates and Examples used as a basis for some features
• Font Awesome used for the stars
• W3Schools used for reference in using coding languages
• Stack Overflow was used to find solution to some coding issues
• The Code Institute study material was used
• Wikipedia used for descriptions of the games