In this minimal kanban application, users are able to create, edit, and delete tickets from the board. Most importantly, users are able to drag and drop cards across different columns or within the same column having their changes persisted in the database. Users can also easily share the task link with others by tapping a share icon that automatically copies the link to the clipboard. Additionally, users can include tags to their tasks. Below is a quick video demo:
made-with-love-demo.mov
This is a full-stack application using Next.js, TypeScript, Prisma and tRPC. All data is persisted in a PostgreSQL database. In terms of styling, I used tailwindcss and headless UI to help me with animations.
The core features are end-to-end tested with cypress.
I deployed this app to Vercel and hosted the database in ElephantSQL – you can click here to access the live version.
In order to run the project locally, make sure you have Docker and Node.js installed. The instructions are with yarn, but you can use npm at your convenience.
# Clone this repository
$ git clone https://github.com/riltonfranzonee/kanban
# Enter the project folder
$ cd kanban
# Copy .env
$ cp .env.example .env
# Install dependencies
$ yarn install
# Init database
$ yarn initdb
# Sync database with prisma (just the first time)
$ yarn prisma db push
# Init next.js app
$ yarn dev
Now you should be able to open the project at http://localhost:3000
As I mentioned, this repository also contains a couple of end-to-end tests using cypress. With cypress we have two options:
# Open cypress UI to watch each test
$ yarn cypress:open
# Simply run the tests and see the output directly in the console
$ yarn cypress:run
Here's a quick demo of the tests:
e2e-tests.mov
