jira-clone-angular: a kanban demo whose changes vanish on reload

Why not Angular: a Jira clone written as a teaching codebase

The author's starting point was that several Jira clones already existed in React and Vue, and none in Angular. This repository answers that. The README frames it as two things at once: a simplified Jira clone, and an example of a modern, real-world Angular codebase.

The stated audience is Angular developers of all skill levels. The author says most Angular examples online are too simple, and that this one has enough complexity to offer something while staying fairly easy to follow. It was built in spare time to try libraries the author had not used before: Akita, TailwindCSS and ng-zorro. Much of the author's earlier Angular work was internal apps that could not be shown, which is the reason given for building a public one.

It is also part of the angular-vietnam 100-days-of-angular technical series, which aims to let people build an application of similar scale after 100 days of learning Angular together. The project is MIT licensed and has a live demo at jira.trungk18.com.

Nothing you do in the board is saved

This is the limitation that decides whether the project fits your purpose. The README's phase one notes say that every interaction with data, such as leaving a comment or changing issue details, is not saved to a persistent database. The application serves a fixed structure of data each time you open it. Reload the browser and every change is gone.

Phase one, dated June 13 to 27, 2020, delivered a scalable project structure, a drag and drop kanban board, adding and updating issues, search and filtering of issues, and comments. All of that runs against the fixed data.

Phase two was meant to bring a proper API where you could log in and save work. The note at the top of the README says it will not be completed as planned, because both the author and the collaborator Chau Tran were busy with other commitments. A work-in-progress GraphQL branch is linked instead.

The consequence: you cannot use this as a working issue tracker, and you cannot learn from it how login, persistence or a real API client were handled.

Akita replaces the reducer, selector and effect trio with store, service and query

The architecture section explains the state flow in detail. The app uses Akita, and the author says the data flow is simpler to follow than ngrx terms: `reducer`, `selector` and `effect`.

The pattern has three pieces. A project state holds initial data in the project store. A project service does the heavy lifting: it fetches the project and, on success, updates the store from inside the service itself. A project query then exposes the data, and any component injects that query to consume it.

The README contrasts this with ngrx. There, you dispatch an action when fetching starts, and an effect somewhere detached from your context handles the action, calls the API server and reports success or failure. The author writes that there is nothing wrong with the ngrx approach, only that it carries more concepts and layers, and says they used to be afraid of bringing ngrx into a project for that reason.

That is an opinion from the author, not a measurement. It is still the clearest statement in the repository of why Akita was chosen, and the store, service and query files are where to read it.

AppModule imports core modules and lazy loads the rest

The module layout is spelled out in the README. `AppModule` imports the Angular modules the app needs, such as `BrowserModule` and any module that must run `forRoot`. It also imports core modules that must exist across the platform, such as `AuthModule`.

The router is configured to lazy load modules only when needed. `LoginModule` loads when you open `/login`, and `ProjectModule` loads at `/project`. Without lazy loading, everything would load when the app starts. Inside each feature module, other modules are imported as needed: `ProjectModule` imports `JiraControlModule` for custom UI components.

This is a tidy structure for a reader. A route maps to one module, and shared UI sits in a control module. Note that the README describes the app as it was built in 2020. The `package.json` now lists Angular `^20.3.18`, so the folder layout may have changed since, and you should compare the diagram with `src/` instead of trusting it.

The tech stack: ng-zorro, Tailwind, CDK drag and drop, ngx-quill

The stack listed in the README is Angular CLI, Akita for state, and NestJS for the API that phase one targeted. For UI it uses TailwindCSS, the Angular CDK drag and drop module, ng-zorro components such as `tooltip`, `modal`, `select` and `icon`, and ngx-quill for rich text. Hosting is Netlify and Heroku.

The dependencies in `package.json` tell you what is current. It pins `ng-zorro-antd` at `^20.4.4`, `@datorama/akita` at `^7.1.1`, `ngx-quill` at `^28.0.2`, `quill` at `^2.0.3` and `rxjs` at `^7.8.1`. Testing moved to Vitest, with `@analogjs/vitest-angular` in the dev dependencies, and a `vitest.config.ts` at the top level. The scripts are `start` (`ng serve`), `build`, `test` (`vitest run`), `lint` and `e2e`.

Sentry is also a dependency, as `@sentry/angular` and `@sentry/tracing`. The README does not mention it, so the reason for it is not documented.

A separate Storybook holds four components

The author published a Storybook of the components written for the Jira clone, at jira-storybook.trungk18.com. Storybook, in the README's words, builds UI components in isolation from the app's business logic, data and context, and saves states as stories.

The list is short: Avatar, Breadcrumbs, Button and Input, followed by "More to come...". Four components is a small sample of the whole app, which has a board, a search drawer, issue detail and comments. The Storybook covers the reusable pieces, not the kanban logic.

That suits the repository's aim. If you want to see how a small button or avatar component is built in Angular with Tailwind, the Storybook is a quicker route than opening the app. If you want to see how the board handles drag and drop, you read the project module.

The repository root also has a `docs/` folder and a `documentation.json`, which the README excerpt does not explain.

The last push was in April 2026, and releases stop at v2.0.0

The repository is not archived, but the last push was on 3 April 2026, which is more than six months back. It should not be read as an actively maintained project. The latest release is `v2.0.0` from 9 March 2022, preceded by `v1.1.0` on 25 December 2020 and `v1.0.0` on 29 June 2020.

The gap between the 2022 release and the 2026 push is visible in `package.json`, where the Angular packages sit at version 20 even though no release covers that move. So the tagged releases and the current code differ. Pick the branch, not a tag, if you want the up-to-date build.

The README also carries a Christmas 2020 greeting section, a support section asking for stars and a Buy Me a Coffee link, and the note that phase two will not be completed. Those tell you the status better than any badge.

There is no competitor named in the repository. The README mentions React and Vue clones only as the reason this one exists, and names ngrx only to explain the state choice.

Editorial conclusion

Read it if you want a mid-sized Angular project with Akita and ng-zorro to study, and treat it as reference code, not a base for a product. The data resets on every reload, the second phase with a real API was dropped, and the last push was on 3 April 2026. Before you build on it, clone it, run the start script, move an issue on the board, reload, and confirm for yourself that nothing is saved.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. README
4. Releases
5. trungvose/jira-clone-angular on GitHub