A kanban board is an agile project management tool designed to help visualize work, limit work-in-progress, and maximize efficiency (or flow), is used in many companies. More about Kaban here. In this repository I built a simple Kaban board. The app uses modern React features including Hooks and Context API.
Project functionality:
- create task with description;
- asign a person to the task;
- move tasks between columns with defined limits;
- save tasks to local storage;
- clear tasks from the Local Storage.
Main features:
- React
The project uses node and npm.
To run it locally you should install all dependencies:
npm i
To run webpack and create a localhost port you should type:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
- Columns are rendered dynamically. The app follows the rules you specify.
const init = {
columns: [
{ id: 1, name: 'To do', limit: 5 },
{ id: 2, name: 'Analysis', limit: 3 },
{ id: 3, name: 'Development', limit: 5 },
{ id: 4, name: 'Testing', limit: 3 },
{ id: 5, name: 'Done', limit: 10 }
],
tasks: []
- LocalStorage enables the app to store the data inside it. I created my custom hook called useStorage to handle data saving.
export const useStorage = () => {
const setItem = (ob, name) => {
localStorage.setItem(name, JSON.stringify(ob))
}
const getItem = (name) => {
const retrivedObject = JSON.parse(localStorage.getItem(name))
return retrivedObject
}
return [getItem, setItem]
}
