Build a draggable Kanban Board with React, Chakra UI and LocalStorage
👀 Demo: https://dnd-kanban-board.vercel.app/
🌱 Source Code: https://github.com/CodeWithGionatha-L...
💬 Discord: / discord
📚 Resources
Vite: https://vitejs.dev/guide/
ChakraUI: https://chakra-ui.com/getting-started
React-DnD: https://react-dnd.github.io/react-dnd...
Autoresizable Textarea: https://www.npmjs.com/package/react-t...
Typescript Hooks: https://github.com/juliencrn/usehooks-ts
In this video, we are going to build a modern drag-and-droppable Kanban board by using React, ChakraUI, and Typescript.
Chapters
00:00 Intro
01:05 Project Setup
03:38 Custom Theme
04:42 Heading Text
05:46 Entities
06:52 Task component
09:19 Column component
14:04 LocalStorage persistence
15:27 Add new task
18:46 Update and delete
21:32 Auto Resizable Textarea
22:54 Implementing dragging
27:36 Implementing drop
31:21 Implementing task swapping
35:53 Dark mode
36:54 Outro
#react #tutorial #kanbanboard #draganddrop #localstorage
Watch video Build a draggable Kanban Board with React, Chakra UI and LocalStorage online without registration, duration hours minute second in high quality. This video was added by user Code With Gionatha 31 August 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 34,45 once and liked it 1 thousand people.