IssueManager - A realtime kanban board made with Appwrite and Angular14
Tags: appwritehack, webdev, angular
Published: 2022-05-12 23:53:38

### Overview of My Submission
*IssueManager* is an application built with Angular 14 and AppWrite. It's a small kanban management tool inspired by GitHub Projects, which make use of some Appwrite features like Account, Database, Realtime, Functions, Storage and Teams.

I took the opportunity of this hackathon to create a project different from the usual clones, with the purpose of learning how Appwrite works and to try the newest Angular features in a real world application 😊.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upumulrt5r38kmicb2dz.png) 

### Submission Category: 
Web2 Wizards

### Link to Code
{% embed https://github.com/riccardoperra/issue-manager %}

### Additional Resources / Info

The frontend is built with Angular 14 using **Standalone Components**. https://github.com/angular/angular/discussions/43784

For Angular users, this mean that this application is built entirely without modules, although I had to come up with some workarounds to get all the libraries that don't fully support it work properly.

It also includes [RxAngular](https://github.com/rx-angular/rx-angular), a toolset focused on runtime performance and template rendering, and [taiga-ui](https://github.com/Tinkoff/taiga-ui), an UI component library.

WYSIWYG editor for task editing is built with [Lexical](https://github.com/facebook/lexical) and a small angular wrapper made by my-self (the repo is currently private but available to [NPM](https://npmjs.com/lexical-angular)).

#### ✅ Features

##### Authentication

IssueManager authentication system is entirely based on Appwrite, and currently supports login and registration via Email/Password, Google and Github.

![issue-manager-demo vercel app_login (2)](https://user-images.githubusercontent.com/37072694/168169039-74bb5278-e7ff-426b-9d05-a3bfd28a3003.png)

##### Creating a new project

Each authenticated user has the possibility to create a new project to IssueManager. A project is a kanban board where you can track your tasks.

Creating a project involves a series of processes to create the user's workspace, in fact thanks to an [Appwrite function](./functions/create-project) that will first craete a new [Appwrite Team](https://appwrite.io/docs/client/teams) where the user which has created the project is the owner, next it will create a new [Appwrite Storage Bucket](https://appwrite.io/docs/client/storage) where users can upload their files, then it will finally creates the `Project` entity to the database.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t22norxks27tz68c1cz0.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ui15570o0g4tkbyhwr1.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kl3u0gvosaw0ny4g3prg.png) 

A project can be either public or private. When creating a public project, every user is able to view it even if it cannot update it. Private projects, on the other hand, can only be seen and updated by team members.

![Example of public project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzd6q8sv46iuf3dc2n1f.png)
 

The Realtime feature is used to update automatically the list of available projects in the case that the project is deleted or if his visibility changes, in order to notify all users

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fskcl1ttpd7fogvn2zb1.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3r8o1edpga39vpo9ed1.png)

##### Managing the board

After creating a new project, users can access the board and can start to manage their tasks. Thanks to Appwrite realtime, each user which is visiting the board at that time will always have the updated issues on their screen.

Users have the possibility to create, archive or re-order a new Category, then to create and move the Tasks inside just like a Kanban board. The ordering is made with [JIRA LexoRanks](https://medium.com/whisperarts/lexorank-what-are-they-and-how-to-use-them-for-efficient-list-sorting-a48fc4e7849f) in order to optimize the performances and database requests. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz9xlz1ufz0otjanedir.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpnb4oj02guzhbw1dtia.png)

##### Adding new members to the board

Users which have the authorities to update the board can also invite new members and allow them to view the board. Once the user's e-mail in question has been entered, it will be sent to his mailbox and must be accepted to enable the user for the project.

![image](https://user-images.githubusercontent.com/37072694/168176124-bd5faf8c-c067-496a-95c8-b6c401102749.png)

##### Viewing and updating tasks

Each created task of the kanban board can be readed and updated. Users can manage their task updating the expiration date, priority and also the description. The WYSIWYG is made with `Lexical` and `lexical-angular` (Angular binding for lexical, which is currently a private repo in development, but already available to [NPM](https://npmjs.com/lexical-angular). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ryy781b370vxfw2koek.png)

##### Adding attachments to tasks

Thanks to Appwrite Storage, the user has the possibility to manage the attachments of a task. Attachments consists of uploaded files that can be downloaded, deleted or viewed (if the preview is 
available).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ta2cmj2js0ltevkd6837.png)


### 🌐 Demo
A [live deployment](https://issue-manager-demo.vercel.app/) of the app is available to try it out. You must login to access the application pages but you are able to delete your account if you need to.

---

Some useful links:
[issue-manager - Demo application](https://issue-manager-demo.vercel.app)
[codeimage.dev - My latest project](https://github.com/riccardoperra/codeimage)