Viewer view of the extension
Open quest with description
Different theme for the quests
The first customizable and interactive overlay for Twitch streamers to show more information to their viewers in less space!
I have been watching streams on twitch since 2011 and to this day I still struggle to find new streams to watch. Understanding what a streamer is doing takes some time, around 5 or 10 minutes for each streamer. Sometimes the streamer is really focused on what is happening on the stream and can't answer your question directly, the streamer might have commands in the chat to explain, but you have to guess most of the time. Which in the end result in a lot of time spent by the viewers to just try to find new content to watch.
So I wanted to create a tool for streamers to easily inform the newcomers, lurkers and recurrent viewers of what they are doing in the stream without using a chatbot or sacrificing space on their overlay.
My main inspiration was the quests in video games and by how they can display complex information on a small space on the screen and I wanted to combine this with the interactivity of Twitch extensions to allow the viewers to be able to click on what they want to know so it would be more intuitive for them and really bring a new and better experience for both streamers and viewers.
But at the same time, I wanted to build an extension that could be integrated into any stream and adapt to the different streamer style, branding and identity without imposing a defined visual for everyone.
What it does
- Quests is a Twitch Extension living on top of the stream. It displays what the streamer is currently doing, giving quick information to the viewers of the content of the current stream.
- Streamers can create up to 4 quests at the same time, all with different descriptions. These quests can be viewed by anyone watching the stream.
- The extension allows theme customization, so every streamer can integrate it into their stream with their identity. The extension is not here to impose a brand or try to steal the show. It is part of the stream and will help the streamer to engage their viewers and reduce the number of command from their chatbot.
- Streamers can choose between a list of premade themes or contact me to have a custom one set up just for their channel.
- Viewers can also show their interest in specific quests, and so indicate the kind of content they enjoy, by sending bits as loot for the quests that have the option enable.
How I built it
This project is in two part, the front-end and the back-end.
The frontend is created with VueJS and built with webpack. It consists of 3 web pages :
- Video Component: the page for the viewers
- Dashboard: The page for the streamer to manage the extension during a live stream
- Configuration: The page for the streamer to configure the extension between the live streams
The Backend is made in NodeJS with ExpressJs to run the web server.
- For the database, I used AWS DynamoDB.
- The data are also synchronized with the Twitch Extension configuration service to easily provide the data to the viewers and on the dashboard to reduce the traffic to the backend, preventing traffic spikes.
Communication between Front & Back
- The frontend access to the backend using a REST API for the configuration and on the other pages the Twitch Extension service
- The backend sends updates to the frontend clients using the Twitch Extension pubsub allowing to broadcast updates to all viewers on a channel.
Accomplishments that I'm proud of
The customization part of the project was really important for me, I made several iterations for it and finally got something where I could dynamically change the style of the extension based on data received from the server, allowing me to have a solid base to improve it in the future and allow even more customization. I can provide a list of premade theme for everyone and if a streamer wants a custom theme I can create it and add it to his channel.
The possibility to have a custom theme for a specific channel wasn't planned at first but with the system I created, it was easier than planned so I managed to organize my time to add this bonus feature.
What's next for Quests / Business plan
For some personal learning, I would like to switch some data to Elasticsearch when I will have some experience with it.
In the short term, I would like to add the mobile view of the extension to let anyone get the information about the stream and add more global themes, to have 5 or 6 of them to have more options for the streamers. During this time the application will live using the commission on bits transactions used by the viewers to show which quests they enjoy and want to increase the loot.
This will cover the low cost of the hosting and provide money to work on the middle term projects
For the middle term, I want to offer to the streamers a way to customize more deeply the look of the extension with a built-in tool. They will be able to change the colors/background/borders/etc by themselves. This tool would be using a freemium model to access more functionalities for customization.
In the long term, I would like to allow other extension, games, etc to send quests to this extension through an API. Allowing streamers to have dynamic quests without doing anything. For this idea, I would like to "sell" access to the API to the projects that want to interact with it.