This is a lightweight Interactive Kanban Board built using ReactJS
✅ Create, edit, and delete tasks
✅ Drag and drop tasks between columns "To do", "Doing", and "Done"
✅ Data persistence using localStorage
✅ Search tasks using Title
✅ Fully responsive design
✅ Color codes for displaying status of task - Red(To do), Yellow(Doing) and Green(Done) that update automatically
Kloudmate-kanban-board
├─ .gitignore
├─ README.md
├─ eslint.config.js
├─ index.html
├─ package-lock.json
├─ package.json
├─ public
│ └─ vite.svg
├─ src
│ ├─ App.css
│ ├─ App.jsx
│ ├─ assets
│ ├─ react.svg
│ ├─ components
│ │ ├─ column
│ │ │ ├─ column.css
│ │ │ └─ column.jsx
│ │ ├─ contexts
│ │ │ ├─ appContext.jsx
│ │ │ └─ taskCardContext.jsx
│ │ ├─ dropZone
│ │ │ ├─ dropZone.css
│ │ │ └─ dropZone.jsx
│ │ ├─ editForm
│ │ │ ├─ editForm.css
│ │ │ └─ editForm.jsx
│ │ ├─ newTask
│ │ │ ├─ newTask.css
│ │ │ └─ newTask.jsx
│ │ ├─ searchBar
│ │ │ ├─ searchBar.css
│ │ │ └─ searchBar.jsx
│ │ ├─ taskCard
│ │ │ ├─ taskCard.css
│ │ │ └─ taskCard.jsx
│ │ ├─ taskEdit
│ │ │ ├─ taskEdit.css
│ │ │ └─ taskEdit.jsx
│ │ ├─ taskForm
│ │ │ ├─ taskForm.css
│ │ │ └─ taskForm.jsx
│ │ └─ taskStatus
│ │ ├─ taskStatus.css
│ │ └─ taskStatus.jsx
│ ├─ index.css
│ └─ main.jsx
└─ vite.config.js
- ReactJS
- JavaScript
- CSS
- Vercel
Before you begin, ensure you have the following installed:
git clone [email protected]:sahil19-19/Kloudmate-kanban-board.git
cd Kloudmate-kanban-boardnpm installnpm run devhttps://kloudmate-kanban-board.vercel.app/