Hire the author: Chisom O

Introduction

In this tutorial, I’ll cover how to build a kanban scrum board with a multiple card drag feature using ReactJS. This means selecting multiple cards and moving them all to another list. To build this I will be using mock data for my scrum board. Head over to this link to view my project’s result. The project’s Github repository is available here.

Motivation

I have used different types of scrum board for project management ranging from Trello, Favro, Jira, and pivotal tracker, I have always wondered how a multiple cards drag feature will look like on a kanban scrum board and this made me curious and motivated to dig deep inside the multiple cards drag feature for scrum boards

Goal

My goal with this project is to build this multiple drag featured kanban scrum board with the greatest ease and deploy it free of cost online.

Glossary

Board: Container for all stages and cards. This is the kanban scrum board itself.

Stage: This is a section of the board that contains related cards.

Card: A smaller container of all information relating to a specific task.

Project Requirement

  1. Basic programming fundamentals are a must.
  2. Must have a good knowledge of React, React Hooks, and JavaScript.
  3. You will need Node >= 8.10 and npm >= 5.6 to use the create react app command

Step By Step Tutorial

  1. Run npx create-react-app {{ name of your app here e.g my-app}} to create a new react app.
  2. Then npm install.
  3. Run npm install react-beautiful-dnd.
  4. Run npm install lodash
  5. create mock-up data.

Sample Mock Data

https://gist.github.com/obulaworld/9e507b4a2600ed135d5a316cd64bbbfa.jsView this gist on GitHub

6. Create Your Card component which will receive the following props: title, description, tag, dueDate, assignee, selectedIds, id, onClick, snapshot from the Stage component

Card component and css files below:

https://gist.github.com/obulaworld/56b5734a191f20f0439857bced724b7f.jsView this gist on GitHub

https://gist.github.com/obulaworld/9e22574747b24e416a2c0cbe3eff8996.jsView this gist on GitHub

7. Implement your Stage component which receives the following props: title, count, cardData, className, selectedIds, cardOnclick, id from the board component which will loop through its card data to render the multiple cards related to it while passing in the props from step 6 to each card. Each card should be wrapped with a Draggable component from the react-beautiful-dnd package.

Stage component and css files below:

https://gist.github.com/obulaworld/11f0d513b7436eb5c8da7c93d3b9bab1.jsView this gist on GitHub

https://gist.github.com/obulaworld/9e22574747b24e416a2c0cbe3eff8996.jsView this gist on GitHub

8. Build out the Board component which will loop through and render all stage data with the props from step 7 passed to each of them. Each stage should be wrapped with the Droppable component from the react-beautiful-dnd package. The whole board should then be wrapped with the DragDropContext component from the react-beautiful-dnd package. Here you implement all functionalities like:

  • onDragEnd function: A function prop required by the DragDropContext component.
  • multiDrag function: It handles multiple cards dragging in the kanban scrum board.
  • onCardClick function: A function that keeps a record of selected cards.
  • setIds function which stores the IDs of the cards that are selected or de-selected.

Board.jsx file below:

https://gist.github.com/obulaworld/562327ddd5486fea60117c4e61fd7e90.jsView this gist on GitHub


9. Run your code and watch the magic happen.

Learning tools and Strategy

  1. Always build components, it easier to manage and maintain.
  2. Go through the documentation of the react-beautiful-dnd package.
  3. Make sure you wrap all code in a DragDropContext component.

Reflective Analysis

This is an exciting project. This can be a prototype of the kanban scrum board multiple drag feature for the owners of project management tools like Trello. During the course of this project, I learned in a hard way, what race condition is and how to mitigate this. You can click on the link to learn more about it also. I also learned how to employ and use the react-beautiful-dnd package. It was really helpful. Here is the link to the package: https://www.npmjs.com/package/react-beautiful-dnd

Conclusion

The project gives a detailed idea of how to build a kanban scrum board with a multiple card drag feature using ReactJS. Do play around with this multiple card drag project.

citation to the public domain image: http://www.workovereasy.com/2018/01/18/how-im-using-a-kanban-board-to-keep-me-on-track/

Hire the author: Chisom O