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
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.
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.
Although it can be interesting to find hidden gems using the random stream functionality, users can also find the top featured Twitch streams in the Featured Streams section. This section is visually emphasized and also ends with a responsive Google Adsense ad that fits comfortably into the layout.
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.
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 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.
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.
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.