https://github.com/yashkapure06/react-kanban

React Kanban Dashboard
https://github.com/yashkapure06/react-kanban

kanban-board kanban-board-application react reactjs redux tailwind-css

Last synced: 20 days ago
JSON representation

React Kanban Dashboard

• Host: GitHub
• URL: https://github.com/yashkapure06/react-kanban
• Owner: Yashkapure06
• Created: 2023-11-13T20:35:51.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-19T15:30:00.000Z (12 months ago)
• Last Synced: 2024-10-05T07:41:02.658Z (about 1 month ago)
• Topics: kanban-board, kanban-board-application, react, reactjs, redux, tailwind-css
• Language: JavaScript
• Homepage: https://reactkanban.vercel.app
• Size: 504 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React - Kanban

![Screenshot](./public/screenshot.png)

## Description

This board allows you to easily manage tasks by creating, editing, and moving them between four columns - To Do, In Progress, Testing, and Done. The application has been developed using React.js, Redux, and Tailwind CSS, resulting in an intuitive and user-friendly Kanban Dashboard.

### Here is the flow of how this application works

1. The user can create a task by clicking the Add Task button.

2. Popup will appear taking inputs from the user. 

3. The user can add input like ```Task Name, Description, SubTasks and Current Status```

3. When the user clicks on submit, a new task will be created with all details entered by the user.

4. The user can edit a task by clicking on any cards.

5. The user can drag tasks from one column to another.

![Flow](./public/flow.png)

### Here is the Proper File and Folder Structure:

```

├── public

│   ├── favicon.ico

│   ├── index.html

│   ├── logo192.png

│   ├── logo512.png

│   ├── manifest.json

│   └── robots.txt

├── src

│   ├── components

│   │   ├── SubTask.js

│   │   ├── Task.js

│   │   ├── Column.js

│   │   ├── Header.js

│   │   └── Home.js

│   ├── redux

│   │   ├── boardsSlice.js

│   │   └── store.js

│   ├── modals

│   │   ├── TaskModal.js

│   │   └── AssEditTaskModal.js

│   ├── App.js

│   ├── index.css

│   └──index.js

├── .gitignore

├── package.json

├── package-lock.json

├── tailwind.config.js

└── README.md

```

## Detailed Explanation

In this Kanban dashboard, I employed React.js and Redux to build the application. The foundational state of the application is encapsulated in the `store.js` file within the `redux` folder. The Kanban board is structured into four columns: "To Do," "In Progress," "Testing," and "Done." Each column is populated with a list of tasks, each comprising attributes such as "Task Name," "Description," "SubTasks," and "Current Status." Where the data is stored in the data.json.

To manage the state and actions for the Kanban board, I created the `boardsSlice.js` file in the `redux` folder. This file utilizes the `createSlice` function from Redux, consolidating various actions applicable to the Kanban board.

The `Home.js` file in the `components` folder contains the code relevant to the Kanban board. To access data from the `store.js` file, I utilized the `useState` and `useSelector` hooks from React.js. Additionally, the `useDispatch` hook is employed to dispatch actions to the `boardsSlice.js` file, facilitating state management.

Styling for the application is achieved using the `Tailwind CSS` framework and visually appealing user interface.