DEV Community: Swarup Mahato

Hacker Using Metasploit and Nmap for Offensive Security in 2025

Swarup Mahato — Fri, 27 Jun 2025 09:24:28 +0000

Boost Your Cyber Arsenal: 100 Must-Have Linux Security Tools for 2025

Take your offensive security game to the next level with Swarup Mahato’s expertly curated guide of 100 essential Linux tools — trusted by ethical hackers, red teamers, and penetration testers worldwide.

This powerful toolkit includes:

🔹 Core Pentesting Tools: Metasploit, Nmap, Wireshark 🔹 Web App Testing Tools: sqlmap, Burp Suite, Nikto 🔹 Wireless Attack Tools: Aircrack-ng, Kismet 🔹 Digital Forensics Tools: Volatility, Sleuth Kit 🔹 Cloud Infrastructure Tools: Docker, Kubernetes, Terraform

Each tool comes with a brief, actionable description to ensure fast deployment and maximum impact during engagements.

🔐 Whether you're a student, security researcher, bug bounty hunter, or part of a red team—bookmark this list to build, upgrade, or audit your hacking toolkit for success in 2025 and beyond.

Build an awesome developer portfolio website.

Swarup Mahato — Tue, 10 Jun 2025 07:36:07 +0000

As a software developer, it's important to have a robust portfolio website that can display our abilities and experiences. To assist other developers, I have designed a portfolio website using Next, Tailwind CSS, and EmailJS. In this article, I will provide a step-by-step guide on the setup process, along with the GitHub link.

Here is the live preview:
Live preview url

STEP 01:
Clone the Repository using GitHub link and change the directory to the developer-portfolio.

git clone https://github.com/swarupinfotech/developer-portfolio.git
cd developer-portfolio

STEP 02:
Now install all packages using npm or yarn.

npm install
# or
yarn

After installation, all packages, Now change all data on utils/data/* according to you. For example:

export const personalData = {
  name: "Swarup Mahato",
  profile: '/profile.png',
  designation: "Software Developer",
  description: "My name is Swarup Mahato. I am a professional and enthusiastic programmer in my daily life. I am a quick learner with a self-learning attitude. I love to learn and explore new technologies and am passionate about problem-solving. I love almost all the stacks of web application development and love to make the web more open to the world. My core skill is based on JavaScript and I love to do most of the things using JavaScript. I am available for any kind of job opportunity that suits my skills and interests.",
  email: 'info@swarupinfotech.in',
  phone: '+91 9142922542',
  address: 'Mango Jamshedpur, Jharkhand 831012 ',
  github: 'https://github.com/swarupinfotech',
  facebook: 'https://www.facebook.com/profile.php?id=100069856215966',
  linkedIn: 'https://www.linkedin.com/in/sarup-m-1a1372288/',
  twitter: 'https://x.com/SwarupInfotech',
  stackOverflow: 'https://stackoverflow.com/users/22920700/swarup-infotech',
  leetcode: "https://leetcode.com/u/lL3NvWLd4u/",
  devUsername: "swarupinfotech1",
  resume: "#"
};

The devusername properties replace it with your dev.to username and it will fetch all blogs from your dev.to website.

STEP 03:
Now we will make a .env file and set up our Email.JS credential in a .env file. I am using EmailJs in this project for the user to send mail to me and It's free. The .env file will be the following:

NEXT_PUBLIC_EMAILJS_SERVICE_ID =
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID =
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY =

First of all, go to Emailjs.com and sign up for an account.

Make a email service using Gmail and take the Service ID and add it .env file as REACT_APP_YOUR_SERVICE_ID value.

Then make a Email template and take Template ID from the template setting and use it .env.

Then go to Account and take Public Key and use it in .env.

STEP 04:
Now the portfolio website is ready for the run. You can run it using npm or yarn.

npm run dev
# or
yarn dev

If you like the portfolio project Please give it a star on the GitHub Repository.
You can connect with me on Linkedin: https://www.linkedin.com/in/sarup-m-1a1372288/

Build an awesome GitHub developer portfolio.

Swarup Mahato — Tue, 10 Jun 2025 06:49:44 +0000

In the software development world, it's crucial to effectively present your work alongside the code you write. A portfolio website is an excellent way for developers to showcase their skills, projects, and contributions. One innovative way to enhance your portfolio is by integrating GitHub statistics, which can provide real-time insights into your coding activity and contributions.

To assist other developers in achieving this, I have created a new website from scratch that highlights your GitHub works. The website is built using NextJS and Tailwind CSS, and it fetches all data from your GitHub profile and work.

This article will guide you through the setup process step by step, and it will also provide you with the GitHub link.

Here is the live preview: Live preview url

STEP 01:

Clone the Repository using GitHub link and change the directory to the github-portfolio.

git clone https://github.com/swarupinfotech/github-dashboard.git
cd github-dashboard

STEP 02:

Now install all packages using npm or yarn.

npm install
# or
yarn

After installation, all packages, Now change all data on data/user-data.js according to you. For example:

export const userData = {
  githubUser: 'swarupinfotech',
  devUsername: "swarupinfotech1",
  github: 'https://github.com/swarupinfotech',
  facebook: 'https://www.facebook.com/profile.php?id=100069856215966',
  linkedIn: 'https://www.linkedin.com/in/sarup-m-1a1372288/',
  twitter: 'https://x.com/SwarupInfotech',
  stackOverflow: 'https://stackoverflow.com/users/22920700/swarup-infotech',
  leetcode: "https://leetcode.com/u/lL3NvWLd4u/",
  resume: "#",
  skills: ['React', 'NextJS', 'Redux', 'Express', 'NestJS', 'MySql', 'MongoDB', 'Postgres', 'Docker', 'AWS'],
  timezone: '+6'
};

STEP 03:

If you want to use Google Analytics, Please create a new .env file from the .env.example file and provide the value. The .env file will be the following:

NEXT_PUBLIC_GTM = ""

STEP 04:

Now the GitHub portfolio website is ready for the run. You can run it using npm or yarn

npm run dev
# or
yarn dev

If you like this GitHub portfolio project you can consider giving it a star on the GitHub Repository.

You can connect with me on Linkedin: https://www.linkedin.com/in/sarup-m-1a1372288/

Disclaimer: In this repository, I have used some open-source APIs. All credits go to the owners of those repositories.

Scop in Javascript with example

Swarup Mahato — Mon, 09 Jun 2025 07:58:04 +0000

avaScript is a powerful and versatile programming language that is widely used for web development. One of the key concepts in JavaScript is scope, which refers to the accessibility of variables, functions, and objects within a program. In this blog post, we will explain the different types of scope in JavaScript, including global scope, local scope, and function scope, and provide examples to help you understand how they work.

Global scope

Global scope in JavaScript refers to variables, functions, and objects that can be accessed from anywhere within a program. These variables, functions, and objects are defined outside of any function or block of code.
For example, consider the following code:

let globalVariable = "Hello, World!";

function myFunction() {
  console.log(globalVariable); // prints "Hello, World!"
}

console.log(globalVariable); // prints "Hello, World!"

In this example, the variable globalVariable is declared outside of any function or block of code, making it accessible from anywhere within the program. Both the myFunction function and the console.log statement outside of the function are able to access and print the value of globalVariable.

Local scope

Local scope in JavaScript refers to variables, functions, and objects that can only be accessed within a specific block of code. These variables, functions, and objects are defined within a block of code, such as a if statement or a for loop.
For example, consider the following code:

if (true) {
  let localVariable = "Hello, World!";
  console.log(localVariable); // prints "Hello, World!"
}

console.log(localVariable); // throws an error, localVariable is not defined

In this example, the variable localVariable is defined within the if statement, making it only accessible within that block of code. The console.log statement within the if statement is able to access and print the value of localVariable, but the console.log statement outside of the ifstatement throws an error because localVariable is not defined in the global scope.

Function scope

Function scope in JavaScript refers to variables, functions, and objects that can only be accessed within a specific function. These variables, functions, and objects are defined within a function, and are not accessible outside of that function.
For example, consider the following code:

function myFunction() {
  let functionVariable = "Hello, World!";
  console.log(functionVariable); // prints "Hello, World!"
}

console.log(functionVariable); // throws an error, functionVariable is not defined

In this example, the variable functionVariable is defined within the myFunction function, making it only accessible within that function. The console.log statement within the function is able to access and print the value of functionVariable, but the console.log statement outside of the function throws an error because functionVariable is not defined in the global or local scope.

In conclusion, understanding the concept of scope in JavaScript is essential for writing clean, efficient, and maintainable code. There are three types of scope in JavaScript: global scope, local scope, and function scope. Global scope refers to variables, functions, and objects that can be accessed from anywhere within a program, local scope refers to variables, functions, and objects that can only be accessed within a specific block of code, and function scope refers to variables, functions, and objects that

Scop in Javascript.

Swarup Mahato — Mon, 09 Jun 2025 07:49:15 +0000

JavaScript, renowned for its versatility, stands as a pivotal language in the realm of web development. Core to its essence lies the concept of scope, delineating the reach of variables, functions, and objects within a codebase. In this discourse, we delve into the nuanced dimensions of scope in JavaScript, encapsulating global scope, local scope, and function scope, complemented by illustrative examples to illuminate their workings.

Global Scope

Global scope encompasses variables, functions, and objects accessible from any part of a program, having their origins outside any encapsulating function or code block. Take, for instance, the following snippet:

 let globalVariable = "Hello, World!";

function myFunction() {
  console.log(globalVariable); // Output: "Hello, World!"
}

console.log(globalVariable); // Output: "Hello, World!"

Here, globalVariable is globally defined, thus accessible both within myFunction and beyond, exemplifying the unrestricted nature of global scope.

Local Scope

Contrarily, local scope confines variables, functions, and objects to specific code blocks, like an if statement or a for loop. Witness this in action:

if (true) {
  let localVariable = "Hello, World!";
  console.log(localVariable); // Output: "Hello, World!"
}

console.log(localVariable); // Throws an error: localVariable is not defined

In this scenario, localVariable finds existence solely within the confines of the if statement, inaccessible beyond its territorial borders.

Function Scope

Function scope relegates variables, functions, and objects to the confines of a particular function, rendering them inaccessible outside its precincts. Behold:

function myFunction() {
  let functionVariable = "Hello, World!";
  console.log(functionVariable); // Output: "Hello, World!"
}

console.log(functionVariable); // Throws an error: functionVariable is not defined

Here, functionVariable finds sanctuary solely within myFunction, beyond the grasp of external scopes, delineating the essence of function scope.

In summation, mastery of scope in JavaScript stands as a cornerstone for crafting elegant, effective, and maintainable codebases. Global scope affords ubiquitous access, local scope offers compartmentalization within code blocks, and function scope provides encapsulation within functions, collectively weaving the intricate fabric of JavaScript's scoping paradigm.

Asynchronous programming in Javascript

Swarup Mahato — Mon, 09 Jun 2025 07:26:08 +0000

JavaScript, being a single-threaded language, can only process one task at a time. This can result in long wait times for complex tasks, as the script will be blocked from executing any other tasks until it has been completed. To tackle this, JavaScript offers asynchronous programming, which allows the script to continue executing other tasks while it waits for an asynchronous task to complete. In this blog, we’ll explore the basics of asynchronous programming in JavaScript and how it can be achieved through the use of callback functions, promises, and async/await.

Callback Functions

A callback function is a function that is passed as an argument to another function and is executed after the main function has been completed. Callbacks are used in asynchronous programming to wait for a task to complete before executing the next step.

For example, consider the following code:

function slowTask(callback) {
  setTimeout(() => {
    console.log("Slow task completed.");
    callback();
  }, 1000);
}

function runProgram() {
  console.log("Program started.");
  slowTask(() => {
    console.log("Callback function executed.");
  });
  console.log("Program ended.");
}

runProgram();

In this example, the slowTask function takes a callback as an argument. The slowTask function uses setTimeout to delay the execution of a task for one second. The runProgram function calls slowTask and passes a callback function as an argument. The runProgram function also logs "Program started" and "Program ended". When the slowTask function has been completed, it logs "Slow task completed" and executes the callback function, which logs "Callback function executed".
The output will be:

Program started.
Program ended.
Slow task completed.
Callback function executed.

Promises

Promises are a more modern approach to asynchronous programming in JavaScript. A promise represents the result of an asynchronous operation and can be in one of three states: pending, fulfilled, or rejected. A promise can be created using the Promise constructor, and its state can be determined using the then and catch methods.

For example:

const slowTask = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Slow task completed.");
  }, 1000);
});

function runProgram() {
  console.log("Program started.");
  slowTask
    .then((result) => {
      console.log(result);
    })
    .catch((error) => {
      console.error(error);
    });
  console.log("Program ended.");
}

runProgram();

In this example, slowTask is a promise that is resolved after one second with the result "Slow task completed.". The runProgram function calls slowTask and uses the then method to log the result when the promise is fulfilled.
The output will be:

Program started.
Program ended.
Slow task completed.

Async/Await

Async/await is the latest and most readable way to handle asynchronous operations in JavaScript. It allows developers to write asynchronous code that looks like synchronous code, making it easier to understand and maintain. The async keyword is used to declare an asynchronous function, and the await keyword is used to wait for a promise to be resolved.

Here is an example to demonstrate the use of async/await in JavaScript:

async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
}

fetchData()

;
In this example, the fetchData function is declared as asynchronous using the async keyword. The function uses fetch to retrieve data from an API, and await is used to wait for the fetch operation to complete. The resolved response is then transformed into a JSON object using response.json(). The awaitkeyword is used to wait for the JSON transformation to complete, and the final result is logged to the console.

It's important to note that the code within an asynchronous function will be executed asynchronously, but the code outside of the function will still be executed synchronously. Also, the await keyword can only be used within an asynchronous function.

In conclusion, asynchronous programming in JavaScript allows the script to continue executing other tasks while it waits for an asynchronous task to complete. Callback functions, promises, and async/await are three ways to achieve asynchronous programming in JavaScript. Callback functions are the simplest and most basic way to handle asynchronous operations, while promises offer a more modern and flexible approach. Async/await provides the most readable way to handle asynchronous operations and is the recommended method for modern JavaScript programming. Understanding asynchronous programming in JavaScript is important for creating efficient and responsive applications, and is a must-have skill for any JavaScript developer.

Scop in Javascript with example

Swarup Mahato — Sun, 08 Jun 2025 04:25:25 +0000

JavaScript is a powerful and versatile programming language that is widely used for web development. One of the key concepts in JavaScript is scope, which refers to the accessibility of variables, functions, and objects within a program. In this blog post, we will explain the different types of scope in JavaScript, including global scope, local scope, and function scope, and provide examples to help you understand how they work.

Global scope

let globalVariable = "Hello, World!";

function myFunction() {
  console.log(globalVariable); // prints "Hello, World!"
}

console.log(globalVariable); // prints "Hello, World!"

In this example, the variable globalVariableis declared outside of any function or block of code, making it accessible from anywhere within the program. Both the myFunction function and the console.log statement outside of the function are able to access and print the value ofglobalVariable.

Local scope

if (true) {
  let localVariable = "Hello, World!";
  console.log(localVariable); // prints "Hello, World!"
}

console.log(localVariable); // throws an error, localVariable is not defined

In this example, the variable localVariable is defined within the if statement, making it only accessible within that block of code. The console.logstatement within the if statement is able to access and print the value of localVariable, but the console.log statement outside of the ifstatement throws an error because localVariable is not defined in the global scope.

Function scope

function myFunction() {
  let functionVariable = "Hello, World!";
  console.log(functionVariable); // prints "Hello, World!"
}

console.log(functionVariable); // throws an error, functionVariable is not defined

In this example, the variable functionVariable is defined within the myFunction function, making it only accessible within that function. The console.log statement within the function is able to access and print the value of functionVariable, but the console.log statement outside of the function throws an error because functionVariable is not defined in the global or local scope.

How to create a Popover using React and Tailwind CSS

Swarup Mahato — Sun, 08 Jun 2025 04:11:39 +0000

Popover is a common UI element in web applications, providing a way to display additional information or options when interacting with a particular element. With React and TailwindCSS, most of the time developers use an npm library for the Popover or Popover. You know, when we use an npm library, it increases the project build sizes.
In this article, I will create a reusable Popover component using Tailwind CSS. We will use click and hover triggers for the Popover.

The Popover component:

// @flow strict
"use client"
import { useEffect, useRef, useState } from "react";

function ReactPopover({
  children,
  content,
  trigger = "click"
}) {
  const [show, setShow] = useState(false);
  const wrapperRef = useRef(null);

  const handleMouseOver = () => {
    if (trigger === "hover") {
      setShow(true);
    };
  };

  const handleMouseLeft = () => {
    if (trigger === "hover") {
      setShow(false);
    };
  };

  useEffect(() => {
    function handleClickOutside(event) {
      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
        setShow(false);
      }
    }

    if (show) {
      // Bind the event listener
      document.addEventListener("mousedown", handleClickOutside);
      return () => {
        // Unbind the event listener on clean up
        document.removeEventListener("mousedown", handleClickOutside);
      };
    }
  }, [show, wrapperRef]);

  return (
    <div
      ref={wrapperRef}
      onMouseEnter={handleMouseOver}
      onMouseLeave={handleMouseLeft}
      className="w-fit h-fit relative flex justify-center">
      <div
        onClick={() => setShow(!show)}
      >
        {children}
      </div>
      <div
        hidden={!show}
        className="min-w-fit w-[200px] h-fit absolute bottom-[100%] z-50 transition-all">
        <div className="rounded bg-white p-3 shadow-[10px_30px_150px_rgba(46,38,92,0.25)] mb-[10px]">
          {content}
        </div>
      </div>
    </div>
  );
};

export default ReactPopover;

In this component the trigger default value is clickand you can pass hover as an attribute. When you click outside of the Popover, the Popover will be closed.

Use the Popover component:

import ReactPopover from "@/components/common/react-popover";

const Page = () => {
  return (
    <div className="w-screen h-screen flex justify-center items-center gap-4">
      <ReactPopover
        content={
          <p>This Content Will be render in Popover.</p>
        }
      >
        <button className="bg-indigo-500 px-4 py-1.5 border rounded text-white">
          Click me
        </button>
      </ReactPopover>
      <ReactPopover
        trigger="hover"
        content={
          <p>This Content Will be render in Popover.</p>
        }
      >
        <button className="bg-indigo-500 px-4 py-1.5 border rounded text-white">
          Hover me
        </button>
      </ReactPopover>
    </div>
  );
};

export default Page;

GitHub and EC2 manual deployment with Deploy keys

Swarup Mahato — Sun, 08 Jun 2025 03:51:14 +0000

For those looking to quickly deploy a project, whether it’s a prototype or a solo endeavor, manual deployment with GitHub and AWS EC2 is a reliable and efficient method. Here’s a comprehensive guide to setting up your deployment using deploy keys.

Setting Up Your EC2 Instance

Begin by launching an on-demand EC2 instance on AWS. Access this instance via SSH, and use Git to clone or pull your repository. This setup will be similar to your local development environment, except you’ll need to configure environment variables specific to your server.

To ensure your server is secure, configure nginx with SSL certificates. This adds a layer of security and professionalism to your deployment.

Using GitHub Deploy Keys

Deploy keys provide a secure, read-only connection between your EC2 instance and your GitHub repository. Here’s how to set them up:

Step 1: Generate SSH Keys
First, generate an SSH key pair on your EC2 instance:

ssh-keygen -t ed25519 -f ~/.ssh/my_project_deploy_key -C "your_email@example.com"

Using ed25519 instead of the more common RSA provides better security. The -C flag is optional but useful if you plan to use the key for commit signing in addition to deployment.

Step 2: Add the Public Key to GitHub
In your GitHub repository, navigate to Settings > Deploy keys. Click Add Deploy Key, provide a descriptive title like "EC2 Deployment Key", and paste the contents of your public key file (~/.ssh/my_project_deploy_key.pub). For most deployment scenarios, you won’t need to enable write access.

Step 3: Configure SSH for Git
To allow your EC2 instance to access multiple repositories without using the default id_rsa key name, configure your SSH client:

vim ~/.ssh/config

Add the following entries to the file:

Host github.com-my_project
  HostName github.com
  IdentityFile ~/.ssh/my_project_deploy_key
  User git

Host github.com-other_project
  HostName github.com
  IdentityFile ~/.ssh/other_deploy_key
  User git

This configuration allows you to manage multiple repositories with different keys.

To clone your repository, use the configured host:

git clone git@github.com-my_project:your_github_org/your_repo.git

You can then use git pull as needed to update your project.

Improving Your Deployment Process

While this manual setup is quick and effective, it does have some limitations, such as downtime during updates. To minimize downtime, consider using a process manager like pm2, which supports zero-downtime restarts.

As your project grows, SSH-based manual deployments might become cumbersome. Automating your deployment process can save time and reduce errors. You can use GitHub webhooks to trigger automatic deployments or configure your server as a Git remote to push updates directly. This approach can streamline your workflow and enhance efficiency.

Conclusion

Deploying with GitHub and EC2 using deploy keys is a straightforward and effective way to manage your projects, especially for quick prototypes and solo projects. This method allows you to leverage the power of AWS and GitHub without the overhead of more complex deployment strategies. Stay tuned for future posts where we’ll explore advanced deployment techniques and best practices.

Make an Image drag and drop with CSS in React

Swarup Mahato — Fri, 06 Jun 2025 08:54:28 +0000

React is a popular JavaScript library for building user interfaces, and its flexibility and versatility make it a great choice for building interactive applications. In this tutorial, we will show you how to create a drag-and-drop feature for images using only CSS in React.

Step 1 —

To start, let's set up a React project. You can use either Create React App or any other setup method that works best for you. Let's make a React application using create-react-app.

npx create-react-app drag-and-drop

Step 2 —

Replace App.js and App.css with the below code.

App.js

import './App.css';

function App() {
  return (
    <div className="App">
      <h2 className="heading">Select Image:</h2>
      <div className="image-area">

      </div>
    </div>
  );
}

export default App;

App.css

.App {
  text-align: center;
  width: 100vw;
  height: 100vh;

}

.heading {
  font-size: 32px;
  font-weight: 500;
}

Step 3 —

Now create a new file and component ImageContainer.js in the srcdirectory and take a div for drag and drop container.

ImageContainer.js

import React from 'react';

const ImageContainer = () => {

    return (
        <div className="image-container">

        </div>
    );
};

export default ImageContainer;

Then make a CSS file ImageContainer.css in the src directory and add some styles in the image container.

ImageContainer.css

.image-container {
    width: 60%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(0, 0, 0, .3);
}

Step 4 —

Now we will take a div with an input field and input text title inside the.image-container class and add some style in the ImageContainer.css file. We will also take a state for the image URL and an onChage function for the update state.

ImageContainer.js will be

import React from 'react';
import './ImageContainer.css';

const ImageContainer = () => {
    const [url, setUrl] = React.useState('');

    const onChange = (e) => {
        const files = e.target.files;
        files.length > 0 && setUrl(URL.createObjectURL(files[0]));
    };

    return (
        <div className="image-container">
            <div className="upload-container">
                <input
                    type="file"
                    className="input-file"
                    accept=".png, .jpg, .jpeg"
                    onChange={onChange}
                />
                <p>Drag & Drop here</p>
                <p>or</p>
                <p>Click</p>
            </div>
        </div>
    );
};

export default ImageContainer;

ImageContainer.css will be

.image-container {
    width: 60%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(0, 0, 0, .3);
}

.upload-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.upload-container>p {
    font-size: 18px;
    margin: 4px;
    font-weight: 500;
}

.input-file {
    display: block;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}

Step 5 —

Now we will preview the image file conditionally. If you have dropped an image will render the image and or render the drag-and-drop area.

ImageContainer.js will be

import React from 'react';
import './ImageContainer.css';

const ImageContainer = () => {
    const [url, setUrl] = React.useState('');

    const onChange = (e) => {
        const files = e.target.files;
        files.length > 0 && setUrl(URL.createObjectURL(files[0]));
    };

    return (
        <div className="image-container">
            {
                url ?
                    <img
                        className='image-view'
                        style={{ width: '100%', height: '100%' }}
                        src={url} alt="" />
                    :
                    <div className="upload-container">
                        <input
                            type="file"
                            className="input-file"
                            accept=".png, .jpg, .jpeg"
                            onChange={onChange}
                        />
                        <p>Drag & Drop here</p>
                        <p>or <span style={{ color: "blue" }} >Browse</span></p>

                    </div>
            }
        </div>
    );
};

export default ImageContainer;

Step 6 —

Now we will import the ImageContainer component in our App.js and run our application using the npm start command and have fun while coding.

App.js will be

import './App.css';
import ImageContainer from './ImageContainer';

function App() {
  return (
    <div className="App">
      <h2 className="heading">Select Image:</h2>
      <div className="image-area">
        <ImageContainer />
      </div>
    </div>
  );
}

export default App;

In this tutorial, we showed you how to create a drag-and-drop feature for images using only CSS in React.

You can grab the source code from here.Github

Top 10 ES6 Features that Every Developer Should know

Swarup Mahato — Fri, 06 Jun 2025 08:36:51 +0000

JavaScript is one of the most widely-used programming languages in the world, and its popularity continues to grow. ES6, also known as ECMAScript 2015, introduced many new and exciting features to the JavaScript language. In this blog, we'll take a look at 10 advanced ES6 features that every JavaScript developer should master in order to stay ahead of the curve. Whether you're a beginner or an experienced developer, these features are sure to enhance your JavaScript skills and take your coding to the next level.

01. Arrow Functions:

Arrow functions are a concise syntax for writing anonymous functions.

For instance, instead of writing this:

const square = function (num) {
  return num * num;
};

You can write the same code with an arrow function:

const square = (num) => num * num;

02. Template Literals:

Template literals allow you to embed expressions in string literals. They use backticks instead of quotes and can be multi-line as well.

For example:

const name = "John";
const greeting = `Hello, ${name}!`;

03. Destructuring:

Destructuring allows you to extract data from arrays or objects into separate variables. This makes it easier to work with complex data structures.

Here's an example:

const numbers = [1, 2, 3];
const [first, second, third] = numbers; //Array destructure

const person ={
  name: "John",
  age: 18,
}
const {name, age} = person; // Object destructure

04. Spread Operator:

The spread operator allows you to spread elements of an array or properties of an object into a new array or object. This is useful for merging arrays or objects, or for spreading an array into function arguments.

Here's an example:

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

05. Default Parameters:

Default parameters allow you to specify default values for function parameters in case no value is passed. This makes it easier to handle edge cases and reduces the need for conditional statements.

Here's an example:

const greet = (name = "John") => {
  console.log(`Hello, ${name}!`);
};

06. Rest Parameters:

Rest parameters allow you to collect an indefinite number of arguments into an array. This is useful for writing functions that can accept any number of arguments.

Here's an example:

const sum = (...numbers) => {
  let result = 0;
  for (const number of numbers) {
    result += number;
  }
  return result;
};

07. Class Definitions:

Class definitions provide a more object-oriented way of defining objects in JavaScript. They make it easier to create reusable objects with inheritance and encapsulation.

Here's an example:

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

08. Modules:

Modules allow you to organize your code into smaller, reusable pieces. This makes it easier to manage complex projects and reduces the risk of naming collisions.

Here's a simple example:

// greeting.js
export const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

// main.js
import { greet } from "./greeting.js";
greet("John");

09. Promise:

Promises are a way to handle asynchronous operations in JavaScript. They provide a way to handle errors, and can be combined to create complex asynchronous flows.

Here's a simple example:

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched");
    }, 1000);
  });
};


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

10. Map and Set:

The Map and Set data structures provide an efficient way to store unique values in JavaScript. They also provide a variety of useful methods for searching and manipulating the data.

For example:

// Creating a Map
const map = new Map();
map.set("name", "John");
map.set("age", 30);

// Accessing values in a Map
console.log(map.get("name")); // Output: John
console.log(map.get("age")); // Output: 30

// Iterating over a Map
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

// Output:
// name: John
// age: 30

// Creating a Set
const set = new Set();
set.add("John");
set.add("Jane");
set.add("Jim");

// Iterating over a Set
for (const name of set) {
  console.log(name);
}

// Output:
// John
// Jane
// Jim

// Checking if a value exists in a Set
console.log(set.has("John")); // Output: true

In conclusion, the advanced ES6 features outlined in this blog are essential for every JavaScript developer to master. They provide a more efficient, concise, and organized way of writing code, making it easier to work with complex data structures and handle asynchronous operations. Whether you're looking to improve your existing skills or just starting out with JavaScript, these features are an excellent starting point. Remember that becoming an expert in these features takes time and practice, so don't be discouraged if you don't understand everything right away. With consistent effort and dedication, you'll be able to master these advanced ES6 features and take your JavaScript skills to new heights.

DEV Community: Swarup Mahato

Hacker Using Metasploit and Nmap for Offensive Security in 2025

Build an awesome developer portfolio website.

Build an awesome GitHub developer portfolio.

STEP 01:

STEP 02:

STEP 03:

STEP 04:

Scop in Javascript with example

Global scope

Local scope

Function scope

Scop in Javascript.

Global Scope

Local Scope

Function Scope

Asynchronous programming in Javascript

Callback Functions

Promises

Async/Await

Scop in Javascript with example

Global scope

Local scope

Function scope

How to create a Popover using React and Tailwind CSS

GitHub and EC2 manual deployment with Deploy keys

Setting Up Your EC2 Instance

Using GitHub Deploy Keys

Improving Your Deployment Process

Conclusion

Make an Image drag and drop with CSS in React

Step 1 —

Step 2 —

Step 3 —

Step 4 —

Step 5 —

Step 6 —

Top 10 React js interview questions.

01. What is React and what are its benefits?

02. What is the virtual DOM and how does it work?

03. How does React handle updates and rendering?

04. What is the difference between state and props?

05. Can you explain the concept of Higher Order Components (HOC) in React?

06. What is the difference between server-side rendering and client-side rendering in React?

07. How do work useEffect hook in React?

08. How does React handle events and what are some common event handlers?

09. What are some best practices for performance optimization in React?

10. How does React handle testing and what are some popular testing frameworks for React?

Top 10 ES6 Features that Every Developer Should know

01. Arrow Functions:

02. Template Literals:

03. Destructuring:

04. Spread Operator:

05. Default Parameters:

06. Rest Parameters:

07. Class Definitions:

08. Modules:

09. Promise:

10. Map and Set: