FCC – Twitch TV Project

Finally finished this project! I started this project during a pair programming session before the holidays and then just got busy and never finished it.

This project required using Twitch.tv’s API. Working with API’s is always challenging, especially if the API is not well documented. Twitch’s API has a lot of documentation and there’s tons of information on how to get it to work in the FCC forums: https://forum.freecodecamp.com/t/how-to-use-the-twitchtv-api/19541. (This link is also included in the project bullet-points.)

The first step was reading the forum and getting the correct API URL.
Using this: https://wind-bow.gomix.me/ as the starting point.

After getting that URL, it became time to read the Twitch.tv API documentation to see how to get the information we want. I focused on a list showing my favorite channels, but you could also have focused on users or videos. Twitch documentation here: https://github.com/justintv/Twitch-API

Endpoint	Description
GET /streams/:channel/	Get stream object
GET /streams	Get stream object
GET /streams/featured	Get a list of featured streams
GET /streams/summary	Get a summary of streams
GET /streams/followed	Get a list of streams user is following

The URL I used to make the API call became: https://wind-bow.gomix.me/twitch-api/streams/' + channelNames[i] with channel name being taken from an array of my favorite channels in a for loop

Once I got the URL down, I decided to build the front-end, just a basic skeleton of the page, and then focus on the JS. Wanting to use pure JavaScript, there was ALOT I had to learn. I read about making XMLHttpRequests to the API and how to handle the request response. I also read about jQuery’s .prepend() and .append() functions and how to translate their properties into JavaScript.

You can find my finished code here: https://github.com/sunsplat/fcc_twitch

Designing this project was super fun! I played around with Google’s Material Design by using Material Design Lite.

You just insert these links into the of your HTML and you have access to the classes and icons:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js">script>

To access the icons, go here: https://material.io/icons/

To read more about the purpose and Do’s and Don’t’s of each component in Material Design go here: https://material.io/guidelines/material-design/introduction.html

View my final project here: https://sunsplat.github.io/fcc_twitch/