DropLab

🎧 Inspiration

DropLab was born from our shared passion: I’m a DJ/producer, and Naman is a full-stack wizard who lives and breathes code. We always wanted a platform where people could experience both the art of music production and the rush of live DJ performance — right inside a browser. So, we made it happen.

🚀 What it does

DropLab is a two-mode web app designed for creators:

🎼 Producer Mode: Users generate melodies and drum patterns, apply live audio FX (like reverb, delay, filters), balance layers with faders, and shape tracks in real time.
🎛️ DJ Mode: Perform with a fully interactive CDJ setup featuring jogwheels, cue buttons, looping, EQ, backspins, tempo nudging, and synced playback using a backend metronome.

It’s a full audio playground — no DAW, no controller, just your browser.

🛠️ How we built it

We used:

⚛️ React for component architecture
🎨 Tailwind CSS for styling
🎞️ Framer Motion for smooth UI transitions
🔊 Web Audio API for real-time audio routing and FX
💡 Bolt as our collaborative agent framework
🧑‍💻 GitHub for team collaboration and version control

All audio manipulation is custom-built with Web Audio nodes, no external AI like Lyria was used.

🧩 Challenges we ran into

We spent 2.5 hours debugging a play/pause bug in DJ Mode — turns out syncing audio with React state is pure chaos.
Naman fought through tricky FX chain logic and real-time signal flow in Producer Mode.
I struggled to set up a legal, functional track library — ended up scouring NCS archives to stay copyright-safe.

🏆 Accomplishments that we're proud of

Built a realistic DJ interface with jogwheel-based backspins, scratch-style rewinds, and tempo nudging
Created a live FX + fader system in Producer Mode that feels tactile and responsive
Made music feel intuitive — even in a browser
Successfully synced two audio decks with a hidden backend metronome
Finally, we built DropLab in just 4 days — from concept to a fully interactive producer and DJ experience in the browser.

📚 What we learned

The Web Audio API is powerful but unforgiving — routing audio in real time takes precision.
Even visual-heavy tools like Framer Motion must respect audio timing in performance-based apps.
Building creative tools means thinking like both an engineer and an artist.

🔮 What's next for DropLab

Add stem separation so DJs can isolate vocals/instrumentals
Enable recording and exporting live DJ sets
Add looping, hot cue banks, and real-time waveform sync
Let users share mixes or download tracks
Keep building toward making DropLab a true browser-based DAW + DJ setup for the next generation of creators
AI-powered melody and drum generation, and real-time collaborative sessions for producers and DJs alike.

⭐Message to the judges: We used multiple bolt conversations for our project. Since we do not have a single bolt conversation link we have provided many bolt links in the required fields. Thanks. 😀

https://bolt.new/~/github-ck21igz3 https://bolt.new/~/github-axv2fmfn https://bolt.new/~/github-k2982fq6 https://bolt.new/~/github-b4lfwgen https://bolt.new/~/github-j6dcdm7j https://bolt.new/~/github-kk5vqlnm https://bolt.new/~/github-ca7ftww8 https://bolt.new/~/github-plnyklkm https://bolt.new/~/github-fodocjhz https://bolt.new/~/github-nvqqotjq https://bolt.new/~/github-8waa1hvo https://bolt.new/~/github-bsmepmcp https://bolt.new/~/github-cnpnjvng https://bolt.new/~/github-dycx1rbz