Twitch is full of Extensions for enhancing the viewing experience of several different esports live streams by providing historical and real-time statistics for player matchups. I wanted to bring this same kind of experience to my favorite competitive game, Super Smash Bros. Melee.

What it does

SmashStats allows viewers to see the match history between two players. The players shown are decided by the broadcaster - all they have to do is type the names into two text inputs on the streamer's live config view. For example, if Mang0 and Leffen, two prominent Melee players, are playing on stream, then the broadcaster can type their names into the boxes. The data for the match history between Mang0 and Leffen will immediately be visible to all viewers!

How I built it

SmashStats uses good ol' JQuery/CSS/HTML on the front end, communicating with a Flask backend hosted on AWS Elastic Beanstalk (and using Route 53 for the routing). The backend in turn sends messages to Twitch's PubSub and Configuration Service API's containing the data to display to the users. Easy, right?

Challenges I ran into

As a college student, this was my first experience developing a project of this scale. It was also my first time using Amazon Web Services, as well as my first Twitch Extension, so there was quite a learning curve to overcome. Furthermore, I did not find out about this competition until only a couple of weeks before the deadline, so I really had to work quickly to acquire player data and get the Extension fully functional.

Accomplishments that I'm proud of

I'm proud of how the product turned out. Although it isn't perfect (and I intend to improve it in many areas) I am ultimately happy with what I created. As a long-time competitive Melee player and viewer, I certainly hope it benefits the Melee community and enhances the viewing experience.

What I learned

I learned how to successfully purchase a domain, get a SSL certificate from a CA, host a backend with this domain via AWS, and then have this backend communicate with the front end Extension (had to learn about CORS the hard way!). Stemming from Twitch's method of authentication, I learned much about JWT's and authentication in general, of which I only had a surface level understanding beforehand.

What's next for SmashStats

First and foremost, more stats and better stats! The stats right now are great - over 200 top players are supported - but they are imperfect and not as thorough as I would like them to be. I hope to aggregate a large volume of highly detailed statistics to give viewers the best experience possible.

Share this project: