Skip to content

traceytreat/PlugNPlay

 
 

Repository files navigation

Contributors Issues

Plug N' Play

February 2023 | Shawl Cohort | Prime Digital Academy

Application Overview

Discovering new video games and navigating online storefronts full of jargon can be an overwhelming and frustrating experience for people who have little to no experience with gaming. Plug n' Play is a web application designed to help users who are new to the video game atmosphere view game recommendations that are tailored to their personal interests. Plug n Play will provide the ability to personalize recommendations appropriately based on a questionnaire taken upon registering.

Plug N Play is powered by Rawg.io's API service, which allows us to search their database of over 800,000 games. Of their available 9,800 search tags, we have hand-picked a little over 200 tags to use as search terms and user scores to power our search algorithm. Upon registering for a new account, a new user will fill out a survey. For each question, the user is asked to rate their preferences on a 9-point spectrum. Upon completing the survey, these answers will be processed and turned into user scores, which will inform future recommendations. This survey should only be completed once, but the algorithm will continue to be adjusted when users rate games in their "played" list.

Installation

  1. Clone this repo
  2. Navigate to the repo directory in the terminal
  3. npm install
  4. Obtain a RAWG.io API key from https://rawg.io/apidocs
  5. Create a .env file in the root of the project and enter:
  `SERVER_SESSION_SECRET=[ enter a random string of numbers / letters ]`
  `RAWG_API_KEY=[ enter the API key you obtained from RAWG.io ]`
  1. Create the database according to the database.sql file.

Usage

  1. Start your PostgreSQL server
  2. In your terminal, npm run server
  3. In a separate terminal tab/window, npm run client. This should open the app in your browser.
  4. For the best user experience, right click and select Inspect, then click the Toggle Device Toolbar button and select iPhone 12 Pro for the dimensions.
  5. Create a new account, or login with an existing account.
  6. If you're a new user, answer all your survey questions and then tap ’Submit’ at the end.
  7. You will be taken to the recommendations view.
    1. Swipe up on a game to view details.
    2. Swipe right on games you might like.
    3. Swipe left on games you are not interested in.
  8. To view game details, swipe up and tap the Details button.
    1. On this page, you can add a game to your wishlist, played list, and/or ignore list.
    2. Liking or disliking a game on your played list will influence the algorithm and adjust your recommendations.
  9. Use the Collections tab to view the Glossary, your Wishlisted games, and your Played games.
  10. Use the Search tab to search for games by name or by genre.
  11. To view your Player Type and other account info, click the Profile tab.
  12. You can edit your profile image by clicking the gear icon.

Admin account

If you have an administrator account, you can use your account to update and maintain the glossary.

  1. Log in to your administrator account, and navigate to the Profile page.
  2. In the top left, tap the shield icon to open the Manage Glossary page.
  3. From here you can add new glossary entries, as well as view, edit, and delete any existing entries.

Known Issues

Please see the Issues page for a comprehensive list of issues.

Technologies Used

React Node MUI Postgresql Redux Redux-Saga Luxon.js React-Easy-Swipe

Acknowledgments

Thank you to:

  • Our client, Maxine, for allowing us to bring her idea to life.
  • Prime Digital Academy:
    • The Shawl cohort
    • Our instructors Dane, Liz, Kris, and Key
  • Our family and friends, for all of the help and support

About

Client Group Project

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 94.8%
  • CSS 4.9%
  • HTML 0.3%