My Blog

Post List

Hey there, thanks for visiting this section. I express myself here on topics which interest me.

HTML and CSS resources I use for my projects

Posted on 22nd December, 2022

This blog post is about the resources I use frequently for my web based projects.


Creating a drag and drop Kanban board in React

Posted on 24th December, 2022

Being able to move the elements through drag and drop is a cool feature we see in many web-based applications like to-do lists, file drag and drop and many more. In this post I'd be discussing a simple drag and drop implementation in React using React beautiful DnD - a popular React library used to achieve drag and drop feature in your applications.

First, we would create a simple React application using the create-react-app package and install react beautiful dnd package. I'd also be using Tailwind CSS in this but that would be completely optional. Create a folder called 'dnd-client', open this folder in the terminal.

create-react-app .
npm install react-router-dom
npm install react-beautiful-dnd

We would need some sample data to drag and drop. Let's create a folder named 'data', inside this folder create a JS file called 'items.js'. Put the following code in this file.

const initialData = {

    columns: {
        'Sunday': {
            id: 'Sunday',
            title: 'To do',
            taskIds: ['task-1', 'task-2', 'task-3', 'task-4', 'Source'],
        'Monday': {
            id: 'Monday',
            title: 'In progress',
            taskIds: ['task-5', 'task-6'],
        'Tuesday': {
            id: 'Tuesday',
            title: 'Active',
            taskIds: ['task-7', 'task-8'],
        'Wednesday': {
            id: 'Wednesday',
            title: 'More',
            taskIds: [],
        'Thursday': {
            id: 'Thursday',
            title: 'Bark More',
            taskIds: [],
        'Friday': {
            id: 'Friday',
            title: 'Good Friday',
            taskIds: [],
        'Saturday': {
            id: 'Saturday',
            title: 'Party',
            taskIds: [],
    // facilitate the ordering of columns
    columnOrder: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],

export default initialData;

Go to the 'App.js' file and initialize routing for this app, just some housekeeping stuff before we get into the good part.