Build a drag and drop Kanban Board: React, Typescript, Tailwind, Dnd-Kit
Hi everyone,
Are you looking for a fun and practical project to improve your React skills? Do you want to learn how to create a kanban board that lets you organize your tasks and projects in a visual way?
I’ve just uploaded a new video where I show you how to build a kanban board from scratch using React, TypeScript, TailwindCSS and dnd-kit.
In this video, you will learn how to:
Create columns and tasks with React components
Enable drag and drop functionality for both columns and tasks using dnd-kit
Edit the content and title of tasks and columns with inline editing
Style the UI with TailwindCSS utility classes
This project is a great way to practice your React skills and learn some new techniques and libraries. You will also end up with a useful tool that you can use for your own projects or customize further.
So what are you waiting for? Check out the video below and let me know what you think in the comments.
I hope you enjoy it as much as I did 😃
Top comments (2)
Nice. Keep Going. I love the simplicity and the transitions. Notice that the counter isn't working. Tip: Make sure that the app in default is taking my screen's width and when I add a custom column, The scroll bar starts to appear.
Thank you