DEV Community: Trung Vo

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

Trung Vo — Fri, 02 Apr 2021 07:38:59 +0000

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

License

Feel free to use my code on your project. Please put a reference to this repository.

MIT

Build an Angular component to display snow ❄️ effect

Trung Vo — Wed, 23 Dec 2020 00:39:19 +0000

2020 is about to an end, and the holiday session is coming. It was such a particular year for you and me. I have been staying in Singapore for more than eight months without traveling anywhere else. Probably, I will not be able to come back home for our upcoming Tet holiday. But tough times will make us stronger, I believe so :)

Jira clone snow theme

I did a quick snow theme for Jira Clone based on an awesome codepen, written purely with CSS.

That's my result -> https://jira.trungk18.com/project/issue/2020

Snow component

So let go ahead and create a new SnowComponent. We don't need to do anything with that component. The heavy lifting part is the template and styling.

import { Component } from '@angular/core'

@Component({
  selector: 'app-snow',
  templateUrl: './snow.component.html',
  styleUrls: ['./snow.component.css'],
})
export class SnowComponent {}

Open the scss file, and paste the below code. Basically, each snowflake will have a random position, opacity, and delay. And we applied it by generating different keyframe animation.

The code looks pretty short, but the CSS compiled version could be huge. 😂

@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));
  @return $random_range;
}

.snow {
  $total: 200;
  position: absolute;
  width: 20px;
  height: 20px;
  font-size: 20px;
  border-radius: 50%;
  pointer-events: none;
  color: #a3b1bc;

  @for $i from 1 through $total {
    $random-x: random(1000000) * 0.0001vw;
    $random-offset: random_range(-100000, 100000) * 0.0001vw;
    $random-x-end: $random-x + $random-offset;
    $random-x-end-yoyo: $random-x + ($random-offset / 2);
    $random-yoyo-time: random_range(30000, 80000) / 100000;
    $random-yoyo-y: $random-yoyo-time * 100vh;
    $random-scale: random(10000) * 0.0001;
    $fall-duration: random_range(10, 30) * 1s;
    $fall-delay: random(30) * -1s;

    &:nth-child(#{$i}) {
      opacity: random(8000) * 0.0001;
      transform: translate($random-x, -10px) scale($random-scale);
      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
    }

    @keyframes fall-#{$i} {
      #{percentage($random-yoyo-time)} {
        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
      }

      to {
        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
      }
    }
  }
}

And last, the snow template. It is just a bunch of <div class="snow">, the exact number of div should be equal to the $total variable we defined on the styling.

<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<!-- code remove for brevity -->

And now, you can apply the snow component into your component. That's all. See the result below.

Set overflow hidden for body

Notice on the above result, there was both vertical and horizontal scrollbar. We don't want that to happens.

To fix, add overflow: hidden for body to style.css.

body {
  overflow: hidden;
}

We're done! See the final source code and output below.

Source code

Build a rich text editor in Angular with ngx-quill

Trung Vo — Wed, 04 Nov 2020 11:51:29 +0000

If you notice, the current jira.trungk18.com is using a rich text HTML editor. This tutorial will help you to create one using ngx-quill.

That's how a rich text editor looks.

See all tutorials for Jira clone

Source code and demo

Rich Editor Module

Like a markdown text editor, I will reuse a rich text editor in many places on a web application. So that I will create a brand new module, RichTextEditorModule, for that purpose. At the moment, it will have only one component, RichTextEditorComponent.

There is not much code inside its module and component.

rich-text-editor.component.ts



@Component({
  selector: 'rich-text-editor',
  templateUrl: './rich-text-editor.component.html',
  styleUrls: ['./rich-text-editor.component.css'],
})
export class RichTextEditorComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
}

rich-text-editor.module.ts



@NgModule({
  imports: [CommonModule],
  exports: [RichTextEditorComponent],
  declarations: [RichTextEditorComponent],
})
export class MarkdownEditorModule {}

No worry, we will add more code to the component. 😆

ngx-quill

To build a rich text editor from scratch could take me the same time to make the whole Jira clone application. That's why I am utilizing ngx-quill.

ngx-quill is an angular module for the Quill Rich Text Editor containing all components you need.

Installation



npm install ngx-quill

For projects using Angular < v5.0.0, please run.



npm install ngx-quill@1.6.0

Basic Usage

1. Import `QuillModule` into your `AppModule`



@NgModule({
  imports: [
    ...,

    QuillModule.forRoot()
  ],
  ...
})
class AppModule { ... }

2. Import `QuillModule` into `RichTextEditorModule`



import { CommonModule } from '@angular/common'
import { NgModule } from '@angular/core'
import { RichTextEditorComponent } from './rich-text-editor.component'
import { QuillModule } from 'ngx-quill'

@NgModule({
  imports: [CommonModule, QuillModule],
  declarations: [RichTextEditorComponent],
  exports: [RichTextEditorComponent],
})
export class RichTextEditorModule {}

3. Import quill themes CSS into `styles.scss`



@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.snow.css';

Build our customize rich text editor component

I can now use in the RichTextEditorComponent. I will go ahead and place that HTML in my component template. I set a class name content-editor so that I can style it later.



<quill-editor class="content-editor" [placeholder]="''"> </quill-editor>

See the result. Because quill is a compelling library, the rendered component has a textbox and most of the default toolbar button available for us.

My job now is pretty simple to customize the component with only the button that I need and some CSS styling.

Toolbar configuration

Below is the current configuration that I use for one toolbar row with some basic commands.



export const QuillConfiguration = {
  toolbar: [
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ color: [] }, { background: [] }],
    ['link'],
    ['clean'],
  ],
}

And then I passed it down to modules input of the quill-editor



<quill-editor
  class="content-editor"
  [placeholder]="''"
  [modules]="quillConfiguration"
>
</quill-editor>

That's the result with lesser command.

Noted that by default, ngx-quill will render a short textarea, and it will automatically expand to fill the height as you type. You might want to set a default min-height. I did set default 120px.



<quill-editor
  class="content-editor"
  [placeholder]="''"
  [modules]="quillConfiguration"
  [styles]="{'min-height': '120px'}"
>
</quill-editor>

I guess it looks right now. The leftover part is to connect it with a form :)

Connect RichTextEditorComponent to a form

ngx-quill provided support for both ReactiveForms and TemplateForm. I shifted only to use ReactiveForms. That's why I will follow a similar approach as the Markdown component to take a FormControl as an Input.



export class RichTextEditorComponent implements OnInit {
  quillConfiguration = QuillConfiguration
  @Input() control: FormControl

  ngOnInit() {
    this.control = this.control ?? new FormControl()
  }
}



<quill-editor
  [formControl]="control"
  [placeholder]="''"
  [modules]="quillConfiguration"
  [styles]="{'min-height': '120px'}"
  class="content-editor"
>
</quill-editor>

See the result when I pair it inside a form. Work perfectly.

Homework

There is some small improvement that I leave it to you.

Set a border when focusing into the rich text editor
Implement ControlValueAccessor for the RichTextEditorComponent so that you can use both [ngModel] and formControl in a form :)

That's all for a rich text editor with Angular. Any questions, you can leave it in the comment box below or reach me on Twitter. Thanks for stopping by!

A childhood memory Tetris game built with Angular 10 and Akita

Trung Vo — Tue, 29 Sep 2020 22:52:17 +0000

Working Game

Check out the working game -> https://tetris.trungk18.com

The game has sounds, wear your 🎧 or turn on your 🔊 for a better experience.

Please tweet and tag me @tuantrungvo for any issues that you are currently facing!
Thanks for your understanding. Stay tuned!

Source Code

trungk18 / angular-tetris

Tetris game built with Angular and Akita 🎮

If you like my work, feel free to:

⭐ this repository. And we will be happy together :)
Tweet about Angular Tetris

Thanks a bunch for stopping by and supporting me!

Why?

Tetris was the first game that my dad bought for me and It cost about 1$ US at that time. It didn't sound a lot today. But 20 years ago, 1$ can feed my family for at least a few days. Put it that way, with 1\$ you can buy two dozens eggs.
This is the only gaming "machine" that I ever had until my first computer arrived. I have never had a SNES or PS1 at home.

My Tetris was exactly in the same yellow color and it was so big, running on 2 AA battery. It is how it looks.

After showing my wife the Tetris game built with Vue. She asked me why I didn't build the same Tetris with Angular? And here you go.

The game can hold up to a maximum score of 999999 (one million minus one 😂) and I have never reached that very end.

Who is this for?

I built this game dedicated to:

For anyone that grew up with Tetris as a part of your memory. It was my childhood memory and I hope you enjoy the game as well.
For the Angular developer community, I have never really seen a game that built with Angular and that's my answer. Using Akita as the underlying state management helps me to see all of the data flow, it is great for debugging. I wanted to see more Angular game from you guys 💪💪💪

How to play

Before playing

You can use both keyboard and mouse to play. But prefer to use keyboard
Press arrow left and right to change the speed of the game (1 - 6). The higher the number, the faster the piece will fall
Press arrow up and down to change how many of lines have been filled before starting the game (1 - 10)
Press Space to start the game
Press P for pause/resume game
Press R for resetting the game
Press S for the turn on/off the sounds

Playing game

Press Space make the piece drop quickly
Press Arrow left and right for moving left and right
Press Arrow up to rotate the piece
Press Arrow down to move a piece faster
When clearing lines, you will receive a point - 100 points for 1 line, 300 points for 2 lines, 700 points for 3 lines, 1500 points for 4 lines
The drop speed of the pieces increases with the number of rows eliminated (one level up for every 20 lines cleared)

Techstack

I built it barely with Angular and Akita, no additional UI framework/library was required.

Development Challenge

I got the inspiration from the same but different Tetris game built with Vue. To not reinvented the wheel, I started to look at Vue code and thought it would be very identical to Angular. But later one, I realized a few catches:

The Vue source code was written a few years ago with pure JS. I could find several problems that the compiler didn't tell you. Such as giving parseInt a number. It is still working though, but I don't like it.
There was extensive use of setTimeout and setInterval for making animations. I rewrote all of the animation logic using RxJS. You will see the detail below.
The brain of the game also used setTimeout for the game loop. It was not a problem, but I was having a hard time understanding the code on some essential elements: how to render the piece to the UI, how the calculation makes sense with XY axis. In the end, I changed all of the logic to a proper OOP way using TypeScript class, based on @chrum/ngx-tetris.

Tetris Core

It is the most important part of the game. As I am following the Vue source code, It is getting harder to understand what was the developer's intention. The Vue version inspired me but I think I have to write the core Tetris differently.

Take a look at the two blocks of code below which do the same rendering piece on the screen and you will understand what I am talking about. The left side was rewritten with Angular and TypeScript and the right side was the JS version.

I always think that your code must be written as you talk to people, without explaining a word. Otherwise, when someone comes in and reads your code and maintains it, they will be struggling.

“ Code is like humor. When you have to explain it, it’s bad.” – Cory House

And let me emphasize it again, I didn't write the brain of the game from scratch. I adapted the well-written source by @chrum/ngx-tetris for Tetris core. I did refactor some parts to support Akita and wrote some new functionality as well.

Akita state management + dev tool support

Although you don't dispatch any action, Akita will still do it undo the hood as the Update action. And you still can see the data with Redux DevTools. Remember to put that option into your AppModule

imports: [environment.production ? [] : AkitaNgDevtools.forRoot()];

I turn it on all the time on tetris.trungk18.com, you can open the DevTools and start seeing the data flow.

Note: opening the DevTools could reduce the performance of the game significantly. I recommended you turn it off when you want to archive a high score 🤓

Customizing Piece

I defined a base Piece class for a piece. And for each type of piece, it will extend from the same base class to inherit the same capability

export class Piece {
  x: number;
  y: number;
  rotation = PieceRotation.Deg0;
  type: PieceTypes;
  shape: Shape;
  next: Shape;

  private _shapes: Shapes;
  private _lastConfig: Partial<Piece>;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }

  store(): Piece {
    this._lastConfig = {
      x: this.x,
      y: this.y,
      rotation: this.rotation,
      shape: this.shape
    };
    return this._newPiece();
  }

  //code removed for brevity
}

For example, I have a piece L. I create a new class name PieceL. I will contain the shape of L in four different rotation so that I don't have to mess up with the math to do minus plus on the XY axis. And I think defining in that way makes the code self-express better. If you see 1, it means on the matrix it will be filled, 0 mean empty tile.

If my team member needs to maintain the code, I hope he will understand what I was trying to write immediately. Or maybe not 🤣

One import property of the Piece is the next property to display the piece shape on the decoration box for the upcoming piece.

const ShapesL: Shapes = [];
ShapesL[PieceRotation.Deg0] = [
  [0, 0, 0, 0],
  [1, 0, 0, 0],
  [1, 0, 0, 0],
  [1, 1, 0, 0]
];

ShapesL[PieceRotation.Deg90] = [
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [1, 1, 1, 0],
  [1, 0, 0, 0]
];
//code removed for brevity

];

export class PieceL extends Piece {
  constructor(x: number, y: number) {
    super(x, y);
    this.type = PieceTypes.L;
    this.next = [
      [0, 0, 1, 0],
      [1, 1, 1, 0]
    ];
    this.setShapes(ShapesL);
  }
}

Now is the interesting part, you create a custom piece by yourself. Simply create a new class that extends from Piece with different rotations.

For instance, I will define a new piece call F with class name PieceF. That is how it should look like.

const ShapesF: Shapes = [];
ShapesF[PieceRotation.Deg0] = [
  [1, 0, 0, 0],
  [1, 1, 0, 0],
  [1, 0, 0, 0],
  [1, 1, 0, 0]
];

export class PieceF extends Piece {
  constructor(x, y) {
    super(x, y);
    this.type = PieceTypes.F;
    this.next = [
      [1, 0, 1, 0],
      [1, 1, 1, 1]
    ];
    this.setShapes(ShapesF);
  }
}

And the last step, go to PieceFactory to add the new PieceF into the available pieces.

export class PieceFactory {
  private _available: typeof Piece[] = [];

  constructor() {
    //code removed for brevity
    this._available.push(PieceF);
  }
}

And you're all set, this is the result. See how easy it is to understand the code and add a custom piece that you like.

The source code for that custom piece F, you can see at feature/pieceF branch.

Animation

I rewrote the animation with RxJS. See the comparison below for the simple dinosaurs running animation at the beginning of the game.

You could do a lot of stuff if you know RxJS well enough :) I think I need to strengthen my RxJS knowledge soon enough as well. Super powerful.

The actual result doesn't look very identical but it is good enough in my standard.

Web Audio API

There are many sound effects in the game such as when you press space, or left, right. In reality, all of the sounds were a reference to a single file assets/tetris-sound.mp3.

I don't have much experience working with audio before but the Web Audio API looks very promising. You could do more with it.

See the official documentation
See how I load the mp3 file and store it in sound-manager.service.ts
Writing Web Audio API code that works in every browser

Keyboard handling

I planned to use @ngneat/hotkeys but I decided to use @HostListener instead. A simple implementation could look like:

@HostListener(`${KeyDown}.${TetrisKeyboard.Left}`)
keyDownLeft() {
  this._soundManager.move();
  this._keyboardService.setKeỵ({
    left: true
  });
  if (this.hasCurrent) {
    this._tetrisService.moveLeft();
  } else {
    this._tetrisService.decreaseLevel();
  }
}

See more at containers/angular-tetris/angular-tetris.component.ts

Features and Roadmap

Phase 1 - Angular Tetris basic functionality

July 10 - 23, 2020

Proven, scalable, and easy to understand project structure
Basic Tetris functionality
Six levels
Local storage high score
Sounds effects
Limited mobile support

Phase 2 - Firebase high score, service worker, more sounds effect, more animation

TBD

Fully mobile support
Offline mode (play without internet connection)
Firebase high score
More sound effects
More animations

Time spending

I was still working with Chau Tran on phase two of Angular Jira clone when I saw that Tetris game built with Vue. My wife wanted to have a version that I built so that I decided to finish the Angular Tetris first before completing Jira clone phase two.

According to waka time report, I have spent about 30 hours working on this project. Which is equal to run a marathon five times at my current speed 😩

The flow was easy. I designed a simple to do list, then start reading the code in Vue. And start working on the Angular at the same time. Halfway, I start to read @chrum/ngx-tetris instead of the Vue source. And keep building until I have the final result. 30 hours was a good number. It would take me longer, or lesser. But I enjoyed the experience working on the first-ever game I have built.

Setting up development environment 🛠

git clone https://github.com/trungk18/angular-tetris.git
cd angular-tetris
npm start
The app should run on http://localhost:4200/

Author: Trung Vo ✍️

A young and passionate front-end engineer. Working with Angular and TypeScript. Like photography, running, cooking, and reading books.
Author of Angular Jira clone -> jira.trungk18.com
Personal blog: https://trungk18.com/
Say hello: trungk18 [et] gmail [dot] com

Credits and references

Resource	Description
@Binaryify/vue-tetris	Vue Tetris, I reused part of HTML, CSS and static assets from that project
@chrum/ngx-tetris	A comprehensive core Tetris written with Angular, I reused part of that for the brain of the game.
Game Development: Tetris in Angular	A detailed excellent article about how to build a complete Tetris game. I didn't check the code but I learned much more from that
Super Rotation System	A standard for how the piece behaves. I didn't follow everything but it is good to know as wells

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.

License

Feel free to use my code on your project. It would be great if you put a reference to this repository.

MIT

A simplified Jira clone built with Angular 9, ng-zorro and Akita

Trung Vo — Fri, 25 Sep 2020 01:34:39 +0000

There have been a handful of cool Jira-cloned apps written in React/VueJS, which makes me wonder Why not Angular? And here you go.

This is not only a simplified Jira clone built with Angular 9, but also an example of a modern, real-world Angular codebase.

Working application

Checkout the live demo -> https://jira.trungk18.com

Source code

trungvose / jira-clone-angular

A simplified Jira clone built with Angular, ng-zorro and Akita

If you like my work, feel free to⭐ this repository. And we will be happy together :)
Thanks a bunch for stopping by and supporting me!

Who is it for 🤷‍♀️

I have been working with Angular for about four years. I built cool stuff at Zyllem but almost all of them are internal apps which is difficult to show.

This is a showcase application I've built in my spare time to experiment the new library that I wanted to try before: Akita, TailwindCSS, ng-zorro.

There are many Angular examples on the web but most of them are way too simple. I like to think that this codebase contains enough complexity to offer valuable insights to Angular developers of all skill levels while still being relatively easy to understand.

This piece of work is also part of our technical series angular-vietnam/100-days-of-angular which aims at enabling everyone, after 100 days of learning Angular with us, to self-build their application with the similar scale. Our desire is to advocate and grow the Angular developer community in Vietnam.

Tech stack

Angular CLI
Akita state management
NestJS
UI modules:
- TailwindCSS
- Angular CDK drag and drop
- ng-zorro UI components
- ngx-quill
Netlify
Heroku

High level design

As requested by @eric_cart, I draw a simple high-level design for the application.

Application architecture

I have an AppModule that will import:

Angular needed modules such as BrowserModule and any module that need to run forRoot.
The application core modules such as AuthModule that need to available on the whole platform.
And I also configured the router to lazy load any modules only when I needed. Otherwise, everything will be loaded when I start the application. For instance, LoginModule when I open the URL at /login and ProjectModule when the URL is /project. Inside each modules, I could import whatever modules that are required. Such as I need the JiraControlModule for some custom UI components for the ProjectModule

Simple data interaction flow

As I am using Akita state management, I follow the Akita documentation for the data flow. I found it is simple to understand comparing with ngrx terms (reducer, selector, effect)

I set up a project state with initial data. The main heavy lifting part I think is the project service, it contains all the interacting with project store. Such as after fetching the project successfully, I update the store immediately inside the service itself. The last lego block was to expose the data through project query. Any components can start to inject project query and consume data from there.

Features and Roadmap

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

Phase 1 - Angular application and simple Nest API

June 13 - 27, 2020

Proven, scalable, and easy to understand project structure
Simple drag and drop kanban board
Add/update issue
Search/filtering issues
Add comments

Noted: All of your interactions with data such as leave a comment or change the issue detail will not be saved to the persistent database. Currently, the application will serve a fixed structure of data every time you open the app. It means if you reload the browser, all of your changes will be gone.

Phase 2 will bring you a proper API where you can log in and save your work.

While working with this application, I have the opportunity to revisit some of the interesting topics:

TailwindCSS configuration - that's awesome
Scrollable layout with Flexbox
Deploy Angular application to Netlify

Phase 2

TBD

Refactor the mono repo to use Nx Workspace
GraphQL API and store data on the actual database
Authentication

View the current work in progress branch

Tutorial

When I look at the application, it is huge. When the task is huge, you usually don't know where and how to start working with them. I started to break the big task into a simple to-do list on notion. Once I know what needs to be done, what I need is to follow the plan. That's my approach.

I learned a lot of stuff. I know you might also have a curiosity about the process of building the same scale app as well. That's why I am writing a tutorial series on how I built Angular Jira clone from scratch. I hope you guys will learn something from that too :)

I will try to be as detailed as possible. Hopefully through the tutorial, you will get the idea and will start working on your own application soon. Please bear with me.

Its series will also be published in Vietnamese as part of our angular-vietnam/100-days-of-angular.

Part	Description	Status
00	Behind the 900 stars repository - Slide	Done
00	Behind a thousand stars repository - Angular Air	Done
00	Prerequisites	Done
01	Create a new repository and set up a new Angular application with CLI	Done
02	Build the application layout with flex and TailwindCSS	Done
03	Setup Akita state management	Done
04	Build an editable textbox	Done
05	Build an interactive drag and drop board	Done
06	Build a markdown text editor	Done
07	Build a rich text HTML editor	Done
08	Create placeholder loading (like Facebook's cards loading)	Done

Time spending

It is a side project that I only spent time outside of the office hours to work on. One day, my team and I were fire fighting on PROD until 11 PM. After taking a shower, I continue with Angular Jira clone for another two hours...

According to waka time report, I have spent about 45 hours working on this project. Which is equivalent to watch the whole Stranger Things series twice.

I really enjoyed working on this project. The interactive kanban board took me sometimes, it is challenging but exciting at the same time.

What's currently missing?

There are missing features from the live demo which should exist in a real product. All of them will be finished on Phase 2:

Proper backend API

I built a very simple NestJS API to send a fixed data structure to the client. All of your interactivity with data will only be saved on the memory. If you refresh the page, it will be gone. Phase 2 will bring the application to live by saving the data into a database.

Proper authentication system 🔐

I am currently sending the same email and a random password to the server without any check to get the current user back. Phase 2 will also bring a proper authentication system.

Accessibility ♿

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

Setting up development environment 🛠

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

Unit/Integration tests 🧪

I skipped writing test for this project. I might do it for the proper backend GraphQL API.

Compatibility

It was being tested on IE 11, Chrome and Firefox. For Safari, there are some minor alignment issues.

Author: Trung Vo ✍️

A young and passionate front-end engineer. Working with Angular and TypeScript. Like photography, running, cooking, and reading books.
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

Inspired by oldboyxx/jira_clone and Datlyfe/jira_clone.

I reused part of the HTML and CSS code from these projects.

License

Feel free to use my code on your project. It would be great if you put a reference to this repository.

MIT

Build a Markdown editor with Angular

Trung Vo — Tue, 22 Sep 2020 03:42:19 +0000

If you notice, the current jira.trungk18.com is using an HTML text editor. I am replacing it with a Markdown text editor for the upcoming features of #jiraclone.

In this post, I will guide you through the process of building a Markdown editor with Angular.

That's how a Markdown text editor looks.

See all tutorials for Jira clone

Source code and demo

Markdown Editor Module

A markdown text editor might be reused in many places on a web application. So that I will create a brand new module MarkdownEditorModule for that purpose. At the moment, it will have only one component MarkdownEditorComponent and it will be exported as well.

There is not much code inside its module and component.

markdown-editor.component.ts

@Component({
  selector: 'markdown-editor',
  templateUrl: './markdown-editor.component.html',
  styleUrls: ['./markdown-editor.component.css'],
})
export class MarkdownEditorComponent implements OnInit {
  ngOnInit() {}
}

markdown-editor.module.ts

@NgModule({
  imports: [CommonModule],
  exports: [MarkdownEditorComponent],
  declarations: [MarkdownEditorComponent],
})
export class MarkdownEditorModule {}

No worry, we will add more code below.

Github Markdown Toolbar

Install @github/markdown-toolbar-element and use it inside our Angular component

@nartc suggested me to use that package to enable a markdown toolbar. I had a look and really like that tiny package, plus It came from Github itself 😊

To add that to an Angular application, simply run

npm install --save @github/markdown-toolbar-element

Second, you need to import @github/markdown-toolbar-element into MarkdownEditorComponent.

import '@github/markdown-toolbar-element'

Then you can paste the below code into MarkdownEditorComponent.

markdown-editor.component.html

<markdown-toolbar for="textarea_id">
  <md-bold>bold</md-bold>
  <md-header>header</md-header>
  <md-italic>italic</md-italic>
  <md-quote>quote</md-quote>
  <md-code>code</md-code>
  <md-link>link</md-link>
  <md-image>image</md-image>
  <md-unordered-list>unordered-list</md-unordered-list>
  <md-ordered-list>ordered-list</md-ordered-list>
  <md-task-list>task-list</md-task-list>
  <md-mention>mention</md-mention>
  <md-ref>ref</md-ref>
</markdown-toolbar>
<textarea id="textarea_id"></textarea>

Because markdown-toolbar is a custom web element tag and it looks like an Angular component selector. Angular couldn't find the declaration elsewhere, that's why you are seeing that error.

To fix it, follow the error on the screen to add CUSTOM_ELEMENTS_SCHEMA into the MarkdownEditorModule

@NgModule({
  //code removed for brevity
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Now something is rendering on the UI and the textarea gets updated upon selection on the toolbar, but it hasn't looked good just yet.

Styling the markdown toolbar

To make styling easier, I set a button with class .btn and wrap the text into a button. I also use Boostrap Icon to make it look like a real toolbar. markdown-editor.component.html is getting pretty long because all of the icons are SVG, I won't paste all of them here. Take a look at one bold icon and you will understand.

<markdown-toolbar for="textarea_id">
  <md-bold>
    <button class="btn">
    <svg width="1em"
          height="1em"
          viewBox="0 0 16 16"
          class="bi bi-type-bold"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg">
        <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z" />
    </svg></button>
  </md-bold>
  <!-- code removed for brevity -->
</markdown-toolbar>

$hover-color: #06c;

markdown-toolbar {
  padding: 8px;

  .btn {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    height: 24px;
    padding: 3px 5px;
    width: 28px;
    color: #222;

    i {
      display: flex;
    }

    &:hover {
      color: $hover-color;
    }
  }
}

After styling the textarea as below, you will see a quite satisfying result 😊

Styling the textarea

I will do the styling for the textarea as well.

First, I assign a class text-editor to that textarea.

<textarea id="textarea_id"
          class="text-editor">
</textarea>

For the CSS, I wanted:

No border for textarea
Have border for the container around the markdown toolbar and textarea
On hovering the textarea, set a different border color for the container

I hope my CSS will express itself :) But if you have any questions about CSS, let me know in the comment box below.

$border-color: #d9d9d9;

:host {
  border: 1px solid $border-color;
  box-shadow: 0 0 0 1px $border-color;
  border-radius: 3px;
  outline: none;
  background: #fff;
  display: flex;
  flex-direction: column;  

  .text-editor {
    padding-left: 15px;
    padding-right: 15px;
    resize: none;
    border-color: transparent;
    width: 100%;
    overflow-y: hidden;

    &:focus {
      outline: none;
      border: transparent;
    }
  }

  &.focus {
    border: 1px solid $hover-color;
    box-shadow: 0 0 0 1px $hover-color;
  }
}

I have a result now, looks pretty good. But the border color didn't change when I select the textarea.

Why? Because we need to set an extra class to the parent of the textarea. We need to:

Handle focus event of the textarea to add a class named .focus to the parent container.
Also handle blur event to remove this class from the parent container.

I also added cdkTextareaAutosize from @angular/cdk/text-field package to make the textarea auto-expand its height when the content is too long. By default, textarea will have a scrollbar visible and won't auto expand. See more on my previous tutorial - Build an editable textbox. I also set the cdkAutosizeMinRows to 6 so that it will also have a certain minimum height.

<textarea class="text-editor"
          (focus)="focus()"
          (blur)="blur()"
          [formControl]="control"
          id="MarkdownInput"
          cdkTextareaAutosize
          [cdkAutosizeMinRows]="6">
</textarea>

export class MarkdownEditorComponent implements OnInit {
  @HostBinding('class.focus') isFocus: boolean;
  focus() {
    this.isFocus = true;
  }
  blur() {
    this.isFocus = false;
  }
}

What the HostBinding does is check if isFocus is true, then Angular will add a class name focus to the component selector. It look like <markdown-editor class="focus. If the value is false, then remove this class then.

I think we are almost there, looks excellent now. The last thing is to connect this component with a form.

Link the markdown editor component to a form

Usually, the Markdown editor will be used into a form with some additional form input and you wanted to see its value in the form instance.

To do it, simply set the MarkdownEditorComponent to accept an input which is a FormControl. So that the control can be passed into the component from the parent component form instance.

The component will initial a default FormControl if there is no input passed.

export class MarkdownEditorComponent implements OnInit {
  @Input() control: FormControl;
  ngOnInit(): void {
    this.control = this.control ?? new FormControl();
  }
}

And bind the control to the component HTML

<textarea id="textarea_id"
          class="text-editor"
          [formControl]="control"
          (focus)="focus()"
          (blur)="blur()"
          cdkTextareaAutosize
          [cdkAutosizeMinRows]="6">
</textarea>

To be able to do that, you have to import ReactiveFormsModule into MarkdownEditorModule

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule
  ],
  //code removed for brevity
})
export class MarkdownEditorModule { }

To test it with a form, I will create a simple form with two inputs by FormBuilder:

Title as the normal textbox
Description as the markdown editor

export class AppComponent implements OnInit {
  form: FormGroup;
  constructor(private _fb: FormBuilder) {}

  ngOnInit() {
    this.form = this._fb.group({
      title: ["Hello, I am Trung", Validators.required],
      description: ["This is a markdown text editor for - http://jira.trungk18.com/"]
    });
  }

  get descriptionControl(){
    return this.form.controls.description as FormControl
  }
}

I also get the description control from my form and then send it to the MarkdownEditorComponent

<form [formGroup]="form">
  <div class="form-group">
    <label for="Title">Title</label>
    <input formControlName="title" class="form-control" id="Title" aria-describedby="Title">
  </div>
  <div class="form-group">
    <label>Description</label>
    <markdown-editor [control]="descriptionControl"></markdown-editor>
  </div>
</form>
<div class="alert alert-info">
  {{ form.value | json }}
</div>

Sweet, everything seems working as expected.

Accessibility

Last but not least, remember to add the aria-label and title for all of the icons. Otherwise, If users are not familiar with the text edit icon, they might find it difficult to understand the meaning. The aria-label is for people with disability can have an easy navigation through your website :)

<markdown-toolbar for="textarea_id">
  <md-bold>
    <button class="btn" title="Bold" aria-label="Bold">
    <svg width="1em"
          height="1em"
          viewBox="0 0 16 16"
          class="bi bi-type-bold"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg">
        <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z" />
    </svg></button>
  </md-bold>
  <!-- code removed for brevity -->
</markdown-toolbar>

Now when you hover over the icon for sometimes, the browser will display the title.

That's all for building a Markdown Editor with Angular. Any questions, you can leave it on the comment box below or reach me on Twitter. Thanks for stopping by!

DEV Community: Trung Vo

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

Angular Spotify

Source code

trungvose / angular-spotify

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

Working application

Support

Who is it for 🤷‍♀️

Tech stack

High-level design

Principles

Structure

Authentication Flow

Dependency Graph

Nx Computation Cache

Features and Roadmap

1.0 - Simple Spotify client

Live stream

Time spending

Accessibility ♿

Setting up the development environment 🛠

Unit/Integration tests 🧪

Compatibility

Author: Trung Vo ✍️

Contributing

Credits and reference

License

Build an Angular component to display snow ❄️ effect

Jira clone snow theme

Snow component

Set overflow hidden for body

Source code

Build a rich text editor in Angular with ngx-quill

Source code and demo

Rich Editor Module

ngx-quill

Installation

Basic Usage

1. Import QuillModule into your AppModule

2. Import QuillModule into RichTextEditorModule

3. Import quill themes CSS into styles.scss

Build our customize rich text editor component

Toolbar configuration

Connect RichTextEditorComponent to a form

Homework

A childhood memory Tetris game built with Angular 10 and Akita

Working Game

Source Code

trungk18 / angular-tetris

Tetris game built with Angular and Akita 🎮

Why?

Who is this for?

How to play

Before playing

Playing game

Techstack

Development Challenge

Tetris Core

Akita state management + dev tool support

Customizing Piece

Animation

Web Audio API

Keyboard handling

Features and Roadmap

Phase 1 - Angular Tetris basic functionality

Phase 2 - Firebase high score, service worker, more sounds effect, more animation

Time spending

Setting up development environment 🛠

Author: Trung Vo ✍️

Credits and references

Contributing

License

A simplified Jira clone built with Angular 9, ng-zorro and Akita

Working application

Source code

trungvose / jira-clone-angular

A simplified Jira clone built with Angular, ng-zorro and Akita

Who is it for 🤷‍♀️

Tech stack

1. Import `QuillModule` into your `AppModule`

2. Import `QuillModule` into `RichTextEditorModule`

3. Import quill themes CSS into `styles.scss`