Build a Dynamic React JS Interactive Simple Interactive Drag-and-Drop Kanban Board

Written by

javascriptfundamentals

in

Ever feel overwhelmed by the sheer number of tasks you need to manage? Do you find yourself juggling multiple projects, deadlines, and priorities, constantly feeling like you’re losing track of what’s important? If so, you’re not alone. Many developers and project managers struggle with task organization. Traditional methods, like spreadsheets or basic to-do lists, often fall short when it comes to visualizing workflow and adapting to changing priorities. That’s where Kanban boards come in. Kanban boards offer a visual and intuitive way to manage tasks, track progress, and improve workflow efficiency. And, building one with React.js is a fantastic way to learn about state management, component composition, and user interaction.

What is a Kanban Board?

A Kanban board is a visual project management tool that helps you visualize your workflow, limit work in progress (WIP), and maximize efficiency. It’s based on the Kanban method, which originated in manufacturing but has become popular in software development and other industries. The basic structure of a Kanban board consists of columns representing different stages of a workflow. For example, a simple Kanban board might have columns like “To Do,” “In Progress,” and “Done.” Tasks are represented as cards, which move across the columns as they progress through the workflow.

Why Build a Kanban Board with React.js?

React.js is an excellent choice for building interactive and dynamic user interfaces, making it perfect for creating a Kanban board. Here’s why:

  • Component-Based Architecture: React allows you to break down your UI into reusable components, making your code organized and maintainable.
  • Virtual DOM: React’s virtual DOM efficiently updates the UI, providing a smooth and responsive user experience, crucial for drag-and-drop functionality.
  • State Management: React simplifies state management, essential for tracking the position of tasks on the board.
  • Large Community and Ecosystem: React has a vast community and a wealth of libraries and resources, making it easier to find solutions and learn.

Project Setup

Let’s get started! First, you’ll need to set up a new React project. Open your terminal and run the following commands:

npx create-react-app kanban-board-app
cd kanban-board-app
npm start

This will create a new React project named “kanban-board-app” and start the development server. Now, let’s clean up the default project structure. Remove the files inside the `src` directory, and create the following files:

  • src/App.js
  • src/components/KanbanBoard.js
  • src/components/Column.js
  • src/components/TaskCard.js
  • src/styles/App.css
  • src/styles/KanbanBoard.css
  • src/styles/Column.css
  • src/styles/TaskCard.css

Component Breakdown

Before we dive into the code, let’s break down the components we’ll be creating:

  • App.js: This is our main application component. It will hold the overall state of the Kanban board, including the tasks and their statuses.
  • KanbanBoard.js: This component will render the Kanban board layout, including the columns.
  • Column.js: This component represents a single column on the board (e.g., “To Do,” “In Progress,” “Done”). It will render the task cards within its column.
  • TaskCard.js: This component represents a single task card. It will display the task’s title and handle drag-and-drop interactions.

Coding the Components

App.js

This component will manage the overall state of the Kanban board, including the tasks and their current statuses. Create some initial sample data for our tasks.

// src/App.js
import React, { useState } from 'react';
import KanbanBoard from './components/KanbanBoard';
import './styles/App.css';

function App() {
  const [tasks, setTasks] = useState([
    {
      id: 'task-1',
      title: 'Learn React',
      status: 'to-do',
    },
    {
      id: 'task-2',
      title: 'Build Kanban Board',
      status: 'in-progress',
    },
    {
      id: 'task-3',
      title: 'Test the App',
      status: 'done',
    },
  ]);

  const handleTaskMove = (taskId, newStatus) => {
    setTasks(
      tasks.map((task) =>
        task.id === taskId ? { ...task, status: newStatus } : task
      )
    );
  };

  return (
    <div>
      <h1>Kanban Board</h1>
      
    </div>
  );
}

export default App;

In this code:

  • We import the necessary components and the CSS file.
  • We define the `tasks` state variable as an array of task objects. Each task has an `id`, `title`, and `status`.
  • The `handleTaskMove` function updates the status of a task when it’s moved to a new column.
  • We pass the `tasks` and `handleTaskMove` function as props to the `KanbanBoard` component.

KanbanBoard.js

This component is responsible for rendering the Kanban board layout, including the columns. It receives the tasks and a function to update the task status from the `App` component.

// src/components/KanbanBoard.js
import React from 'react';
import Column from './Column';
import '../styles/KanbanBoard.css';

function KanbanBoard({ tasks, onTaskMove }) {
  const statuses = ['to-do', 'in-progress', 'done'];

  return (
    <div>
      {statuses.map((status) => (
         task.status === status)}
          onTaskMove={onTaskMove}
        />
      ))}
    </div>
  );
}

export default KanbanBoard;

In this code:

  • We import the `Column` component and the associated CSS.
  • We define an array of `statuses` to represent the different columns.
  • We map over the `statuses` array and render a `Column` component for each status.
  • We filter the `tasks` array to pass only the tasks that belong to the current column to the `Column` component.
  • We pass the `onTaskMove` function to the `Column` component to allow tasks to be moved between columns.

Column.js

This component renders a single column on the Kanban board. It receives the tasks that belong to the column and a function to update the task status. This is where we’ll handle drag and drop logic.

// src/components/Column.js
import React from 'react';
import TaskCard from './TaskCard';
import '../styles/Column.css';

function Column({ status, tasks, onTaskMove }) {
  const getColumnTitle = (status) => {
    switch (status) {
      case 'to-do':
        return 'To Do';
      case 'in-progress':
        return 'In Progress';
      case 'done':
        return 'Done';
      default:
        return status;
    }
  };

  const handleDragOver = (e) => {
    e.preventDefault(); // Required to allow dropping
  };

  const handleDrop = (e, targetStatus) => {
    const taskId = e.dataTransfer.getData('taskId');
    onTaskMove(taskId, targetStatus);
  };

  return (
    <div> handleDrop(e, status)}
    >
      <h2>{getColumnTitle(status)}</h2>
      <div>
        {tasks.map((task) => (
          
        ))}
      </div>
    </div>
  );
}

export default Column;

In this code:

  • We import the `TaskCard` component and the associated CSS.
  • The `getColumnTitle` function returns the human-readable title for the column.
  • The `handleDragOver` function prevents the default browser behavior, allowing us to drop items into the column.
  • The `handleDrop` function retrieves the task ID from the drag data and calls the `onTaskMove` function to update the task’s status.
  • We render the column title and map over the tasks to render a `TaskCard` component for each task.
  • We add `onDragOver` and `onDrop` events to the column to handle drag and drop interactions.

TaskCard.js

This component renders a single task card. It displays the task’s title and handles the drag start event. This is where we define the draggable behavior.


// src/components/TaskCard.js
import React from 'react';
import '../styles/TaskCard.css';

function TaskCard({ task }) {
  const handleDragStart = (e) => {
    e.dataTransfer.setData('taskId', task.id);
  };

  return (
    <div>
      <h3>{task.title}</h3>
    </div>
  );
}

export default TaskCard;

In this code:

  • We import the associated CSS.
  • The `handleDragStart` function sets the task ID in the drag data. This data will be used when the task is dropped.
  • We render the task title.
  • We set the `draggable` attribute to `true` and attach the `onDragStart` event handler to enable dragging.

Styling the Components

Now, let’s add some basic styling to make our Kanban board look good. Here’s a basic styling for the components. You can customize the styles to your liking.

App.css


/* src/styles/App.css */
.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  font-family: sans-serif;
}

KanbanBoard.css


/* src/styles/KanbanBoard.css */
.kanban-board {
  display: flex;
  width: 100%;
  max-width: 900px;
}

Column.css


/* src/styles/Column.css */
.column {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.column h2 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.task-list {
  min-height: 20px; /* To allow dropping in empty columns */
}

TaskCard.css


/* src/styles/TaskCard.css */
.task-card {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  cursor: grab;
}

.task-card:active {
  cursor: grabbing;
}

Putting it All Together

With all the components and styles in place, your Kanban board is ready to go! Run the application using `npm start` and you should see your interactive Kanban board. You can now drag and drop the tasks between columns. The state is updated when the tasks move.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Not Preventing Default Drag Behavior: If you don’t call `e.preventDefault()` in the `handleDragOver` function, the browser might not allow you to drop the task. Make sure to include this line in your `Column.js` component.
  • Incorrect Data Transfer: In the `handleDragStart` function of your `TaskCard.js`, ensure you set the correct data using `e.dataTransfer.setData(‘taskId’, task.id)`. In `handleDrop` of `Column.js`, retrieve this data with `e.dataTransfer.getData(‘taskId’)`.
  • Missing State Updates: Double-check that your `handleTaskMove` function in `App.js` correctly updates the state of the tasks array. Use the spread operator (`…`) to avoid directly mutating the state.
  • Incorrect CSS Selectors: Make sure your CSS selectors are correctly targeting the elements. Use your browser’s developer tools to inspect the elements and check if the styles are being applied correctly.
  • Not Handling Empty Columns: If there are no tasks in a column, the column might not be able to accept a drop. Make sure your `task-list` in `Column.css` has a minimum height to allow dropping in empty columns.

Advanced Features (Optional)

Once you have a working Kanban board, you can add more advanced features. Here are some ideas:

  • Adding New Tasks: Implement a form to add new tasks to the “To Do” column.
  • Editing Tasks: Allow users to edit the title of a task.
  • Deleting Tasks: Implement a button to delete tasks.
  • Local Storage: Save the tasks to local storage so that they persist even when the browser is closed.
  • More Columns: Add more columns to represent more complex workflows.
  • Animations: Add animations to make the drag-and-drop experience smoother.
  • Backend Integration: Integrate with a backend to store and retrieve tasks from a database.
  • User Authentication: Add user authentication to allow multiple users to use the Kanban board.

Summary / Key Takeaways

In this tutorial, we’ve built a functional drag-and-drop Kanban board using React.js. We covered the basic components, state management, and drag-and-drop functionality. By following these steps, you’ve learned how to create a dynamic and interactive user interface with React.js. You’ve also learned how to break down a complex problem into smaller, manageable components, which is a key skill for any React developer. This project helps in understanding the fundamentals of React, state management, and event handling. Remember to apply these concepts to your future projects. Building this Kanban board is just the beginning. The skills you’ve gained here are transferable and can be used to build a wide variety of interactive applications.

More posts