SoundBridge is a full-stack web application that connects music producers with artists through a match-based discovery system.
Artists submit categorized audio clips, and producers can browse and connect based on style and project needs.
- Match-based discovery system
- Categorized audio submissions
- Full-stack architecture
- Built for SparkHacks 2026
SoundBridge was created to simplify collaboration between music producers and artists.
Instead of relying on cold outreach, the platform allows artists to upload structured samples and producers to discover talent through organized browsing.
Created for Sparkhacks 2026 at University of Illinois Chicago, a 24 hour hackathon!
When thinking about the track, we were finding ideas online and knew that we wanted to add a 'tinder swipe to match' feature to our application. This was the basis for our app, and from there we decided our target audience, goal(s), and real-world problems we were solving. Once we had all of this figured out, we decided to start designing a rough sketch of the UI. We separated work on the design and the app's dependencies between the 3-member team. We started with a simple online whiteboard, then we looked at both Figma and Canva, before finalizing the design in Canva. In the meantime, we were also creating all necessary dependencies, such as node.js, firebase authentication, react.js, vite, etc. We ended the first day with the design, and immediately got to work within react to make the UI. This was done utilizing react components and typescript, as well as html/css.
Firebase was a challenge because of the issues we were running into while trying to create a billing account. They would close accounts when we tried to create them. One of the members, Levell, was new to the tech stack we established, but he was able to grasp some of the basic react.js/typescript concepts necessary to make components. The swiping animation was also a bit complicated.
24 hours is not a lot of time, but we can still create something!
Help the small artist community with soundbridge.
Frontend:
- React
- TypeScript
- Tailwind CSS
npm install
npm start