IssueManager – A realtime kanban board made with Appwrite and Angular14



Overview of My Submission

IssueManager is an software constructed with Angular 14 and AppWrite. It is a small kanban administration instrument impressed by GitHub Tasks, which make use of some Appwrite options like Account, Database, Realtime, Features, Storage and Groups.

I took the chance of this hackathon to create a undertaking totally different from the standard clones, with the aim of studying how Appwrite works and to strive the most recent Angular options in an actual world software 😊.



Submission Class:

Web2 Wizards



Hyperlink to Code

A realtime kanban administration instrument constructed with Appwrite and Angular

A kanban administration instrument made with Angular and AppWrite

⚠️ READ THIS

This undertaking is a demo, born primarily to check Appwrite integration with Angular experimental options, and it isn’t prepared for manufacturing!
The location at the moment on-line is a check and might be discontinued quickly. As soon as discontinued, you have to to self-host appwrite to strive the applying

🎯 About

IssueManager is an software constructed with Angular 14 and AppWrite
for the AppWrite Hackathon.

It is a small kanabn administration instrument impressed by GitHub Tasks
leveraging of some AppWrite options reminiscent of Account, Database, Realtime, Functions, Storage, Teams.

πŸš€ Applied sciences

The frontend is constructed with Angular 14 utilizing solely the brand new Standalone Part function. angular/angular#43784

It additionally contains RxAngular, a toolset targeted on runtime efficiency and template rendering taiga-ui, an UI part library.

WYSIWYG editor is constructed with Lexical from Meta and…



Extra Sources / Data

The frontend is constructed with Angular 14 utilizing Standalone Elements. https://github.com/angular/angular/discussions/43784

For Angular customers, this imply that this software is constructed solely with out modules, though I needed to provide you with some workarounds to get all of the libraries that do not absolutely help it work correctly.

It additionally contains RxAngular, a toolset targeted on runtime efficiency and template rendering, and taiga-ui, an UI part library.

WYSIWYG editor for job enhancing is constructed with Lexical and a small angular wrapper made by my-self (the repo is at the moment non-public however accessible to NPM).



βœ… Options



Authentication

IssueManager authentication system is solely based mostly on Appwrite, and at the moment helps login and registration through E-mail/Password, Google and Github.

issue-manager-demo vercel app_login (2)



Creating a brand new undertaking

Every authenticated person has the likelihood to create a brand new undertaking to IssueManager. A undertaking is a kanban board the place you may observe your duties.

Making a undertaking includes a sequence of processes to create the person’s workspace, the truth is due to an Appwrite function that can first craete a brand new Appwrite Team the place the person which has created the undertaking is the proprietor, subsequent it can create a brand new Appwrite Storage Bucket the place customers can add their recordsdata, then it can lastly creates the Challenge entity to the database.

Image description

Image description

Image description

A undertaking might be both public or non-public. When making a public undertaking, each person is ready to view it even when it can not replace it. Non-public initiatives, however, can solely be seen and up to date by staff members.

Example of public project

The Realtime function is used to replace mechanically the record of accessible initiatives within the case that the undertaking is deleted or if his visibility adjustments, with a view to notify all customers

Image description

Image description



Managing the board

After creating a brand new undertaking, customers can entry the board and might begin to handle their duties. Because of Appwrite realtime, every person which is visiting the board at the moment will at all times have the up to date points on their display.

Customers have the likelihood to create, archive or re-order a brand new Class, then to create and transfer the Duties inside similar to a Kanban board. The ordering is made with JIRA LexoRanks with a view to optimize the performances and database requests.

Image description

Image description



Including new members to the board

Customers which have the authorities to replace the board also can invite new members and permit them to view the board. As soon as the person’s e-mail in query has been entered, will probably be despatched to his mailbox and have to be accepted to allow the person for the undertaking.

image



Viewing and updating duties

Every created job of the kanban board might be readed and up to date. Customers can handle their job updating the expiration date, precedence and likewise the outline. The WYSIWYG is made with Lexical and lexical-angular (Angular binding for lexical, which is at the moment a non-public repo in improvement, however already accessible to NPM.

Image description



Including attachments to duties

Because of Appwrite Storage, the person has the likelihood to handle the attachments of a job. Attachments consists of uploaded recordsdata that may be downloaded, deleted or seen (if the preview is
accessible).

Image description



🌐 Demo

A live deployment of the app is out there to strive it out. It’s essential to login to entry the applying pages however you’ll be able to delete your account if you have to.


Some helpful hyperlinks:
issue-manager – Demo application
codeimage.dev – My latest project

Add a Comment

Your email address will not be published. Required fields are marked *