Welcome to the Kanban Board project! This project provides a visual tool for effectively managing activities and assignments. By using the React framework, students can easily organize their homework and tasks with the help of the Kanban Board.
The goal of this project is to create a Kanban Board using React to address the challenge of managing multiple activities and assignments. The Kanban Board serves as a visual tool that represents the workflow and tracks the progress of each task.
With this project, students will be able to create separate boards for different courses and subjects. Each board will consist of columns representing different stages of a task's life cycle, such as To Do, In Progress, and Done.
Additionally, the project will include features such as drag and drop functionality to easily move tasks between columns, the ability to assign due dates and priority levels to tasks, and the option to assign tasks to specific team members or collaborators.
Overall, the Kanban Board project using React provides a flexible and powerful tool for students to effectively manage their tasks and assignments, helping them stay organized and on top of their workload.
To begin creating your own Kanban Board project in React, follow these steps:
-
Set up the React development environment: Make sure you have Node.js and npm installed on your system. Once installed, use the Create React App command to create a new React project.
-
Define the Kanban Board layout: Use HTML and CSS to define the layout of your Kanban Board. Typically, the layout consists of columns representing different task stages like "To Do," "In Progress," and "Done."
-
Create React components: Break down your UI into reusable components using React. For example, you can create a "Card" component to represent a task, a "Column" component to represent a column on the board, and a "Board" component to represent the entire Kanban Board.
-
Implement drag and drop functionality: Utilize a drag and drop library like React DnD or react-beautiful-dnd to enable users to move tasks between columns.
-
Manage the application state: Use React's "useState" or "useReducer" hooks to manage the state of your application. This allows you to keep track of tasks and their statuses on the board.
-
Add functionality for adding and editing tasks: Implement features that enable users to add new tasks to the board and edit existing tasks.
-
Implement customizations: Allow users to customize the Kanban Board by incorporating features such as changing the board's color or adding custom tags to tasks.
-
Test and deploy: Thoroughly test your application to ensure it functions as expected. Once tested, deploy it to a hosting platform like Netlify, Heroku, or GitHub Pages.
- Task Management: Create, update, and delete tasks on the Kanban board.
- Workflow Visualization: Visualize your workflow using columns that represent different task stages, such as "To Do," "In Progress," and "Done."
- Drag and Drop: Easily move tasks between columns using drag and drop functionality.
- Task Details: Add details to each task, such as due dates, descriptions, and assignees.
- Responsive Design: The project is built with a responsive design, making it accessible across various devices.
The Kanban Board project utilizes the following technologies:
- React JS
- React Icons
- Material UI
- React Router
- React Redux
- Redux Toolkit
This project was developed by a team of 4 members. Here are the team members:
- Rohan Rathi [rohanrathi333@gmail.com]
- Ashish Khankari []
- Pramod Kumar []
- Priyal Soni []
The team collaborated to create this project, leveraging their skills and expertise to build a powerful and efficient Kanban board solution.