Trung Vo

Posted on Apr 2, 2021 • Edited on Apr 3, 2021

Built a Spotify client with Angular 11, Nx, ngrx, TailwindCSS and ng-zorro

#angular #typescript #tailwindcss

Angular Spotify

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

Source code

trungvose / angular-spotify

Spotify client built with Angular 15, Nx Workspace, ngrx, TailwindCSS and ng-zorro

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 :)
Tweet about Angular Spotify
Get me a coffee

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 a Nx project. I hope Angular Spotify will give you more insight on that despite the fact that 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 another 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 11
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
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.

.
└── root
    ├── apps
    │   └── angular-spotify
    └── libs
        └── web (dir)
            ├── shell (dir)
            │   ├── feature (angular:lib) - for configure any forRoot modules
            │   └── ui
            │       └── layout (angular:lib)
            ├── playlist (dir)
            │   ├── data-access (angular:lib, service, state management)
            │   ├── features
            │   │   ├── list (angular:lib PlaylistsComponent)
            │   │   └── detail (angular:lib PlaylistDetailComopnent)
            │   └── ui (dir)
            │       └── playlist-track (angular:lib, SCAM for Component)
            ├── visualizer (dir)
            │   ├── data-access (angular:lib)
            │   └── feature
            ├── home (dir)
            │   ├── data-access (angular:lib)
            │   ├── feature (angular:lib)
            │   └── ui (dir)
            │       ├── featured-playlists (angular:lib, SCAM for Component)
            │       ├── greeting (angular:lib, SCAM for Component)
            │       └── recent-played (angular:lib, SCAM for Component)
            └── shared (dir)
                ├── app-config (injection token for environment)
                ├── data-access (angular:lib, API call, Service or State management to share across the Client app)
                ├── ui (dir)
                ├── pipes (dir)
                ├── directives (dir)
                └── utils (angular:lib, usually shared Guards, Interceptors, Validators...)

Authentication Flow

I follow Implicit Grant Flow that Spotify recommended for client-side only application and does not involve secret keys. The access tokens that are issued are short-lived, and there are no refresh tokens to extend them when they expire.

View the Spotify Authorization Guide

Upon opening Angular Spotify, It will redirect you to Spotify to get access to your data. Angular Spotify only uses the data purely for displaying on the UI. We won't store your information anywhere else.
Angular Spotify only keeps the access token in the browser memory without even storing it into browser local storage. If you do a hard refresh on the browser, It will ask for a new access token from Spotify. One access token is only valid for one hour.
After having the token, I'll try to connect to the Web Playback SDK with a new player - Angular Spotify Web Player

Dependency Graph

Nx provides an dependency graph out of the box. To view it on your browser, clone my repository and run:

npm run dep-graph

A simplified graph looks like the following. It gives you insightful information for your mono repo and especially helpful when multiple projects are depending on each other.

Nx Computation Cache

Having Nx Cloud configured shorten the deployment time quite a lot.

Nx Cloud pairs with Nx in order to enable you to build and test code more rapidly, by up to 10 times. Even teams that are new to Nx can connect to Nx Cloud and start saving time instantly. Visit Nx Cloud to learn more.

Features and Roadmap

I set the tentative deadline for motivating myself to finish the work on time. Otherwise, It will take forever to complete :)

1.0 - Simple Spotify client

March 01 - 28, 2021

[x] Proven, scalable, and easy to understand structure with Nx workspace
[x] Play music using Spotify SDK
[x] Load a maximum of 50 save playlists and top 100 songs per playlist.
[x] Cool visualization

Live stream

Let work on it together!

I scheduled a few live stream sessions to show you how I continue developing Angular Spotify. Follow my twitter for the latest updates. See the scheduled events.

#	Time	Description/Link
1	Sat, 3rd April 2021, 10AM	Structure your Angular application with Nx workspace
2	Sat, 10th April 2021, 10AM	Build the album list and detail pages
3	Sat, 17th April 2021, 10AM	Build the artist list and detail pages
4	Sat, 24th April 2021, 10AM	Build the track list page

I will also do some refactoring with @nartc for Angular Vietnam Office Hours. More detail is coming soon.

Time spending

It is a side project that I only spent time outside of the office hours to work on. I initially planned to complete the project within two weeks, but the first two weekends were not very productive, maybe because of the holiday mood from Lunar New Year :) But once the lego blocks are getting together, I feel the rhythm, and I know it has to be finished by the end of March.

I couldn't get the full-time report from waka time because it only shows me the latest two weeks. 🤣

I have spent approximately 50 hours working on this project, which is almost the same amount that I worked on the first version of jira.trungk18.com.

The visualizer was the most exciting feature, and I decided to start this project because of that single component.

Accessibility ♿

Not all components have properly defined aria attributes, visual focus indicators, etc.

Setting up the development environment 🛠

git clone https://github.com/trungk18/angular-spotify.git
cd angular-spotify
npm start for starting Angular web application
The app should run on http://localhost:4200/

Unit/Integration tests 🧪

I skipped writing test for this project.

Compatibility

Web Playback SDK provided supports for Chrome, Firefox, Edge, IE 11, or above running on Mac/Windows/Linux.

It doesn't support Safari or any mobile browser on Android or iOS

View completed list of supported browsers

Author: Trung Vo ✍️

A seasoned front-end engineer with seven years of passion in creating experience-driven products. I am proficient in Angular, React and TypeScript development.
Personal blog: https://trungk18.com/
Say hello: trungk18 [et] gmail [dot] com

Contributing

If you have any ideas, just open an issue and tell me what you think.

If you'd like to contribute, please fork the repository and make changes as you'd like. Pull requests are warmly welcome.

Credits and reference

Special thanks to my friend @nartc, who helped me review the code early.

Resource	Description
@koel/koel	A cool player made by @phanan, I reused the visualizer code from this repo with my additional customization
beeman/component-store-playground	A nice example of using Nx with ngrx/component-store, I refer to the project structure from this repo
Start using ngrx/effects for this	An excellent write up by Tim Deschryver