Spotify Clone

El reto

La parte interesante no era la maquetación, era el reproductor: un único elemento de audio del que dependen media docena de componentes a la vez, cada uno necesitando saber qué suena, dónde va la barra de progreso y qué viene después.

Implementación

• Reproductor propio sobre RxJS

  Un servicio envuelve el elemento de audio del navegador y expone todo su estado —pista actual, progreso, tiempo transcurrido y restante, estado de reproducción— como streams, de forma que cualquier componente se suscribe a lo que necesita sin tocar el audio directamente.

• Cola, shuffle y modos de repetición

  Gestión de cola con índice activo e identificador de la fuente que la alimenta, reproducción aleatoria y tres modos de repetición (ninguno, toda la lista, una sola pista), además de control de volumen con silencio y restauración del nivel anterior.

• Catálogo desde la API de iTunes

  Top global y buscador servidos por la API de búsqueda de iTunes, con validación de término, límite y código de país en el propio servicio, reproduciendo los previews de 30 segundos.

• Sesión con guard e interceptor

  Login contra una API Node propia, token guardado en cookie con caducidad, un interceptor que lo inyecta en cada petición y un guard que protege las rutas privadas.

• Favoritos, playlists y recientes

  Servicios dedicados para marcar favoritos, montar playlists y mantener el historial de escuchas recientes, alimentando las secciones de la home.

• Sistema SCSS propio

  Módulos por dominio con carga perezosa y una base de estilos propia —variables, utilidades de flex, breakpoints responsive y view transitions— por encima de Angular Material.