PixelWars

🎮 Inspiration

PixelWars was sparked by a simple question: what gets people truly engaged? For many—including myself—the answer is crystal clear: competition. Drawing inspiration from Hype Trains and Subathons, I crafted a concept designed to ignite rivalry by putting two streamers’ audiences head-to-head in a battle of small proportions!

🚀 What it Does

In essence, PixelWars allows viewers to send animated characters tagged with their name to fight against the community of another streamer or against a custom tower selected by the streamer. Currently we support:

• 🥷 A selection of 4 free characters redeemable every couple of minutes;
• 🎉 Bit-powered characters;
• 🔥 Multi-streamer support for live, audience-driven battles;
• ⚙️ Easy setup with a user-friendly config panel and guide;
• 🎨 Custom animations and a roster of quirky, unique characters!

🛠 How We Built It

PixelWars is powered by a trio of tech components:

• Backend: A FastAPI service for managing data and transactions;
• Frontend: A JavaScript app layered over the streamer’s video for real-time battles;
• Twitch Extension: Two pure JavaScript apps—one for the video component and another for configuration settings.

🎯 Accomplishments

This was my first Twitch Extension build, and it was an absolute thrill architecting the systems needed to support such an interactive experience!

🔮 What’s Next for PixelWars

• 💥 More characters with special effects!
• 🤼 Character interactions—collisions, attacks, and more!
• 🎛 Enhanced configuration options for more customisation;
• 💪 Improved stability and support to scale PixelWars further.

Built With

• css
• fastapi
• javascript
• mysql
• railway
• socket.io
• twitch