Introducing KanBoard - Your Personal Project Management Tool 🚀✨
Tags: appwritehack, appwrite, nextjs, productivity
Published: 2022-05-11 15:35:24

---
title: Introducing KanBoard - Your Personal Project Management Tool 🚀✨
published: true
description: My submission to the Appwrite Hackathon on DEV!
tags: appwritehack, appwrite, nextjs, productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ltp5xqlqt1x63ua1qmq.png
---

Whether it is web development, writing articles, or achieving personal goals, proper planning has always been crucial. That allows us to split the main task into smaller bits, track progress and set realistic deadlines for each. 

I saw [DEV](https://dev.to) x [Appwrite](https://appwrite.io) hackathon being announced in the middle of April and knew this was a great opportunity to build my own self-hosted project management tool. This was how [KanBoard](https://github.com/madzadev/kanboard) was born.

![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dt8cna226ox6a41mbng3.png)

In this article, we will go through the installation guide, features, and tech stack of my submission. 

## Submission Category: Web2 Wizards

### Project is available on [GitHub](https://github.com/madzadev/kanboard)

{% github https://github.com/madzadev/kanboard no-readme %}

## Installation

In order to set up your own instance of KanBoard, you must first install Docker, set up Appwrite, create necessary data collections, clone the KanBoard repo, and configure environmental variables. 

We will go through everything in more detail below:

`1️⃣` To install [Docker](https://docker.com), check the official installation guidelines [here](https://docs.docker.com/get-docker/).

`2️⃣` Next, you have to install the [Appwrite](https://appwrite.io) using the commands below, depending on the operating system you use:

- Mac / Linux or Unix compatible:

```bash
docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:latest
```

- Windows (command prompt)

```bash
docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
    --entrypoint="install" ^
    appwrite/appwrite:latest
```

- Windows (powershell)

```bash
docker run -it --rm ,
    --volume /var/run/docker.sock:/var/run/docker.sock ,
    --volume ${pwd}/appwrite:/usr/src/code/appwrite:rw ,
    --entrypoint="install" ,
    appwrite/appwrite:latest
```

`3️⃣` Next, open Docker and run the Appwrite app. At this point, you should be able to access the Appwrite console through [localhost](http://localhost). Create an account, log in and create a new project.

![Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25tfvxw0dowvkfeen2xg.png)

`4️⃣` To init your SDK and interact with Appwrite services, you need to add a Web platform to your project. To do that choose the project you created and click the 'Add Platform' button.

`5️⃣` Create four database collections: Posts, Columns, Boards, and Activities.

![Colections](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctwjhu525coft3pvtai6.png)

Now set the attributes and indexes for each collection as below:

🔻 **Posts attributes and indexes**

![Posts attr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3dhg30kix9olgayho3a.png)

![Posts index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owu3u7fmfr9m2be4s9pl.png)

🔻 **Columns attributes and indexes**

![Col atr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87zuih5khbbm25eg29bp.png)

![Col index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvyp8pz14x2a2ejn2jl2.png)

🔻 **Boards attributes**

![Boards attr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ystfd16c3cu59ctps80.png)

🔻 **Activities attributes**

![Act attr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dktepm3p800qlb3s1i83.png)

`6️⃣` Go into the settings for each collection and set the permission to `role:member` for both read and write access.

![Permissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r3x5jluamup8merje4f.png)

`7️⃣` Navigate to the Users panel and add a new user you will use to log in to your app and access KanBoard.

`8️⃣` Clone the repo to your machine by running `git clone https://github.com/madzadev/kanboard.git` then change the working directory into it by `cd kanboard` and install the project packages by `npm install`.

`9️⃣` Clone the env files with the command `cp .env.example .env.local`. In the newly created `.env.local` file fill out the keys from your Appwrite console. The first two are available in the Settings of the KanBan project. The other four can be found in the Settings of each Collection.

`1️⃣0️⃣`  Run the command `npm run dev` to start the app. 

## Authentication

Once you have set everything up and your app is running, you should be presented with the login screen on [localhost:3000](http://localhost:3000).

![Auth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqbdtdb8i3l2r8alurgi.png)

The user is asked to provide the email address and the password. Those should match the records you provided when creating the user in the [Appwrite](https://appwrite.io) console in the installation step.

## Stats

Once logged in, the user is presented with the stats page. 

![Stats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88dimump1mdcmsdjj4lw.png)

Those include total cards, columns, and boards created across the whole app.

The user also sees the last activities performed on the app, like created, edited and deleted cards, columns and boards. Activities are sorted by the most recent ones on the top and each one is given the time ago attribute to see when the action was performed.

There are also upcoming and previous tasks. Again, both types of tasks are being sorted by the most recent ones on the top with the time attribute when the task has been/is planned to be completed.

## Action history

For more detailed action history, there is also an Activities page.

![History](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3llb4zlg5bfoyxzq62r4.png)

The activities are sorted across the columns. The first column lists all the added actions, the second one is for all the edit actions, and the third one displays all the boards, columns, and cards that have been recently deleted.

Each column is sorted by the most recent activities on top and each card in it includes the timestamp describing when the action was performed.

## Calendar

All of the user tasks can also be viewed in the calendar view.

![Calendar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqsp9i2nkhufpg9c94jo.png)

The user is able to navigate between different months to see the past and future tasks. The current day on the calendar is highlighted and the user can access it from any month via the Today button.

If there are multiple tasks for the same day, the tasks will be displayed below each other.

## Add/delete boards and columns 

To start using the app, the user must create at least one board and column.

![Add boards and columns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tnspmk9ptrg9i0xzoa2.gif)

A new board can be added at any time. You need to provide the title of the board and the description of what the board is about. 

After the creation, the user will be taken to the newly created board and all the info provided in the creation modal will be displayed in the board header.

A new column can be added at any time for any board. You need to provide the title of the column. It will be shown at the top of the column, with the number of included cards.

![Delete boards and columns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmcz31s746cg7wcmqke9.gif)

The column can be deleted if there are no cards in it. The board can be deleted if there are no columns in it. 

In both cases the warning modal will come up, to make sure the user really meant to delete the board/column.

## Add new cards

A new card can be created when there is at least one board and one column inside it.

![Add card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dpy08m8kbepzmo9yq67.gif)

To create a card user clicks on the Add a card button on the top of the column, fills in the necessary information in the modal, and saves the card.

After that the page will refresh and pull the new data from the server, displaying your new card added to the column. 

## View/update/delete cards

Any card can be opened by clicking on it. The card will be opened on the modal with all the data fetched inside it. This is the read-only mode for viewing the card.

![Edit card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tv94fdajrhlm08stna7.gif)

In order to edit the card, the user must click on the edit icon on the top right corner of the card and the fields will become editable with the option to save the changes afterward.

![Delete card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t20s0o1dc6bkwvysr0w.gif)

In order to delete the card, the user must click on the delete button on the top right corner of the card. This will bring up the delete warning message to make sure the user accepts the delete action.

## Input validation

For each input field in the app, the input validation is provided.

![Input validation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9siy6iyzjok6wn6gm4yo.gif)

If the user tries to submit the empty value that is required, the warning message will be shown. 

## Move cards around 

The user is allowed to move cards both vertically and horizontally.

![Move cards](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4zvqdulvnno8j9gyxhb.gif)

Moving cards vertically allows the user to change the order of cards in a particular column, while horizontal drag allows the user to swap cards between the different columns.

The drag and drop functionality comes with modern-looking effects to improve the UX and make your workflow feel more natural. 

## Vertical/horizontal scroll

If the cards are outside the viewport the scroll feature is available.

![Scroll feature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqs126cxoko6ek5h5kxp.gif)

If the cards in the column are outside the view, the vertical scrollbar on the right side of the list will appear.

If the columns themselves appear outside of the view, the horizontal scrollbar is provided under the column wrapper.

## Search cards by title

Once you have created a larger amount of cards, the search functionality might come in handy.

![Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3if0hah6hgofwfsna0ct.gif)

The user is able to search the cards by the card titles. The results are displayed in real-time, as the user types in the search query.

## Logout

Once you are done, the user can log out.

![Logout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fdwjrd3scbkgqihdgsi.gif)

This will take the user back to the login screen.

## Tech stack I used

[NextJS](https://nextjs.org/) - React application framework

[Appwrite](https://appwrite.io) - [open-source](https://github.com/appwrite/appwrite) end-to-end backend server

[react-beautiful-dnd](https://www.npmjs.com/package/react-beautiful-dnd) - for drag and drop functionality

[react-hook-form](https://www.npmjs.com/package/react-hook-form) - to track input states and provide validation

[modal-dialog](https://www.npmjs.com/package/@atlaskit/modal-dialog) - to provide modal dialogs for user interaction

[fullcalendar](https://www.npmjs.com/package/fullcalendar) - to display the user tasks on the monthly basis

[recoil](https://www.npmjs.com/package/recoil) - a set of utilities for state management

[url-slug](https://www.npmjs.com/package/url-slug), [dayjs](https://www.npmjs.com/package/dayjs) - helper libraries for slug creation and date formatting

## Future plans

I might consider adding extra auth methods. Most of us use platforms like [Twitter](https://twitter.com) and [GitHub](https://github.com), so an OAuth solution would be great, which is already supported by [Account API](https://appwrite.io/docs/client/account).

If I will ever come across to expand the app to collaborate with someone, I would consider adding the member system for app, where there is an invite system and an option to set the roles for each member via [Users API](https://appwrite.io/docs/server/users).

Currently, the user is able to store the text and dates. I might consider extending it to the file uploads as well since Appwrite comes with a useful [Storage API](https://appwrite.io/docs/client/storage).

## Conclusion

First of all, I want to say thanks to [Forem](https://www.forem.com/) for creating and actively maintaining such an awesome platform, where we can learn, and share our findings. I discovered this hackathon cause of [DEV](https://dev.to)!

I'm glad I discovered [Appwrite](https://appwrite.io)! I learned a new approach to creating a backend system and storing data. The docs are well written, and the UI in the console is very straightforward.

Also, [KanBoard](https://github.com/madzadev/kanboard) is an open-source project with [MIT licence](https://choosealicense.com/licenses/mit/). The pull requests are welcome.

<hr>

Connect me on [Twitter](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/) and [GitHub](https://github.com/madzadev)!

Visit my [Portfolio](https://madza.dev/blog) for more projects like this.