Inspiration
The inspiration of the project came from the games loot box systems, we know that twitch has a strong connection with electronic games, so we had the idea to create this fully integrated loot box system, developed and planned to be used with points from the twitch channel.
What it does
A channel loot box is a consumable virtual item which can be redeemed to receive a randomised selection of further virtual items, or loot, ranging from simple items options for a viewers.
- The items in the box are configured by the streamer, where each item has a configurable drop rate, quantity, image, access codes and text of the items.
- When the viewer finds an item in the box, an alert is displayed in the alert box.
- The box delivers only those items that the viewer does not own.
- The access codes are automatically assigned to the viewer account and removed from the channel loot box.
- The loot box algorithm is the same as the one used in loot box systems in electronic games.
How we built it
We use tools and technologies known to the market:
- ReactJS + Typescript (Frontend)
- Next.JS + Vercel (Frontend, server side render and static render)
- Tailwind CSS (Frontend)
- AWS Lambda (Backend)
- DynamoDB (Backend)
- API Gateway Rest (Backend)
- API Gateway WebSocket (Backend)
- Twitch API (Backend, Frontend)
Challenges we ran into
We knew that the system would receive thousands of requests, so we chose fast database on demand (DynamoDB) and lambdas functions (AWS Lambda) to scale the requests quickly without problems.
Accomplishments that we're proud of
We believe our created a truly new and unexplored product on the market that offers a good user experience for both streamer and viewer.
What we learned
We learned how to architect a self-scalable solution to receive thousands of access without affecting performance and user experience.
What's next for Channel Loot Box
In this first phase we would like to understand if the user experience for the streamer and users is good, after that we will think about enlarging the item slots in the box.
Video
the attached video has English subtitles, just activate them on youtube
Built With
- aws-web-services
- next.js
- react.js
- vercel



Log in or sign up for Devpost to join the conversation.