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
Creating the folder structure
Create the project folder containing two sub-folders named client and server
Setting up the Client part
Navigate into the client folder via your terminal and create a new React.js project.
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.
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.
Add the following code which contains css for the app into index.css file
Setting up the server
Navigate into the server folder and create a package.json file.
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.
Create an index.js file – the entry point to the web server.
Setting up the server
Set up a simple Node.js server using Express.js.
Import the HTTP and the CORS library to allow data transfer between the client and the server domains.
Creating schemas and models:
Create Model using Mongoose in a file named models.js:
We can similarly create models for tasks,boards comments.
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.
Next, add Socket.io to the project to create a real-time connection. Before the app.get()block, copy the code below.
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.
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.
You can now run the server with Nodemon by using the command below.
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:
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.
Modify the App.js file to setup the routes.
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:
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.
We'll divide the layout into 2 components namely: AddTask.js – the form input section, and TaskWindow.js – the section containing the tasks.
Code for Task.js will look something like this
AddTask.js looks something like this:
Code for TaskWindow is as follows
Comments page will have some code like this:
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).
In server/index.js file,create an object containing all the dummy data for each task category.
Now, let's fetch the tasks in TaskWindow.js file.
The DragDropContext accepts a prop on DragEnd, which fires immediately after dragging an element.
Now, create the taskDragged event's listener in server
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:
Adding a task
For adding a task, we will use the given code
We'll have to include the listener for the same in server
Finalizing the Comments Page
Now we'll finish the comments page.
Again, we'll add the listener in server.js
Also, we need to retreive all the comments which are already present.
Finally add this code to load the comments when the page is loaded
So finally Comments.js looks like this:
Finally, add the listener for the same in server.js:
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
Initialize the SDK in server.js
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.
Add the User Channels. Use user.add_* method(s) to add user channels in a profile
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.
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.
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.
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
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.