Hopscotch

HOPSCOTCH: Hub Of Platforms for Social Competitions For Tremendously Common Hobbies.

Comment

Inspiration

Two of us play the piano and we have a passion for listening to, playing, and composing music. Unlike coders, who have DevPost and Hackerearth as easy-to-use platforms for finding competitions, musicians do not have a platform for participating in 1-2 day music competitions. A lot of music composers often lack the competitive yet cherishing experience that hackathons offer. For this reason, we created a platform that connects musicians to compete in 24-48 hour social musicmaking events in which participants get in teams of 2-4 to compose a song and perform it as their submission.

Originally, our idea was a network of platforms for different types of competitions outside of music, such as coding, book writing, filmmaking, etc. Having a different "subsite" similar to StackExchange and Reddit will target different kinds of people with different interests and encourage hackathon-like competitions that may have never existed before. In addition, this network of competition sites could have an "Area 51" similar to StackExchange's site by that name in order to entertain suggestions for new competition platforms in the network.

Because of the time constraints of PennApps, we began with Musathon, our musicmaking competition platform, before we expand into other categories. However, the format of each site will be very similar, with only the submission page and the content of the site making each site unique.

What it does

Musathon is a platform that lets users host/join 24-48 hour music composing competitions. Participants gather in teams of 2-4, similar to hackathons, where they will compose a musical piece and perform it using their own musical instruments or using MIDI technology. Similar to hackathons, first-time musicians can compete and attempt to learn a musical instrument, learn to compose, or learn MIDI in a day, and the organizers can plan various workshops in between.

Within each competition, there is a chat group for users to ask questions and to connect with other participants. In addition, users can see an overview, rules, and prizes for that competition. When ready to make a submission, the team uploads their composition as a PDF and their performance as an audio file, along with a write-up and name of their piece.

The music gallery then opens after the judges have determined the winner.

Our Convex backend features include adding competitions, submissions data, users. Our frontend features a login/Register page using Auth0, which was suggested by Convex in their documentation.

How we built it

During Convex's workshop, we learned how to set up a Convex project on top of a NextJS project. In short, we built Musathon using React.js, Next, and Convex for the backend.

Challenges we ran into

One of the challenges we ran into was the card layout for the homepage. Additionally, one of our team members never used React.js before and had to learn it while implementing certain components of Musathon. We ran into multiple errors involving Next.js and React due to our lack of expertise in these frameworks.

Accomplishments that we're proud of

We are extremely proud of building a web application that feels complete with essential and non-essential features.Without Convex, we believed that our project would've have taken significantly longer considering the amount of code we would have to write in the backend.

Because Convex and NextJS, while very powerful and easy-to-use technologies, do not track errors for the developer well, we had trouble when faced with web socket errors initially, and it took some time for us to deploy the application to Vercel because of an error with NextJS.

What we learned

We learned Convex, React.js, Next, Twilio SendGrid email API, and Reactstrap.

What's next for Musathon

We want to expand Musathon into a network of platforms for different types of competitions outside of music, such as coding, book writing, filmmaking, etc. Having a different "subsite" similar to StackExchange and Reddit will target different kinds of people with different interests and encourage hackathon-like competitions that may have never existed before. In addition, this network of competition sites

While we have dived deep into Convex, we want to continue to explore Convex such as the Files API for uploading files.

Tokenizing participants' music composition submissions and creating an NFT for the participants to own. Apart from building their music portfolio and possibly receiving a prize, the NFT feature would incentivize users to submit their projects as they are in full control of their digital assets rather than a centralized application.

Built With

Share this project:

Updates