Red de Colaboraciones Musicales v2.0

https://music-colabs.vercel.app/

Una herramienta de exploración interactiva para visualizar la red de colaboraciones entre artistas musicales, utilizando la API de Spotify y Three.js. Comienza con los colaboradores directos de un artista y expande la red nodo por nodo en un entorno 3D, descubriendo conexiones de forma orgánica.

⚡️ Características

• Búsqueda: Buscador predictivo con sugerencias en tiempo real y navegación directa por ID.
• Visualización 3D Inmersiva: Explora la red en un espacio tridimensional ("Galaxy View") renderizado con Three.js y WebGL.
• Expansión Interactiva: Haz clic en cualquier nodo para revelar sus colaboradores y expandir el universo musical dinámicamente.
• Metadatos Enriquecidos: Panel lateral con seguidores, popularidad, géneros y enlaces directos a Spotify.
• Controles de Cámara: Navegación orbital completa, con botones para pantalla completa y reseteo de vista.
• Reproductor Integrado: Escucha previews de las colaboraciones (tracks) directamente desde el panel lateral al seleccionar una conexión.
• Exploración de Aristas: Al pasar el mouse sobre una conexión, se destacan los artistas y se muestra un resumen de sus colaboraciones.
• Gestión Dinámica: Elimina artistas de la visualización individualmente para limpiar el grafo y enfocar la exploración.

🛠️ Tecnologías Utilizadas

• Framework: Next.js 15 (React 19)
• Lenguaje: TypeScript
• Visualización 3D: react-force-graph-3d (Three.js engine)
• Estilos: Tailwind CSS
• Iconos: Lucide React
• API: Spotify Web API
• Deployment: Vercel

🚀 Cómo Ejecutarlo en Local

Para clonar y ejecutar este proyecto en tu máquina, sigue estos pasos:

1. Clona el repositorio:

   git clone https://github.com/manugarciat/music-colabs.git
   cd music-colabs

2. Instala las dependencias: Se recomienda usar pnpm.

   pnpm install

3. Configura las variables de entorno: Necesitas obtener tus propias credenciales de la API de Spotify desde el Spotify Developer. Crea un archivo llamado .env.local en la raíz del proyecto y añade tus credenciales:

   SPOTIFY_CLIENT_ID=tu_client_id_de_spotify
   SPOTIFY_CLIENT_SECRET=tu_client_secret_de_spotify
   

4. Inicia el servidor de desarrollo:

   pnpm dev

5. Abre http://localhost:3000 en tu navegador para ver la aplicación.

📄 Licencia

Este proyecto está bajo la Licencia MIT.