DubJam

Imagine FigJam, but for music.

Inspiration

DubJam was born from our passion for making music and a desire to create a platform that brings musicians together in real-time. We wanted to build a tool that could break down the barriers of distance and enable seamless collaboration in music creation.

What it does

DubJam is a real-time collaboration audio platform. It allows multiple users to create and edit music together simultaneously, regardless of their physical location. Users can add tracks, manipulate sequences, play on the synthesizer, and hear the results instantly, fostering a truly collaborative music-making experience.

How we built it

We leveraged a stack of modern technologies to bring DubJam to life:

Frontend: React.js for a responsive and interactive user interface
Audio Processing: Tone.js for high-performance audio synthesis and sequencing
Real-time Collaboration: Ably's Pub-Sub sdk for seamless real-time data synchronization
Authentication: Auth0 for secure user authentication
Backend: Node.js to handle server-side operations
Database: Prisma and MongoDB Atlas for serverless, NoSQL storage
Deployment: Terraform for infrastructure as code and AWS for hosting

Challenges we ran into

Our journey in building DubJam was not without its hurdles:

The 24-hour time constraint of the hackathon pushed us to prioritize features and work efficiently.
Configuring services that don't have standard interoperability required creative problem-solving and deep dives into documentation.
Wrangling multiple moving parts on the frontend, especially synchronizing the audio playback with the user interface and real-time updates, proved to be complex.
Setting up backend authentication with Auth0 presented initial difficulties that we had to overcome.
Ensuring smooth real-time user collaboration while maintaining audio synchronization was a significant technical challenge.

Accomplishments that we're proud of

Despite the challenges, we achieved several milestones that make us proud:

Successfully integrating multiple new technologies (Tone.js, Ably, Auth0) into a cohesive application.
Creating a functional real-time collaborative audio sequencer within the hackathon's time constraint.
Implementing a user-friendly interface that allows for intuitive music creation and editing.
Overcoming the technical hurdles to achieve synchronization between audio playback and real-time updates.

What we learned

This project was a significant learning experience for our team:

We gained deeper insights into fullstack development, particularly in handling real-time data and audio processing in web applications.
Working with audio libraries like Tone.js expanded our understanding of digital audio workstations.
We developed a greater appreciation for the complexity behind music production platforms like FL Studio.
The project reinforced the importance of effective teamwork and communication in a high-pressure, time-constrained environment.

What's next for DubJam

We have exciting plans to enhance DubJam further:

Implement a complete user authentication system with detailed profile and settings pages, including a list of user projects.
Develop a community site similar to Figma Community, where groups can share and explore each other's works.
Expand the music editing capabilities, including a wider variety of instruments and advanced tuning methods.
Enhance the collaborative experience by propagating all changes across the pub/sub model, ensuring even smoother real-time collaboration.
Optimize performance for larger, more complex musical projects.
Introduce features for exporting and sharing completed tracks.

DubJam is just the beginning of our journey to revolutionize collaborative music creation. We're excited to continue developing and improving this platform, making music production more accessible and collaborative than ever before.