Angular Spotify

A simple Spotify client built with Angular 15, Nx workspace, ngrx, TailwindCSS and ng-zorro.

I have recently shared about #angularspotify at AngularAir, you can watch the session here 👉 youtu.be/uPB0KHKlrU8

Working application

Check out the live application -> https://spotify.trungk18.com

Spotify premium is required for the Web Playback SDK to play music. If you are using a free account, you can still browse the app, but it couldn't play the music. Sorry about that 🤣

Support

If you like my work, feel free to:

• ⭐ this repository. And we will be happy together :)
• about Angular Spotify

Thanks a bunch for stopping by and supporting me!

Who is it for 🤷‍♀️

I still remember Window Media Player on windows has the visualization when you start to play the music, and I wanted to have the same experience when listening to Spotify. That is the reason I started this project.

I found that there weren't many resources on building a proper real-world scale application, and that's my focus for sharing. I made a Jira clone application as the first one for that purpose. Nx workspace is getting more and more attention from the Angular community, but people are always confused about how to architect and set up an Nx project. I hope Angular Spotify will give you more insight on that even though it is my first project using Nx 🤣

---

You know I am one of the moderators of Angular Vietnam. Recently, I also started Angular Singapore. This piece of work is my other long-term plan to bring Angular knowledge to more people. I desire to advocate and grow the Angular developer community in Singapore and Vietnam :)

Tech stack

• Angular 15
• Nx Workspace
• ngneat packages includes: ngneat/svg-icon and ngneat/until-destroy
• ngrx and ngrx/component-store
• ng-zorro UI component: tooltip, modal, slider, switch and more.
• TailwindCSS - See this video Everything you need to know about TailwindCSS and Angular applications by @nartc for integration TailwindCSS with Angular
• Netlify for deployment

I experimented with the ngrx/component store for AuthStore and UIStore. It might not be a best practice, and I will refactor it very soon. Just FYI 🤣

High-level design

See my original notes on Nx workspace structure for NestJS and Angular

Principles

All components are following:

• OnPush Change Detection and async pipes: all components use observable and async pipe for rendering data without any single manual subscribe. Only some places are calling subscribe for dispatching an action, which I will have a refactor live stream session with my friend @nartc to use the component store for a fully subscribe-less application.
• SCAMs (single component Angular modules) for tree-shakable components, meaning each component will have a respective module. For example, a RegisterComponent will have a corresponding RegisterModule. We won't declare RegisterComponent as part of AuthModule, for instance.
• Mostly, everything will stay in the libs folder. New modules, new models, new configurations, new components etc... are in libs. libs should be separated into different directories based on existing apps. We won't put them inside the apps folder. For example in an Angular, contains the main.ts, app.component.ts and app.module.ts

Structure

I followed the structure recommended by my friend @nartc. Below is the simplified version of the application structure.

This is the beginning of the README. Read the rest at the original. Read the full README ↗