With the recent COVID-19 pandemic, musicians around the globe don't have a reliable way to reach their audience and benefit from what they love to do — perform. I personally have seen my music teacher suffer from this, because his business performing at weddings, concerts, and at other public events has been put on hold due to COVID-19. Because of this, we wanted to find a way for musicians, and any other live artist, to be able to perform to a live audience and make money as if it were a real concert.

What it does

WebStage is an online streaming platform where a performer can perform for their audience. Users can make accounts with their email or with Google sign-in. Once they do so, they can create their own "stages" with set times to perform, and they can also buy tickets and go to the stages of other musicians.

How we built it

We used Figma to design and prototype the site. For the front-end, we used HTML/CSS/JS. For the back-end, we used Node.js with Express.js for the server and WebRTC for the live-streaming. We also used Firebase and Cloud Firestore.

Challenges we ran into

Figuring out how to live-stream, establishing chat functionality, ensuring that stages would be visible on the site with proper pop-up messages when needed, saving usernames, verifying authentication tokens, tweaking the CSS to make sure everything fit on screen

Accomplishments that we're proud of

Everything, from the design to the functionality of things like the live-streaming. It's amazing that we were able to build the platform in such a short period of time.

What we learned

We learned how to use WebRTC, Firebase authentication, and Cloud Firestore. We also grew much more comfortable collaborating with others while working towards a strict deadline.

What's next for WebStage

We plan to add various payment options so that users would have to buy tickets (if the streamer charges for them); in the near future for purposes of the hackathon, we elected to not implement this feature in the current build. Other features such as saving streams as videos are possibilities as well.

Share this project: