Kanban App - Task Management with React

This is a Kanban App project that helps in managing tasks using React. The app utilizes the React library and other dependencies such as React Beautiful DnD, Framer Motion, Axios, and Redux.

Screenshots / Demo

Features

Users can create, edit, and delete tasks
Users can drag and drop tasks to different categories (ToDo, Doing, Done)
Users can mark tasks as completed
Data is saved in the local storage of the browser
Redux is used for state management

Dependencies

react
react-dom
react-beautiful-dnd
framer-motion
axios
redux
react-redux

Run Locally

Clone the project

  git clone https://link-to-project

Go to the project directory

  cd my-project

Install dependencies

  npm install

Start the server

  npm run host

Usage

To use the app, follow these steps:

-  Open your web browser and navigate to http://localhost:3000.
-  Create a new task by clicking on the "Add Task" button.
-  Edit a task by clicking on the task and then clicking on the "Edit" button.
-  Delete a task by clicking on the task and then clicking on the "Delete" button.
-  Drag and drop a task to a different category.
-  Mark a task as completed by clicking on the checkbox next to the task.

Challenges

During the development of this project, the following challenges may be encountered:

Debugging errors: Debugging errors can be difficult, especially when working with multiple dependencies. Ensure that you have a good understanding of the error messages and how to troubleshoot them.
Integration of dependencies: Integrating dependencies such as React Beautiful DnD, Framer Motion, Axios, and Redux can be challenging. Ensure that you read the documentation thoroughly and follow the instructions carefully.
Managing state: Managing state in a React application can be challenging, especially when using Redux. Ensure that you have a good understanding of how state is managed in React and how to use Redux to manage the application's state.
Design and styling: Design and styling can be challenging, especially if you are not familiar with CSS. Ensure that you have a good understanding of CSS and how to use it to create visually appealing designs.
Compatibility issues: Compatibility issues can arise when working with multiple dependencies. Ensure that you test the application thoroughly and address any compatibility issues that arise.
Performance issues: Performance issues can arise when working with large amounts of data or when using complex animations. Ensure that you optimize the application's performance by using best practices and avoiding unnecessary computations or animations.

FAQ

Q: What is a Kanban board?

A Kanban board is a tool used for visualizing and managing work in progress. It consists of columns that represent the different stages of a project or process, and cards that represent the individual tasks or items that need to be completed.

Q: What is a Kanban app?

A Kanban app is a software application that allows users to create and manage Kanban boards digitally. It typically provides features such as drag-and-drop functionality for moving cards between columns, the ability to assign tasks to team members, and the ability to track progress and deadlines.

Q: What technologies were used to develop this Kanban app?

This Kanban app was developed using React, along with several dependencies such as React Beautiful DnD, Framer Motion, Axios, and Redux.

Q: What features does this Kanban app offer?

This Kanban app offers several features, including the ability to create, edit, and delete tasks, drag-and-drop functionality for moving tasks between columns, the ability to assign tasks to team members, and the ability to track progress and deadlines.

Q: Can I use this Kanban app for personal or commercial projects?

Yes, you are free to use this Kanban app for personal or commercial projects. However, please note that it is provided as-is, without any warranty or guarantee of support.

Q: How do I install and run this Kanban app on my local machine?

To install and run this Kanban app on your local machine, you can follow the instructions provided in the README.md file in the project repository. This typically involves cloning the repository, installing dependencies, and running the app using a development server.

nishantdev365 / kanban