Building a live stream gaming platform with JQuery and Twitch TV API

http://wallpapercave.com/gamer-wallpapers [Oops!]

Gaming… It’s a word that quite a number of us can connect to, from Nintendo’s Game & Watch of the early eighties to PlayStation 4 where we are now, we’ve been part of this ride and we’ve enjoyed every bit of it. Apart from being players, quite a number of us love to watch and for this reason, live streaming of video games; what began as a hobby for most, is now a global enterprise. Together we’ll walk through a step by step process of creating your very own live gaming platform.

What we want. . .

We’re going to make a list of what we expect of our platform. Whatever we build can’t be called a platform until:

1. It is super light weight, response time must be as fast as possible.
2. It can show us who’s online and who’s not.
3. We can click on a profile’s username and watch what they’re streaming ( if they’re online) or check out their profile ( if they’re not ) without having to sign in while watching.
4. For profiles that are online, we can also see additional details and information about what they’re streaming.
5. We can see if an account has been closed or suspended.

To bring our features to life, we’ll have to use a couple of things of which the most important ones are: creative thinking, JavaScript and an API (application programming interface) call. For our API, we shall employ the services of Twitch TV. We’re using Twitch’s API because it’s got content that’s really robust and that’s what we need to make this happen. Now we have all the pieces, let’s put this jigsaw together.

P.S : If you’d rather view the app straight away then click here

Creating our landing page

First of all, we need to build our landing page with good old HTML and CSS. This is the part where all the creativity you can muster is encouraged; fonts, color combinations, transitions… you name it. It all counts here…

Getting our API data

To get data on every profile ( or streamer) on our platform, we’ll have to make a URL (uniform resource locator) request to Twitch. Doing this involves having a client ID which will be embedded in our request, the ID can be obtained by signing up with Twitch.

Now we’ve gotten the ID, we can proceed to create an array of our streamers and assign them to a variable for easier rendering whenever we need it, we’ll also assign our client identification to another variable for the same purpose of ease. Same applies to the two URLs which will be used to fetch data from Twitch’s API; one for fetching every user in the array and the other for fetching what they’re streaming, not to forget our function where all the action will be happening as well, once we’ve created the necessary variables, we can move forward:

Adding our user data for all profiles

Fetched API data for all our users.

For every user in our array of streamers (check second demo), we’ll append the data retrieved from our API call to our HTML. We can accomplish this via DOM manipulation with the aid of in built jQuery methods:

Filtering out our online users.

Sample data stream for an online user.

To get our online users as well as create links that enable us watch what they’re streaming and show additional information about what they’re streaming, we’ll have to add certain conditions to our if statement in Demo 1. After adding these conditions, we can now append the data for online users to our DOM:

Filtering out our offline users

Sample data stream for an offline user.

Now we’ve gotten our online users, all we need do is add the final part of our if statement and in it encapsulate the behavior of an offline user. When this is done, we can now append our data to the DOM.

Enhancing our data display

So far we’ve been able to get the necessary data we need and also filter it into appropriate sections but something is still missing, we need to add a bit of ease to our display, this way we can further understand stuff more clearly. A good solution is to use a drop down menu for all sections: all , online and offline . This way, we can easily command whichever section we want to display. We shall make use of the slideToggle() method in JQuery to achieve this:

All done!

There, you have it… your very own live stream gaming platform! You can tweak the data to give you results you never thought possible. I decided to go with JQuery in this project because it’s lightweight and it achieves the same results with less lines of code (who wants a bug scare anyway)? Do you feel different? Hit me up with what you think, I’ll be waiting in the comments section below… Adios!

I write basic JavaScript articles most of which are aimed at giving rookies a helping hand in getting started. If you liked this article, kindly click on the green 💚 below to recommend this article so others can see it too. Thanks!