I Built My Own Verzuz App

What I built

While social distancing, many artists and producers have been battling it out on Instagram to see who has the best music discography. Although Instagram is an awesome platform, it wasn't necessarily built for this kind of use case. Viewers can't vote on who they think won the round, no one can keep track of the score, and you can only see verified accounts in the comments section. This is why I build the Verzuz App. With this app, anyone can host their own battles and interact with all audience members in real time.

Category Submission: Exciting X-Factors

Demo Link

You can visit the live app here

Link to Code

Here's the link to the Github repo

How I built it (what's the stack? did I run into issues or discover something new along the way?)

At its core, the Verzuz app is a React App using Node Express and MongoDB. Additionally, here are some of the integrations within the app

• Twilio Sendgrid - Sends an invite email to the players once the battle is created
• Twilio Verify - Used to verify phone numbers to reduce spam
• Pusher - Used for real time comments and events
• Agora - Used for video broadcasting

The APIs themselves were fairly straightforward to implement. Although, I did struggle a bit on implementing the real-time comments and events in the right order. I learned that if you fetch data from the database and then subscribe to a websocket, then you could potentially miss some data. Also, I'm more of a backend person. So learning React and implementing design was a but of a struggle for me. The app currently isn't mobile responsive, but in the future that will change!

Additional Resources/Info

You can read more about the Verzuz battles on Timbaland or [Swizz Beats]{https://www.instagram.com/therealswizzz/?hl=en} Instagram accounts.

Also, battles are currently limited to 10 viewers as costs can rise pretty high for all of the services.