Bar For Bar

Inspiration

For all of the times in the lunchroom, the car rides, and the discord calls where you and your friends went "bar for bar" as you free styled and created music together.

I wanted to make similar app where people worked together to make beats. Reddit has a huge number of musicians in various subreddits like r/WeAreTheMusicMakers, r/songwriting, r/makinghiphop and etc. This is a fun app for them (and any one else!) to make music, get inspired and collaborate.

What it does

This app is a minified and gamified version of a daw (think of fl studio). Users can use instruments such as piano, guitar, synth, and various drum machines to create an evolving 4 bar loop.

The flow:

A user will first create a room with a base layer (like simple drums or a piano chord). The user can specify how many days or rounds the room will exist for. A reddit post gets made for that room.
Then any user can add on to current layer. For example, say the base layer had a piano loop, I can add some drums to go along with it.
Once submitted, a comment along with the link to submission gets posted.
Other users then can listen to it and vote for their favorite.
Highest voted submission gets "locked" for that day.
A new post gets created with the base layer + day 1 winner
This process will repeat until the final day where all the contributions are shown and the final beat is ready!

How we built it

This was built with React, Three.js, Web GL (cool crt effects!!) and typescript

Challenges we ran into

Initially for user experience, I wanted to record an video with submission audio so people can listen to the track in the comments themselves. The devvit api ended up not suppoting this, so I just switched to a info comment.

The other challenge was to open a specific submission for listening from a comment. I tried a bunch of things like passing ids through query parameters. The parameters never got passed down, so I ended up using the context menu to track what comment and submission the user was interacting with.

It was also hard trying to make this app work on mobile, since you can't go landscape mode on mobile, all of the UI had to be carefully crafted to fit in the small vertical orientation.

Accomplishments that we're proud of

I'm proud that I was able to get a working app while being busy with work and life. I really like how the UI turned out and enjoyed working with webgl effects to simulate a futuristic retro crt type vibe.

What we learned

At the beginning you have a lot of ideas and things you feel are non negotiable. Its important to scope what you want to make in a reasonable timeframe especially for a hackathon!