Welcome to GameSay!

Game reviews by gamers for gamers!

This game review app provides people a space to share their experiences, insights, and opinions on their favorite games. Whether you're seeking recommendations or want to contribute your own reviews!

Sign up today to have your say on your favorite (or not so favorite) video games!

The live website can be found here

• Purpose of Project
• User Stories
• Web Design
• Wire frames

Many video game sites often overwhelm users with an abundance of content, including irrelevant information and intrusive promotional pop-ups. This project aims to streamline the video game consumer's experience, by cutting through the noise and focusing on the essential info of a video game, in particular if it's worth playing or not.

Value to Users:

• Community-driven Reviews: Users can read reviews from fellow gamers, offering insight and opinions on different games.
• Streamlined User Experience: The application's clean and modern design ensures a user-friendly experience, minimizing distractions and focusing on essential information.
• Convenient Accessibility: With features like search functionality and detailed game information, users can easily find the games they're interested in and contribute reviews.
• User Engagement: Through functionalities like user profiles and the ability to edit or delete reviews, GameSay encourages user engagement and interaction within the gaming community.

1. As a user, I want to be able to browse a variety of game reviews to discover new games.

2. As a user, I want to be able to search for specific games.

3. As a user, I want to be able to view detailed information about each game, including screenshots and release date.

4. As a user, I want to be able to add my own reviews for games I've played.

5. As a user, I want to be able to edit or delete my own reviews.

6. As a user, I want to be able to see reviews from other users to help me decide whether to play a game.

7. As a user, I want to be able to create an account and log in.

The app embodies a sleek and incisive design, focusing on a clean, simple, and modern aesthetic that reflects a user-friendly experience.

The color palette is vibrant and dynamic, mirroring the energy and excitement synonymous with video games, while also maintaining a sense of user-friendliness.

The app exclusively uses Roboto. By adopting a clean and accessible font, the design reflects contemporary trends while also ensuring readability.

The site's wireframes were made with balsamiq wireframes.

Home Page:

Sign Up Page:

Login Page:

Add Review Page:

Browse Reviews Page:

Profile Page:

Search Game Page:

Search Results Page:

• User Authentication:

  • Users can sign up with a username and password.
  • Existing users can log in securely.

• User Profiles:

  • Each user has a profile page where they can see their reviews.
  • Pagination is implemented for the user's reviews.

• Review System:

  • Users can add reviews for games.
  • Reviews include a rating and written review.

• Game Information:

  • Users can search for games.
  • Detailed information about games is fetched from the RAWG API, including description, release date, genres, developers, publishers, platforms, and tags.

• Game Reviews:

  • Users can view reviews for specific games.
  • Reviews are paginated.

• Editing and Deleting Reviews:

  • Users can edit and delete their own reviews.

• Account Management:

  • Users can delete their accounts, which also deletes associated reviews.

• Home Page:

  • Upon visting the landing page, the user can see the heading and logo of the site along with a view of the three most recent game reviews showcased in a visually appealing card format, offering a snapshot of the latest content.

• Sign Up Page:

  • Users can navigate to the sign-up page by selecting the "Sign Up" option from the navbar. The sign-up page provides a straightforward form where users can input their desired username and password to create a new account.

• Login Page:

  • If a user has already registered, they can login by accessing the "Log In" page from the navbar.

• Profile Page:

  • After logging in, users are directed to their personalized profile page, where they can access various account-related features and functionalities. The profile page displays the user's username, along with a summary of their submitted game reviews.

• Game Reviews:

  • Users can then choose to explore the current game reviews submitted by users by clicking on the browse link in the navbar, which takes them to the game_reviews page, providing valuable insights and recommendations for a wide range of titles. Each review includes a rating and written feedback, helping users to make informed decisions about their gaming experiences.

• Search Game:

  • The user can then choose to search for a game to review themself by clicking on the 'add' link in the navbar, which takes them to the search_game page.

• Search Results:

  • The user can then view a the results of their query on the search_results page which displays a pagination of the results display as game cards.

• Adding Reviews:

  • When the user selects the game they want to review, they are taking to the game_info page which displays a visually appealing covert art of the game along with all the relevant info, and then the ability to add their review and rating of the game with a form.

• Editing and Deleting Reviews:

  • The user can then see the games they have reviewed on their profile page and choose to edit or delete the review with a modal form.

• Deleting Account:

  • The user can then decide to delete their account if they so wish, which will trigger a modal to verify if the user definitely wants to delete their account, which in turn deletes their reviews from the database.

• HTML5 (was used for structuring and presenting content of the website)
• CSS (used for the styling of the content)
• JS (used for timeout functionality)
• Google Fonts (used for all the font styling within the project, font used was Roboto, and sans-serif for back-up)
• Bootstrap (used for the responsiveness and additional styling)
• RAWG (API used for retrieving video game info)
• flaticon (used for the various custom icons)
• Chrome (used to debug and test the source code using HTML5 and to test site responsiveness)
• GitHub (used to create the repository and store the projects code after pushed from Git)
• Codeanywhere (used for editing code of project)
• Gitpod (used for editing code of project)
• vscode (used for editing code of project)
• W3C Markup (used for validating the html5 code)
• Jigsaw Validator (used for validating the CSS code)
• Webaim Contrast Checker (Used for validating color contrast for accessibility)
• Jshint (Used for JavaScript validation)
• Flask (used for building of app)
• Jinja (used for html templating)
• Python (used for app logic)
• PyMongo (used for interacting with mongodb)
• Heroku (used for deployment of app)
• MongoDB (used for database)
• Am I Responsive? (used for responsiveness testing)

The only errors found in the templates were seemingly from the HTML Validator's inability to recognize Jinja Templating:

No errors were found.

No errors were found.

No errors were found.

With Heroku:

1. Sign in to your Heroku account or sign up for a new one.

2. Connect your Heroku account to your GitHub account:

   • Navigate to the Heroku Dashboard.
   • Click on the "New" button and select "Create new app."
   • Give your app a unique name and choose the region closest to you.
   • Click "Create app."
   • In the "Deployment method" section, select "GitHub."

3. Search for the repository you want to deploy from your GitHub account.

4. Once you've connected your GitHub repository, you can choose to either deploy the app automatically when changes are pushed to GitHub or manually deploy.

5. If you choose automatic deploys, select the branch you want to deploy from and enable automatic deploys.

6. If you prefer manual deploys, you can trigger a deployment manually by clicking the "Deploy Branch" button.

7. Heroku will build your app using your project's build scripts and dependencies specified in your repository.

8. Once the build is complete, you can view your deployed application by clicking the "View" button on the Heroku Dashboard.

9. You can manage your deployed application settings and view logs from the Heroku Dashboard.
 Remember to set up any necessary configuration variables (such as environment variables) on the settings page.

Fork and Clone Repository:

1. Visit the GitHub repository and click on the "Fork" button in the top-right corner. This will create a copy of the repository under your GitHub account.

2. On your forked repository's page, click on the "Code" button and copy the repository's URL.

3. Open your preferred Command Line Interface (e.g., Terminal, Git Bash) and navigate to the directory where you want to clone the repository.

4. Enter the following command in the command line: git clone [repository URL]

5. Navigate into the Repository: Use the cd command to navigate into the cloned repository: cd [repository name]

(Replace [repository URL] with the actual URL of your forked repository and [repository name] with the name of the cloned repository on your local machine.)

• Flaticon (For custom icons)
• Freepik (For custom icons)
• RAWG (for amazing api service!)
• Twitch (for inspiration!)
• IGDB (for inspiration!)
• Metacritic (for inspiration!)
• Video Games!
• My mentor Marcel for his support, encouragement, advice and guidance throughout the developing of this app.