RockPlayerWeb is the Angular 22 front-end for RockPlayer: an onboarding screen where you pick the bands you already like, and a player screen where the recommended song actually plays, with like, dislike, next and back all independent from each other. It talks only to RockPlayerApi, never directly to RockRecommender or to the music provider.
It is the companion code for an 8-part blog series:
- Introducing RockPlayer
- Adapters: isolating the YouTube provider
- No database: caching lookups with Redis
- Angular 22 in practice
- Building the RockPlayer API, layer by layer
- The YouTube adapter: finding and playing the full song
- RockPlayer in Angular 22: structure and onboarding
- Putting it all together
src/app/pages/ one folder per screen (onboarding, player), standalone components, OnPush
src/app/models/ PlaybackSource, PlaybackKind
src/app/services/ one Angular service per RockPlayerApi concern (bands, users, recommendations, feedback)
src/app/layout/ the header
No NgModules, no state management library, state lives in signals. See the blog series above for the reasoning behind each of these choices.
Dark, neon, 80s-rock-poster styling with Tailwind CSS v4 (@theme tokens in src/styles.css: rock-pink, rock-purple, rock-gold, rock-black, rock-surface, plus a Bebas Neue display font). The blog articles show the Angular template code without any Tailwind classes on purpose, to keep the teaching content focused on Angular itself rather than styling, the real templates in this repository are the ones with the actual classes.
- Node.js 20+ and npm
- Angular CLI 22 (
npx @angular/cli@22 versionto check) - A running instance of RockPlayerApi (defaults to
http://localhost:5200, configurable insrc/app/services/api-config.ts)
npm install
npm startServes the app at http://localhost:4200. Visiting it redirects to /onboarding, where picking at least one band and submitting creates a user through RockPlayerApi and navigates to /player/:userId.
npm run buildOutput goes to dist/rock-player-web.
npm test