React Redux: Memory Game

I knew for my final project at Flatiron I wanted to make a game. I have always loved playing memory games and thought it would be an exciting challenge. This was my chance to have fun with React and see how much of it I could explore.

First thing I needed to do was make sure I met requirements. I needed the a Rails API to handle the data persistence to a database. I used fetch in my front-end to GET and POST data to the API. By now I was pretty familiar with making a Rails API but looking back I would have set up the game first then decided what should persist. It got tricky at some points trying to make things work when they would not save. Below is my schema which has my user and game's tables. I structured the project so a game belongs to a user and a user has many games. This way I could set it up in the front-end to have a user sign in and the game they play would save with the user nested.

I used Redux middleware (Thunk) to respond and modify state change. Thunk is a middleware that lets you call action creators that return a function instead of an action object. That function receives the store's dispatch method, which is then used to dispatch regular synchronous actions inside the function's body once the asynchronous operations have been completed.

Another requirement was to have at least three routes. I was able to implement five routes in my project. In order to get my routes working I needed to import react-router. I used proper RESTful routing which means the names of my routes matched up properly with their functions.

Something that initially tripped me up was including five stateless components. This meant that the information rendered from these components needed to not include "state". A basic example would be a welcome page or a navigation bar. After I worked through my game I actually came up with six.

As for styling I used mostly my own CSS and it was nice to explore all of the things you are able to do with it. There are so many components so it was easy to give the div a className and then style how I wanted that component to work. I would like to go back and implement some bootstrap so I can make it more visually appealing but I learned so much by making it this way and I am happy to have challenged myself.