Introducing KlipTok – Social Media fun for Twitch Clips

For the last year, I’ve struggled with a pair of questions I get from my Twitch and developer communities:

  • How do I make my Twitch channel more discoverable?
  • What is an enterprise scale Blazor application that I can find on the internet?

… and since November 2020, I have been answering both of these questions with the same application, and its called KlipTok.

Fritz introduces KlipTok on the first stream in November 2020

KlipTok is an application that indexes Twitch clips from streamers and presents them in a social media friendly way so that you can catch up on your favorite content, discover new content, and discuss with friends your favorite clips.  KlipTok makes video more fun.

I’ve always loved building websites, and building a website that makes Twitch broadcasters and their content more accessible just felt like a great match for the Blazor-based application I wanted to write.  I’ll get into more of the technical details of KlipTok in another post, but let’s discuss the why and what it does.

Nobody wants to be the “first penguin”.  The first to take a risk and dive into the dark unknown.. and I thought to myself: “you’ve got a great platform on Twitch to take that risk, and if it succeeds you’ve shown everyone how to build an AWESOME application with Blazor and Azure”

The Tenets of KlipTok

I wanted to be sure I built something that everyone could have fun with, and anyone who didn’t want to be a part of could easy exit the application.  With that in mind, I set these tenets for how and what I decide to build:

  1. Everyone is welcome on KlipTok and should be able to use it without compromise
  2. Twitch is the source of the content for KlipTok and their terms of service should be respected at all costs, except tenet #1
  3. We value privacy of streamer and viewer information.  If you don’t want to share with KlipTok, there is an easy exit mechanism
  4. We’re not afraid to experiment with technology and try some new stuff.  It might not always work, but we’ll have fun together learning about it

Construction Begins

On November 27, 2020 I staged a 12 hour stream where I introduced KlipTok and built the minimum viable set of features.  A website that would show Twitch Clips using Blazor.  It didn’t know how to load more clips, was focused on a series of videos that I hand-picked from friendly streamers that granted me approval to use a few of their clips.

November 27, 2020 – Fritz builds the first version of KlipTok LIVE on Twitch

Armed with some research on the Twitch API and Twitch terms of service, I built that first version and we could view 10 clips that were hard-coded to the site.  It worked, it showed that I could load clips from Twitch into a more social-media friendly website.

My friends were happy for me, and I took their suggestions.  PharEwings, SvavaBlount, FierceKittenz, FreyaLwn, Elliface.. they all gave me some great ideas and I ran with them.  Thankfully a few folks then started telling others about what I was building:

Patch and Switch learn about clips on Twitch

FreyaLwn tells her viewers about KlipTok while playing Killing Floor 2… and chaos ensues

Elliface tells fellow streams about KlipTok

joystikNik tells you to put your clips on KlipTok

How do I get started?

As a viewer?  Login to KlipTok with your Twitch account.  We’ll load the list of channels you follow and politely request to edit your channels followed list if you would like to start following new channels while you’re visiting KlipTok.  You’ll then be able to see the list of channels you follow with recent clips on the left side of the screen.

Across the top, you can then click to Discover cool clips from other streams, clips from your Favorite streamers, the clips the you previously Liked on KlipTok, and your User Profile.

Oh yea, did you like that clip?  Click the heart icon under it to let everyone know you liked it.  Want to leave a comment on a clip?  Click the text bubble underneath the clip and start discussing.

… and one more thing:  KlipTok has both a light mode and a dark-mode.  Yea, that was a big feature request on day 1 and I built it.

I’m a Streamer – how do I load my clips?

Easy, login to KlipTok and head to your User Profile page.  There’s an opt-in switch there if you’d like your clips to be indexed by KlipTok.  Some of your followers may have already submitted your channel for indexing, and that’s totally cool.  We’re sharing your clips for everyone to discover.

KlipTok User Profile screen

If you don’t want your clips to be found on KlipTok, that’s ok too.  We want you to understand that privacy and helping streamers is a top priority and you can opt-out of having your clips indexed by flipping that same switch in the User Profile screen.

Finally, if you want KlipTok to forget you, you can click the big red “Remove my content from KlipTok” button to have KlipTok forget all of your clips and only maintain a bare record with your Twitch Id and an indication to not load or display any of your content.

What about privacy?  What are you doing with my data?

From the beginning, KlipTok has been very clear about what data it requests and how it uses that data.  The Privacy Policy explains everything that KlipTok does with every data point in the application.  Don’t believe us?  Watch one of my Twitch streams and you’ll see me show you everything that KlipTok does, and answer all of your questions about it.

How can I help?  I have some ideas…

I’m not currently soliciting help for KlipTok from other developers, but I do want to hear from you.  I stood up a feedback site using Fider that receives suggestions and bug reports that I triage every stream and work from to add or fix features on the application.

Our first, and most popular feature request was translations.  We’ve added 16 translations that were submitted by community members as part of the continued spirit of ‘anyone who wants to join the app is welcomed’

As of April 20th, 2021… we’ve loaded more than 1 million clips, indexed them for searching, and track more than 500 channels on Twitch.  It’s just the beginning…

KlipTok’s One Million Clip Milestone

This is neat!  How did you build it?  I want to learn more

The source code is not currently public.  Due to how KlipTok interacts with the Twitch APIs, its pretty easy to stand up an application that could misbehave.  I am happy to show a lot of the source code on stream, and someday in the near future I will publish the Blazor source code.

I’ll publish a follow-up blog post to this with more technical details.  For now, you can check out the About page on KlipTok for details about the technical stack as well as the YouTube playlist that contains the growing collection of videos where I’ve been building KlipTok.

What do you think?  This has been an exciting and interesting project for me on my Twitch stream and I hope you’ve enjoyed the ride with me. I have a bunch of crazy ideas for integrations and features that we’ll build over the next 6 months, and I expect it to be a learning experience for all of us.  I hope you provide feedback, check out the application regularly, and tune in every now and again to my stream to discuss it further.