01
Importar
Pega cualquier URL de lista de reproducción pública de Spotify.
CASO DE ESTUDIO · PLATAFORMA MUSICAL
Singuessr
Singuessr es una plataforma dinámica de blind test musical construida para fans de todos los géneros. Combina dos APIs musicales: la Spotify Web API (a través de un proxy Cloudflare Worker de alto rendimiento a medida) proporciona metadatos de listas de reproducción y portadas de álbumes, mientras que la API de Apple Music / iTunes Search entrega los adelantos de audio de 30 segundos que impulsan cada ronda. La arquitectura serverless híbrida gestiona las restricciones regionales de API, la obtención recursiva de alta concurrencia, y la coincidencia de pistas entre catálogos.
reactserverlessspotify-apiapple-music-api
EL PROBLEMA
Los blind tests musicales tradicionales son estáticos, predefinidos, y limitados en alcance.
Construido para resolver las limitaciones del trivial musical estático. Singuessr usa Spotify como fuente de verdad para las listas de reproducción y portadas (porque ahí es donde los usuarios organizan su música), pero enruta la reproducción de audio a través del catálogo público de adelantos de Apple Music / iTunes — que es alcanzable globalmente, no autenticado, y libre de la complejidad de OAuth.
- Las licencias regionales bloquean los adelantos de Spotify. Los servidores en la nube reciben errores 403 de las URLs de adelanto de Spotify para contenido de la región de la UE — el audio simplemente no se reproduce para la mayoría de los usuarios.
- Los blind tests estáticos aburren rápido. Las listas de canciones predefinidas no escalan y pierden rápidamente su valor de rejugabilidad tras unas pocas sesiones.
- Las listas grandes tardan en cargar. Obtener 100+ pistas de la API paginada de Spotify crea una latencia de carga dolorosa.
Amantes de la música y grupos de amigos
Cualquiera que quiera lanzar un blind test en tiempo real sobre sus propias listas de reproducción de Spotify curadas
∞
listas jugables
<200ms
carga de lista grande
0
bloqueos regionales
LA SOLUCIÓN
el blind test dinámico definitivo.
Una arquitectura serverless híbrida: una SPA de React para la UI y un Cloudflare Worker para la capa de proxy de API. El Worker gestiona el OAuth2 de Spotify, el aplanamiento recursivo de listas de reproducción, y la coincidencia entre catálogos contra la API pública de iTunes Search para resolver la URL de adelanto de Apple Music de cada pista. El frontend gestiona el bucle de audio interactivo y alimenta la cola de rondas directamente desde esas URLs de adelanto. El despliegue está completamente automatizado a través de la red edge de Cloudflare.
02
Resolver
El worker en el edge aplana las pistas de Spotify y hace coincidir cada una con su adelanto de Apple Music.
03
Jugar
Los adelantos de Apple Music se transmiten ronda a ronda, con portadas de Spotify.
04
Puntuar
La coincidencia difusa valida las adivinanzas de títulos de canciones.
Antes
herramientas fragmentadas · alta carga manual
Después
producto único unificado · rápido y automatizado
FUNCIONALIDADES CLAVE
Construido en torno a cómo trabaja realmente amantes de la música y grupos de amigos.
FEATURE 01
Proxy Cloudflare Worker
Un Worker ligero orquesta dos APIs: consulta Spotify para datos de lista de reproducción + portadas de álbum (con las cabeceras de mercado adecuadas para esquivar bloqueos regionales), luego resuelve cada pista a su URL de adelanto de Apple Music vía iTunes Search.
- Resuelve los bloqueos regionales 403 de Spotify de forma transparente para el cliente
- Coincidencia entre catálogos vía iTunes Search para encontrar cada URL de adelanto
- Gestiona el flujo de tokens OAuth2 y la orquestación de solicitudes en el edge
FEATURE 02
Aplanamiento recursivo de listas
Una única llamada de obtención recorre recursivamente todos los endpoints paginados de Spotify, devolviendo un array de pistas plano — cada una enriquecida con su adelanto de Apple Music correspondiente — en un solo viaje de ida y vuelta.
- Gestiona el límite de 100 elementos por página de Spotify de forma transparente
- Menos de 200ms para listas grandes vía colocalización en el edge
FEATURE 03
Gestión del ciclo de vida de audio
Una máquina de estados a medida precarga el próximo buffer de adelanto de Apple Music durante la ronda activa, eliminando la latencia percibida entre rondas del juego.
- Transiciones de ronda sin latencia vía precarga en segundo plano
- Gestión de condiciones de carrera durante secuencias de adivinanza rápidas
DESAFÍO TÉCNICO
Problemas difíciles resueltos.
El proxy usa una estrategia de 'aplanar y cachear' para los metadatos de listas de reproducción de Spotify (portadas + títulos + artistas) y canaliza cada pista hacia una búsqueda paralela en iTunes Search que devuelve una URL de adelanto de Apple Music de 30 segundos. El audio se reproduce entonces en la SPA de React vía la API de Audio HTML5 con una máquina de estados a medida que gestiona la carga, reproducción, y condiciones de carrera durante rondas de adivinanza rápidas.
Qué lo hizo difícil
- Diseñar un proxy Cloudflare Worker para eludir las restricciones CORS y los bloqueos de licencia regionales al obtener datos de listas de reproducción de Spotify (inyectando cabeceras market=FR y gestionando la renovación de tokens OAuth2 en el edge).
- Hacer coincidir cada pista de Spotify con su equivalente de adelanto en Apple Music / iTunes a través de dos catálogos independientes, con normalización difusa para lidiar con inconsistencias de nombres entre proveedores.
- Implementar la obtención recursiva de API para aplanar grandes listas de reproducción de Spotify (100+ pistas) en una única carga JSON de alta velocidad para el frontend.
- Desarrollar un algoritmo de puntuación 'difuso' que normaliza los títulos de canciones, eliminando metadatos como '- Remasterizado' o '(Bonus Track)' para garantizar adivinanzas justas.
- Optimizar el ciclo de vida de medios en React para precargar los próximos buffers de audio de Apple Music, garantizando una transición sin latencia entre rondas del juego.
architecture.ts
1 const frontend = [ "React", "Tailwind CSS", "API de Audio HTML5" ];
2 const edge_/_backend = [ "Cloudflare Workers", "Spotify Web API", "API de Apple Music / iTunes Search" ];
3 const algoritmos = [ "Normalización regex", "Coincidencia entre catálogos", "Coincidencia difusa", "Máquina de estados" ];
4 const monetización = [ "A-Ads (prioriza la privacidad)" ];
EL STACK
Tecnologías utilizadas.
Frontend
ReactTailwind CSSAPI de Audio HTML5
Edge / Backend
Cloudflare WorkersSpotify Web APIAPI de Apple Music / iTunes Search
Algoritmos
Normalización regexCoincidencia entre catálogosCoincidencia difusaMáquina de estados
Monetización
A-Ads (prioriza la privacidad)
LO QUE ESTO DEMUESTRA
Lo que Singuessr demuestra.
Arquitectura serverless
Diseñado y entregado un Cloudflare Worker que actúa como proxy y orquesta dos APIs musicales en el edge.
Elusión de restricciones regionales
Combinado Spotify (listas + portadas) con Apple Music (adelantos alcanzables globalmente) para que el audio se reproduzca para cada usuario, sin importar la región.
Ingeniería de rendimiento
Logrado una carga de listas grandes por debajo de 200ms colocalizando el aplanamiento de datos y la coincidencia entre catálogos en el edge de la CDN.
Máquina de estados de medios
Construido un robusto gestor de ciclo de vida de audio que maneja la precarga y las condiciones de carrera en un contexto de juego rápido.
TRABAJEMOS JUNTOS
¿Quieres construir algo así?
Tráeme tu idea o proyecto a medio construir. Lo defino, lo diseño y lo entrego — usando el mismo flujo de trabajo detrás de Singuessr.