How to Create a Drag-and-Drop Kanban Board Using React, Node.js and Socket.io (& SuprSend Notifications)?

In this article, we explore how to make an agile Kanban board in JIRA using the dynamic duo of React and Node.js, coupled with the flexible data storage capabilities of MongoDB. Leveraging the power of these technologies, we'll delve into the process of designing and building a highly interactive and responsive Kanban board, allowing teams to seamlessly manage and monitor their projects.

To augment the board's functionality, we'll integrate Suprsend, a centralised single notification API to power up its notification system. By incorporating Suprsend, developers can take advantage of real-time notifications, enabling teams to stay informed about critical updates and changes on the Kanban board. This added layer of communication enhances collaboration and ensures that everyone involved is promptly notified of relevant events, resulting in improved productivity and seamless project management.

Github Repo: GitHub - SuprSend/KanBan

Getting Started

Creating the folder structure

Create the project folder containing two sub-folders named client and server

Copied ✔


mkdir kanban
cd kanban
mkdir client server

Setting up the Client part

Navigate into the client folder via your terminal and create a new React.js project.

Copied ✔


cd client
npx create-react-app ./

Installing dependencies

Install Socket.io client API and React Router. React Router is a popular routing library for React applications. It allows us to handle navigation and routing in a declarative manner within the React components.

Copied ✔

npm install socket.io-client react-router-dom

Cleaning up unnecessary data

Delete the redundant files such as the logo and the test files from the React app, and update the App.js file to display Hello World as below. Run npm start to verify the app is working fine.

Copied ✔


function App() {
   return (

    Hello World!

  );
}
export default App;

Adding styles

Add the following code which contains css for the app into index.css file

Copied ✔


* {
  font-family: "Space Grotesk", sans-serif;

  box-sizing: border-box;
}

a {
  text-decoration: none;
}

body {
  margin: 0;

  padding: 0;
}

.navbar {
  width: 100%;

  background-color: black;

  color: white;

  height: 10vh;

  border-bottom: 1px solid #ddd;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;
}

.form__input {
  min-height: 20vh;

  display: flex;

  align-items: center;

  justify-content: center;
}

.input {

  border: 2px solid #008CBA;

  border-radius: 4px;

  background-color: #f8f8f8;

  color: #000;

  transition: 0.3s;

  box-sizing: border-box;

  outline: none;

  margin: 0 5px;

  width: 50%;

  padding: 10px 15px;
}
.input:focus {
  border-color: #66afe9;

  outline: none;
}

.addCardBtn {
  font-weight: 900;

  font-family: cursive;

  width: 120px;

  padding: 10px;

  cursor: pointer;

  background-color: #5050e9;

  color: #fff;

  border: none;

  outline: none;

  height: 43px;
}

.container {
  width: 100%;

  min-height: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px;
}

.head {
  border-radius: 10px;

  text-align: center;

  text-transform: capitalize;

  color: white;

  font-weight: 900;
}
.pending__head {
  background-color: rgb(183, 6, 6);
}
.completed__head {
  background-color: rgb(0, 104, 0);
}
.ongoing__head {
  background-color: rgb(255, 115, 0);
}

.completed__wrapper,
.ongoing__wrapper,
.pending__wrapper {
  width: 32%;

  min-height: 60vh;

  display: flex;

  flex-direction: column;

  padding: 5px;
}

.pending__container {
  background-color: rgba(183, 6, 6, 0.154);
}

.ongoing__container {
  background-color: rgba(255, 115, 0, 0.154);
}

.completed__container {
  background-color: rgb(0, 104, 0, 0.154);
}

.cardcontainer {
  width: 100%;

  min-height: 10vh;

  max-height: 40vh;

  overflow-y: scroll;

  display: flex;

  flex-direction: column;

  padding: 5px;

  margin-top: 5px;

  border-radius: 5px;
}

.pending__items,
.ongoing__items,
.completed__items {
  width: 100%;

  border-radius: 5px;

  margin-bottom: 10px;

  background-color: white;

  padding: 15px;
}

.comment {
  text-align: right;

  font-size: 14px;

  cursor: pointer;

  color: rgb(85, 85, 199);
}

.comment:hover {
  text-decoration: underline;
}

.comments__container {
  padding: 20px;
}

.comment__form {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  margin-bottom: 30px;
}

.comment__form > label {
  margin-bottom: 15px;
}

.comment__form textarea {
  width: 80%;

  padding: 15px;

  margin-bottom: 15px;
}

.commentBtn {
  padding: 10px;

  width: 200px;

  background-color: #367e18;

  outline: none;

  border: none;

  color: #fff;

  height: 45px;

  cursor: pointer;
}

.comments__section {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;
}

.login__form {
  width: 100%;

  height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}

.login__form > label {
  margin-bottom: 15px;
}

.login__form > input {
  width: 70%;

  padding: 10px 15px;

  margin-bottom: 15px;
}

.btn {
  padding: 15px;

  cursor: pointer;

  margin: 10px;

  font-size: 16px;

  outline: none;

  width: 200px;

  background-color: #4CAF50;

  border: 2px solid white;

  color: white;

  text-align: center;

  text-decoration: none;

  transition-duration: 0.4s;

  border-radius: 4px;
}

.btn:hover {
  background-color: white;

  color: #4CAF50;

  border: 2px solid #4CAF50;
}

Setting up the server

Navigate into the server folder and create a package.json file.

Copied ✔


cd server
npm init -y

Installing dependencies

Install Express.js,Mongoose, dotenv, Mongodb Driver, CORS and Socket.io Server API.

Express.js is a fast, minimalist framework that provides several features for building web applications in Node.js. CORS is a Node.js package that allows communication between different domains.

Copied ✔

 npm install express cors socket.io

Index.js

Create an index.js file – the entry point to the web server.

Copied ✔

touch index.js

Setting up the server

Set up a simple Node.js server using Express.js.

Copied ✔


const express = require("express");
const app = express();
const PORT = process.env.PORT || 4000;
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.get("/home", (req, res) => {
	 res.json({
 	 message: "Hello world",
 });
});
app.listen(PORT, () => {
 console.log(`Server listening on ${PORT}`);
});

Import the HTTP and the CORS library to allow data transfer between the client and the server domains.

Copied ✔


const express = require("express");
const app = express();
const PORT = process.env.PORT || 4000;
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// Newly added imports
const http = require("http").Server(app);
const cors = require("cors");
app.use(cors());
app.get("/home", (req, res) => {
res.json({
message: "Hello world",
	});
});
http.listen(PORT, () => {
console.log(`Server listening on ${PORT}`);
});

Creating schemas and models:

Create Model using Mongoose in a file named models.js:

Copied ✔


const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const UserSchema = new Schema({
username: { type: String, required: true },
password: { type: String, required: true },
});
const User = mongoose.model('User', UserSchema);
module.exports = { User};

We can similarly create models for tasks,boards comments.

Adding Imports

Add Mongodb and Mongoose ODM and import models. Connect to the MongoDb Database. You can create a database for free on Mongodb. Make sure to keep the MONGODB_URI in .env instead of hardcoding it.

Copied ✔


		const express = require("express");
		const app = express();
		const cors = require("cors");
		const http = require("http").Server(app);
		const PORT = 4000;
		const mongoose = require("mongoose");
		const dotenv = require("dotenv");
		const { User } = require("./models");
		dotenv.config();

		app.use(cors());
		app.use(express.urlencoded({ extended: true }));
		app.use(express.json());

		mongoose
		.connect(process.env.MONGODB_URI, {
			useNewUrlParser: true,
			useUnifiedTopology: true,
		})
		.then(() => console.log("Database connected!"))
		.catch((err) => console.error(err));
		// Rest of the code

Adding socket.io

Next, add Socket.io to the project to create a real-time connection. Before the app.get()block, copy the code below.

Copied ✔


//New imports
.....
const socketIO = require('socket.io')(http, {
cors: {
	origin: "http://localhost:3000"
 	}
});

// Add this before the app.get() block

socketIO.on('connection', (socket) => {
console.log(`${socket.id} User connected!`);
socket.on('disconnect', () => {
		socket.disconnect()
	console.log(' User disconnected');
	});
});

From the code snippet above, the socket.io("connection") function establishes a connection with the React app, then creates a unique ID for each socket and logs the ID to the console whenever a user visits the web page.

When you refresh or close the web page, the socket fires the disconnect event showing that a user has disconnected from the socket.

OPTIONAL

Install Nodemon. Nodemon is a Node.js tool that automatically restarts the server after detecting file changes, and Socket.io allows us to configure a real-time connection on the server.

Configure Nodemon by adding the start command to the list of scripts in the package.json file. The code snippet below starts the server using Nodemon.

Copied ✔


    "scripts": {
				"test": "echo \"Error: no test specified\" && exit 1",
			 	"start": "nodemon index.js"
			 },

You can now run the server with Nodemon by using the command below.

Copied ✔

npm start

If you are not using nodemon, either run the server with the command "node index.js" or modify the script by adding the start command to the list of scripts in the package.json file as shown below:

Copied ✔


			 "scripts": {
				"test": "echo \"Error: no test specified\" && exit 1",
			 	"start": "node index.js"
			 },

Developing UI/UX with Kanban Board Features

Let's create the UI for the application. It will have three pages: the Login page, Task page – the main part of the application, and The Comments page – where users can comment on each task.

Navigate into client/src and create a components folder containing the Login.js, Task.js, and Comments.js files.

Copied ✔


		 cd client/src
		 mkdir components
		 cd components
		 touch Login.js Task.js Comments.js

Modify the App.js file to setup the routes.

Copied ✔


import { BrowserRouter, Route, Routes } from "react-router-dom";
import Comments from "./components/Comments";
import Task from "./components/Task";
import Login from "./components/Login";

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

export default App;

The Register Page

In this, User has to enter an email and a password. The details are stored in the database. After successful registration,an alert is displayed and user is redirected to login page:

‍

Copied ✔


		import React, { useState } from "react";
		import { useNavigate } from "react-router-dom";

		const Register = () => {
		const [username, setUsername] = useState("");
		const [password, setPassword] = useState("");
		const navigate = useNavigate();
		const handleRegister = async (e) => {
			e.preventDefault();

			try {
			const response = await fetch("http://localhost:4000/register", {
				method: "POST",
				headers: {
				"Content-Type": "application/json",
				},
				body: JSON.stringify({ username, password }),
			});

			if (!response.ok) {
				throw new Error(`Error registering user: ${response.statusText}`);
			}
			const data = await response.json();
			console.log(data);
			alert("Registered Successfully");

			navigate("/login");
			} catch (error) {
			console.error(error);
			}
		};

		return (
			
			
				Enter your email
				 setUsername(e.target.value)}
				value={username}
				/>
				Choose a password
				 setPassword(e.target.value)}
				// value={password}
				/>

				
				
				
				
			
			
		);
		};
		export default Register;

The Login page

Here, the application accepts the username and password, verifies the details from database and if credentials supplied are correct, alert is displayed.

Copied ✔


import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

const Login = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const navigate = useNavigate();

  const handleLogin = async (e) => {
    e.preventDefault();
    const response = await fetch("http://localhost:4000/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ username, password }),
    });
    const data = await response.json();
    // console.log(data);
    if (response.ok) {
      console.log("Login successful:", data);
      localStorage.setItem('userId', data.userId);
      alert(data.message);
      navigate("/task");
    } else {
      console.log("Login failed:", data);
      alert(data.message);
    }
  };

  return (
    
      
        Provide your email
         setUsername(e.target.value)}
          value={username}
        />
        Enter your password
         setPassword(e.target.value)}
          // value={password}
        />
        
      
    
  );
};

export default Login;

Task Page

We'll divide the layout into 2 components namely: AddTask.js – the form input section, and TaskWindow.js – the section containing the tasks.

Copied ✔


cd src/components
touch Navig.js AddTask.js TaskWindow.js

Code for Task.js will look something like this

Copied ✔


		import React from "react";
		import AddTask from "./AddTask";
		import TaskWindow from "./TaskWindow";
		import socketIO from "socket.io-client";

		const socket = socketIO.connect("http://localhost:4000");
		const Task = () => {
		
		return (
			
			
				KanBan Board
			
			
			
			
		);
		};

		export default Task;

AddTask.js looks something like this:

Copied ✔


		import React, { useState } from "react";

		const AddTask = ({ socket }) => {
		const [task, setTask] = useState("");
		const handleAddTask = (e) => {
			e.preventDefault();
			
			setTask("");
		};

		return (
			
			Add Task

			 setTask(e.target.value)}
			/>

			
			
		);
		};

		export default AddTask;

Code for TaskWindow is as follows

Copied ✔


		import React from "react";
		import { Link } from "react-router-dom";

		const TaskWindow = ({ socket }) => {
		return (
			
			
				Pending Tasks

				
				
					Debug the Notification center

					
					2 Comments
					
				
				
			

			
				Ongoing Tasks

				
				


					
					Add Comment
					
				
				
			

			
				Completed Tasks

				
				
					Debug the Notification center

					
					2 Comments
					
				
				
			
			
		);
		};

		export default TaskWindow;

Comments Page

Comments page will have some code like this:

Copied ✔


		import React, { useEffect, useState } from "react";
		import socketIO from "socket.io-client";
		import { useParams } from "react-router-dom";
		const socket = socketIO.connect("http://localhost:4000");

		const Comments = () => {
		const [comment, setComment] = useState("");
		const addComment = (e) => {
			e.preventDefault();
			console.log({
			comment,
			userId: localStorage.getItem("userId"),
			});
			setComment("");
		};
		return (
			
			
				Add a comment
				 setComment(e.target.value)}
				rows={5}
				id="comment"
				name="comment"
				required
				>

				
			

			
				Existing Comments
				
			
			
		);
		};
		export default Comments;

Adding Drag and Drop feature:

React-beautiful-dnd (Drag and Drop) is a library developed by Atlassian that aims to provide a beautiful, accessible drag and drop experience for your React.js applications.

Drag and Drop functionality can greatly enhance the user experience by allowing users to physically move elements within your application, often for reordering lists or transferring items between lists.

Install React Beautiful DND and ensure you are not using React in strict mode. (Check src/index.js).

npm install react-beautiful-dnd

In server/index.js file,create an object containing all the dummy data for each task category.

Copied ✔


const fetchID = () => Math.random().toString(36).substring(1, 9);

		let tasks = {
		pending: {
			title: "pending",

			items: [
			{
				id: fetchID(),

				title: "Provide the proposed designs",

				comments: [],
			},
			],
		},

		ongoing: {
			title: "ongoing",

			items: [
			{
				id: fetchID(),

				title: "Refine and finalise the designs",

				comments: [
				{
					name: "John",

					text: "Verify designs for copyright issues",

					id: fetchID(),
				},
				],
			},
			],
		},

		completed: {
			title: "completed",

			items: [
			{
				id: fetchID(),

				title: "Create posters",

				comments: [
				{
					name: "Doe",

					text: "Check the dimensions",

					id: fetchID(),
				},
				],
			},
			],
		},
		};



		app.get("/home", (req, res) => {
		res.json(tasks);
		});

Now, let's fetch the tasks in TaskWindow.js file.

Copied ✔


		import React, { useState, useEffect } from "react";
		import { Link } from "react-router-dom";

		const TaskWindow = ({ socket }) => {
		const [tasks, setTasks] = useState({});
		useEffect(() => {
			function fetchTasks() {
			fetch("http://localhost:4000/home")
				.then((res) => res.json())

				.then((data) => {
				console.log(data);

				setTasks(data);
				});
			}

			fetchTasks();
		}, []);
		return (
			
			{Object.entries(tasks).map((task) => (
				
				{task[1].title} Tasks
				
					{task[1].items.map((item, index) => (
					
						{item.title}

						
						
							{item.comments.length > 0 ? `View Comments` : "Add Comment"}
						
						
					
					))}
				
				
			))}
			
		);
		};
		export default TaskWindow;

The DragDropContext accepts a prop on DragEnd, which fires immediately after dragging an element.

Copied ✔


			const handleDragEnd = ({ destination, source }) => {
			if (!destination) return;

			if (
			destination.index === source.index &&
			destination.droppableId === source.droppableId
			)
			return;

			socket.emit("taskDragged", {
			source,

			destination,
			});
		};


	Now, create the taskDragged event's listener in server
		socketIO.on("connection", (socket) => {
		console.log(`${socket.id} user connected!`);
		socket.on("taskDragged", (data) => {
			console.log(data);
		});

		socket.on("disconnect", () => {
			socket.disconnect();
			console.log("User disconnected");
		});
		});

Now, create the taskDragged event's listener in server

Copied ✔


			const handleDragEnd = ({ destination, source }) => {
			if (!destination) return;

			if (
			destination.index === source.index &&
			destination.droppableId === source.droppableId
			)
			return;

			socket.emit("taskDragged", {
			source,

			destination,
			});
		};


	Now, create the taskDragged event's listener in server
		socketIO.on("connection", (socket) => {
		console.log(`${socket.id} user connected!`);
		socket.on("taskDragged", (data) => {
			console.log(data);
		});

		socket.on("disconnect", () => {
			socket.disconnect();
			console.log("User disconnected");
		});
		});

But there's a problem. The dragged item doesn't remain at its destination. So let's modify the code. The final code looks something like this:

Copied ✔


		import React, { useState, useEffect } from "react";
		import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
		import { Link } from "react-router-dom";

		const TaskWindow = ({ socket }) => {
		const [tasks, setTasks] = useState({});

		useEffect(() => {
			function fetchTasks() {
			// const userId = localStorage.getItem("userId");
			fetch(`http://localhost:4000/home`)
				.then((res) => res.json())
				.then((data) => {
				console.log("Fetched tasks:", data);
				setTasks(data);
				});
			}

			fetchTasks();
		}, []);

		useEffect(() => {
			socket.on("tasks", (data) => {
			console.log("Received updated tasks:", data);
			setTasks(data);
			});
		}, [socket]);


		const handleDragEnd = ({ destination, source }) => {
			if (!destination) return;
			if (
			destination.index === source.index &&
			destination.droppableId === source.droppableId
			) {
			return;
			}

			socket.emit("taskDragged", {
			source,
			destination,
			});
		};

		if (!tasks) {
			return Loading tasks...;
		}

		return (
			
			
				{Object.entries(tasks).map((task) => (
				
					

					{task[1].title} tasks
					
					
					
						{(provided) => (
						
							{task[1].items.map((item, index) => (
							
								{(provided) => (
								
									{item.title}
									
									
										{item.comments.length > 0
										? `View Comments`
										: "Add Comment"}
									
									
								
								)}
							
							))}
							{provided.placeholder}
						
						)}
					
					
				
				))}
			
			
		);
		};

		export default TaskWindow;

Adding a task

For adding a task, we will use the given code

Copied ✔


import React, { useState } from "react";

const AddTask = ({ socket }) => {
  const [task, setTask] = useState("");

  const handleAddTodo = (e) => {
    e.preventDefault();
    socket.emit("createTask", { task });
    setTask("");
  };

  return (
    
      Add Task

       setTask(e.target.value)}
      />

      
    
  );
};

export default AddTask;

We'll have to include the listener for the same in server

Copied ✔


socketIO.on("connection", (socket) => {
  console.log(`${socket.id} user connected.`);

  socket.on("createTask", (data) => {
    const newTask = { id: fetchID(), title: data.task, comments: [] };
    tasks["pending"].items.push(newTask);
    socket.emit("tasks", tasks);
  });

  // ... Other listeners

});

Finalizing the Comments Page

Now we'll finish the comments page.

Copied ✔


import React, { useEffect, useState } from "react";
import socketIO from "socket.io-client";
import { useParams } from "react-router-dom";

const socket = socketIO.connect("http://localhost:4000");

const Comments = () => {
  const { category, id } = useParams();

  const [comment, setComment] = useState("");

  const addComment = (e) => {
    e.preventDefault();

    socket.emit("addComment", {
      comment,
      category,
      id,
      userId: localStorage.getItem("userId"),
    });

    setComment("");
  };

  return (
    
      
        Add a comment

         setComment(e.target.value)}
          rows={5}
          id="comment"
          name="comment"
          required
        >

        
      

      
        Existing Comments

        
      
    
  );
};

export default Comments;

Again, we'll add the listener in server.js

Copied ✔


socket.on("addComment", (data) => {
    const { category, userId, comment, id } = data;

    const taskItems = tasks[category].items;

    for (let i = 0; i < taskItems.length; i++) {
        if (taskItems[i].id === id) {
            taskItems[i].comments.push({
                name: userId,
                text: comment,
                id: fetchID(),
            });

            socket.emit("comments", taskItems[i].comments);
        }
    }
});

Also, we need to retreive all the comments which are already present.

Copied ✔


const Comments = () => {
  const { category, id } = useParams();
  const [comment, setComment] = useState("");
  // Add this:
  const [commentList, setCommentList] = useState([]);

  useEffect(() => {
    socket.on("comments", (data) => setCommentList(data));
  }, []);

  // ... after this

  return (
    
      {/* ... rest of the code */}

      
        Existing Comments
        {/* Add the following code */}
        {commentList.map((comment) => (
          
            
              {comment.text} by {comment.name}
            
          
        ))}
      
      {/* ... rest of the code */}
    
  );
};

Finally add this code to load the comments when the page is loaded

Copied ✔


useEffect(() => {
socket.emit("fetchComments", { category, id });
}, [category, id]);

So finally Comments.js looks like this:

Copied ✔


import React, { useEffect, useState } from "react";
import socketIO from "socket.io-client";
import { useParams } from "react-router-dom";

const socket = socketIO.connect("http://localhost:4000");

const Comments = () => {
  const { category, id } = useParams();
  const [comment, setComment] = useState("");
  const [commentList, setCommentList] = useState([]);

  useEffect(() => {
    socket.emit("fetchComments", { category, id });
  }, [category, id]);

  useEffect(() => {
    socket.on("comments", (data) => setCommentList(data));
  }, []);

  const addComment = (e) => {
    e.preventDefault();

    socket.emit("addComment", {
      comment,
      category,
      id,
      userId: localStorage.getItem("userId"),
    });

    setComment("");
  };

  return (
    
      
        Add a comment

         setComment(e.target.value)}
          rows={5}
          id="comment"
          name="comment"
          required
        >

        
      

      
        Existing Comments
        {commentList.map((comment) => (
          
            
              {comment.text} by{" "}
              {comment.name}
            
          
        ))}
        
      
    
  );
};

export default Comments;

Finally, add the listener for the same in server.js:

Copied ✔


socket.on("fetchComments", (data) => {
  const { category, id } = data;
  const taskItems = tasks[category].items;
  for (let i = 0; i < taskItems.length; i++) {
    if (taskItems[i].id === id) {
      socket.emit("comments", taskItems[i].comments);
    }
  }
});

Implementing Suprsend Notifications:

SuprSend is a notification infrastructure as a service platform for easily creating, managing and delivering notifications to your end users. SuprSend has all the features set which enable you to send notifications in a reliable and scalable manner, as well as take care of end-user experience, thereby eliminating the need to build any notification service in-house.

Firstly create an account on Suprsend.

Install SuprSend Node.js SDK in the backend

Copied ✔


npm install @suprsend/node-sdk

# to upgrade to latest SDK version
npm install @suprsend/node-sdk@latest

Initialize the SDK in server.js

Copied ✔


const {Suprsend} = require("@suprsend/node-sdk");

		// Initialize SDK
		const supr_client = new Suprsend("WORKSPACE KEY", "WORKSPACE SECRET");

Replace WORKSPACE KEY and WORKSPACE SECRET with your workspace values. You will get both the tokens from Suprsend dashboard (Settings page -> "API keys" section)

Create a New User. To create a new user or to update the profile of an existing user, you'll have to first instantiate the user object. Call supr_client.user.get_instance to instantiate user object.

Copied ✔


const distinct_id = "__uniq_user_id__"  // Unique id of user in your application.
const user = supr_client.user.get_instance(distinct_id) // Instantiate User profile

Add the User Channels. Use user.add_* method(s) to add user channels in a profile

Copied ✔


user.add_email(`${distinct_id}`);


/* For adding slack using email of user and access token of slack app,do this: */
    user.add_slack(
{

  "email": `${distinct_id}`,
    "Access_token": process.env.ACCESS_TOKEN
}
      )

/* OR to add the incoming webhook for sending notification to slack channel, do this: */

      user.add_slack(
        {
          "incoming_webhook": {
            "url": process.env.INCOMING_WEBHOOK
            
          }
        })
  // After setting the channel details on user-instance, call save()
		const response1 = user.save() //save() returns promise

When you call user.save(), the SDK internally makes an HTTP call to SuprSend Platform to register this request, and you'll immediately receive a response indicating the acceptance / failure status.

Copied ✔


// Response structure
{
	"success": true, // if true, request was accepted.
	"status": "success",
	"status_code": 202, // http status code
	"message": "OK"
}

{
	"success": false, // error will be present in message
	"status": "fail",
	"status_code": 500, // http status code
	"message": "error message"
}

NOTE : For including slack notifications, you should use OAuth method to grant access to your slack workspace. A good way would be to use Slack Button(refer to docs : https://api.slack.com/docs/slack-button ) which gives incoming webhooks, slash commands and bot users wrapped in OAuth.

Create a workflow on SuprSend platform. For Event based workflow trigger, you'll have to create the workflow on SuprSend Platform.

Once the workflow is created, Add an import and then you can pass the Event name defined in workflow configuration with the help of supr_client.track_event method. Variables added in the template should be passed as event properties.

Copied ✔


const express = require("express");
const app = express();
const cors = require("cors");
const http = require("http").Server(app);
const PORT = 4000;
const mongoose = require("mongoose");
const dotenv = require("dotenv");
const { Suprsend } = require("@suprsend/node-sdk");
const { Event } = require("@suprsend/node-sdk");

// Rest of the code

const event = new Event(distinct_id, event_name, properties);
// Track event
const response = supr_client.track_event(event);
response.then((res) => console.log("response", res));

Event naming guidelines :

When you create an Event or a property, please ensure that the Event Name or Property Name does not start with $ or ss_, as we have reserved these symbols for our internal events and property names.

When you call supr_client.track_event, the SDK internally makes an HTTP call to SuprSend Platform to register this request, and you'll immediately receive a response indicating the acceptance status.

Copied ✔


{
    "success": true, // if true, request was accepted.
    "status": "success",
    "status_code": 202,  // http status code
    "message": "Accepted",
}

{
    "success": false, // error will be present in message
    "status": "fail",
    "status": 400, // http status code
    "message": "error message",
}

The below image demonstrates a demo notification sent upon creating a task in Kanban Board to slack

You can access the project's Github repo from here: GitHub - SuprSend/KanBan

Wrapping Up

Throughout the tutorial, we covered the essential steps of designing and building a highly interactive and responsive Kanban board. From setting up the development environment to implementing the board's core features, developers now have a solid foundation to create their own customized Kanban boards tailored to their specific project requirements.

Additionally, by integrating Suprsend's notification capabilities, teams can ensure that all stakeholders stay informed about important updates and changes happening on the Kanban board in real-time. This not only fosters seamless communication but also enables swift decision-making and rapid response to project developments.

Written by:

Sanjeev Kumar

Engineering, SuprSend

How to Create a Drag-and-Drop Kanban Board Using React, Node.js and Socket.io (& SuprSend Notifications)?

Pending Tasks

Ongoing Tasks

Completed Tasks

Existing Comments

{task[1].title} Tasks

{task[1].title} tasks

Existing Comments

Existing Comments

Existing Comments

Implement a powerful stack for your notifications

Get 10% OFF on your next order