MusicMap is an interactive graph explorer for musicians and bands. It models artists, albums, genres, instruments, memberships, influences, and collaborations as connected graph data.
Live Demo: https://musicgraph.netlify.app/ Repository: https://github.com/soumyajit444/MusicMap
MusicMap is designed as an "IMDb for musicians".
Instead of browsing artists as isolated records, users can explore how they are connected:
- Band memberships
- Instruments played
- Musical influences
- Collaborations
- Albums
- Genres
- Connections between artists through the graph
The UI provides three main ways to explore the data:
- Artist Browser — browse and filter artists and bands.
- Relationship Map — visualize connected artists and entities.
- Relationship Explorer — inspect direct connections and find paths between artists.
A graph database fits this use case because the main value of the application is the relationships between entities, not just the entities themselves.
For example:
Meshuggah
↓ INFLUENCED_BY
Periphery
↓ MEMBER_OF
Mark Holcomb
↓ COLLABORATED_WITH
Misha Mansoor
Representing these connections as graph relationships makes traversals and path-based queries natural.
With a relational database, these connections would require multiple tables and joins. With CognoDB, they can be expressed directly using Cypher patterns.
CognoDB supports Cypher over Bolt and works with the standard Neo4j JavaScript driver, which makes it straightforward to integrate with the Next.js API routes.
graph LR
Artist["Artist<br/>Band / Person"]
Album["Album"]
Genre["Genre"]
Instrument["Instrument"]
Artist -->|MEMBER_OF| Artist
Artist -->|PLAYS| Instrument
Artist -->|INFLUENCED_BY| Artist
Artist -->|COLLABORATED_WITH| Artist
Artist -->|RELEASED| Album
Album -->|BELONGS_TO_GENRE| Genre
- Artist — musicians and bands
- Album — released albums
- Genre — musical genres
- Instrument — instruments played by artists
MEMBER_OFPLAYSINFLUENCED_BYCOLLABORATED_WITHRELEASEDBELONGS_TO_GENRE
The current dataset contains 43 nodes and 43 relationships.
| Layer | Technology |
|---|---|
| Framework | Next.js 15 |
| Language | JavaScript |
| UI | React |
| Styling | Tailwind CSS v4 |
| Graph Database | CognoDB |
| Database Protocol | Bolt |
| Database Queries | openCypher / Cypher |
| Database Driver | neo4j-driver |
| Visualization | amCharts 4 ForceDirected |
| Fonts | Oswald, JetBrains Mono |
| Deployment | Netlify |
MusicMap/
├── public/
│ └── images/
│ └── artists/
├── scripts/
│ └── seed.cypher
├── src/
│ ├── app/
│ │ ├── api/
│ │ └── page.js
│ ├── components/
│ │ ├── ArtistCard.js
│ │ ├── ArtistDetailPanel.js
│ │ ├── BrowsePanel.js
│ │ ├── GraphView.js
│ │ ├── PathDetailView.js
│ │ ├── RelationshipExplorer.js
│ │ ├── RelationshipMapPanel.js
│ │ └── SkeletonCard.js
│ └── lib/
│ ├── graphTheme.js
│ ├── neo4j.js
│ └── useCountUp.js
├── .env.local
├── package.json
└── README.md
- Node.js 18+
- npm
- A CognoDB instance
- Git
MusicMap uses CognoDB through the Bolt protocol and the Neo4j JavaScript driver.
Create a CognoDB instance using the CognoDB service provided for the assignment, or run CognoDB locally using its official installation method.
For local development, CognoDB can be started with:
./cognodbThe default local Bolt endpoint is:
bolt://localhost:7687
CognoDB also provides a Docker option:
docker run -p 7687:7687 cognodb/cognodb:latestFor the assignment environment, use the Bolt URI and credentials provided by your CognoDB instance.
Use the CognoDB Browser or another Cypher-compatible client and run the contents of:
scripts/seed.cypher
This creates the MusicMap graph and adds the artist image URL properties.
Run:
MATCH (a)-[r]->(b)
RETURN a, r, b
LIMIT 100Create .env.local in the project root:
NEO4J_URI=<your-cognodb-bolt-uri>
NEO4J_USER=<your-cognodb-username>
NEO4J_PASSWORD=<your-cognodb-password>Do not commit .env.local to Git.
Clone the repository:
git clone https://github.com/soumyajit444/MusicMap.git
cd MusicMapInstall dependencies:
npm installCreate .env.local with your CognoDB credentials.
Start the development server:
npm run devOpen:
http://localhost:3000
Create a production build with:
npm run buildThe application uses Cypher queries through the Next.js API routes.
Finds Artist nodes and returns their properties for the browsing interface.
MATCH (a:Artist)
RETURN a
ORDER BY a.nameFinds an artist and the entities directly connected to them.
MATCH (a:Artist {name: $name})-[r]-(connected)
RETURN a, r, connectedThis powers the artist detail and relationship explorer views.
Finds the shortest available path between two artists.
MATCH p = shortestPath(
(a:Artist {name: $from})-[*]-(b:Artist {name: $to})
)
RETURN pThis is used by the path exploration feature.
Loads the graph used by the relationship visualization.
MATCH (a)-[r]->(b)
RETURN a, r, bThe resulting nodes and relationships are transformed into the format required by the graph visualization.
Screenshots can be added to the
screenshots/directory using the filenames above.
The application is deployed on Netlify.
Live: https://musicgraph.netlify.app/
The following environment variables must be configured in the deployment environment:
NEO4J_URI
NEO4J_USER
NEO4J_PASSWORD
No database credentials are stored in the repository.
- The Next.js API routes act as the backend layer.
- No separate Java or Node.js backend service is required.
- The CognoDB driver is kept as a singleton to avoid connection-pool duplication during development.
- The graph visualization uses amCharts ForceDirected.
- Artist images fall back to generated initials when an image is not available.
- The UI is responsive and includes a mobile bottom-sheet exploration layout.
- The Next.js API routes act as the backend layer.
- No separate Java or Node.js backend service is required.
- The CognoDB driver is kept as a singleton to avoid connection-pool duplication during development.
- The graph visualization uses amCharts ForceDirected.
- Artist images fall back to generated initials when an image is not available.
- The UI is responsive and includes a mobile bottom-sheet exploration layout.