Drag Board is a lightweight Kanban board that lets you easily drag and drop tasks between columns.
Drag Board is a lightweight Kanban board that lets you easily drag and drop tasks between columns. Itβs built with:
The development began with implementing the functionality to create containers. Next, I added the drag-and-drop feature for the containers themselves. Following that, I focused on enabling item creation within the containers and allowing those items to be dragged and dropped.
Once the basic functionality was in place, I styled the board, drawing inspiration from modern Kanban boards like Jira, Trello, and Notion, based on my experience.
Next, I introduced features for deleting items and containers and editing their names. I also implemented visual indicators for the container currently being edited. Finally, I made some minor refactoring and styling adjustments.
Throughout the development process, additional features were integrated as needed. All data is saved in local storage, so users can pick up right where they left off when they return.
Note: This project serves to demonstrate the use of DnD-Kit and TypeScript. It is not intended to be a fully-featured Kanban board.
To run the project locally, follow these steps:
npm install
or yarn
to install the required dependencies.npm start
or yarn start
to launch the project.https://github.com/user-attachments/assets/0652dc4d-5840-446f-856a-242edf361cdf