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
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