For the VJ machine, Ellen and Ridwan built the API server and the screen output. Their code is on Ellen’s repo. Alden and I built the controller interface. Basically the controller sends POST requests to the server which is storing info on the state of the VJ machine. Then the screen output is constantly pulling with GET requests to update the visuals. Our code for the VJ machine is here.
The jukebox sends a GET to get a song based on the mood and receives a reply with a song that is determined by the API server. Then the site will send a POST request to add the new song to the playlist. The jukebox site is pulling from the server using GET requests to keep the playlist updated and to determine if the jukebox state is in play mode. To change the state to play music, the site makes a PUT request when the user hits the play button, which returns the first song in the playlist. All the songs (sung by Lucas) were served from the sever so we didn’t need to worry querying another source for music.
Keep reading for more details on things we encountered while working on this project (CORS, Axios, and hiding your API key).
When I was working with the Jukebox, I was unable to change the code on the server side, so I used a workaround called CORS Anywhere. I used https://cors-anywhere.herokuapp.com/ as a proxy that adds headers to the request so it doesn’t trigger CORS. For all the requests you make, you put the CORS Anywhere URL before the URL of your server.
Axios - Easiest way to make HTTP requests?
I originally started by using the XMLHttpRequest API, which worked but was not very concise or easy to understand for other people. I also thought about trying Fetch, but it’s in an experimental state according to MDN, so I didn’t want to use it.
And here is a GET request. Nice & easy!
Hiding your API key + credentials
I was really confused when I couldn’t get Ellen and Ridwan’s VJ server code to run on my computer while I was testing it and it kept through errors about missing files. It’s because Ellen is smart and didn’t accidentally make her Giphy API key publicly available. You only need .gitignore and a separate file. In the server side, you need to require the file that holds your ~secret~ info. This is a quick guide that helps.
Within the config file you would have:
And make a .gitignore file that lists any files you want to hide. For instance:
.DS_Store node_modules/ config.js