99% of the content on popular streaming platform Twitch is live. Avid Twitch user and developer Jeff Fritz created KlipTok to help other users easily discover channels and topics of past or archived shows. He chose Telerik UI for Blazor to power the UI of KlipTok and showcase the Blazor framework in action.
KlipTok needed better UI support with a toolset that was not only compatible with the Blazor framework, but one with robust features for a user-friendly and professionally looking interface.
Utilize Telerik UI for Blazor Column Chart, DateRangePicker, TileLayout and Window to improve the KlipTok functionality for both Twitch users and content creators.
Users can effectively search for clips based on specific dates, navigate the app to discover new streamers and see videos on the homepage from a pool of more than 7 million different clips from live video streams.
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.”
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.”
I feel confident in being able to rely on the output of the Progress Developer teams, that these components are going to be responsive enough to meet the goal of a responsive website that folks can really use.
Community Program Manager, Microsoft
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.