A core design principle for Bandroom is letting people jam immediately. When a user first loads the site, they should not be forced to create an account, verify their email, and fill out a profile before hitting play. They should be able to paste a song and play right away.
To support this, I set up a local persistence layer using IndexedDB (via Dexie.js). Guest players can save their custom band roster and up to 10 songs directly in their browser.
This works perfectly until the guest player decides to sign up for a permanent account.
The Merge Conflict
When a user registers or logs in, a conflict occurs. They now have two sets of data:
- The Guest Session stored in their browser's IndexedDB.
- The Cloud Account stored in Supabase.
Overwriting the cloud database with local data is dangerous, as they might lose songs they created on another machine. Overwriting the local browser data is also bad, because their recent guest jam session would be discarded.
We needed a clean, transparent way to merge these sessions.
The Merge Session Modal
I built a dedicated MergeSessionModal component to resolve this conflict during the login sequence.
When the user authenticates, the application checks if there is any active guest data. If guest data exists, the modal opens and queries Supabase to count the user's cloud songs and bandmates. It displays a simple grid comparing the two sessions.
The user is given three clear choices:
- Merge Sessions: Combine the guest data with their cloud account.
- Discard Guest Session: Keep the cloud database clean and delete the local guest data.
- Keep Account Clean: Sign in but leave the guest data in the browser for now.
Enforcing Account Limits
Merging data introduces a new challenge: account tier limits.
On the Free tier, users are allowed a maximum of 6 bandmates and 10 saved songs. If a user has 8 local guest songs and 5 cloud songs, merging them would result in 13 songs, exceeding the Free tier limit.
Instead of throwing a validation error and blocking the merge, the modal handles this gracefully. It displays a clear warning notifying the user that their roster or song list will be clamped to the Free tier limits, discarding the oldest excess items.
If they want to keep everything, the modal displays a prominent call to action to upgrade to Bandroom Pro, which automatically unlocks unlimited storage and merges all songs.
By building this merge flow, we keep the onboarding frictionless for new players while providing a natural, value-driven path to paid tiers.
Bandroom is now fully functional from first jam to account checkout. Now we just need to polish the responsive layout and launch.