React course: Build a drag and drop Kanban Board: Typescript, Tailwind, Dnd-Kit multiple containers

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

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

[mohammedaminaimeur]

Best dnd-kit tutorial ever! Thanks for the effort.

[cmwzuyb]

Since I lost hope to successfully use beautiful dnd with typescript, I had to do it manually and tired and couldn't manage it.
Found yours explanation for dndKit. It is a miracle) Good job. Thank you!)
Beautiful dnd is evil

[HP-olux]

I am using dnd kit in my job project and I didn't learn it well just by reading the documentation. This explained everything to me. Thank you, you are awesome

[narendrakajla]

what an amazing tutorial, everything explained in detail, without skipping anything, with a lot of patience & humble communication style.
Really really learned a lot, not just dnd kit actually, but some extra things as well like some new css which i have never used and way of writing & managing code.
Now i am confident that i can use dnd kit and do the modifications as per my requirements

Thank You... so much ❤
Subscribed and liked, please keep making such amazing tutorials as i can see till now there are 4 videos and each of them is having something unique projects then random youtube trends. 🔥🔥
I will watch the rest other videos as well soon once i find some time on weekends and learn new stuff. Also waiting for new videos like this.
Respect for the efforts. Thanks again. 😃

[fullstackstudent]

What a brilliant tutorial. I couldn't find any good documentation for DND kit but you have broken it down extremely well. Please keep up the good work and keep the tutorials coming! Thank you.

[steevelsharonsalis]

This is my first React project with TypeScript, and I absolutely loved it. Thank you. You are off to a good start with this being the first video on your channel. Looking forward to more projects.

[christopherlawrenc_]

This is exactly what I was looking for. Very well done. I appreciate you taking the time to explain dnd-kit in this way!

[AmbreCaldin]

brilliant tutorial, I followed it from the start to the end and didnt encounter a single bug, it went smoothly thanks to your explanations and clarity ! Amazing work, thanks a lot

[miraclenerdkidchiki]

I love the simplicity of your videos and how you explain stuf...most tutorials kinda expect you to know these stuff

You just got a subscriber 👌

[juliamendes]

This tutorial is amazing. Your explanations are clear and it was easy to follow. Thank you so much for this!

[alexizhernandez]

This was a great video! I learned a lot about dnd-kit, which was my goal with watching this video. I did find a small bug though. When I create 3 columns and I drag a task from column 1 to column 3, then I drag it back to column 1, it will make the columns themselves switch positions.

[bilalhaider]

man that was a pretty amazing functionality. Loved this project! Thanks

[MrCommutateur]

Many Thanks!! This was much better than the official documentation!

[namejo]

i recently started learning React and I'm looking for tutorials to code along.. this one was soooo good, thx! just subscribed

[extremes]

thank you so much this is a very clean and thorough explanation

[PandulaWeerasooriya]

Thank you!. This was a briliant tutorial from beginning to the end.

[vorche_]

Man watching you code makes it so simple

[roshandalami]

I was looking for DnD feature for a while . and I found you . Great tutorial ❤❤❤

[muhammadfaizantariq]

Thanks for amazing tutorial on Kanban Board with React

[Glissadist]

Great tutorial! Complex stuff for a newer coder but very well done!