Skip to main content
TwitchRandom website screenshot - Cropped image shows the website's header menu, main banner with Twitch stream video and details, and Featured Streams section with thumbnails and a square ad

TwitchRandom

TwitchRandom is a project that finds random video game streams to watch, using the Twitch.tv API.

Because the streams are completely random, you can find new games and broadcasters that aren't as well known.

The site can also filter the random streams by game.

Technologies: Laravel, Twitch.tv API, jQuery, Bootstrap, PHP, HTML5, CSS3

Twitch.tv API

TwitchRandom is built on the Laravel PHP framework and uses the TwitchTV SDK for PHP tool to connect to the Twitch.tv API.

The website requests a random stream using the Get Live Streams API endpoint with a randomized offset value. The Twitch API will return a JSON response with the details of the stream located at the random offset. TwitchRandom also uses this API endpoint to find randomized streams filtered by game.

With the JSON response, the site can embed the Twitch channel's live stream video into the layout of the website.

In addition to the random stream functionality, the site also grabs a list of the most popular games using the Get Top Games API endpoint. The top games are used to populate the list of games in the header navigation menu as well as the All Games page.

Slogans

In the header of the website, the site displays a random slogan when the page is loaded. These slogans are taken from popular Twitch and video game culture.

Thumbnail Galleries

Thubmnail Gallery screenshot showing 3 random Twitch.tv stream thumbnails and a Randomize Gallery button

Below the Featured Streams section, the site loads two scrollable galleries with thumbnail links to other streams

The first gallery includes randomly selected channels and the second gallery includes channels that are playing the same game as the embedded stream at the top of the page. The galleries can be loaded with new random stream links by pressing the Randomize Gallery buttons.

TwitchRandom mobile responsive design screenshot showing how the website looks in a mobile browser. The header menu shows a logo, slogan, and a collapsed menu button. The main stream video and details are displayed vertically.

Design

TwitchRandom uses a responsive design built with the Bootstrap CSS framework. The site's layout is designed to look clean on both mobile and desktop browsers. The site uses a color scheme of purple and white similar to Twitch.tv.

AJAX Usage

In order to keep the user interface feeling fluid and responsive, many sections of the site make use of asynchronous AJAX calls which do not require reloading the entire page.

For example, the Random Stream button next to the embedded video will replace the current stream with a new, random stream. When the button is pressed, a new stream is requested via AJAX and a new random slogan is placed in the website branding.

Additionally, the site's URL is updated to the new stream's unique URL. Finally, using the History.js library, the site creates a new entry in the browser's history record, emulating the act of changing pages. These two actions make it so that the random streams are accessible later if the user hits the back button or enters the stream URL.

The galleries are also requested via AJAX and can be reloaded with the Randomize Gallery buttons.

Browser Support

The website uses jQuery for much of its front-end functionality and is compatible with all modern browsers as well as older Internet Explorer versions. Unfortunately, the Twitch.tv embedded player only supports Internet Explorer 11.