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/

Advertisements

One thought on “FCC – Twitch TV Project

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s