Angular JWT authentication (#7 of 100 projects)

This project took me really long to finish. I spent so much time trying to write a comprehensive blog post on explaining the project. But I realized my goal is to create 100 projects in using Angular framework, not to produce 100 how-to tutorials on Angular.

So this post is rather an update on what I’ve done than a guide post.

In this project, I’ve created a website with a dashboard which is password protected. JWT authentication is implemented using a backend created in Django and hosted in my instance.

In this project, I’ve created the following:

  • A password protected dashboard component
  • An authentication service to post request to backend API
  • A login component
  • An http interceptor to include JWT token in the http request

Source code:

Live demo site at

username: iunicorn
password: sunandstar

Angular concentration game #6


This project has taken more then what I’ve intended. In this project, I am creating a memory game called concentration. There are several versions of concentration game. But I’ve implemented the simplest one.

The Game

  • There 2 pairs of cards with number 1 to 8.
  • The cards are laid face down.
  • Each turn, the player click a pair of cards to flip.
  • If the pair matches, the player score points.
  • If the pair is not matched, the pair of cards turns back to face down.

It is a pretty simple project. But it had taken me more time than I should have because I have overcomplicated the overall game design.

Following are the steps I’ve taken to develop the game.

Design game engine

  • Card object
    • cardNumber
      • A string value which will be used to compare between two cards for similarity
    • image
      • A URL to image resource of the card
    • isFaceup
      • To keep track of the current state of the card
    • done
      • To keep track of whether the card is already matched
  • Deck object
    • cards
      • An array of card objects
    • shuffle( )
      • Shuffle cards
    • flipDown()
      • To put all the cards in the deck face down
  • Game object
    • score
      • current score of the player
    • move
      • total number of moves made by player
    • match
      • total number of matched pairs
    • deck
      • a deck to play
    • deal( )
      • call shuffle of the deck
    • checkScore( )
      • compare two cards which are facing up for similarity

Provide game functions in service

Create a service called game. Inside the game.service.ts file define two functions as follow:

  • createDeck(count: number)
    • Create and return a deck of card with the provided number of cards
  • getGame(deck: Deck)
    • Create and return a game object using the provided deck


  • CardComponent
    • Uses card object as the data model
    • Implements flipping on click event
  • GameBoardComponent
    • Uses a list of CardComponents to create the game board to play

Design game board page

  • Create simple and ugly page to stop myself from wasting too much time fiddling with CSS and colors

Lesson learned: Keep it simple and stupid.

Live project link:



Angular dharma page #5


This is the number 5 of my 100 angular projects. This project is based on the previous one Angular dhamma player #4.

This project has two components; the main page and audio track player page. On the home page, four images of famous Burmese Monks are shown in card style. When the user clicked on a card, they are brought to a player with the dhamma talks of the selected monk.

Basically, I am trying to learn how to use the Angular router for navigation between different components in a single page application.

Everything went well, except for one thing. I have been spending way too much time messing around with CSS and colors instead of focusing on functionality.

So, from now on I will spend less time on design aspect and more on functional aspects for future projects.

Live project link:



Angular dhamma player #4

Screen Shot 2018-07-03 at 10.00.36 AM

This is the #4 in my attempt at building 100 projects with Angular.

In this project, I decided to build a simple audio player with a playlist attached. I learned the following concepts while implementing it.

  • *ngFor to display list
  • master/display components
  • event handling with (onclick)

HTML5 audio element is used for playing the mp3 files in the list. This audio player component is a very simple component and I intend to use it in the bigger project later.

Check out both live project and source code for more details.

Live address:


Angular random quote #3

This is the third project of my ongoing challenge, 100 angular projects.

In this project, I created a web page which fetches a random quote from an API endpoint and displays it on the page.

Screen Shot Muse

I have learned a few new concepts while creating this simple web application, such as

  • using services to separate fetching data from components
  • using observable and Angular HttpClient for fetching data asynchronously and providing a way for the data to be consumed from a component
  • calling child component’s function from parent component using @ViewChild

Service, Observable and HttpClient for asynchronous API call

Using service to get a random quote from a component

Calling child component’s function from the parent component

Live address:



Hello angular with style #2

Screen Shot 2018-06-28 at 4.19.43 PM

This is the second post from the series of 100 angular projects I am doing. You can check out the first post here.

Based on the previous hello world project, I decided to have a little fun by adding CSS framework Bulma which is the new cool kid on the block. Watch out Bootstrap!

First I added the Bulma in the project using npm install:

npm install --save bulma

Second I imported the Bulma in src\styles.css:

 @import "~bulma/css/bulma.css"

Now Bulma styles are available globally. Afterward, I created two components for header and footer.

ng generate component components/header
ng g component components/footer  ## g is shorthand for generate

This will create header and footer components in src/app/components folder.

Edit the header.component.html, footer.component.html, and app.component.html for the Bulma hero layout look.

Let’s create a header with only a brand logo.

And create a footer with license information.

Finally, add those components into the main app.component.html.

That’s it. We are done.

This time, I used Netlify for deployment. It is very easy and it works.

Live address:



Hello angular #1

Screen Shot 2018-06-28 at 5.58.09 AM

I used to learn a lot of programming languages for fun. When I found someone recommends a language online, I would check out the tutorials and blogs, and learn basic syntax of the language for a few days. But eventually the initial curiosity wore off and I would move on to something new and shiny.

Yes, I am one of those people who do a lot of tutorial and online courses but never create anything. I hate myself for this and decided to do something about it.

So I am starting this experiment to create 100 web applications in They are not necessarily going to be good apps. They may be shitty and useless. I don’t care. What I want to know is can I make this hundred times no matter what?

As a first project, I am creating a time-honored tradition of creating a hello world app. The functional specifications are as followed:

  • A web page displaying “Hello World!!”
  • Deployed on a server
  • A git repo

The official guide from the Angular website has enough information to accomplish the task. For deployment, I use firebase, which provides a super easy deployment and hosting.

So here it is, my first Angular app, live!

Live address: