DEV Community: Tushar Tushar

Using Dnd-Kit Basics

Tushar Tushar — Sat, 31 May 2025 18:58:47 +0000

if you want to create draggable/droppable elements on your website one of the options available is Dnd-kit which is a modern drag-and-drop toolkit for React. Using it is fairly very easy, unless you end up on youtube where for some reason every one wants to make kanban boards with it and suddenly instead of learning how to use Dnd-kit now you are also dealing with the added complexity of a kanban board. So, I am just going to do a very simple and straightforward setup for Dnd-kit just going over how to use it and what we are doing.

Don't want to read just want the code? Here is the 🔗 git link

Let's Breakdown our steps

🛠️ Create a React Project with Vite.
🪄 Adding Dnd-context
👀 Do some very Basic page setup like giving the page full height/width etc.
🖱️ Making a Draggable Item.
📦 Making a Droppable Item.
🔨 Import both the elements.
🧠 Telling Dnd what to do on starting and ending the drag.
🔜 Playing with DragOverlay to have smooth transitions (coming soon, stay tuned).

1. 🛠️ Creating project with vite

Use npm create vite@latest . -- --template react
if you are already in the folder where you wish to create or try or
npm create vite@latest my-proj -- --template react which will create a directory with name my-proj.
In the last command the . denoted that we want to create this react project in the directory we are in.

run npm install to install the required node packages.

Remove everything from the App.jsx it should look something like this.

import "./App.css";
function App() {
  return <>Hello</>;
}

export default App;

This will give us a clean slate to work with.
I have kept the default styles from the template because I am lazy.

2. 🪄 Installing Dnd-kit and wrapping in DndContext

We can use npm install @dnd-kit/core to install Dnd-kit to our project.

once installed we can wrap our webapp in DndContext which is like the central controller for Dnd-kit, and without this drag and drop will not work Also add some containers to keep our items in the future. Our App.jsx will look something like this.

import { DndContext } from "@dnd-kit/core";
import "./App.css";

function App() {
  return (
    <>
      <DndContext>
        <div className="webapp">
          <div className="droppable-container"></div>

          <div className="draggable-container"></div>
        </div>
      </DndContext>
    </>
  );
}

export default App;

3. 👀 Basic Page Setup 👀

I just created 2 containers one will hold all the draggable items initially and all elements will be dropped in to the droppable container which we will change soon. This is how the App.css looks like after the changes.

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}
#root {
  height: 100%;
  width: 100%;
}

.webapp {
  height: 100%;
  width: 100%;
  display: flex;
  gap: 5%;
  justify-content: space-evenly;
  align-items: center;
}
.droppable-container {
  outline: green solid;
  width: 40%;
  height: 80%;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: space-evenly;
}

.draggable-container {
  outline: solid red;
  width: 40%;
  height: 80%;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: space-evenly;

}

.drag-item {
  background-color: antiquewhite;
  height: 100px;
  width: 100px;
  cursor: pointer;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

4. 🖱️ Let's Create a simple Draggable component

Create a components directory in src and a 'draggableItem' directory within this directory.
Then create a DraggableItem.jsx file.
As mentioned most of the heavy lifting gets done by Dnd-kit so following the documentation the Draggable Item will look something like this.

import { useDraggable } from "@dnd-kit/core";
import { CSS } from "@dnd-kit/utilities";
const Draggable = (props) => {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: props.id,
  });
  const style = {
    transform: CSS.Translate.toString(transform),
  };

  return (
    <div
      className="drag-item"
      style={style}
      ref={setNodeRef}
      {...listeners}
      {...attributes}
    >
      {props.children}
    </div>
  );
};

export default Draggable;

The props.id is the most important as it defines what element becomes draggable if you plan on having just one then you can hard assign the id in the component but if you are creating multiple then it is better to receive it from the parent.
and using const { attributes, listeners, setNodeRef, transform } = useDraggable({ id: props.id, }); spreads all the needed stuff from Dnd-kit.

and this line const style = { transform: CSS.Translate.toString(transform), }; makes the element visually move on the screen.

and here we basically assign everything to our draggable container

return (
    <div
      className="drag-item"
      style={style}
      ref={setNodeRef}
      {...listeners}
      {...attributes}
    >
      {props.children}
    </div>
  );

props.children is basically everything that we will wrap under the Draggable component in the main file App.jsx

5. 📦 Let's create a Droppable component

Once done the Droppable.jsx should look something like this.

import { useDroppable } from "@dnd-kit/core";
const Droppable = (props) => {
  const { isOver, setNodeRef } = useDroppable({
    id: "drop-container",
  });
  return (
    <div className="droppable-container" ref={setNodeRef}>     
      {props.children}    
    </div>
  );
};

export default Droppable;

Here we only want a single droppable container so we can assign the id directly here. and the isOver tells DndContext if an element is over this droppable container, and once we drop the item on this container we use props.children to render all the dropped items in the droppable container.

6. 🔨 Let's import both the elements to `App.jsx`

I have also created an array of some items so we can have multiple draggable items and then we can map over them to create the draggable items we need unique id's for all so we will use the index to create these Draggable items.

import { DndContext } from "@dnd-kit/core";
import "./App.css";
import Droppable from "./components/droppableItem/Droppable";
import Draggable from "./components/draggableItem/Draggable";
import { useState } from "react";
function App() {
  const [items, setItems] = useState(["Cat", "Dog", "Mansion", "Car", "Lake"]);

  return (
  <>
      <DndContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
        <div className="webapp">
            <Droppable>
              {droppedItems.map((id) => (
                <Draggable key={id} id={id}>
                  {`${id}`}
                </Draggable>
              ))}
            </Droppable>
          <div className="draggable-container">
            {items.map((id) => (
              <Draggable key={id} id={id}>
                {`${id}`}
              </Draggable>
            ))}
          </div>
        </div>
      </DndContext>
    </>
  );
}

export default App;

We can also make some styling changes to the Draggable container so that all elements are spread out properly

.draggable-container {
  outline: solid red;
  width: 40%;
  height: 80%;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: space-evenly;
}

and also style the drag Items.

.drag-item {
  background-color: antiquewhite;
  height: 100px;
  width: 100px;
  cursor: pointer;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

At this point you should be able to at least drag around your items.
But you won't be able to drop them anymore, that is because we still have not configured the Drop logic. let's get to it.

7. 🧠 Telling DND what to do on Drag start and End.

To do so we will create 2 functions onDragStart and onDragEnd and create some state variables const [droppedItems, setDroppedItems] = useState([]) This will hold the list of all the elements dropped in the container. const [activeId, setActiveId] = useState(null) and this will keep track of what element we are dragging. and set them in the dndContext.

  const [droppedItems, setDroppedItems] = useState([])
  const [activeId, setActiveId] = useState(null)

<DndContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
first on dragStart we need to set the activeId to the element being dragged.

  const onDragStart = (event) =>{
    setActiveId(event.active.id)
  }

And when the drag ends
We need to check if it was dropped over our droppable container or not and if it was then check if that item already existed in there or not we do not want to duplicate the same element, then we need to remove the dragged element from the items list to the droppedItems list and remember to remove the activeId.
Something like this,

  const onDragEnd = (event) => {
    const {active, over} = event
    if (!over) return
    if(over.id ==='drop-container'){
        setItems(items => items.filter(item => item!= activeId))
        setDroppedItems([activeId, ...droppedItems])
    }
    setActiveId(null)
  }

After this you should be able to drop your elements to the droppable container, but you cannot remove them from it, but it is really easy to do so as well.

This time:

We will check if the item was dropped over nothing (outside the container).
Check if that element was inside the droppable container before the drag or not.
if not, do nothing element was out stays out
if yes, remove from the droppedItems list and add back to the items list.

And now your dragEnd function should look something like this.

  const onDragEnd = (event) => {
    const {active, over} = event
    if (!over){
      if (droppedItems.includes(activeId)){
        setDroppedItems((items) => items.filter((item) => item != activeId));
        setItems([...items, activeId])
      }
      setActiveId(null)
      return
    }
    if(over.id ==='drop-container' && !droppedItems.includes(activeId)){
        setItems(items => items.filter(item => item!= activeId))
        setDroppedItems([activeId, ...droppedItems])
    }
    setActiveId(null)
  }

and you should be able to drag and drop stuff in the container and outside the container to remove it.

8.🧠 Playing with DragOverlay to have smooth transitions

We can also animate the drag and drop of the elements with the help of dragOverlay which is also very easy. I will be creating a new article for the same soon, so stay tuned for that :)

Feel free to drop a comment in case something seems wrong or you are unable to replicate the same functionality, would love to help 😄.
In the end here is all the code and the 🔗 git link

App.jsx

import { DndContext } from "@dnd-kit/core";
import "./App.css";
import Droppable from "./components/droppableItem/Droppable";
import Draggable from "./components/draggableItem/Draggable";
import { useState } from "react";
function App() {
  const [items, setItems] = useState(["Cat", "Dog", "Mansion", "Car", "Lake"]);
  const [droppedItems, setDroppedItems] = useState([])
  const [activeId, setActiveId] = useState(null)

  const onDragStart = (event) =>{
    setActiveId(event.active.id)
  }

  const onDragEnd = (event) => {
    const {active, over} = event
    if (!over){
      if (droppedItems.includes(activeId)){
        setDroppedItems((items) => items.filter((item) => item != activeId));
        setItems([...items, activeId])
      }
      setActiveId(null)
      return
    }
    if(over.id ==='drop-container' && !droppedItems.includes(activeId)){
        setItems(items => items.filter(item => item!= activeId))
        setDroppedItems([activeId, ...droppedItems])
    }
    setActiveId(null)
  }

  return (
    <>
      <DndContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
        <div className="webapp">
            <Droppable>
              {droppedItems.map((id) => (
                <Draggable key={id} id={id}>
                  {`${id}`}
                </Draggable>
              ))}
            </Droppable>
          <div className="draggable-container">
            {items.map((id) => (
              <Draggable key={id} id={id}>
                {`${id}`}
              </Draggable>
            ))}
          </div>
        </div>
      </DndContext>
    </>
  );
}

export default App;

Droppable.jsx

import { useDroppable } from "@dnd-kit/core";
const Droppable = (props) => {
  const { isOver, setNodeRef } = useDroppable({
    id: "drop-container",
  });
  return (
    <div className="droppable-container" ref={setNodeRef}>

      {props.children}

    </div>
  );
};

export default Droppable;

Draggable.jsx

import { useDraggable } from "@dnd-kit/core";
import { CSS } from "@dnd-kit/utilities";
const Draggable = (props) => {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: props.id,
  });
  const style = {
    transform: CSS.Translate.toString(transform),
  };

  return (
    <div
      className="drag-item"
      style={style}
      ref={setNodeRef}
      {...listeners}
      {...attributes}
    >
      {props.children}
    </div>
  );
};

export default Draggable;

App.css

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}
#root {
  height: 100%;
  width: 100%;
}

.webapp {
  height: 100%;
  width: 100%;
  display: flex;
  gap: 5%;
  justify-content: space-evenly;
  align-items: center;
}
.droppable-container {
  outline: green solid;
  width: 40%;
  height: 80%;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: space-evenly;
}

.draggable-container {
  outline: solid red;
  width: 40%;
  height: 80%;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: space-evenly;

}

.drag-item {
  background-color: antiquewhite;
  height: 100px;
  width: 100px;
  cursor: pointer;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

Cover image taken from craiyon AI

Request Parameters getting set to favicon.ico on GET requests

Tushar Tushar — Tue, 04 Mar 2025 23:37:16 +0000

You’ve just deployed your first backend web app, ready to accept requests, and everything seems to be running smoothly. Then, out of nowhere, you get a notification that your web app has crashed. You check the error and see:
invalid input: "favicon.ico"

The term sounds familiar, but you’re sure you’ve never used anything like this in your backend. What is it?

Well, favicon stands for "favorite icon," and it’s the small icon that appears in your browser tab next to the page title. You’ve probably noticed it — it’s that little logo next to the website’s name in your browser. Yep, that’s the one!

Let me guess — you never set this up for your app because it was just a quick project to help you get familiar with HTTP, Node, or Express, or something similar. You might not even want a favicon, because, like me, you're just too lazy to bother with it 😅.

So, why did this happen?

Browsers automatically try to request /favicon.ico from the root directory to display the icon in the browser tab. When that request fails, your app crashes.

How can you fix it?

There are two ways:

The easy way: Catch the favicon request and send a No Content status. javascript

app.get('/favicon.ico', (req, res) => {
  res.status(204).end();
});

Or: Provide a favicon.ico file in the root directory of your app. Both methods will prevent the app from crashing.

Hacking Leetcode runtimes!!

Tushar Tushar — Mon, 24 Feb 2025 20:19:25 +0000

In my opinion it is way bigger achievement than actually solving that particular problem in the lowest time whoever did this, you my friend.. you have earned my respect!!

While working through a recent LeetCode problem after solving it I went on to check out the best solutions and other ways to solve the problem and I came across one really bright mind.
One of the solutions had a piece of code that reverse-engineered how LeetCode displays runtime results. Yep, someone actually figured out a way to modify the runtime display to always show 0 ms, regardless of the actual performance of the algorithm.
This code essentially manipulates the system and writes "0" into a file when the program exits, effectively "hiding" the real performance.
it uses a module called atexit i.e. "at exit" which then receives a function to register and unregistered cleanup functions, and then it takes a lambda function which opens the "display_runtime.txt" and writes 0 to it.

What is Express

Tushar Tushar — Sat, 18 Jan 2025 19:04:23 +0000

Express is a backend Framework which makes our job easier by providing us with most of the things that we need to quite often so we can use them rather than creating them again and again.

for example

Authentication
Setting up a server
Requests to other API’s

Setting up a Basic server with Express

Here is the code to set up a basic server with the help of Express

//Import Express
const express = require('express')
//Create an app instance with express
const app = express()

//Create a route for incoming requests
//(path. callback to respond)
app.get('/', (req, res) => res.send("Hello world"))

//Usually the port is defined in the Environment variables
//const PORT = process.env.PORT || 3000
const PORT = 3000

//Now the app is listening for requests for the defined PORT
app.listen(PORT, () =>{
    console.log('Now listening on PORT 3000')
})

If we make any changes we will have to restart the server again and again to avoid that we use the watch flag offered by node

So to run the app use:

node --watch app.js

Here is an example of a very basic Routing APP

Here is an example of a very basic routing APP, which takes the HTML views from the folder views.

const express = require("express");
const path = require("path");
const app = express();

app.get("/", (req, res) =>
  res.sendFile(path.join(__dirname, "views/index.html"))
);
app.get("/aboutme", (req, res) => {
  res.sendFile(path.join(__dirname, "views/about.html"));
});
app.get("/contact-me", (req, res) => {
  res.sendFile(path.join(__dirname, "views/contact-me.html"));
});

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "views/404.html"));
});

app.listen(3000, () => {
  console.log("The App is listening on PORT 3000 now. ");
  console.log(__dirname);
});

🌟 Automating API Calls with Azure and Power Automate

Tushar Tushar — Sun, 05 Jan 2025 05:15:54 +0000

I recently worked on an interesting project that required integrating with an API for data retrieval. The challenge? While Power Automate was perfect for automation, doesn’t support HMAC signing out of the box. But using the provider's library could help us avoid HMAC, but Power Automate cannot run scripts on its own.

Here’s how I solved it:

🔹 Created an Azure Function App to handle the API integration.
🔹 The Function App runs a Python function that processes HTTPS GET requests with API keys in the headers and then uses the provider’s library to fetch the required data.
🔹 To ensure security, I had to figure out how to use environment variables in the cloud function to securely store sensitive information like API keys.
🔹 Then, I integrated this with Power Automate to automate weekly queries to the Function App and send the fetched data via email.

This project was not only a solution to the problem but also an opportunity to:
💡 Learn and work with Azure Function Apps, diving deeper into cloud computing.
💡 Explore Power Automate for creating seamless workflows.
💡 Gain hands-on experience with securing cloud functions using environment variables to protect sensitive data.

I’m thrilled with how these tools came together to make the process efficient and scalable.

Have you faced a similar challenge or used Azure and Power Automate in your projects? I’d love to hear your thoughts and experiences!

Let me know if you would like me to maybe create an example app on how to do the same. :)

CloudComputing #PowerAutomate #Azure #Automation

Creating a Deepcopy of Linkedlist with random pointers

Tushar Tushar — Sun, 05 Jan 2025 01:37:47 +0000

While solving a Leetcode problem yesterday I came across this pretty cool problem which is fairly very different then most that I have solved. Here we have to create a deep copy of a linked list which also has random pointers which can point to any other random node in the linked list or None.
Feel free to have a try yourself here 138. Copy List with Random Pointer

A little weird problem here, firstly to clear some confusions, deep copy means a separate copy in the memory, basically if anything was to happen to the original list nothing would happed to the deep copy as that is a completely independent copy of the list.

So to make a deep copy we will have to make brand new nodes and use the relationships in the original linked list to be properly mapped to the new ones.

Coming to the random pointers, that means that every node in the linked list has a new variable apart from the usual value and next which is random which can be pointing to any random node in the linked list or None.

The best way to approach this problem is to first create a copy of all the nodes in the original lineked list and then use the original linked list to create all the connections or basically assign all the pointers.

Now the first thing that might come to mind is just creating copies of the node using the Vals, of the original list, but how do you keep track of them, as without the pointers to the next node they might just get lost in the memories, we need to hold them somewhere.

Also, to assign the pointer values to the new linked list we will need to access the values from the original linkedlist, and as we know finding a node in linked list takes O(n) which is not the best. So, what the best solution in this case might be is to use a hash map, as that can help us store our new nodes without pointers as well as we can map the old nodes to the new ones while having a constant O(1) time to look up values or nodes in this case.

here goes nothing:

#there already exists a Node class that only takes `x` as the input to create a new node.
#but also has 'random' and 'next' pointers to set.

def deepCopy(head):
    hmap = {}
    dummy_pointer = head

    while dummy_pointer:
        new_node = Node(dummy_pointer.val)    # In the origianl Llist, the x is represented as val
        hmap[dummy_pointer] = new_node
        dummy_pointer = dummy_pointer.next

    dummy_pointer = head


    while dummy_pointer:
        curr_new_node = hmap[dummy_pointer]

        curr_new_node.next = hmap[dummy_pointer.next] if dummy_pointer.next else None
        curr_new_node.random = hmap[dummy_pointer.random] if dummy_pointer.random else None
        dummy_pointer = dummy_pointer.next


    return hmap[head]

Now this might look like all, but there is an edge case that we also need to take care of, which is what if the original linkedlist is empty. Pretty straightforward just have a conditional in the beginning to check if the incoming Llist is empty if it is just return None.

#there already exists a Node class that only takes `x` as the input to create a new node.
#but also has 'random' and 'next' pointers to set.

def deepCopy(head):
    if head == None: return None
    hmap = {}
    dummy_pointer = head

    while dummy_pointer:
        new_node = Node(dummy_pointer.val)    # In the origianl Llist, the x is represented as val
        hmap[dummy_pointer] = new_node
        dummy_pointer = dummy_pointer.next

    dummy_pointer = head


    while dummy_pointer:
        curr_new_node = hmap[dummy_pointer]

        curr_new_node.next = hmap[dummy_pointer.next] if dummy_pointer.next else None
        curr_new_node.random = hmap[dummy_pointer.random] if dummy_pointer.random else None
        dummy_pointer = dummy_pointer.next


    return hmap[head]

Floyd’s Cyclic Algorithm

Tushar Tushar — Thu, 02 Jan 2025 16:20:56 +0000

This algorithm is used to find cycles in lists.

The Idea is if we leave two pointers on the same list. if there are no loops in the list the fast loop will run into the end of the list or run into None.

But if there are any loops present in the loop the two pointers are bound to run into each other.

this will give us a truth or False value if there exists any loops in the list.

To take it a step further to see where the loop starts there is some math involved.

Given that we find the point where both the pointers meet, we can start 2 more pointer one will start from the point where the previous 2 pointers met and the other one starts at the beginning of the list and as per some maths attached in the picture next these 2 pointers are bound to meet at the beginning of the loop.

One question you can solve using this algorithm is problem

141. Linked List Cycle

# Definition for singly-linked list.
# class ListNode:
#     def __init__(self, x):
#         self.val = x
#         self.next = None

class Solution:
    def hasCycle(self, head: Optional[ListNode]) -> bool:

        slow = head
        fast = head

        while fast and fast.next:
            slow = slow.next
            fast = fast.next.next
            if slow == fast:
                return True

        return False

Feel Free to drop in any mistakes or any additions :)