https://github.com/kunalkv2000/kanban-board
A Kanban board is a visual project management tool that helps teams organize, track, and manage work by visualizing it as a series of tasks moving through different stages of a workflow. It uses columns to represent stages (like ToDo, In Progress, Done) and cards to represent individual tasks, which are moved across the columns as work progresses.
https://github.com/kunalkv2000/kanban-board
css3 dnd-kit html5 js kanban-board kanban-board-application reactjs redux-toolkit tailwindcss
Last synced: 2 months ago
JSON representation
A Kanban board is a visual project management tool that helps teams organize, track, and manage work by visualizing it as a series of tasks moving through different stages of a workflow. It uses columns to represent stages (like ToDo, In Progress, Done) and cards to represent individual tasks, which are moved across the columns as work progresses.
- Host: GitHub
- URL: https://github.com/kunalkv2000/kanban-board
- Owner: kunalkv2000
- Created: 2025-06-21T03:41:07.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-06-21T04:08:14.000Z (4 months ago)
- Last Synced: 2025-06-21T04:31:15.494Z (4 months ago)
- Topics: css3, dnd-kit, html5, js, kanban-board, kanban-board-application, reactjs, redux-toolkit, tailwindcss
- Language: JavaScript
- Homepage: https://kanban-board-ks.netlify.app/
- Size: 0 Bytes
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kanban Board made with React.js
An Kanban board project built with React + Tailwind CSS + React-redux + DND toolkit. Create a New Project, Add Task, and Add Description. Update the task status (todo -> in process -> done) using react-dnd (drag and drop). Manage Task & Projects using Edit, Delete functions. The Task and Projects are saved into LocalStorage.
## Features
* View all the Features on the Home page.
* View all the Project on the Project page and manage them.
* Create new Project and Add Task, and Add Description.
* View the full details of the Projects by clicking the Project card.
* Edit the full details of an existing Project by clicking on the Edit button.
* Delete an existing Project by clicking on the Delete button.
* Integrated Redux for centralized state management.
* Delete an Task. A confirmation dialog box will be shown.
* The Invoices are saved into LocalStorage so you can close and open the website at anytime.
* Used context api for state management
* Used react router dom for route management
## Live Demo
`https://kanban-board-ks.netlify.app/`
## Home Page
## Create Project Page
## Project View Page
## Edit Project Page
## Create Task Page
## Edit Task Page
## Fullscreen View Page
## Delete Page
## Github Repo
`https://github.com/kunalkv2000/kanban-board.git`
### Installation
```bash
git clone https://github.com/kunalkv2000/kanban-board.git
npm install
npm run dev
```