Gamer Verse is a content-sharing platform to share reviews, posts and have social interactions with like-minded individuals about games. Users will be able to find posts and reviews relating to the gaming space, along with community events in local cities. This is the frontend section of the project built to work in conjunction with the backend DRF API as the database.
DEPLOYED FRONTEND (HEROKU) - CLICK HERE
DEPLOYED API (HEROKU) - CLICK HERE
DEPLOYED BACKEND REPOSITORY - CLICK HERE
- User Experience (UX)
- Design
- Agile
- Features
- Future Development
- Components
- Testing
- Solved Bugs
- Known Bugs
- Technologies Used
- Deployment
- Credits
To be the go-to gaming community by sharing the latest news, reviews, and interesting gaming trivia that users can then comment on and have a friendly discussion to share their passion.
- To provide users with the latest news, reviews, and trivia about gaming
- To bring people together and create a sense of belonging
- To share with the community and create interesting discussions
- To share local events
Sites Ideal Users
- An interest in gaming no matter what medium
- Looking for a gaming community to reach out and connect with like-minded individuals
8 Epics were created which were further developed into 34 User Stories. The details of each epic along with the associated user stories can be found on the kanban board here.
- Initial Django REST and React Setup #1
- Authentication #2
- Navigation #3
- Posts #4
- Comments #5
- Profiles #6
- Events #7
- Reviews #38
Below are links to each of the individual user stories that were completed within the project's initial release.
-
Initial Django REST and React Setup
-
Authentication
-
Navigation
-
Posts
-
Comments
-
Profiles
-
Events
-
Reviews
-
About
-
Events
-
Forms
-
Homepage
-
Profile
Various colours were used throughout the website. There was the main colour scheme used with supporting colour pallets also. Below are the various pallets that were used.
Main Pallete:
Supporting Pallettes:
The font used in this project was Roboto with a backup of sans-serif. It was chosen for its easy readability for users. Fonts were imported using Google Fonts.
Throughout this project, an agile approach was used to develop the website. Each activity was broken down into smaller bite-sized more manageable actions from initially creating 8 Epics, which were then broken down into 34 smaller user stories. Each of the user stories then had an acceptance criterion and a list of tasks to complete. This made the overall project much more manageable to build. GitHub labels were used to categorise the user stories using the MoSCoW Prioritisation technique. This made it easy to categorise tasks by importance, prioritise the focus on these and get the project completed.
A kanban board was created using GitHub Projects here to help keep track of all the tasks including Todo, In Progress and Done.
A clean homepage with minimal distractions ensures the user's main focus is on the list of posts. The posts are displayed in a single list, styled as cards to give a clean separation between posts. Each post includes a title, description and category. This provides the user with a good summary of information to see if they would like to interact with the post further by clicking on it and leaving a comment on it or liking it. Users do not need to be registered to view a post but do need to be logged in to like or comment on a post. There are different features and navbars available dependent on if a user is signed in or not.
- Homepage signed in
- Homepage signed out
When the homepage and website is viewed on smaller screen sizes the navigation bar turns into a burger menu to ensure a good user experience.
The navbar is featured on all pages, is responsive and has active links functionality so the user knows which link they are on by hovering on it in the navbar. It is identical on all pages and is easy to use providing a good user experience. For mobile view, the navbar reduces to a burger menu. The purpose of this feature is to allow users to navigate all pages easily across all devices without having to use a back button to get to the next page. There is also authentication in place which will change what displays on the navbar depending on whether a user is logged in or not.
- Logged out Navbar
- Logged in Navbar
The website has a sign up functionality which then redirects the user to sign in once submitted and then once signed in there is an option to sign out. These pages are needed to provide authenication and to allow users access to content that is restricted to those who have created a login.
- Sign up
- Sign in
- Sign out
Each post includes a title, category/game medium type and description. There is also the functionality to leave a comment and like a post. It has been created in way so users can easily digest the content of a post and interact with it if they wish.
- Post
If a user navigates to a post whilst being signed out then they will be able to view the post, read other users comments and see how many likes a post has however, won't be able to leave their own comments or likes.
- Post with comments signed out
If a user navigates to a post and is signed in they will be able to read the post, leave a like or comment. If the user owns the post then they will also have the option to edit the post or delete it.
- Post with comments signed in
The add a post form is a simple form design taking the user through the journey of each field that needs to be added before being able to submit a post. There is also validation in place to ensure the user fills out all neccessary fields.
- Post form
The edit post form is identical to the post form and allows the user to edit existing data that they have posted previously using the post form.
-Edit post form
Each review includes a title, genre, rating, game publisher, game developer and content. The review section provides all the interesting and neccessary information for a user to be able to then go off and do further research about the game. This page is designed to provide short and informational opinions of a game.
- Review
The add a review form is a simple form design taking the user through the journey of each field that needs to be added before being able to submit a post. There is also validation in place to ensure the user fills out all neccessary fields.
- Add review
The edit review form is identical to the post form and allows the user to edit existing data that they have posted previously using the review form.
- Edit review
Each event includes a title, content, price, date, time, address, city and url. The event page is designed to be concise and easy to read providing all the neccessary details of an event. There is also an option to add URL so users can find out more about the event. The URL opens up in a new tab so as not to take the user away from the site permanently.
- Event
The add an event form is a simple form design taking the user through the journey of each field that needs to be added before being able to submit an event. There is also validation in place to ensure the user fills out all neccessary fields.
- Add event
The edit an event form is identical to the post form and allows the user to edit existing data that they have posted previously using the event form.
- Edit event
Most active community gamer profiles display to the right of the website on most pages or at the top of the page on smaller device. This gives a snapshot of users avatars and profile name which can then be clicked on to find out more information about individual users.
- Most active community gamers
A signed out user can view another users profile, read what they have added in their bio, see that users stats and the posts they follow.
- Profile signed out
A signed in user can do everything a signed out user can do but also follow/unfollow profiles, edit their profile, change their username and change their password. The stats on the profile for posts created, number of followers and following autmotically update.
- Profile signed in
The edit profile page provides a user to edit their own details including adding a their name, favourite game, add/update their profile image and a section to give a summary about who they are.
- Profile edit details
The edit details page allows a user to change their username.
- Profile edit username
The edit password page allows user to change their existing password to a new one.
- Profile edit password
The about page is a clean and follows the styling of the rest of the website. It provides the user with information about the project, it's intent and links to the creators socials.
- Like and comment ability for reviews and events pages
- Private messaging between users
- Group messaging between users
- Interactive gaming session where users can play browser games together on the website
- Gamer scoreboard
- Notifications for when a user receives a new follow, comment or like
- A contact form so users can get in touch with site admins/provide feedback
A wide selection of components have been implemented throughout this project and reused on multiple pages:
- Asset.js - this component supplied the loading spinner used throughout the website
- Avatar.js - this component adds to the improved UX by allowing users to add a profile image of their choice
- MoreDropdown.js - this allowed the user to edit and delete posts, events and reviews
- axiosDefault.js - an efficient way to communicate with the backend Gamer Verse API
- NavBar.js - this component is present on every page of the website. It makes navigating the website easy for the user and collapses into a hamburger menu for screen sizes medium and below
- NotFound.js - this component appears when a user tries to access invalid URLs. There is a clear message that appears telling the user the page doesn't exist
- CurrentUserContext.js - confirms the user logged in status so that appropriate functionality can be displayed and is available to the user such as creating a post
- ProfileDataContext.js - provides the follow/unfollow functionality to other users across the Popular Profiles and Profile Pages components
- useRedirect.js - redirects a user to another page if they are not authorised to be on the page they are trying to access
- utils.js - provides the functionality to all of the components that utilise the infinite scroll
I have manually tested all the features of the website making sure to go through them with different browsers and device sizes. I have also checked the features of the site against the original user stories to ensure they have all been actioned.
- CRUD functionality has been tested for the following: Posts, Reviews, Events, Comments, Likes, Follows and Profile on both the development and deployed version of the site
- All Nav links open on the correct page
- All external links open in a new browser
- Authentication works displaying a different set of options for logged-in users compared to logged-out
- Pages that are intended for logged-in users only will redirect any users who are not logged in back to the homepage
- Validation on forms works
- Not found pages display correctly when a non-existent URL is searched or a Post, Review or Event that doesn't exist is searched
- All pages are mobile responsive
User Stories
Browsers
- The website was tested on the following browsers: Google Chrome, Firefox, Microsoft Edge and Safari
- For each browser, functionality was tested including links and the responsive design
- It is worth noting that in order to be able to test the full sign in functionality on Safari or Firefox, the "Prevent Cross-Site Tracking" needed to be turned off in the browser settings. This is because if this isn't done, the cookies are not saved and access tokens are not refreshed. This means a user can be created however, the sign in functionality doesn't work.
Devices Tested
The website was viewed on a variety of devices of all sizes including:
- Windows 11 Desktop (screen resolutions tested in 2560x1080 and 1920x1080)
- MacBook Pro (13-inch 2015 version)
- Moto G4
- Galaxy S5
- Pixel 2
- Pixel 2 XL
- iPhone 5/SE
- iPhone 6/7/8
- iPhone 6/7/8 Plus
- iPhone X
- iPad
- iPad Pro
- Surface Duo
The website is fully responsive and no issues were found.
The official W3C Markup Validator was used to validate the CSS in the project.
W3C CSS Markup Validatior - https://jigsaw.w3.org/css-validator/validator
All CSS code passed through the validator without any issues.
The ESLint extension was downloaded on Gitpod and integrated throughout the entire project. Any errors that it picked up were corrected, however, most of these were minor and had to do with spelling mistakes. Each page was meticulously scanned for problems and fixed if any came up.
The website passed the colour contrast accessibility validator by A11y.
The website has performed well in the Lighthouse tool, in particular for Accessibility on all pages. Below is an example of the scores for the About page which is reflective for all pages:
-
Some of the validation for the post create form wasn't working as expected and allowed posts to be created without any content being added. This was an issue on the API side and was fixed by updating the Gamer Verse API post model to make the description field required.
-
A 'The submitted data was not a file. Check the encoding type on the form.' error occurred when trying to submit an image for the post create form. This was fixed by changing 'formData.append('image', image)' to 'formData.append('image', imageInput.current.files[0]);'. Link to commit
-
The game publisher and developer fields were not clickable in the review create form. This was fixed by changing the fields within the form control from as="text" to type="text". Link to commit
-
An issue occurred where the reviews page wasn't displaying images correctly and they just showed as broken. After much debugging and with the help of Rebecca from Tutor support the issue was finally narrowed down to being with the reviews serializer not having an image field included. Once added the images displayed as expected.
-
The following error displayed 'Warning: Invalid DOM property
class. Did you meanclassName?'. This happened due to adding class rather than className for the favourite navbar. Link to commit
No known bugs left. If you find any please contact the project owner.
- Heroku - this was the platform used to deploy the application
- Django - used to build the backend database that serves the API for the frontend
- ReactJS - was used to build components that collectively form the frontend application
- React-Bootstrap - CSS framework used to develop responsiveness and mobile-first approach
- Gitpod - this was my code editor for this project and used to create JSX and CSS files before pushing to GitHub
- Git - was used for version control using the terminal through Gitpod to commit to Git and push to GitHub
- GitHub - is used to store the code for this project after being pushed from Git
- Techsini - was used to generate multi-device website mockups
- Fireshot - this was a Google Chrome extension used to take screenshots
- Google Fonts - used to import fonts to website
- Font Awesome - library of icons used for social media and services we offer
- Balsamiq - was used to create the wireframes during the design process.
- GoogleDev Tools - was used to help investigate issues with code and visually see what code was related to which area on the page
- ColorSpace - used to generate colour pallets for use on website
- a11y - used to check website colour contrast and accessibility
- Raw Pixel - used to find royalty-free images
- Favicon.io - generated the websites favicon
- SQLite: local database used to test during development
- PostgreSQL: database used in Heroku to store data on deployment
This application has been deployed using Heroku by following these steps:
- Create a new repository on GitHub
- Create a new Gitpod workspace
- Once the workspace has been loaded, run the following command, enter y to confirm installing the create-react-app package and wait until all packages have been installed. This will pre-install all necessary packages to make your project work.
npx create-react-app . --template git+https://github.com/Code-Institute-Org/cra-template-moments.git --use-npm
- Alternatively, you can use the following however, you may see different outcomes to this project as the dependencies will be different versions.
npx create-react-app . --use-npm
- Once the app has installed, run the terminal command
npm startto check the app is working. - Remove the React default logo import in App.js and replace the React header with a custom h1 element containing some test text
- Confirm changes have rendered correctly to browser preview and add, commit and push changes to GitHub
- Create a new app in Heroku
- Click on the 'Deploy' tab and go to 'Deployment Method' and choose GitHub
- Navigate to 'App connected to GitHub' and search for the relevant repository
- Select the repository you wish to deploy and click 'Connect'
- Navigate to 'Manual Deploy' and click 'Deploy Branch'
- Check the build logs to monitor the build and ensure deployment is successful
- The build is complete when the log states 'Build succeeded!'
- Click the 'Open App' button to view deployed app
- Navigate to Gitpod, and install react-bootstrap by running the following terminal command:
npm install react-bootstrap@1.6.3 bootstrap@4.6.0
- Navigate to your Heroku app for your DRF-API project and under the 'Settings' tab add the following config vars:
- Key: Client_Origin | Value: https://react-app-name.herokuapp.com
- Key: Client_Origin_Dev | Value: https://your-gitpod-browser-link.ws-eu73.gitpod.io
- Ensure that the trailing
\is removed from the end of both links and save the config vars - Install the Axios package, and create the supporting
axiosDefaults.jsfile
- If you have used the dependencies template method in point 3 of the pre-deployment steps you do not need to do points 2 or 3. Please skip to point 4
- Navigate to package.json in Gitpod and in the scripts section add the following command:
"heroku-prebuild": "npm install -g serve,"
- Add a Procfile to the root of the project with the following:
web: serve -s build
- Add the following code to your package.json file:
"engines": {
"node": "16.14.2",
"npm": "8.5.0"
}
- Git add, commit and push your code
- Navigate to Heroku and deploy the project via the deploy button under the 'Deploy' tab
You can fork the GitHub repository to make a copy of the original to view and change without affecting the original. This can be done by:
- Log into GitHub or create an account
- Locate the repository at https://github.com/Jbachtiger/ci-pp5-gamer-verse
- At the top of the repository, on the right-hand side of the page you will see an option to select "Fork" from the available buttons
- Click the fork button and a copy of the repository will have been created
You can create a clone of your repository by:
- Locate the repository you wish to clone https://github.com/Jbachtiger/ci-pp5-gamer-verse
- Click the arrow on the 'Code' button at the top of the list of files
- Select the clone by HTTPS and copy the URL using the provided clipboard
- Navigate to your chosen code editor and within the terminal change the directory to the location your to clone the repository to
- Type 'git clone' and paste the HTTPS link you copied from GitHub
- Press enter and git will clone the repository to your local machine
Content for the various posts, events and reviews have either been written by myself or snippets taken from the below sources:
Various images were sources for the content of the website including:
- The Code Institute Moments Walkthrough - this walkthrough was used as a step-by-step guide to creating the foundations of the project which was then built upon to make my own. I have credited all code throughout the project with docstrings
- Tutor Support - I interacted with numerous people on the tutor support team to help me debug my code
- Stack Overflow - was used to help reinforce understanding and problem solving
- React Documentation - used to improve understanding of concepts
- React Bootstrap- used to help with the styling of the project
- My partner for her patience and continuing support
- Code institute Slack Community and Tutor Support