Game Shelf is a site that hopes to provide easily accessible reviews and details of tabletop board games. The site will be targeted towards existing tabletop board game players and collectors who are looking for new games to play and collect, but also aimed at new gamers who may not know where to start. Game Shelf will be useful for gamers to find detailed reviews of games they may be interested in, and allow them to find all the necessary details of games.
Assessor login credentials:
- Username: Admin
- Password: Asrai0409
Tabletop gaming is taking the world by storm right now, and the board games industry is booming. There are now literally hundreds of games being published every year, and there has never been a better time to be a gamer, or to get involved. But it can be a minefield to negotiate and find the right games, whether you're a seasoned board gamer or complete newcomer. Game Shelf aims to provide accurate and comprehensive board game information and reviews that are easily accessible to everyone, and make choosing your next (or first!) board game as straightforward as possible.
Game Shelf is a board games review site built with a mobile-first design, but intended to be accessible on all devices. My aim with the project is to present the most relevant information alongside easily digestible reviews to enable users to quickly and easily decide which games to play next.
-
-
- As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about board games.
- As a First Time Visitor, I want to be able to easily navigate the site to find content.
-
- As a Returning Visitor, I want to find information about games I may want to play
- As a Returning Visitor, I want to share my reviews of games I have played
-
- As a Frequent User, I want to check to see if there are any new reviews.
- As a Frequent User, I want to organise reviews I've written on my profile.
-
- As a Site Owner, I want to earn money on games purchased through affiliate links
- As a Site Owner, I want to be able to manage and maintain the games database
-
The website is split into four main sections - a home (landing) page, a games catalogue page, an about page and user profile page. The fixed navbar allows the user to easily navigate the site, and presents a consistent layout, while the toggle feature makes the navbar more accessible for mobile and tablet devices whilst maintaining consistent positioning. The Home page displays a prominent header image and site message, with further information accessible on the About page. The Games page is clean and simple, ranking the games based on average user rating. Each game on the Games page links to individual games pages with additional information on each game. The About page provides users with further information on how to use the site. The Profile page contains the primary CRUD functionality, with users able to add, read, edit and delete their own reviews for games. Users can also add reviews from the Games page and individual game pages.
-
Home Page: Home
-
Games Page: Games
-
Individual Games Page: Game Pages
-
About Page: About
-
Profile Page: Profile
-
Basic Functionality Map:
- Database:
- Header images and 'About' page images are by Ross Connell for premium, professional board game photography.
- Footer image is 'Coloured Pencils' by Jess Bailey on Unsplash
- Colours were largely chosen from the Materialize Color Palette for ease of implementation. Plump Purple/Deep Purple (#673AB7) was chosen as the main site brand colour, with white as the main background colour to provide plenty of contrast for darker elements and text.
-
Plump Purple (#673AB7) - Main brand colour
-
White (#FFFFFF) - Main background colour
-
Black (#000000) - Main text colour
-
The site features several different button types for different functions, so it was important to differentiate these with different colours. 'Buy' buttons were coloured with 'Sap Green' (#4C7A2A) to convey a 'positive' impression and encourage clicks. 'Purple Munsell' (#9C27B0) was used for Add/Edit Review buttons to stand out from the 'Buy' buttons while also tying in with the main site purple colour. 'Ruby' (#D81B60) was used for 'Delete' buttons to convey a user warning. 'Light Sky Blue' (#90CAF9) was used for Add/Edit Game buttons to differentiate from the 'Review' buttons
- Sap Green #4C7A2A
- Purple Munsell #9C27B0
- Ruby #D81B60
- Light Sky Blue #90CAF9
- I used Google Fonts to browse interesting fonts. 'Syncopate' was used for headings as it is clear and easy to read but in keeping with the 'gaming' theme. 'Raleway' was used for the bulk of the page text, as it pairs well with 'Syncopate' and presents an easy-to-read larger character font.
- Icons were used to aid visual user navigation and make forms as intuitive as possible. All icons are provided by Font Awesome.
The site allows users to add new reviews and edit or delete their existing reviews. Users can search for games by name or description. Users can browse games ranked by rating, and can use 'Buy' buttons to purchase games they are interested in.
- I wanted users to easily be able to navigate the site from every page.
- The navbar resizes responsively into a toggle button at smaller screen sizes, to enable users to still navigate their way around the site.
- The navbar uses a colour change hover effect on the other links whilst navigating to a new page.
- The user can click on site title to take the user back to the Home page.
- The search box allows users to quickly search the games catalogue.
- Contains prominent header image and direct site message to immediately catch user's attention and indicate the site's purpose.
- Lists games in order of average user rating, so users can easily see which games have highest ratings.
- 'Buy' button for each game links to external affiliate link .
- 'Add Review' button allows users to quickly and easily add reviews for games directly from Games page.
- 'Edit Game' button for 'admin' users to quickly and easily update games in the database.
- Displays game cover art
- Prominently displays average game rating, as well as user rating when applicable.
- Displays full game details, detailed description and all reviews for each game.
- Details what the site is about and how to use the site.
- Allows users add, edit, read and delete their reviews.
- Allows 'admin' users to add new games to the database.
- Provide links to social media with handy icons for easy navigation.
- Ability for users to rate games without adding reviews.
- Allow users to save games to their own collection on their profile.
- Ability to allow users to create 'wishlists' of games they would like to own.
- A custom 404 error page with suggestions to help users find content if url is mis-linked/typed.
- Allow reordering of games catalogue by title (alphabetical) or user rating, as well as default average rating.
- Allow user to edit profile to change username or password.
- Ability to apply 'admin' role to more than just 'Admin' user.
- Link reviews in 'Latest Reviews' to relevant game pages for easier navigation and better user experience.
- Flask
- Balsamiq - Used for the creation of wireframes.
- FontAwesome - Used for all form icons, as well as search bar and menu toggle icons.
- Lucid - Used to map out user interaction and CRUD functionality.
- JQuery - The project uses JQuery to simplify DOM manipulation.
- GoogleFonts - 'Syncopate' and 'Raleway' fonts.
- Materialize - Modern responsive front-end framework based on Material Design, used to construct the majority of visual elements of the site.
- Werkzeug - The project uses the Werkzeug WSGI library to manage the User Authentification.
- Github - Used to store the code
- Gitpod - Used as the primary version control IDE for development to further push and commit code to GitHub.
- Heroku - Used to deploy the live site
- Code Institute Course Content - Primary source of learning code.
- Stack Overflow - Used for general troubleshooting and examples.
- W3Schools - Used for examples and tutorials.
- ChromeDevTools - Used frequently to detect any issues/bugs or layout differences.
- Coolors - Used to help define the site colour scheme.
- ami.responsive - Used to generate multi-device mockup image.
- ResizeImage - Used to resize images to web-optimised sizes
- Information on testing can be found in TESTING.md
- Go to GitHub and sign in, or sign up for an account.
- Once a Github account was created, I opened a new repository by clicking the green button "new". To create this project, I used the Code Institute's student template.
- Click on the green "gitpod" button to open Gitpod, a cloud-based version control software or IDE, which was used to write all code for this project.
- It was then pushed or saved in the terminal to Github where it is stored in a repository
The project was deployed to Heroku using the following steps:
- Create a "requirements.txt" file using the
pip3 freeze --local > requirements.txtcommand. - Create a Profile using the
echo web: python app.py > Procfilecommand. - Delete the blank line at the bottom of the Procfile, as this can sometimes cause problems when running the app on Heroku.
- Add, commit and push these new files to GitHub.
- Navigate to Heroku and log in to the dashboard.
- Click "Create a New App".
- Enter a unique app name and select the closest region ('Europe' in my case).
- Click "Create App".
- Under 'Deployment Method' click GitHub.
- Once the GitHub profile is displayed, add the GitHub repository name then click "Search".
- Once the repository is found, click to connect to the app.
- As the environment variables are hidden in an env.py file, these need to be added to the Config Vars in Heroku
- Go to the 'Settings' tab for the app, then click on "Reveal Config Vars" and enter the key:value pairs from the env.py file.
- Back in the 'Deploy' tab, click "Enable Automatic Deployment" then below that, make sure the main branch is selected and click "Deploy Branch"
- Once the app has successfully deployed, click "View" to launch the app.
Forking the GitHub repository creates a copy of the original repository on your own GitHub account to view and/or make changes without affecting the original repository; use the following steps to fork:
- Log in to GitHub and locate the GitHub repository
- At the top of the repository above the "Settings" button on the menu, locate the "Fork" button.
- You should now have a copy of the repository in your own GitHub account.
- Log in to GitHub and locate the GitHub repository
- At the top of the repository, click the "Code" button (next to the green "Gitpod" button)
- Under "Clone with HTTPS", copy the URL provided
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory
- Type
git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- Press Enter. Your local clone will be created.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.
Click here to retrieve pictures for some of the buttons and more detailed explanations of the above process.
The site uses a MongoDB database for data storage and retrieval.
From the CLI:
mongo "mongodb<url connection string>" --username root
Input the root password when prompted
From the MongoDB CLI:
use <database>
From the MongoDB CLI:
db.<collection>.insert(<document>)
From the MongoDB CLI:
db.<collection>.createIndex({<fields>:<type>}{<options>})
- Header images and 'About' page images are by Ross Connell, used with permission.
- Footer image 'colored pencils' by Jess Bailey on Unsplash
- Horizontal scrolling added to games catalogue table thanks to this answer from Serge Stroobandt on Stack Overflow.
- Pagination on Games page adapted from this demo by Huang Huang on GitHub. Thanks to Krisztina Sarolta Szabo on Slack for the link.
- Seach bar clear icon adapted from this answer by Josh Crozier on Stack Overflow.
- 'Delete Review' modal thanks to Ed Bradley and Gwen Bradbury on Slack for this walkthrough
- My Mentor, Nishant Kumar, for his guidance throughout this project.
- Thanks to Gwen Bradbury and Ed Bradley on Slack for tackling the 'defensive programming' modal
- Huge thanks to Sean Murphy, Miklos Sarosi, and especially Jo Heyndels from Tutor Support for their patience, support and tutoring!
- My family and friends for their feedback and help with testing.
- As ever, eternal thanks and love to my wife and son for their endless patience, support and lending of devices for testing!