Spotify Clone

The challenge

The interesting part wasn't the markup, it was the player: a single audio element half a dozen components depend on at once, each needing to know what's playing, where the progress bar is and what comes next.

Implementation

• A player built on RxJS

  A service wraps the browser audio element and exposes all of its state — current track, progress, elapsed and remaining time, playback status — as streams, so any component subscribes to what it needs without touching the audio directly.

• Queue, shuffle and repeat modes

  Queue management with an active index and an identifier for the source feeding it, shuffled playback, three repeat modes (off, all, one), plus volume control with mute and restore of the previous level.

• Catalog from the iTunes API

  Global charts and search served by the iTunes search API, with term, limit and country-code validation inside the service itself, playing back the 30-second previews.

• Session with guard and interceptor

  Login against a custom Node API, token stored in an expiring cookie, an interceptor that injects it into every request and a guard protecting private routes.

• Favourites, playlists and recents

  Dedicated services for favouriting tracks, assembling playlists and keeping recently-played history, feeding the sections on the home screen.

• Custom SCSS system

  Lazy-loaded modules per domain and a home-grown style base — variables, flex utilities, responsive breakpoints and view transitions — layered on top of Angular Material.