Project: Use the Twitch.tv API (Part 1)

CodePen for Twitch API project

I recently completed the last intermediate project in freeCodeCamp’s Front End Developer Certification. The project required building an application using the Twitch API.

Since so many people use freeCodeCamp (fCC), I thought I would share what went into creating the app and some of the challenges I ran into along the way.

Spoiler alert: there were a lot of challenges in this one.

User Stories

The goal of this project was to develop an application using the Twitch API.

The user should be able to see if Free Code Camp is currently streaming on Twitch. The user should also be able to click and be sent to Free Code Camp’s Twitch channel. Finally, the user should be able to see extra details about streams that are currently live.

Provided resources include an example project, links to documentation on the Twitch API, and a video explaining the project. You can find all this information here.

The Twitch API

I mentioned that I ran into a lot of problems on this project.

This first, and biggest, is that the Twitch API, which you are supposed to use for this project, is no longer easily accessible.

The Twitch API now requires a key, which you have to register and apply for. This is no simple process. Part of it involves explaining why your project is worthy of being granted an API key.

The problem is that this project isn’t.

Twitch already has built-in tools that do what our app is intended to do, only better.

Since the official API isn’t an option, freeCodeCamp has created a workaround.

Twitch API workaroundClicking on the link in that update takes you to a page with about four lines of documentation explaining how to use the workaround.

It was really hard for me to wrap my head around the workaround and how to use it to access the Twitch API.

Not only is the solution not well explained but the fact that there is even a problem in the first place is buried at the bottom of the assignment, almost as an afterthought.

To make matters worse, it was only within the last year or so that the Twitch API started requiring a key.

This means that almost any resources you find on this project won’t use the workaround. They will use the old method for accessing the Twitch API.

It turns out that you can pretty much follow the Twitch API documentation with one important difference. You have to replace any section that has “https://api.twitch.tv/kraken” with “https://wind-bow.gomix.me/twitch-api”.

Sadly, it took me two days to figure this out.

Practice with a Purpose

One of the things that I have liked about previous fCC projects is that they serve a purpose.

While there may be other ways to find out the weather or look something up on Wikipedia, the projects are functional enough that you can share them with your friends and family and they might actually use them.

At the very least, you are creating a simpler version of something that could potentially be developed into a legitimately usable app.

I didn’t feel that way about the Twitch API project.

I regularly use Twitch and I don’t see any value in this project from a usability standpoint.

Not only does Twitch have built-in tools that do the exact same thing but anyone who regularly uses Twitch is already using those tools.

As a result, this project serves no purpose from a user perspective.

That may not have been the case when this project was first created but it is definitely the case now.

I can only speak for myself, but it is really hard to get excited about a project of this size when I don’t feel like it has any usefulness.

All of that, combined with the trouble I had understanding the API workaround, made this the most challenging project to date.

Up Next

Despite the rocky start, there is actually a lot of code in this project I am proud of.

Rather than shortchange the code talk or write an overly long article, I think it is best to divide this into two parts.

In Part 2 we will look at the HTML and CSS behind the site design and take a deep dive into the JavaScript and jQuery used to access and display the API data.

Sharing is caring!

Author: Lee

Hi, my name is Lee and I am a 40-something who recently made the decision to become a self-taught programmer. This site was set up to chronicle that journey and my experiences along the way. Feel free to contact me with any comments, questions, or suggestions.

Leave a Reply

Your email address will not be published. Required fields are marked *

seventeen + 13 =