React.js twitch filter webapp

Over the Covid-19 pandemic I began to watch more twitch. One thing I always thought was how there is no functionality for viewers or streamers to filter chat messages. You are stuck looking at everything. I came up with the idea to build a filter that can filter twitch chat by subjects. At first I was using a word prefix, but I later changed my program to instead filter by a target word or phrase. With this filter, I also created it in a way where it will only show 1 message per twitch user to avoid spam on the subject.

The technology used

I went with the React.js framework for a couple of reasons. For starters, I wanted to grow my skillset in web development and I was not as comfortable with react as I wished to be. Another reason is the fact that react would give me the availability to reuse components in other parts of my website which would help me develop faster. Using react I grew more of an understanding on react components, functions, states, and passing props. Like my other Twitch projects, I used an IRC (internet relay chat) server to communicate with twitch and get real time message parsing of twitch chats. After the development was completed, I hosted the webapp on heroku.

Creating the home page

I went with a simple home page that would have everything the user would need to get started. Since a new user most likely hasn't operated a chat filter, I put the documentation link front and center. My home page looked like this:

Creating the form page

The form to start filtering chat is simple. The webapp requires no login or signup. This includes no external user connection to the Twitch platform itself. The user simply types the channel name they want to filter chats from, the target word or phrase to filter, and the number of chat messages to filter. The form page looks like this:

Example output

After the filter and channel parameters are set in place, you are redirected to a new page where chat messages begin to filter in. The program checks all incomming messages from the IRC client, checks to make sure that the target word or phrase is in the string, and that a message from that user has not already been displayed. If all of those requirements have been met then the chat message is shown. The chat filter page looks like this:

Conclusion

I really enjoyed working on this project. I think this helps solve a problem that many streamers or viewers may face. I think this webapp can be used for creator to make Q&A's easier alongside other fun ideas. This project taught me a lot of React.js fundamentals and I learned some other critical backend concepts such as how to send an email. I wanted to have a contact us page where users could suggest features or report bugs.