Overview

SoundDrop is a campus music map for generating and publishing place-based music.

A user chooses a location on the map, uploads an image, writes a short memory or prompt, and receives a small set of generated music versions. The chosen version can be published to the public map or saved privately.

The project treats music generation as a local, social object. A song is attached to a corner, a path, a building, a photo, and a moment.

Product Shape

SoundDrop is built around a compact flow:

choose a place on a campus map,

add visual and textual context through an image and short story,

generate music through the MERIC backend,

select, download, and save one version,

publish publicly or keep it private.

The map is the interface. Existing works stay visible as context while new pieces are being placed, so the site feels like a growing layer of campus memory.

System

The public product combines a React frontend, an Express API, PostgreSQL storage, object uploads, and a GPU inference service running MERIC.

The open-source surface is the frontend UI. The production backend and model infrastructure remain private, while the public UI repository documents the interaction layer and visual system.

SoundDrop UI

SoundDrop UI is the frontend for a campus sound-map experience: users choose a place on a map, upload a photo, describe a musical feeling, generate audio through a backend AI service, and publish the selected result back onto the shared map.

This repository contains only the React/Vite UI. It does not include the production backend, database, deployment stack, or music-generation model.

Features

Interactive campus map with Leaflet and marker clustering
Map pin selection and region matching
Photo upload UI with client-side compression
Auth screens and token-based API client
Submission flow with optional 1 or 3 generated tracks
Generation polling and audio selection
Public map browsing, playback, likes, and personal work management UI
Responsive mobile-first panels and draggable sheets

Tech stack

React
TypeScript
Vite
Tailwind CSS
Leaflet + leaflet.markercluster
Howler.js
Axios

Getting started

npm install
npm run dev

The dev server expects a backend API available at /api/v1. In local development, you can add a Vite proxy or serve the UI behind a backend/proxy that exposes that path.

For quick UI exploration without a backend, the app falls back to bundled demo map data in Vite dev mode. Production builds do not use demo fallback unless you explicitly set VITE_DEMO_FALLBACK=true.

Scripts

npm run lint
npm run build
npm run preview

API expectation

The UI uses a REST API under /api/v1 for auth, submissions, generations, works, regions, likes, and admin state. See src/api/client.ts and the page components for expected request shapes.

Map asset

The included map image is used as a pixel-coordinate Leaflet overlay. If you adapt SoundDrop to another campus or place, replace public/maps/map-zgc-web.jpg and update MAP_CONFIG in src/config.ts.

License

MIT

SoundDrop