Trung Vo

Posted on Sep 25, 2020 • Updated on Feb 16, 2021 • Originally published at trungk18.com

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

#angular #typescript #akita #jiraclone

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

trungk18 / 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

Top comments (23)

Greg Dostatni • Feb 14 '21

Thanks for creating this, very helpful. I have a suggestion for readers who want to learn from this repository.
Fork it, configure compodoc and document everything. You'll learn and understand everything and you will have a reference to use in the future. The best way I've found yet to learn from code.

For Trung: Thank you for creating this. Going through this exercise has slotted some pieces of knowledge I got from various tutorials into a cohesive whole. At least it makes sense now, we will see if the knowledge survives attempts at implementation.

Cheers,

Trung Vo • Feb 16 '21

Thanks Greg for your kind words. It means a lot to me :) Let me add compodoc into the repository so that others can use it directly after forking the repo.

Let me know if you have any other suggestions/questions. I am happy to help 🙂

Trung Vo • Feb 16 '21

Hey Greg, I added a command to run compodoc on the master branch 😁

You can sync with the upstream and run

npm run docs:html

github.com/trungk18/jira-clone-ang...

Peter Kiss • Sep 26 '20

Hey, I like the look very much!
Especially that this is the topic of one of my side projects as well 😂.
Except I've focused more on basic functionality and what can be achieved with the API. Beside some prototyping and learning on various topics.
For example css grid as a board display, parsing JQL expressions.
I used angular and ngPrime.

Trung Vo • Sep 26 '20

Sounds great. Did you have publish it anywhere? I would like to see it. For a project like Jira clone, we can actually try and test a lot of technology and see how all of them are working nicely at the end. Looking for more projects from you! 😊

Peter Kiss • Sep 28 '20

Hey, thanks. It is on bitbucket, but far from complete or mature enough for a real publication :)

bitbucket.org/kisp/jira-light/

Exploring the jira API lead to some dead-ends. I found that boards are provided on the agile endpoint, only after I have implemented a board view through a JQL query execution.

Before you do anything involving "agile" - you need to be sure about some basics about the api.

The cloud-api and the agile-api are two different endpoints working over the same data with some extra entities
There are customFields defined on the ticket, which can be accessed via ids - ('Story points' is one of them) Some custom fields has a default name, 'Story points' is one of them. The id can be found by name. SP exists on scrum boards only obviously. Boards and epics can be accessed through the agile api with project key. end-so-on.

In overall I was a little-bit struggling to find the entry-point for having a good grasp to get my tickets displayed.

Trung Vo • Sep 28 '20

Seems like you did the extensive research on how the actual Jira work. I only focus on the front end of thing 😁But anyway I am preparing an API with GraphQL with some basic functionality. If you would like to take a look, this is a branch name: github.com/trungk18/jira-clone-ang...

Basically it is the flow:

User login, you get some basic user information.
There should be an list of projects associate with an user, so probably you will need to fetch the list of project. Then open the last opened project (My API is not working exactly like that)
Fetch the project detail and show the board. A project will have a list of
Lanes: mapped to the status: Backlog, Selected, Inprogress, Done
Each lane will have a list of issues
Have several API to update issue.

I hope that I can deployed the 2.0 version with API very soon. I didn't think about the custom fields that you are mentioning but I am aware of that on the actual use of Jira.

Anyway, good luck with that jira-light!