Align the Angular version readme

Author: trungvose

README.md

@@ -1,4 +1,4 @@
-# A simplified Jira clone built with Angular 10, Akita and ng-zorro
+# A simplified Jira clone built with Angular, Akita and ng-zorro
 
 > Phase two will not be completed as planned. Both [Chau Tran][chau] and I was too busy with some other commitments. View our [working in progress Graph QL branch][gql].
 >
@@ -8,13 +8,13 @@
 
 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.
+This is not only a simplified Jira clone built with Angular, but also an example of a **modern**, **real-world** Angular codebase.
 
 <details>
   <summary>Table Of Content</summary>
   <p>
 
-- [A simplified Jira clone built with Angular 10, Akita and ng-zorro](#a-simplified-jira-clone-built-with-angular-10-akita-and-ng-zorro)
+- [A simplified Jira clone built with Angular, Akita and ng-zorro](#a-simplified-jira-clone-built-with-angular-akita-and-ng-zorro)
   - [Merry Christmas](#merry-christmas)
   - [Working application](#working-application)
   - [Storybook](#storybook)
@@ -50,13 +50,13 @@ This is not only a simplified Jira clone built with Angular 9, but also an examp
 
 Thank you for your support! -> https://jira.trungk18.com/project/issue/2020
 
-![Jira clone built with Angular 9 and Akita][christmas2020]
+![Jira clone built with Angular and Akita][christmas2020]
 
 ## Working application
 
 Check out the **live demo** -> https://jira.trungk18.com
 
-![Jira clone built with Angular 9 and Akita][demo]
+![Jira clone built with Angular and Akita][demo]
 
 ## Storybook
 
@@ -77,7 +77,7 @@ This is the collection of components that I wrote for [jira.trungk18.com][jira],
 
 Check out the **storybook demo** -> https://jira-storybook.trungk18.com/
 
-![Jira clone built with Angular 9 and Akita][demo-storybook]
+![Jira clone built with Angular and Akita][demo-storybook]
 
 ## Support
 
@@ -138,7 +138,7 @@ As requested by [@eric_cart][eric_cart], I draw a simple high-level design for t
 
 I have an AppModule that will import:
 
-![Jira clone built with Angular 9 and Akita - Application architecture][application-architecture]
+![Jira clone built with Angular and Akita - Application architecture][application-architecture]
 
 - 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.
@@ -149,7 +149,7 @@ I have an AppModule that will import:
 
 As I am using [Akita][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`)
 
-![Jira clone built with Angular 9 and Akita - Simple data interaction flow][interaction-data-flow]
+![Jira clone built with Angular and Akita - Simple data interaction flow][interaction-data-flow]
 
 I set up a [project state with initial data][project-store]. The main heavy lifting part I think is the [project service][project-service], it contains all the interacting with [project store][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][project-query]. Any components can start to inject [project query][project-query] and consume data from there.
 
@@ -239,7 +239,7 @@ According to waka time report, I have spent about 45 hours working on this proje
 
 I really enjoyed working on this project. The interactive kanban board took me sometimes, it is challenging but exciting at the same time.
 
-![Jira clone built with Angular 9 and Akita - Time spending][time]
+![Jira clone built with Angular and Akita - Time spending][time]
 
 ## What's currently missing?
 

frontend/documentation.json

@@ -2,7 +2,7 @@
     <div class="navbarLeft-content">
         <div class="logoLink"
              title="Angular Jira Clone by trungk18">
-            <svg class="h-8 w-8 text-textLogo"
+            <svg class="w-8 h-8 text-textLogo"
                  viewBox="0 0 32 32"
                  xmlns="http://www.w3.org/2000/svg"
                  aria-hidden="true">
@@ -48,7 +48,7 @@
                  [nzTooltipTitle]="item.tooltip"
                  nzTooltipPlacement="right"
                  class="itemIcon">
-                <i class="text-white text-xl"
+                <i class="text-xl text-white"
                    nz-icon
                    [nzType]="item.icon"
                    nzTheme="outline"></i>
@@ -76,7 +76,7 @@
                      nzTooltipTitle="About"
                      nzTooltipPlacement="right"
                      class="itemIcon">
-                    <i class="text-white text-xl"
+                    <i class="text-xl text-white"
                        nz-icon
                        nzType="question-circle"
                        nzTheme="fill">
@@ -89,7 +89,7 @@
 
 <ng-template #aboutPopoverTmpl>
     <div class="about-popover">
-        <p class="mb-2">This is a <strong>simplified</strong> Jira clone built with Angular 9, Akita and ng-zorro</p>
+        <p class="mb-2">This is a <strong>simplified</strong> Jira clone built with Angular, Akita and ng-zorro</p>
         <p class="mb-2">Thanks a bunch for stopping by and supporting me!</p>
         <p class="mb-3">Reach out to me via <a class="font-semibold"
                href="email:[email protected]">[email protected]</a></p>

frontend/src/app/project/components/navigation/navbar-left/navbar-left.component.html

@@ -1,20 +1,20 @@
-<div class="container mx-auto p-5">
-    <h1 class="text-3xl text-center">A simplified Jira clone built with Angular 9 and Akita</h1>
+<div class="container p-5 mx-auto">
+    <h1 class="text-3xl text-center">A simplified Jira clone built with Angular and Akita</h1>
 
-    <img class="mx-auto w-auto md:max-w-2xl"
+    <img class="w-auto mx-auto md:max-w-2xl"
          src="assets/img/jira-clone-tech-stack.png" />
 
-    <h3 class="text-center m-10">
+    <h3 class="m-10 text-center">
         <a class="text-lg text-blue-500 hover:text-blue-800"
            href="https://jira.trungk18.com/">Visit the work in progress app</a> |
         <a class="text-lg text-blue-500 hover:text-blue-800"
            href="hhttps://github.com/trungk18/jira-clone-angular/tree/master/frontend">View front-end code</a>
     </h3>
 
-    <div class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md"
+    <div class="px-4 py-3 text-teal-900 bg-teal-100 border-t-4 border-teal-500 rounded-b shadow-md"
          role="alert">
         <div class="flex">
-            <div class="py-1"><svg class="fill-current h-6 w-6 text-teal-500 mr-4"
+            <div class="py-1"><svg class="w-6 h-6 mr-4 text-teal-500 fill-current"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20">
                     <path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" /></svg></div>

frontend/src/app/work-in-progress/work-in-progress.component.html

@@ -185,7 +185,7 @@
     {
       "id": "9584",
       "title": "What is Angular Jira clone application?",
-      "description": "<p>There have been a handful of cool Jira-cloned apps written in React/VueJS, which makes me wonder <strong>Why not Angular</strong>? And here you go.</p><p><br></p><p>This is <u>not only</u> a simplified Jira clone built with Angular 9, but also an example of a <u>modern, real-world</u> Angular codebase.</p><p><br></p><p><strong>Tech stack</strong></p><p><br></p><p><a href='https://raw.githubusercontent.com/trungk18/jira-clone-angular/master/frontend/src/assets/img/jira-clone-tech-stack.png' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214); background-color: rgb(255, 255, 255);'><img src='https://github.com/trungk18/jira-clone-angular/raw/master/frontend/src/assets/img/jira-clone-tech-stack.png' alt='Tech logos'></a></p><p><br></p><ul><li><a href='https://cli.angular.io/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Angular CLI</a></li><li><a href='https://datorama.github.io/akita/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Akita</a>&nbsp;state management</li><li><a href='https://nestjs.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>NestJS</a></li><li>UI modules:</li><li class='ql-indent-1'><a href='https://tailwindcss.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>TailwindCSS</a></li><li class='ql-indent-1'>Angular CDK&nbsp;<a href='https://material.angular.io/cdk/drag-drop/overview' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>drag and drop</a></li><li class='ql-indent-1'><a href='https://ng.ant.design/docs/introduce/en' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>ng-zorro</a>&nbsp;UI component:&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>tooltip</code>,&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>modal</code>,&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>select</code>,&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>icon</code> and more.</li><li class='ql-indent-1'><a href='https://github.com/KillerCodeMonkey/ngx-quill' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>ngx-quill</a></li><li><a href='https://www.netlify.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Netlify</a></li><li><a href='https://www.heroku.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Heroku</a></li></ul>",
+      "description": "<p>There have been a handful of cool Jira-cloned apps written in React/VueJS, which makes me wonder <strong>Why not Angular</strong>? And here you go.</p><p><br></p><p>This is <u>not only</u> a simplified Jira clone built with Angular, but also an example of a <u>modern, real-world</u> Angular codebase.</p><p><br></p><p><strong>Tech stack</strong></p><p><br></p><p><a href='https://raw.githubusercontent.com/trungk18/jira-clone-angular/master/frontend/src/assets/img/jira-clone-tech-stack.png' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214); background-color: rgb(255, 255, 255);'><img src='https://github.com/trungk18/jira-clone-angular/raw/master/frontend/src/assets/img/jira-clone-tech-stack.png' alt='Tech logos'></a></p><p><br></p><ul><li><a href='https://cli.angular.io/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Angular CLI</a></li><li><a href='https://datorama.github.io/akita/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Akita</a>&nbsp;state management</li><li><a href='https://nestjs.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>NestJS</a></li><li>UI modules:</li><li class='ql-indent-1'><a href='https://tailwindcss.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>TailwindCSS</a></li><li class='ql-indent-1'>Angular CDK&nbsp;<a href='https://material.angular.io/cdk/drag-drop/overview' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>drag and drop</a></li><li class='ql-indent-1'><a href='https://ng.ant.design/docs/introduce/en' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>ng-zorro</a>&nbsp;UI component:&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>tooltip</code>,&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>modal</code>,&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>select</code>,&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>icon</code> and more.</li><li class='ql-indent-1'><a href='https://github.com/KillerCodeMonkey/ngx-quill' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>ngx-quill</a></li><li><a href='https://www.netlify.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Netlify</a></li><li><a href='https://www.heroku.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Heroku</a></li></ul>",
       "type": "Task",
       "status": "Backlog",
       "priority": "Medium",

frontend/src/assets/data/project.json

@@ -12,24 +12,24 @@
   Copyright 2020 Trung Vo
   -->
   <meta charset="utf-8">
-  <title>Angular Jira Clone with Akita - by trungk18</title>
+  <title>Angular Jira Clone with Akita and TailwindCSS - by trungk18</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="title" content="Angular Jira Clone with Akita">
-  <meta name="description" content="A simplified Jira clone built with Angular 9 and Akita">
+  <meta name="description" content="A simplified Jira clone built with Angular and Akita">
 
   <!-- Open Graph / Facebook -->
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://jira.trungk18.com/">
   <meta property="og:title" content="Angular Jira Clone with Akita">
-  <meta property="og:description" content="A simplified Jira clone built with Angular 9 and Akita">
+  <meta property="og:description" content="A simplified Jira clone built with Angular and Akita">
   <meta property="og:image" content="assets/img/jira-clone-tech-stack.png">
 
   <!-- Twitter -->
   <meta property="twitter:card" content="summary_large_image">
   <meta property="twitter:url" content="https://jira.trungk18.com/">
   <meta property="twitter:title" content="Angular Jira Clone with Akita">
-  <meta property="twitter:description" content="A simplified Jira clone built with Angular 9 and Akita">
+  <meta property="twitter:description" content="A simplified Jira clone built with Angular and Akita">
   <meta property="twitter:image" content="assets/img/jira-clone-tech-stack.png">
   <link rel="image_src" href="assets/favicon.png" type="image/png">
   <link rel="shortcut icon" href="assets/favicon.png" type="image/png">

frontend/src/index.html

@@ -11,14 +11,14 @@
   Copyright 2020 Trung Vo
   -->
   <meta charset="utf-8">
-  <title>Angular Jira Clone with Akita - by trungk18</title>
+  <title>Angular Jira Clone with Akita and TailwindCSS - by trungk18</title>
   <base href="/">
   <meta name="viewport"
         content="width=device-width, initial-scale=1">
   <meta name="title"
         content="Angular Jira Clone with Akita">
   <meta name="description"
-        content="A simplified Jira clone built with Angular 9 and Akita">
+        content="A simplified Jira clone built with Angular and Akita">
 
   <!-- Open Graph / Facebook -->
   <meta property="og:type"
@@ -28,7 +28,7 @@
   <meta property="og:title"
         content="Angular Jira Clone with Akita">
   <meta property="og:description"
-        content="A simplified Jira clone built with Angular 9 and Akita">
+        content="A simplified Jira clone built with Angular and Akita">
   <meta property="og:image"
         content="assets/img/jira-clone-tech-stack.png">
 
@@ -40,7 +40,7 @@
   <meta property="twitter:title"
         content="Angular Jira Clone with Akita">
   <meta property="twitter:description"
-        content="A simplified Jira clone built with Angular 9 and Akita">
+        content="A simplified Jira clone built with Angular and Akita">
   <meta property="twitter:image"
         content="assets/img/jira-clone-tech-stack.png">
   <link rel="image_src"

frontend/src/index.prod.html

@@ -20,7 +20,7 @@ This is the collection of components that I wrote for [jira.trungk18.com][jira],
 ## What is Angular Jira Clone
 
 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.
+This is not only a simplified Jira clone built with Angular, but also an example of a **modern**, **real-world** Angular codebase.
 
 ## Tech stack