https://github.com/ravikant0055/kanban-board
Kanban Board
https://github.com/ravikant0055/kanban-board
dnd-kit javascript reactjs shadcn tailwindcss
Last synced: 3 months ago
JSON representation
Kanban Board
- Host: GitHub
- URL: https://github.com/ravikant0055/kanban-board
- Owner: ravikant0055
- Created: 2025-04-05T11:57:04.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-04-23T20:34:37.000Z (6 months ago)
- Last Synced: 2025-04-23T21:32:54.172Z (5 months ago)
- Topics: dnd-kit, javascript, reactjs, shadcn, tailwindcss
- Language: JavaScript
- Homepage: https://kanban-board-one-mauve.vercel.app
- Size: 98.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📝 Kanban Board
A simple and intuitive **Kanban Board** built with **React.js**, **Tailwind CSS**, and **dnd-kit**. Manage your tasks with ease by dragging and dropping them between columns, adding new tasks, editing existing ones, or deleting them—all in a beautifully styled interface.
---
## 🚀 Live Demo
👉 [Click here to try the live demo](https://kanban-board-one-mauve.vercel.app)
---
## 📸 Preview
---
## 🛠️ Technologies Used
- ⚛️ **React.js** – UI library
- 🧠 **JavaScript** – Core logic
- 🎨 **Tailwind CSS** – Utility-first CSS framework
- 📦 **dnd-kit** – Drag-and-drop support
- 🔍 **React Icons** – Pre-built icons
- 💡 **shadcn/ui** – Styled component library
---
## 📋 Features
- ✅ **3 Dynamic Columns**: _To do_, _In Progress_, _Completed_
- ➕ **Add Task**: Click "Add Task" to open a modal and input task name & description
- ✏️ **Edit Task**: Click on a task to edit its title or description. Click outside or press `Enter` to save.
- 🗑️ **Delete Task**: Hover on any task to reveal the delete button
- 🔃 **Drag and Drop**: Seamlessly move tasks between columns
- 💾 **LocalStorage Persistence**: Your tasks remain saved even after refreshing the page
---
## 🧩 How It Works
1. Click on the **Add Task** button
2. Enter a task **name** and **description**
3. Hit **Enter** or click outside to save the task
4. Task appears in the **To Do** column
5. Drag and drop between **To Do**, **In Progress**, and **Completed**
6. Hover over a task to delete it, or click to edit
---
## 📂 Local Development
### 🔧 Getting Started
```bash
git clone https://github.com/your-username/kanban-board.git
cd kanban-board
npm install
npm start