Red de Colaboraciones Musicales

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 D3.js. Comienza con los colaboradores directos de un artista y expande la red nodo por nodo con cada clic, descubriendo conexiones musicales de una forma orgánica.

⚡️ Características

• Búsqueda de Artistas: Encuentra cualquier artista disponible en la base de datos de Spotify.
• Expansión Interactiva del Grafo: Empieza con los colaboradores directos y expande la red al hacer clic en cualquier artista, creando una visualización única en cada exploración.
• Renderizado de Alto Rendimiento: Utiliza HTML Canvas para renderizar grafos con cientos de nodos de forma fluida y sin caídas de rendimiento.
• Grafo Interactivo: Arrastra los nodos para explorar la red a tu gusto.
• Tooltips Informativos: Pasa el ratón sobre cualquier artista para ver su foto, nombre y nivel de popularidad.
• Diseño: Interfaz constuida con Next.js y Tailwind CSS.

🛠️ Tecnologías Utilizadas

• Framework: Next.js (React)
• Lenguaje: TypeScript
• Visualización de Datos: D3.js (d3-force, d3-scale)
• Estilos: Tailwind CSS
• 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.