React/Redux/Rails — My Final Project for Flatiron School
Our final module at Flatiron School was all about React, the extremely popular front end JavaScript framework maintained by Facebook. I had played around in React on my own a little, and had really enjoyed it, so I was excited to dive in to learning all about React on a deeper level.
React is a component-based framework, which means your code is written in in small reusable chunks, which can be rendered to the page, similar to building blocks.
Flatiron currently still teaches class based components in favor of the more modern syntax of using all function based components and hooks. I honestly didn’t mind this, as I think it’s important as a developer to know and understand both ways of writing components. It’s extremely likely that in a future job, we will encounter and need to interact with a lot of older legacy code, which will not be written in the most modern style. With this being said, I still think knowing the more modern syntax is important too, so I spent a considerable amount of time reading the documentation and writing my code using functional components and hooks.
For my final project for Flatiron School, I wanted to build a quiz game using the Spotify API. The game would allow a user to log in via their Spotify. It will display all of their playlists and allow the user to select a playlist, which then loads a quiz game. The game plays tracks from the playlist and asks the user to properly select the the correct artist. The wrong choices are pulled from other artists that exist within that playlist.
I came into this project, with a very clear idea what I wanted to accomplish, and I thought it was not going to be terribly challenging. However, as with most things in software engineering or life, I immediately hit some challenging obstacles. The first big challenge was navigating authorization through the Spotify API. After setting up a new project through the developer Spotify website, you are given a client ID, client secret, and asked to set a callback URI (where the Spotify auth page will redirect to after logging in). I read many blog posts, watched YouTube videos, and read the documentation for the Spotify API to figure out how to hit the Spotify api for auth, grab the code Spotify returns, submit that code back to Spotify in order to get access tokens and refresh tokens, figure out how to make the refresh tokens automatically request new access tokens before the access token expires, and finally, use the access token to gather various bits of the other information from the Spotify API. This ended up being the most challenging aspect of the entire project for me, and I would be lying if I said I didn’t consider ditching this idea and building to-do list application instead. I’m very glad I stuck with it though, because this process of getting stuck, getting frustrated, reading documentation, trying, failing, and eventually succeeding made me feel incredibly accomplished! I may write an entire blog post or two on the process, but to keep this blog from being unreasonably long, I’ll leave out all those details here.
OK! Whew! We can log in now, grab user info and playlist information from Spotify, save that information to state, and render it to our web application! Next I needed to create the game. I needed questions for each track, with the track URI, so the track could play through a Spotify web player, the correct artist, and three wrong artists. I sent my access token, jwt token, and playlist id to my Rails API through a post request to “http://localhost:3000/games”. Once I created a game that belonged to a user (validated through their jwt token), I created individual Track objects that belongs to that game. Then, for each track I created a Question object that holds the correct artist and uses helper methods to find three wrong answers and assign those to each Question object. Then, the Game and the Game’s Questions are rendered as json that the front end can grab, save to state via redux and use to display.
Awesome! Now the front end has access to all the questions for each new game. Now, I just had to figure out how to display the answer choices, and the logic for points.
First, in my Game controller, I used state of store the value of currentQuestion, which I could then pass as a prop to both the Player component (which is what is responsible for playing the track in the browser) and to the Question component which would display the possible answers.
Now, after Google-ing a good sorting algorithm for an array, I was able to load my 3 wrong answers and correct answer into an array, sort it, and then use the array method map, to run through the array and push the potential answers out onto the dom. This is also where I handle the logic for displaying the correct / incorrect answer (by changing the className) and also increment gamePoints for every correct answer.
And that’s about it! I am very proud of how my final project turned out. I got stuck many times, but I really feel like my abilities to problem solve, read documentation, and keep pushing through have improved dramatically since I started at Flatiron school. I cannot wait to continue to learn, the push myself harder and harder to become excellent in my craft.
If you care to check out a working demo of the application, you can try it out at https://spotify-music-game.netlify.app/. At the time of posting this, Spotify’s web playback sdk is in beta and is not yet supported on mobile devices or in Safari (big bummer, I know). So, in order to hear the tracks playing you’ll have to use Chrome/Firefox/Edge etc on a desktop/laptop computer. You can always check out how it looks and functions on other devices, you just won’t hear the music.
