Game Library (React Project)

My final project as with any project is always a work in progress. There are so many things that I’ve learned and still so many things that I want to work on. My app is a Game Library that lets a user search through a Video Games API and save them to a collection. The project leverages many many things that I’ve learned over the course of my Flatiron School journey.

Backend

The backend for the project is built on Rails. There were some shortcuts taken to get things going, like the sign-up/login process, but these can be improved over time, especially because I previously have used Google OAuth for signing in/up.

Models and Associations

The models and associations were fairly simplistic and straightforward with a User model, game model and collection model. The collection model serves as a join table between Users and Games.

User

Game

Collection

CORS

The route of some headaches because CORS (cross-origin resource sharing) allows for restricted sources to make a request from outside the server’s domain. It took a little configuration of the requests and ensuring that credentials: true so that the server would allow cookies and would allow for the configuration to work.

Controllers

Similar to models these were straightforward and followed standard setup from other projects. All three controllers render in JSON without the help of serializers.

User Controller

The user controller supported the signup process, showing a user’s collection and removing an item from the collection.

Game Controller

The game controller dealt with the creation of games and adding them to a user’s collection.

Session Controller

Sessions solely dealt with a user logging in.

Frontend

The API passes data to our frontend to be rendered. The API calls took a little figuring out, but once solved, they made sense. The frontend was built with React and Redux and definitely helped get the project going. There are still things to figure out, but I’ve enjoyed the journey.

React

The React generator helped get the project started and looking up the documentation allowed me to create it with Redux built in.

Redux

Using Redux means the React components can read date from the Redux store and give actions for data updates.

Provider allows Redux be available to the rest of the app.

Redux also gives a connect function that lets components connect to the store. In order to do so, one uses mapStateToProps and it will return an object that contains data the component needs.

Thunk

Middleware that will handle async actions in Redux. This helps avoid returning an action before the data is fetched.

Router

Allows single-page applications to navigate through multiple views without having to reload a full page.

Styling

Still figuring out CSS and how to make things pretty. Blend of custom and things like FontAwesome.

Finale

It’s been really neat to make it through this journey and see how far that I’ve come. I still feel like I’m only scratching the surface of what it means to be a full time developer. There are so many great packages for React and I’m excited to dive into it more as I become more proficient. I’m proud of what I’ve accomplished, but not satisfied!