MetaBash

The modern viewing experience for a modern sport. Watch E-Sports with your friends remotely with this E-Sports Watch Party App! You can chat and share your reactions with friends LIVE during the game!

Comment

Inspiration

COVID has left us all eagerly waiting to watch sports in-person again, mainly with friends. This inspired me to create an app where you can watch sports privately with your friends. I decided to base this app around E-Sports because it's a fairly new sport and one that can be confusing and boring to watch at first. But that changes now, as the number one reason for great sports viewing experiences is watching with friends.

What it does

MetaBash is an E-Sports Watch Party App that lets you watch E-Sporting events with friends remotely online. You can join or create a private room for just you and your friends. You can chat with your friends and share your reactions, all while watching the live stream of the event!

How I built it

I built this app using React on the frontend (web app) and a Django server on the backend, with a Postgres database integrated with a REST API. I also used Firebase Firestore to manage the data for the chat feature. I used the Twitch API to embed E-Sports live streams onto the site.

Challenges I ran into

I ran into multiple challenges, primarily with React. I faced several difficulties with state management in React and passing data down from the API to the components. I also faced difficulties with creating CSS animations for the reactions. I hope to resolve these problems as I work on the project more.

Accomplishments that I'm proud of

I'm proud of building the app how I had designed it and being able to implement every feature I wanted, even if they don't work to expectations.

What I learned

I learned a lot about dealing with video in HTML and I learned a lot about building a chat system.

What's next for MetaBash

I plan on resolving all the main issues with MetaBash so it can be used by others. I also would like to implement some more fun features that improve the viewing experience for users. I also want to redesign the entire room system, using something like Django sessions and Websockets to create a more live experience. I would also like to implement more CSS animations to improve the UI.

Built With

Share this project:

Updates