Video Overlay live results
Video Overlay match list
Video Overlay match results
Mobile view match result
Mobile view match list
Video component match list
Video component match result
I have been watching esport competitions for years. And the main problem I always have is to find the information about the ongoing competition. In almost every tournament, you have to go outside of Twitch, sometimes you even have to search by yourself on 3rd party websites, to see what are the results of the previous games and the current state of the competition.
I do follow a lot of streamers involved in esport, shoutcasters, players, or just people who enjoy it. So sometimes the conversation during the stream will be about the competition and not having simple access to the information is really frustrating and a lot of questions are the same because of this lack of access to the data.
So I decided to build an extension that could be used to broadcast the Overwatch League but also for every streamer that wants to inform their community about the competition without leaving the website.
This would also have the benefit to do user acquisition and user retention for the Overwatch League by keeping the viewers informed and giving information to people who wouldn't have joined an Overwatch League stream before.
What it does
The extension has 2 main functionalities:
- See Live data on the games currently played in the Overwatch League
- See historical data from the previous match/games of the current season of the Overwatch League.
This allows the streamer to inform their community about the current results of the league, building hype around it and allowing everyone to gather around a similar interest without forcing the streamer to repeats the same information.
This extension is available as:
- Video overlay (Live data + Historical)
- Video component (Historical)
- Panel (Historical)
- Mobile (Historical)
How I built it
The front-end id built with VueJs and my backend use NodeJs + Typescript
I built a backend server to allow data mocking for the live matches to let streamers see how it will look without having to wait for the competition.
Challenges I ran into
The Overwatch League isn't something you can turn on & off as you want like a typical game. I had to record hours of live data to be able to use them later in my development process to be able to develop in the way I want.
Accomplishments that I'm proud of
The Overwatch League has a lot of data available, it's difficult to get your head around it and understand its structure and chose what data to display or not.
I almost reached the same data as the overwatch league website, which is the goal I wanted, I can get all the data I need without leaving Twitch
What I learned
Game matched extensions are really complicated to build because there is not a lot of APIs available and if you want to interact with the game directly, you have to mod the game, which many games do not allow.
What's next for Overwatch League - Live Stats
I want to add more data to handle almost everything provided by the API and optimize data consumption.