Draggable & Sortable Kanban Board built using Nextjs
Kanban board built using Nextjs & TailwindCSS. Thoughts on how I built a fully draggable and sortable Kanban board using a toolkit called "dnd-kit", problems I faced and how I solved them and possible future additions.
Motivation
Visualization provides a quick and effective way of communicating thats why Kanban boards are so important. Kanban boards provide a clear visualization of progress making it easier to understand overview of tasks which ned to be worked on, tasks which are being worked on, & tasks which have been completed. In your work especially in the tech industry you must have used Kanban boards.
I have always found them intuitive and useful so I decided to built my own, atleast a basic application with primal features.
Tech Stack
- Nextjs
Next js is a react framework which makes it easier to quickly develop react applications. - Typescript
Typescript is a superset of javascript which adds features like static typing and helps write type safe code. - TailwindCSS
Great framework for writing custom css fast. - dnd-kit
bnd-kit is an light and extensible drag & drop toolkit for React. This toolkit provides hooks to turn your components into draggable elements and droppable areas & also lets us control every aspect of alld draggable and droppable components.
Problems faced & how I solved them
- Understanding the dndkit toolkit
Making components draggable and ensuing interactions with other elements is quite complex & also I had used this toolkit for the first time so I spent a lot of time reading their documentation and built a basic working example with just the columns first, before integrating everything together.
Final thoughts
I successfully used this new toolkit dnd-kit and was able to build an application with features that I actually use. I also learned about handling interactions betweeen components which are stacked one each other.
In future I would try to make an fullstack applciation with authentication, databases and live collabration.