Blog post

Front-end Development: Use the Twitch JSON API

Fourth of four Project as part of the Front End Development Certification offered by freeCodeCamp (I talked about this certification here).

The main objective is to Build a CodePen.io app that is functionally similar to this.

The app is capable of showing a list of Twitch users and if they are online or offline. In both cases you can see their avatar and user name and also you can filter by online/offline/all. Besides that, if they are online, you can reproduce their current video streaming plus the name of the game they are talking about.

You can find my app here

Visually talking this is an app framed on a flex box system grid with responsive design and an adaptive version for screens under 600px wide controlled by media queries. The CSS code is developed with SCSS preprocessor.

All the data management works with JavaScript and jQuery + JSON which control API's calls and data storage. The search cause a query to Twitch's API and collects the following data: User name, user name url, user avatar image, game played (if online), video streaming url. All this data is generated on their respective rows below the initial content as shown above.

As the design has been developed with a flex box system grid combined with css media queries, screens under 600px wide will show a different aspect.

You can find my app here