August 11, 2023

A drag and drop Kanban Board with React

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.

Demo

Video tutorial

dnd_tutorial_thumbnail

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 😃