Collection Browser — a web app to browse and filter your MusicBrainz collections

MusicBrainz
, ,
1

Hi everyone, I’m a tech hobbyist from Germany and long-time MusicBrainz user, and this is my first post here.

I’ve been using MusicBrainz to manage my music library independently of streaming services, and it’s been great for that. But once my collection grew to 1,000+ release-groups, I found it hard to actually browse and discover what’s in there. I wanted to do things like “show me all jazz albums from the 80s” or “filter by rating”.

So I built a collection browser that works with any public release-group collection or series (like the Rolling Stone 500). It also supports OAuth login so you can browse your private collections.

What it does:

  • Filter by genres, tags, release year, and ratings (with AND/OR logic)
  • Streaming links to Spotify, Apple Music, Tidal, and more via Odesli/Songlink
  • Works with both release-group collections and series
  • Dark theme with an album grid view

Demo video: https://youtu.be/U05FlKF24Tc

GitHub (open source): GitHub - tmdecker/collection-browser-for-musicbrainz: Next.js-powered collection browser with advanced filtering and streaming integration for MusicBrainz as web application (formerly MusicBrainz-GUI)

filters
filters1276×888 268 KB

It’s a self-hosted Next.js app: You clone the repo and run it locally. No public instance at this time.

I’d love to hear your thoughts, especially if you manage large collections and have run into similar frustrations. Feature suggestions are also very welcome. I’m considering adding support for release collections next.

10 Likes
2

Hi, I’m trying to install it on Windows 11. I did install Docker, Node.js + npm (and chocolatey).

How do I set environment variables on Windows 11?

3

Hi! I haven’t tested it on windows myself, but here is how it should work:

Navigate to your project folder

  1. Copy the file .env.example and rename it to .env.local

  2. Right-click → “Open with” → Notepad (or VS Code)

  3. Then edit the file with your values (For OAuth to work, you need to register your app here Log in - MusicBrainz, if you haven’t done so already, and use the same values this file)

# Required: Application identification for MusicBrainz API (no app registration needed)
NEXT_PUBLIC_MUSICBRAINZ_APP_NAME=Your-AppName
NEXT_PUBLIC_MUSICBRAINZ_CONTACT_EMAIL=your.email@example.com

# OAuth2 Configuration (Optional - only required for personal collections access)
MUSICBRAINZ_OAUTH_CLIENT_ID=your_client_id_here
MUSICBRAINZ_OAUTH_CLIENT_SECRET=your_client_secret_here
MUSICBRAINZ_OAUTH_REDIRECT_URI=http://localhost:3000/api/auth/callback

After creating .env.local, run:

npm install
npm run dev

Hope, this helps.

2 Likes
4

Thanks, I got it working :slight_smile:

1 Like
5

Wow - what the heck it happening today? That is two different projects appearing at the same time that make MusicBrainz look so pretty and accessible.

Now what I need to work out is how to link your gorgeous looking project into my KODI database where my music lives.

4 Likes