In this video, we'll show you how to build a drag and drop Kanban Board in React, Typescript, Tailwind, and Dnd-Kit library.

Github repository: https://github.com/Kliton/react-kanban-board-dnd-kit-tutorial-yt
Demo: https://react-kanban-board-dnd-kit-tutorial-yt.vercel.app

00:00:00 Intro
00:00:27 Project setup
00:03:48 Kanban board setup
00:08:27 Kanban columns
00:19:32 Columns drag and drop
00:33:32 Edit column title
00:38:47 Add tasks to Kanban Board
00:46:20 Delete task button
00:50:53 Edit Task Content
00:58:26 Drag and drop of tasks
01:12:21 Fix previous error
01:13:07 Final thoughts

Anja Petry

HTML

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit ( multiple containers )

<p>Hi! This is a YouTube video not an article. Check out the GitHub repo here: <a href="https://github.com/Kliton/react-kanban-board-dnd-kit-tutorial-yt" target="_blank" rel="noopener nofollow">https://github.com/Kliton/react-kanban-board-dnd-kit-tutorial-yt</a>
The live version of the project: <a href="https://react-kanban-board-dnd-kit-tutorial-yt.vercel.app/" target="_blank" rel="noopener nofollow">https://react-kanban-board-dnd-kit-tutorial-yt.vercel.app/</a></p>
