{"id":13406736,"url":"https://github.com/trungvose/jira-clone-angular","last_synced_at":"2025-05-14T04:08:43.451Z","repository":{"id":43291086,"uuid":"271826090","full_name":"trungvose/jira-clone-angular","owner":"trungvose","description":"A simplified Jira clone built with Angular, ng-zorro and Akita","archived":false,"fork":false,"pushed_at":"2025-04-10T13:34:28.000Z","size":10345,"stargazers_count":2240,"open_issues_count":4,"forks_count":574,"subscribers_count":78,"default_branch":"master","last_synced_at":"2025-05-01T14:02:10.075Z","etag":null,"topics":["akita","angular","ng-zorro","storybook","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://jira.trungk18.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trungvose.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["trungvose"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.buymeacoffee.com/trungvose"]}},"created_at":"2020-06-12T15:05:23.000Z","updated_at":"2025-04-30T14:10:01.000Z","dependencies_parsed_at":"2024-01-08T02:24:15.334Z","dependency_job_id":"b4b6a19a-cfcf-4823-bcaf-6cf4dabba6e0","html_url":"https://github.com/trungvose/jira-clone-angular","commit_stats":null,"previous_names":["trungvose/jira-clone-angular","trungk18/jira-clone-angular"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trungvose%2Fjira-clone-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trungvose%2Fjira-clone-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trungvose%2Fjira-clone-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trungvose%2Fjira-clone-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trungvose","download_url":"https://codeload.github.com/trungvose/jira-clone-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254069896,"owners_count":22009558,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["akita","angular","ng-zorro","storybook","tailwindcss","typescript"],"created_at":"2024-07-30T19:02:37.928Z","updated_at":"2025-05-14T04:08:38.428Z","avatar_url":"https://github.com/trungvose.png","language":"TypeScript","readme":"# A simplified Jira clone built with Angular, Akita and ng-zorro\n\n\u003e 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].\n\u003e\n\u003e You can check the storybook collection of components I wrote for Jira Clone ➡ [jira-storybook.trungk18.com](https://jira-storybook.trungk18.com/) 📕\n\u003e\n\u003e Thanks for your continuous support. Stay tuned! :muscle:\n\nThere have been a handful of cool Jira-cloned apps written in `React`/`VueJS`, which makes me wonder **Why not Angular**? And here you go.\n\nThis is not only a simplified Jira clone built with Angular, but also an example of a **modern**, **real-world** Angular codebase.\n\n## Merry Christmas\n\nThank you for your support! -\u003e https://jira.trungk18.com/project/issue/2020\n\n![Jira clone built with Angular and Akita][christmas2020]\n\n## Working application\n\nCheck out the **live demo** -\u003e https://jira.trungk18.com\n\n![Jira clone built with Angular and Akita][demo]\n\n## Storybook\n\n### What is Storybook\n\nStorybook helps you build UI components in isolation from your app's business logic, data, and context.\nThat makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.\n\n### Jira Clone Storybook\n\nThis is the collection of components that I wrote for [jira.trungk18.com][jira], includes:\n\n- Avatar\n- Breadcrumbs\n- Button\n- Input\n- More to come...\n\nCheck out the **storybook demo** -\u003e https://jira-storybook.trungk18.com/\n\n![Jira clone built with Angular and Akita][demo-storybook]\n\n## Support\n\nIf you like my work, feel free to:\n\n- ⭐ this repository. And we will be happy together :)\n- [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)][tweet] about Angular Jira clone\n- \u003ca title=\"Thanks for your support!\" href=\"https://www.buymeacoffee.com/trungvose\" target=\"_blank\"\u003e\u003cimg src=\"https://res.cloudinary.com/dvujyxh7e/image/upload/c_thumb,w_140,g_face/v1596378474/default-orange_uthxgz.jpg\" alt=\"Buy Me A Coffee\"\u003e\u003c/a\u003e\n\nThanks a bunch for stopping by and supporting me!\n\n[tweet]: https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Ftrungk18%2Fjira-clone-angular\u0026text=Awesome%20Jira%20clone%20app%20built%20with%20Angular%209%20and%20Akita\u0026hashtags=angular,akita,typescript\n## Who is it for 🤷‍♀️\n\nI have been working with Angular for about four years. I built cool stuff at [Zyllem][zyllem] but almost all of them are internal apps which is difficult to show.\n\nThis 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`.\n\nThere 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.\n\n---\n\nThis piece of work is also part of our technical series [angular-vietnam/100-days-of-angular][100days] 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.\n\n[zyllem]: https://www.zyllem.com/\n\n## Tech stack\n\n![Tech logos][stack]\n\n- [Angular CLI][cli]\n- [Akita][akita] state management\n- [NestJS][nestjs]\n- UI modules:\n  - [TailwindCSS][tailwind]\n  - Angular CDK [drag and drop][cdkdrag]\n  - [ng-zorro][ng-zorro] UI component: `tooltip`, `modal`, `select`, `icon` and more.\n  - [ngx-quill][quill]\n- [Netlify][netlify]\n- [Heroku][heroku]\n\n[cli]: https://cli.angular.io/\n[akita]: https://datorama.github.io/akita/\n[nestjs]: https://nestjs.com/\n[tailwind]: https://tailwindcss.com/\n[cdkdrag]: https://material.angular.io/cdk/drag-drop/overview\n[ng-zorro]: https://ng.ant.design/docs/introduce/en\n[quill]: https://github.com/KillerCodeMonkey/ngx-quill\n[netlify]: https://www.netlify.com/\n[heroku]: https://www.heroku.com/\n\n## High level design\n\nAs requested by [@eric_cart][eric_cart], I draw a simple high-level design for the application.\n\n### Application architecture\n\nI have an AppModule that will import:\n\n![Jira clone built with Angular and Akita - Application architecture][application-architecture]\n\n- Angular needed modules such as `BrowserModule` and any module that need to run `forRoot`.\n- The application core modules such as `AuthModule` that need to available on the whole platform.\n- And I also configured the router to [lazy load any modules][lazy-load] only when I needed. Otherwise, everything will be loaded when I start the application.\n  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`\n\n### Simple data interaction flow\n\nAs 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`)\n\n![Jira clone built with Angular and Akita - Simple data interaction flow][interaction-data-flow]\n\nI 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.\n\nIf you are using ngrx, you have to dispatch an action when you started fetching the project, and then there is an effect somewhere that was detached from your context need to handle the action, send a request to the API server. And finally, the effect will tell whether the data was successfully fetched or not. \u003cu\u003eThere is nothing wrong with ngrx approach\u003c/u\u003e, it is just too much concept and layer that you need to understand. To be honest, I used to afraid of integrating ngrx in my project because of the unnecessary complexity it would bring.\n\n## Features and Roadmap\n\nI set the tentative deadline for motivating myself to finish the work on time. Otherwise, It will take forever to complete :)\n\n### Phase 1 - Angular application and simple Nest API\n\n\u003e June 13 - 27, 2020\n\n- [x] Proven, scalable, and easy to understand project structure\n- [x] Simple drag and drop kanban board\n- [x] Add/update issue\n- [x] Search/filtering issues\n- [x] Add comments\n\n\u003e 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.\n\u003e\n\u003e Phase 2 will bring you a proper API where you can log in and save your work.\n\nWhile working with this application, I have the opportunity to revisit some of the interesting topics:\n\n- TailwindCSS configuration - that's awesome\n- Scrollable layout with Flexbox\n- Deploy Angular application to Netlify\n\nI will take two weeks break to:\n\n- Fix bugs and UI enhancements for Angular Jira clone.\n- Continue working with the [typescript-data-structures][typescript-dsa] repo.\n\n[typescript-dsa]: https://github.com/trungvose/typescript-data-structures\n\n### Phase 2\n\n\u003e TBD\n\n- [ ] Refactor the mono repo to use Nx Workspace\n- [ ] GraphQL API and store data on the actual database\n- [ ] Authentication\n\nView the current [work in progress branch][gql]\n\n## Tutorial\n\nWhen 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][todo-list]. Once I know what needs to be done, what I need is to follow the plan. That's my approach.\n\nI 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 :)\n\nI 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.\n\nIts series will also be published in Vietnamese as part of our [angular-vietnam/100-days-of-angular][100days].\n\n| Part | Description                                                                     | Status |\n| ---- | ------------------------------------------------------------------------------- | ------ |\n| 00   | [Behind the 900 stars repository - Slide][part-1]                               | Done   |\n| 00   | [Behind a thousand stars repository - Angular Air][part-1-video]                | Done   |\n| 00   | [Prerequisites][part00]                                                         | Done   |\n| 01   | [Create a new repository and set up a new Angular application with CLI][part01] | Done   |\n| 02   | [Build the application layout with flex and TailwindCSS][part02]                | Done   |\n| 03   | [Setup Akita state management][part03]                                          | Done   |\n| 04   | [Build an editable textbox][part04]                                             | Done   |\n| 05   | [Build an interactive drag and drop board][part05]                              | Done   |\n| 06   | [Build a markdown text editor][part06]                                          | Done   |\n| 07   | [Build a rich text HTML editor][part07]                                         | Done   |\n| 08   | [Create placeholder loading (like Facebook's cards loading)][part08]            | Done   |\n\n[part-1]: https://slides.com/trungvose/behind-the-900-star-repository-jira-clone-angular\n[part-1-video]: https://youtu.be/3dukbsRX0tc\n[part00]: https://trungvose.com/blog/angular-jira-clone-tutorial-00-prerequisites/\n[part01]: https://trungvose.com/blog/angular-jira-clone-tutorial-01-planning-and-set-up/\n[part02]: https://trungvose.com/blog/angular-jira-clone-tutorial-02-application-layout-tailwindcss-flex/\n[part03]: https://trungvose.com/blog/angular-jira-clone-tutorial-03-akita-state-management/\n[part04]: https://trungvose.com/blog/angular-jira-clone-tutorial-04-editable-textbox/\n[part05]: https://trungvose.com/blog/angular-jira-clone-tutorial-05-interactive-drag-and-drop-board/\n[part06]: https://trungvose.com/blog/angular-jira-clone-tutorial-06-angular-markdown-text-editor/\n[part07]: https://trungvose.com/blog/angular-jira-clone-tutorial-07-rich-text-editor/\n[part08]: https://trungvose.com/blog/angular-jira-clone-tutorial-08-angular-placeholder-loading/\n[todo-list]: https://trungvose.notion.site/Angular-Jira-clone-Phase-1-79d3205e26024357a75ebfc00aba558e?pvs=4\n\n## Time spending\n\nIt 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...\n\nAccording 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][stranger].\n\nI really enjoyed working on this project. The interactive kanban board took me sometimes, it is challenging but exciting at the same time.\n\n![Jira clone built with Angular and Akita - Time spending][time]\n\n## What's currently missing?\n\nThere are missing features from the live demo which should exist in a real product. All of them will be finished on Phase 2:\n\n### Proper authentication system 🔐\n\nI 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.\n\n### Accessibility ♿\n\nNot all components have properly defined [aria attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA), visual focus indicators, etc.\n\n## Setting up development environment 🛠\n\n- `git clone https://github.com/trungvose/jira-clone-angular.git`\n- `cd jira-clone-angular`\n- `npm start` for angular web application\n- The app should run on `http://localhost:4200/`\n\n### Unit/Integration tests 🧪\n\nI skipped writing test for this project. I might do it for the proper backend GraphQL API.\n\n## Compatibility\n\nIt was being tested on IE 11, Chrome and Firefox. For Safari, there are some minor alignment issues.\n\n## Author: Trung Vo ✍️\n\n- A young and passionate front-end engineer. Working with Angular and TypeScript. Like photography, running, cooking, and reading books.\n- Personal blog: https://trungk18.com/\n- Say hello: trungk18 [et] gmail [dot] com\n\n## Contributing\n\nIf you have any ideas, just [open an issue][issues] and tell me what you think.\n\nIf you'd like to contribute, please fork the repository and make changes as you'd like. [Pull requests][pull] are warmly welcome.\n\n## Credits\n\nInspired by [oldboyxx/jira_clone][oldboyxx] and [Datlyfe/jira_clone][datlyfe].\n\nI reused part of the HTML and CSS code from these projects.\n\n## License\n\nFeel free to use my code on your project. It would be great if you put a reference to this repository.\n\n[MIT](https://opensource.org/licenses/MIT)\n\n[jira]: http://jira.trungk18.com/\n[oldboyxx]: https://github.com/oldboyxx/jira_clone\n[datlyfe]: https://github.com/Datlyfe/jira_clone\n[stack]: src/assets/img/jira-clone-tech-stack.png\n[demo]: src/assets/img/jira-clone-angular-demo-trungk18.gif\n[christmas2020]: src/assets/img/merry-christmas-2020.gif\n[demo-storybook]: src/assets/img/jira-storybook.gif\n[time]: src/assets/img/time-spending.png\n[issues]: https://github.com/trungvose/jira-clone-angular/issues/new\n[pull]: https://github.com/trungvose/jira-clone-angular/compare\n[100days]: https://github.com/angular-vietnam/100-days-of-angular\n[stranger]: https://www.bingeclock.com/s/stranger-things/\n[eric_cart]: https://www.reddit.com/r/Angular2/comments/hj4kxd/angular_jira_clone_application_built_akita_and/fwu1tbm/\n[application-architecture]: src/assets/img/diagram/application-architecture.png\n[interaction-data-flow]: src/assets/img/diagram/interaction-data-flow.png\n[project-store]: src/app/project/state/project/project.store.ts\n[project-service]: src/app/project/state/project/project.service.ts\n[project-query]: src/app/project/state/project/project.query.ts\n[lazy-load]: https://angular.io/guide/lazy-loading-ngmodules\n[chau]: https://github.com/nartc\n[tiep]: https://github.com/tieppt\n[gql]: https://github.com/trungvose/jira-clone-angular/tree/feature/gql\n","funding_links":["https://github.com/sponsors/trungvose","https://www.buymeacoffee.com/trungvose"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrungvose%2Fjira-clone-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrungvose%2Fjira-clone-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrungvose%2Fjira-clone-angular/lists"}