KlipTok Leverages Telerik UI in Blazor-Powered App to Improve Its Functionality for Twitch Users and Streamers

Twitch is a massively popular streaming platform that features more than 40 million users creating streaming content, ranging from video game playthroughs to video podcasts. With so many unique content creators on the platform, it can be difficult for new users to discover a streamer they like. What’s even harder is finding a part of a certain stream that Twitch users are raving about because the stream has become archived and unable to be accessed.

This user-focused problem led Jeff Fritz, a Community Program Manager at Microsoft, and a very experienced Twitch user, to develop an app that allowed users to search for bite-sized clips from prominent to just-starting-out streamers.

In November 2020, Fritz unveiled KlipTok, the app in question, fittingly via a livestream on Twitch. It allows users to discover bite-sized fragments of popular streamers or find specific clips of streams that include something incredible or funny.

Despite creating an application from the ground up and allowing users to discover clips ready-made for social media, there were a variety of problems revolving around the usability of KlipTok.

The biggest problem Fritz faced with the creation of KlipTok, however, comes from overall functionality. Users were unable to do deep searches into Twitch’s database, and, most notably, there wasn’t an option to put in date ranges to find specific streams. On his end, the lack of tools to help create other components for the app was incredibly cumbersome. For instance, Fritz would have to drop everything and work on it for weeks to create a date range for the search field.

In the spirit of Twitch, where creators explore new and exciting trends, Fritz wanted to open up the process of creating the app to other users: “I wanted it to be a showpiece of the Blazor and Azure technologies and generate a canonical example of how to use these tools together.”

His choice of Telerik UI for Blazor for the app UI was a natural one. Fritz has a history with Progress Telerik ® as he worked there as a developer advocate from 2013 to 2014. He knew the control suites in and out. “It always spoke to me and it always felt like it fit the way I wrote code,” Fritz said, “and the Telerik UI for Blazor suite offers way more than a rewrite of existing JavaScript components.”

Using Telerik UI for Blazor, Fritz implemented the following UI components: DateRangePicker, DropDownList, Radar Column Chart, TabStrip, TileLayout and Window. Each of these components assisted in helping to create the layout of the application, along with giving it some extra user-friendly features. For example, thanks to the DropDownList component, users can now select their preferred language for their dashboard. Additionally, the TabStrip component enables more straightforward navigation between what streamers already follow and who they can discover by using KlipTok.

Fritz also leveraged various chart components to build a dashboard for Twitch content creators, where they could see how users engage with their videos. As he explained, “Twitch doesn't have a way for broadcasters to be able to see when people interact with their clips, who creates the best highlights, and we want to be able to give them that insight.”

A team of one, Fritz was able to get KlipTok up and running in just three months. The Telerik UI for Blazor suite of native components enabled him to quickly build the UI of the application and improve it almost on the go as user feedback started to come in.

From his perspective, Fritz can fully customize the interface to make it more user-friendly for the KlipTok community and himself. For instance, the KlipTok theme or the chart type showcasing dashboard insights can be changed up in a matter of minutes, adding a feature or changing a filter can be implemented with no extra research, allowing Fritz to respond to user requests without shifting his development priorities.

With their versatile functionality and built-in features, the highly customizable Blazor controls guarantee KlipTok has the speed and interactivity people expect from a rich, modern application. “To be able to hand off some of those responsibilities that I know the Telerik development team has already thought through makes it easier for me to focus on just building my application,” he explained.

Using the readily available components, Fritz could significantly speed up the development process. “I could build a date selector component myself, but it would take me a couple of weeks. With the Telerik UI for Blazor DateRangePicker, I had the functionality implemented and running in less than an hour and configured the way that I wanted it to,” Fritz shared.