RockPlayer: actually playing what RockRecommender recommends
An eight-part series building the companion app that takes RockRecommender's picks and puts them on to play, with no database of its own. Two separate repositories, an adapter for the music provider, a Redis cache, and an Angular 22 front-end.
What you'll learn
- The adapter pattern, and why isolating an external provider protects the rest of the system from its changes
- How to use Redis as a cache, not a database, and know the difference
- What actually changed in Angular 22: OnPush by default, Signal Forms, HttpClient over Fetch
- How to build a small ASP.NET Core API that only orchestrates other services, with no database
- How to integrate the YouTube Data API v3 to find and play a real song
- How to build an Angular 22 front-end with standalone components and signals, no NgRx
Articles in this series
Introducing RockPlayer: an app to listen to RockRecommender's recommendations
First article of a new series. RockRecommender knows which song to recommend, but it doesn't play anything. This article introduces RockPlayer, the project that takes that recommendation and actually puts it to play, and explains how the series will unfold.
Adapters: isolating YouTube from the business rules
Second article in the series. Before any real music provider exists in RockPlayer, this article explains the adapter pattern and why isolating YouTube (or any other provider) from the rest of the system prevents a change in the external API from breaking the business rules.
No database: how RockPlayer avoids asking the music provider twice
Third article in the series. RockPlayer has no database, but it still needs to avoid asking the music provider the same thing twice. This article explains why Redis solves exactly this problem, without turning into a database in disguise.
Angular 22 in practice: what really changed
Fourth article in the series. Before writing the first line of RockPlayerWeb, a practical summary of what Angular 22 really changes day to day: change detection, forms and HttpClient under the hood.
Building the RockPlayer API, layer by layer
Fifth article in the series. With the theory settled, it's time to build the skeleton of RockPlayerApi: the ports, the orchestrator that brings together recommendation, cache and music provider, and the controller, still without any real provider implemented.
The YouTube adapter: finding and playing the full song
Sixth article in the series. The first real implementation of IMusicProviderAdapter, using the YouTube Data API v3, and why it was the one chosen among the available streaming options.
RockPlayer in Angular 22: structure and onboarding
Seventh article in the series. The first screen of RockPlayerWeb: the folder structure designed to grow without pain, and the onboarding where the person picks their favorite bands.
Putting it all together: RockPlayer playing, from like to the next song
Eighth and last article in the series. The screen where the song actually plays, with like, dislike, next and back completely independent from each other, and with no need for any state stored on the server to navigate through the history.