A sleek, interactive web app to explore relationships between modern and alternative rock artists — visualize connections, discover similar artists, and instantly build network graphs with live search and chip-based controls.
-
🎤 Multi-Artist Graph Search
Add multiple modern rock artists and instantly see all their connections in a single, merged network. -
🔗 Interconnected Network Visualization
Edges represent musical similarity; nodes auto-link and deduplicate in real-time. See overlaps and intersections at a glance. -
🟠 Chip-Based Artist UI
Add, remove, or clear artists individually with stylish chips — no clutter, no accidental repeats. -
✨ Responsive & Minimal Design
Modern floating card UI, subtle colors, dark mode, and seamless scaling from mobile to desktop. -
⚡ Zero Reload Needed
Update the entire network live by adding/removing artists; the UI responds instantly. -
🔍 Center Node Highlighting
Artists you search for are accentuated in the visualization for clarity.
- React (frontend UI)
- react-force-graph-2d (graph visualization)
- FastAPI (Python backend with CORS)
- Requests (for Last.fm data)
- python-dotenv (API keys)
- Vite (React build tooling)
- Fetch API
- Clone this repo
git clone https://github.com/your-username/SNN-modern-rock-graph.git
cd SNN-modern-rock-graph- Backend (FastAPI)
cd backend
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
# Add .env with LASTFM_API_KEY=<your-key>
uvicorn src.main:app --reload- Backend runs at
http://localhost:8000
- Frontend (React/Vite)
cd ../frontend
npm install
npm run dev- Frontend runs at
http://localhost:5173
- Usage
- Open the frontend URL. Search for one or more artists (chip UI), and explore their relationships live!
- Last.fm API — artist similarity data and info
- Project by Arnav Podichetty