Game Save

Search, view, or discover video game titles and save them to your wishlist

View Site

Table of Contents

1. About the Project
2. How I Worked On This Project
   • Designing
   • Planning: User Stories & Features
   • Organization: Task & Bug Tracking
3. How To Navigate This Project
4. Why I Built the Project This Way
5. If I Had More Time I Would Change This
6. The Idea Behind This Project
7. Challenges
8. Q and A
9. Available Scripts

About the Project

Built With

• React
• Redux
• React-Router
• IGDB API
• Firebase - Authentication and Realtime Database
• Heroku (proxy)

(back to top)

The Idea Behind This Project

To Practice My Skills

After finishing my react and redux course I wanted to create an app to practice all that I learned such as:

• React & Redux
• Authentication (Firebase Google)
• HTTP Reqeusts/Consuming an API (IGDB API)
• CRUD operations and a database (Firebase Realtime Database)

Solve a Problem I Had

I like video games but I don't have a lot of time to play. So sometimes a new one comes out (or I am reminded of an old one I never got a chance to play). Then later on, I have time to play, but I forget what games they were. So I made an app, and no matter what system the game is on, I can search it, and save it for later to have have a wish list of games I can come back to when I'm looking to purchase a new game.

(back to top)

Features

Sign in as a Guest or with Google

• Sign in is required to save titles to your wishlist

Search Video Game Titles

• Scroll through popular titles on the home page, use the dropdown to search games by genre, or use the search bar to find a specific game

View Quick Summaries

• Hover over titles to qucikly view and scroll through summary

Quick Save

• Quick save a title when scrolling through games

Full Game Information Page

Click on video game title to view:

• Summary and storyline, links, and more game information
• Videos
• Screenshots
• Artworks gallery
• Click on images to zoom in and scroll through gallery (no loading spinner currently, may have to wait for next image to load)
• Add game to your wishlist

Save Games to List

• View (or delete) your saved games by clicking "Saved Games" via the profile button dropdown

(back to top)

How I Worked On This Project

Designing

• I'm not a designer but I wanted to closely follow a professional workflow but Adobe XD was giving me too much trouble loading fonts. Instead I roughly drew it out on a sketchpad: Sketchpad
• For the app's design I took inpsiration from varous gaming-related websites such as GOG.com and IGDB.com to name a few

Planning: User Stories & Features

• I wrote out user stories and features: Screenshot

Organizing: Task & Bug Tracking

• I organized my work using Notion
• I worked on tasks on a Kanban board using Notion: Link to Task & Bug Tracker

(back to top)

How To Navigate This Project

Twitch OAuth Client Credentials Flow

• Code: Implementation of Twitch's OAuth client credentials flow (Fetching/Refreshing the App token storing to Firebase Database) + HTTP requests using axios

HTTP Requests from REST API + Use of Hooks

• Code: Home Page

Mapping Arrays

• Code: To fill carousels with game information

Google Authentication via Firebase Auth REST API:

• Code

Redux State Managment

• Code: Handling user data

Context State Mangment: Auth/Login

• Code: To persist state if user is signed in

Search Feature

• Code

Browse Games by Genre Feature:

• Code

Full Game Information Page (Info, Links, Videos, Screenshots, Artworks):

• Code
• Code (CSS)

Code Splitting / Lazy Loading

• Code

Dynamic Styling with React:

Example with dropdown menu

• Code

(back to top)

Why I Built The Project This Way

Project of Many Firsts

This was my first react, react-router, and redux project, a well as a first making http requests, consuming an API and token, authentication, and using a database.

Keep the Focus on Javascript and less on CSS

My goal was to maintain focus on JavaScript and React/Redux therefore I decided to keep it simple with the CSS and used external sheets rather than CSS-in-JS styled components or CSS Modules

For the same reason I also used

• Bennett Wong's loading dots from CodePen
• React Slick Library for Carousels (although I did alter some code to customize)
• React Hot Toast Library

(back to top)

If I Had More Time I Would Change This

• Refactor some code such as this and this in order to not repeat myself and maintain coding best practices. As well as organize my firebase/auth code better.
• Cleaner and more organized folder structure such as moving the page components into a seperate component folder
• Add some unit, integration, and end-to-end testing using Jest and React Testing Library
• Figure out why it takes so long to initailly load
  • added lazy-loading to improve initial load time by a few seconds (1/23/2022)
• Add a guest login (updated 1/20/2022)
• Memory leak bug on Google user sign out
• Add a loading spinner to image galleries
• Make image gallery full screen for mobile
• Add a modal for singing in instead of a toast notification
• Instead of toast notifications I would update the buttons to alert the user that a game was saved
• Add a featured game/more content on the home page

(back to top)

Challenges

Handling asynchronous data

• Many of the errors/bugs were simply due to code being written without consideration to async data such as code being executed before data in a useState hook had a chance to update.

Implementing Twitch's OAuth Client Credentials Flow

• Working with a more complex API such as Twitch/IGDB's API. Reading and understanding the documentation, testing (using Postman), and implementing the app access token into my code properly took some time and effort. Maybe a week or two. I ran into a CORS error which required a workaround for the IGDB API by setting up a proxy using CORS anywhere with Heroku.

Debugging Code

• This project really tested my debugging skills. Using best practices in the first place will help avoid bugs entirely, however when they do happen, I've learned to work through them logically, use console logs, chrome dev tools/debugger/breakpoints, and keep calm as more than likely it's a very easy fix with a solution just around the corner. Take a short break if I have to.

CORS Error

• The Twitch IGDB API didn't support CORS and so they recommeded setting up a proxy using CORS everywhere and Heroku. Not something I was familiar with but eventually figured out how to correclty implement it thanks to a 10 minute video of someone who implemented it. Still took me an hour but had I not figured it out I would have had to abandon the project.

My First App

• Although through tutorials I had implemented HTTP Requests, worked with an API, Firebase, React, Redux, and React-Router, this was the first time doing them on my own. It took a stressful 2.5 months to complete as it being a project of many firsts I made many mistakes, but it really forced me to learn.

Q and A

Did I learn a lot?

Oh yeah. Authentication, using a database, tokens/refresh tokens, APIs, reading docs, HTTP requests, React, React-Router, Redux Toolkit, Context API, and most importantly handling asynchronous data.

Did it take long?

...I don't want to talk about it 😐 (2.5 months)

Do I hate myself for jumping into the deep end as my first app without building up to this?

Meh, kind of. Hard for the code to not get messy as I made a lot of mistakes but that's the best way to learn, because I do NOT want to deal with the stress of dealing with those mistakes again so I've been better prepared going forward.

(back to top)

Available Scripts

In the project directory, run:

npm start

(back to top)