How My Solo-Developed Twitch Follower Analysis Web App Surpassed 100,000 Cumulative Active Users

This is the story of how a Twitch follower analysis web app I built and released as a solo project surpassed 100,000 cumulative active users!

Table of Contents

Things I Was Happy About

• Being able to see people using it on social media, and having Twitch Follower Checker featured on several blogs
• Having 100,000 cumulative active users use it (as measured by Google Analytics 4) The sudden traffic spike in December 2023 happened because Wataxxx, a Twitch Partner and YouTube Partner, introduced it. I think the user base accelerated from there.

  Someone told me about this tool; it is a list where you can see people who unfollowed you on Twitch
  I had seen followers drop when I started streaming, but now I can check it visually

  
  

  It only shows unfollows after you link your account, so if you are interested, try linking it early

  #Twitch

  https://t.co/9FWrRYCNEq

  — Wataxxx (@Wataxxx_)

  November 29, 2023

• Having people from many different countries use it

Things I Regret a Little

I listed buzz on social media and elsewhere as something I was happy about, but most of that buzz was about “checking unfollows.” In other words, I sometimes worry that it is also a feature that can easily create negative emotions. I feel sorry about that too, and that is the regret point.

Technical Notes

That said, the implementation itself was not all that impressive. Since both React and Next.js were new to me, learning the framework specifications was pretty tough. AG Grid provided search (filtering) and pagination in a nice way, and it was lightweight too, which helped a ton.

Tech Stack

• TypeScript: I cannot go back to JavaScript anymore
• Next.js: A modern React framework
• Nextra: Used as a documentation framework on top of Next.js
• AG Grid: A library that provides nice table components

Data Flow Architecture

The flow looked like this. It was hard to design while keeping React, which I was touching for the first time, in mind—especially around Twitch OAuth.

What I Wish I Had Done

The Nextra implementation ended up assuming the alpha version at the time

I was developing while touching Next.js and React for the first time, and right around then a new major version (alpha) of Nextra came out. I thought, “If I am doing this, I might as well use the latest one!” and jumped in, which left me struggling a lot with the lack of information and shaky compatibility with the framework.

I did manage to make something that worked, but as a result it became an app based on the “alpha version at the time,” and even now I have not properly caught up. Pure technical debt. If I were doing it now, my understanding of React / Next / Nextra has deepened a lot, so I think I could refactor it to run properly while upgrading to the GA version. But it works, so it is fine, right?—and I have kept putting it off.

I wanted to make it easier to use and more mobile-friendly

I built it for PC first and added smartphone support afterward, so on mobile the appearance feels a little forced. I wish I had designed it responsively from the beginning.

Apps like this in particular have demand from people who want to check from anywhere, so I learned they pair well with mobile-friendly design.

Keeping multilingual documentation in sync is hard

Since I expected it to be used globally, I researched countries with many Twitch users and created documentation for the top 8 languages. But because I designed it with separate pages for each language, managing it became unbelievably annoying.

Every time I added a small feature or fixed some wording, I had to “do it 8 times,” which was, well, rough. Next time I build something, I want to design it with the maintenance cost of i18n included.

Closing

Now I feel like I could make a web app that is easier to use and more mobile-friendly, so I am going to build Twitch Follower Checker V3. (Once I have the motivation and time.)