Creating My First JavaScript Project
For my first JavaScript project, I decided to create an app that tested users’ knowledge of music. The basic idea is that a user would pick an artist and listen to a random song from that artist. They would then have to select the correct title of that song. After all of the questions are answered, the user would then get their quiz results.
The first thing I did was to create a Rails project for the backend. While I created Rails projects before, this project was different because I never used Rails to create an API. Fortunately, starting out was easy since the only difference with the new app command is the --api flag:
$ rails new my_api --api
The main difference is that instead of rendering views, Rails now renders JSON. This is essential to creating a single-page web app because API calls are the way data is transmitted from the back-end to the front-end and vice versa.
One important feature that I wanted to add was a way for users to either search for an artist or pick them from a list. To do this, I needed to find a way to query publicly available artist information. For the list of artists, I created a Ruby gem that scraped a list of the top 100 artists on Billboard. I then created a custom route and rendered the information gathered (artist name, artist image URL) as JSON. For the search feature, I settled with using iTunes’ API. They have a great search endpoint that allows me to input a search query and get back the top result that matched the query.
After an artist is determined, the most important part of the whole process is initiated: quiz generation. After searching for the artist using the iTunes search endpoint, the app is then able to take that artist’s id and use it to find all of their related songs using a different iTunes endpoint. A random song is then taken from the list and used to create a question. Additionally, three other random songs become possible question choices and are effectively added to the multiple-choice pool.
Once I set up all of the basic models, controllers, serializers, and routes, I started work on the front-end of my app. Since the app would be single-page and would load content through API calls, I decided that the default index.html would only consist of a navbar, as well as some wrapper divs. This way, if I wanted to switch out content, all I needed to do was clear the main wrapper div’s content and render the new content. Most of the functions I created were dedicated to rendering new content. In order to keep track of quiz answers and quiz progress, I created QuestionAttempt and QuizAttempt classes. A QuizAttempt instance held all of the QuestionAttempt instances and would be passed around and modified from function to function until the end of the quiz.
Overall I feel like this project strengthened my current knowledge of JavaScript. Although I haven’t yet started learning React, I can already imagine how a lot of the functions I wrote dedicated to rendering content can be vastly improved by using it to reduce repetitive code and allow for better modularity. This is a great step in learning about how to use JavaScript, and I can’t wait to continue to learn more!
$ rails new my_api — api
