DEV Community: Nilesh Kumar

🚀 Supercharge Your React Apps with Event Delegation! ✨

Nilesh Kumar — Sat, 31 May 2025 16:43:32 +0000

Description:
Uncover the magic of Event Delegation in React! Learn how this powerful pattern solves common performance and maintenance headaches in large lists, why React uses it by default, and how to effortlessly retrieve data from clicked elements.

Ever found yourself building a magnificent list of items, perhaps a task manager, an e-commerce catalog, or a simple user table, and then hit a snag? You want each row or item to be interactive – maybe clicking a task marks it complete, or clicking a product takes you to its detail page. Your first instinct, and a perfectly valid one, might be to attach an onClick handler to each and every list item.

// The "Intuitive" (but potentially problematic) way
function TaskItem({ task }) {
  const handleClick = () => {
    console.log(`Task "${task.name}" clicked!`);
    // Do something with task.id
  };

  return (
    <li onClick={handleClick}>
      {task.name}
    </li>
  );
}

function TaskList({ tasks }) {
  return (
    <ul>
      {tasks.map(task => (
        <TaskItem key={task.id} task={task} />
      ))}
    </ul>
  );
}

This works, right? Absolutely! For a small list of 5-10 items, you won't notice a thing. But imagine your list explodes to hundreds, or even thousands, of items. Each <li> now comes with its own baggage: a dedicated event listener.

The Hidden Cost of Too Many Listeners

When you attach an individual event listener to every single element, you're essentially incurring several hidden costs:

Memory Hog: Each event listener consumes a small amount of memory. Multiply that by hundreds or thousands, and your application's memory footprint starts to grow.
Performance Drain (Setup): The browser has to work harder to set up and tear down all these individual listeners. If your list is dynamic (items are frequently added or removed), this overhead can become a significant performance bottleneck.
Code Clutter: While React helps abstract some of this, in vanilla JavaScript, managing numerous individual listeners, especially for dynamically added elements, can quickly lead to messy, hard-to-maintain code.

This is where Event Delegation swoops in like a superhero!

What is Event Delegation? The Magic Behind the Scenes

At its core, Event Delegation is a clever technique that leverages the natural event bubbling mechanism of the DOM (Document Object Model).

Think of event bubbling like this: When you click on a specific element (say, a button inside a list item), the event doesn't just happen on that button and stop. It "bubbles up" – meaning the event is first triggered on the target element, then on its immediate parent, then its grandparent, and so on, all the way up to the document and window objects.

Event Delegation works by attaching a single event listener to a common ancestor (parent) element, instead of attaching individual listeners to each child. When an event occurs on one of the children, it bubbles up to the parent. The parent's listener then "catches" the event and figures out which specific child actually triggered it.

Why React Loves Event Delegation (and you should too!)

One of the coolest things about React is that it employs event delegation under the hood as part of its Synthetic Event System. Even if you write onClick on individual JSX elements, React doesn't attach native DOM event listeners to every single one. Instead, it attaches a single, top-level event listener to the root of your React application (usually the document object or the element where your React app is mounted).

When a DOM event fires, React's synthetic event system intercepts it, normalizes it across different browsers, and then dispatches it to the appropriate React components based on its own internal component tree. This default behavior means React apps often enjoy the performance benefits of event delegation without you having to explicitly set it up for every scenario.

The advantages are clear:

Optimized Performance & Memory: Fewer actual DOM listeners means less memory consumption and faster initial rendering.
Handles Dynamic Content Effortlessly: If you add or remove items from your list, the single delegated listener automatically covers them. No need to manually add or remove listeners!
Cleaner, More Maintainable Code: Centralizing event logic makes your components tidier and easier to debug.

event.target vs. event.currentTarget: Know Your Event Properties!

When an event bubbles up to your delegated listener, the event object (e in e.target) gives you two crucial pieces of information:

e.target: This refers to the exact element that originally triggered the event. If you click a <span> inside a <button>, e.target will be the .
e.currentTarget: This refers to the element to which the event listener is actually attached. If you attached the listener to a <ul>, then e.currentTarget will be the <ul>, regardless of which <li> or its child was clicked.

Understanding this distinction is key to successful event delegation.

The Million-Dollar Question: Getting Each Object on Row Click in Event Delegation

So, you've got your list, you're using event delegation (either implicitly with React or explicitly), and now you need to know which specific item from your array was clicked.

This is where custom data-* attributes come in handy!

The Strategy:

Embed an Identifier: When rendering each item in your array, embed a unique identifier (like id or index) into a data-* attribute on the clickable element (e.g., the
or ).
Retrieve in Handler: In your delegated event handler on the parent, use event.target to get the element that was clicked, and then access its dataset property to retrieve your identifier.
Find the Object: Use that identifier to find the corresponding object in your original data array.

Let's look at some examples:

Example 1: Basic List of Products (Using `data-id`)

Imagine you have an array of product objects:

// dummy data
const products = [
  { id: 'p1', name: 'Laptop', price: 1200 },
  { id: 'p2', name: 'Mouse', price: 25 },
  { id: 'p3', name: 'Keyboard', price: 75 },
];

Here's how you'd set up event delegation to get the clicked product:

// how product list work
function ProductList({ products }) {
  const handleProductClick = (event) => {
    // Traverse up from event.target to find the element with data-product-id
    // This is important because the click might be on a child of the <li>
    const listItem = event.target.closest('li[data-product-id]');

    if (listItem) { // Ensure a list item was actually clicked
      const productId = listItem.dataset.productId; // Access data-product-id
      const clickedProduct = products.find(product => product.id === productId);

      if (clickedProduct) {
        console.log("Clicked product:", clickedProduct);
        // Navigate to product detail page, add to cart, etc.
        // Example: navigate(`/products/${clickedProduct.id}`);
      }
    }
  };

  return (
    <ul onClick={handleProductClick} style={{ cursor: 'pointer' }}>
      {products.map(product => (
        <li key={product.id} data-product-id={product.id} style={{ padding: '8px', borderBottom: '1px solid #eee' }}>
          <h3>{product.name}</h3>
          <p>${product.price}</p>
        </li>
      ))}
    </ul>
  );
}

// Usage in App.js
function App() {
  const myProducts = [
    { id: 'p1', name: 'Laptop', price: 1200 },
    { id: 'p2', name: 'Mouse', price: 25 },
    { id: 'p3', name: 'Keyboard', price: 75 },
    { id: 'p4', name: 'Monitor', price: 300 },
    { id: 'p5', name: 'Webcam', price: 50 },
  ];

  return (
    <div>
      <h1>Our Products</h1>
      <ProductList products={myProducts} />
    </div>
  );
}

Explanation:

We put the onClick handler on the <ul> (the parent).
Each <li> gets a data-product-id attribute, holding its unique product.id.
Inside handleProductClick, we use event.target.closest('li[data-product-id]'). This is a super handy method that looks for the closest ancestor (including itself) that matches the CSS selector. This handles cases where the user clicks on the <h3> or <p> inside the <li>, ensuring we always get the <li> element itself.
Once we have the listItem, we can access listItem.dataset.productId to get our identifier.
Finally, products.find() helps us retrieve the full product object from our original products array.

Example 2: Interactive Table (Using `data-index`)

For tables, using the index can also be a viable option, especially if your data isn't guaranteed to have unique IDs, or if the order is particularly important.

function UserTable({ users }) {
  const handleRowClick = (event) => {
    const tableRow = event.target.closest('tr[data-user-index]');

    if (tableRow) {
      // data-index values are strings, so convert to number
      const userIndex = parseInt(tableRow.dataset.userIndex, 10);
      const clickedUser = users[userIndex]; // Direct access by index

      if (clickedUser) {
        console.log("Clicked user:", clickedUser);
        // Example: show user details modal
      }
    }
  };

  return (
    <table onClick={handleRowClick} style={{ width: '100%', borderCollapse: 'collapse', cursor: 'pointer' }}>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        {users.map((user, index) => (
          <tr key={user.id} data-user-index={index} style={{ borderBottom: '1px solid #eee' }}>
            <td>{user.id}</td>
            <td>{user.name}</td>
            <td>{user.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// Usage in App.js
function App() {
  const myUsers = [
    { id: 201, name: 'Alice Smith', email: 'alice.s@example.com' },
    { id: 202, name: 'Bob Johnson', email: 'bob.j@example.com' },
    { id: 203, name: 'Charlie Brown', email: 'charlie.b@example.com' },
    { id: 204, name: 'Diana Prince', email: 'diana.p@example.com' },
  ];

  return (
    <div>
      <h1>User Directory</h1>
      <UserTable users={myUsers} />
    </div>
  );
}

Key Difference with `data-index`:

Instead of product.id, we use index (the second argument of map).
We use parseInt() because values from dataset are always strings.
We can directly access the object using users[userIndex] since we stored the array index. This is generally faster than find() but less resilient if the array order changes after rendering.

Example 3: Handling Specific Actions within a Row

What if you have multiple clickable elements within a single row (e.g., "Edit" and "Delete" buttons)? You can still use event delegation!

function ActionList({ items }) {
  const handleItemAction = (event) => {
    const actionButton = event.target.closest('button[data-action]');

    if (actionButton) {
      const itemId = actionButton.dataset.itemId; // Get item ID from button
      const actionType = actionButton.dataset.action; // Get action type (e.g., 'edit', 'delete')

      const targetItem = items.find(item => item.id === itemId);

      if (targetItem) {
        console.log(`Action: ${actionType} on item:`, targetItem);
        // Perform specific action based on actionType
        if (actionType === 'edit') {
          alert(`Editing ${targetItem.name}`);
        } else if (actionType === 'delete') {
          const confirmDelete = window.confirm(`Are you sure you want to delete ${targetItem.name}?`);
          if (confirmDelete) {
            alert(`${targetItem.name} deleted! (simulated)`);
          }
        }
      }
    }
  };

  return (
    <ul onClick={handleItemAction} style={{ listStyle: 'none', padding: 0 }}>
      {items.map(item => (
        <li key={item.id} style={{ border: '1px solid #ccc', margin: '10px 0', padding: '10px' }}>
          <span>{item.name} - Status: {item.status}</span>
          <div style={{ float: 'right' }}>
            {/* Attach item ID to buttons */}
            <button data-item-id={item.id} data-action="edit" style={{ marginRight: '5px' }}>Edit</button>
            <button data-item-id={item.id} data-action="delete">Delete</button>
          </div>
        </li>
      ))}
    </ul>
  );
}

// Usage in App.js
function App() {
  const myItems = [
    { id: 'task1', name: 'Create Blog Post', status: 'In Progress' },
    { id: 'task2', name: 'Schedule Meeting', status: 'Pending' },
    { id: 'task3', name: 'Review PR', status: 'Done' },
  ];

  return (
    <div>
      <h1>Task Management</h1>
      <ActionList items={myItems} />
    </div>
  );
}

Key takeaways from this example:

The onClick is still on the parent <ul>.
Now, the data-item-id is on the buttons themselves, ensuring we know which item the action belongs to.
A new data-action attribute tells us what kind of action to perform.
We use event.target.closest('button[data-action]') to make sure we're getting a button that is intended for an action.
The handler then uses both itemId and actionType to perform the correct logic.

Final Thoughts

Event delegation is a fundamental concept in modern web development, and React embraces it beautifully through its synthetic event system. By understanding how events bubble and how to effectively use event.target and data-* attributes, you can write more performant, maintainable, and elegant React applications, especially when dealing with large, dynamic lists.

So go ahead, refactor those lists, and enjoy the benefits of a smoother, more efficient user experience!

Happy coding!

How to Fix “Permission Denied (publickey)” When Using Git with GitHub on Windows

Nilesh Kumar — Fri, 30 May 2025 20:06:02 +0000

Description:

If you're seeing Permission denied (publickey) when trying to push to GitHub using Git and SSH on Windows, you're not alone. This guide covers every possible cause of the error and walks you through step-by-step solutions using PowerShell, including SSH key generation, agent setup, and GitHub configuration.

🐛 Common Errors and What They Mean

Description: These are typical errors developers face when SSH isn't correctly configured with GitHub.

git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Or, when testing the SSH connection:

ssh -T git@github.com
git@github.com: Permission denied (publickey).

Or while starting the SSH agent:

Start-Service : Cannot start service ssh-agent on computer '.'
Error: 1058

✅ Step 1: Check if You Already Have an SSH Key

Description: Check if an SSH key already exists in your system.

Run in PowerShell:

dir $env:USERPROFILE\.ssh
// USERPROFILE: C:Users\Username

Look for files named:

id_ed25519
id_ed25519.pub

If they're missing, proceed to Step 2 to generate them.

🔐 Step 2: Generate a New SSH Key

Description: If you don’t have an SSH key, create one using the command below.

ssh-keygen -t ed25519 -C "your_email@example.com"

Press Enter to accept the default file path.
Optionally set a passphrase (or leave it blank for no passphrase).

This generates two files:

Private key: id_ed25519
Public key: id_ed25519.pub

⚙️ Step 3: Enable and Start the SSH Agent (Properly on Windows)

Description: On Windows, the SSH agent must be enabled and started using PowerShell.

Run these in PowerShell as Administrator:

Set-Service -Name ssh-agent -StartupType Manual
Start-Service ssh-agent

Then add your SSH key:

ssh-add $env:USERPROFILE\.ssh\id_ed25519

You should see:
Identity added: C:\Users\YourName\.ssh\id_ed25519

🔗 Step 4: Add Your SSH Key to GitHub

Description: GitHub must have your public key to allow authentication.

Get-Content $env:USERPROFILE\.ssh\id_ed25519.pub

Copy the entire output, which looks like:

ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIK... user@example.com

Then:

Go to GitHub SSH Keys Settings

Click New SSH key

Title: Something like Windows Dev Machine

Key: Paste the entire key

Click Add SSH key

🧪 Step 5: Test Your SSH Connection to GitHub

Description: This verifies whether your SSH setup is correctly linked to GitHub.

ssh -T git@github.com

Expected output:

Hi your-username! You've successfully authenticated...

🚀 Step 6: Push Your Code

Description: Now that SSH is configured, retry your Git command.

git push -u origin main

If everything is set up correctly, your code should push without issues.

🧾 Summary of All Possible Errors and Fixes

❌ Error	💡 Cause	🛠️ Solution
`Permission denied (publickey)`	GitHub doesn't recognize your SSH key	Add your public key to GitHub
`Could not read from remote repository`	Auth failed or repo not found	Check SSH key, repo URL, and existence
`ssh-agent cannot be started (error 1058)`	Agent service is disabled	Run `Set-Service` and `Start-Service` as Admin
`eval not recognized`	Unix command used in PowerShell	Use PowerShell-native commands instead
`No such file or directory` on `ssh-add`	SSH key doesn’t exist	Generate a new key using `ssh-keygen`

🙋 Troubleshooting Tips

Make sure you're using SSH URLs, not HTTPS.

SSH: git@github.com:username/repo.git ✅
HTTPS: https://github.com/username/repo.git ❌

To see which key is being used, run:

ssh -vT git@github.com

Ensure you’re using the correct GitHub account if you have multiple.

📌 Final Thoughts

SSH configuration on Windows can be tricky, especially if you're used to Unix-based systems. But with the right steps — generating keys, configuring the agent, and adding keys to GitHub — you can be up and running securely in minutes.

Happy coding! 🚀

How to Create Custom Aliases in Vite for Cleaner Imports

Nilesh Kumar — Sun, 16 Feb 2025 03:34:22 +0000

Tired of messy import paths in your React project? Learn how to simplify your code with custom aliases using Vite! ✨

Check out our step-by-step guide to make your imports cleaner and your development faster.

Description

Learn how to set up and optimize Vite for your React projects! This guide covers everything from integrating React with SWC for faster builds to configuring custom aliases. Follow along with practical examples to supercharge your development workflow.

A Step-by-Step Guide

Vite has quickly become a favourite among developers for building fast and efficient React applications. In this guide, we’ll explore how to set up a powerful Vite configuration tailored for React projects. We’ll cover everything from integrating React with SWC for faster builds, defining custom aliases, and optimizing the development experience. Let's dive in!

Why Use Vite with React?

Vite is a next-generation frontend build tool that is extremely fast and efficient. When combined with React and SWC (a super-fast JavaScript/TypeScript compiler), it significantly speeds up development and build times. Here’s why you should consider using Vite with React:

Lightning-fast HMR (Hot Module Replacement): Instant updates without reloading the whole page.
Faster Builds: Thanks to its modern architecture and SWC integration.
Enhanced Developer Experience: With easy configuration and plugin support.

Before

// src/components/Message.jsx
// src/assets/logo.png
import React from 'react';
import Logo from './../assets/logo.png';
import Message from './../components/Message';

const HelloWorld = () => {
  return (
    <div>
      <img src={Logo} alt="Logo" />
      <h1><Message /></h1>
    </div>
  );
};

export default HelloWorld;

After

// src/components/Message.jsx
// src/assets/logo.png
import React from 'react';
import Logo from 'src/assets/logo.png';
import Message from 'src/components/Message';

const HelloWorld = () => {
  return (
    <div>
      <img src={Logo} alt="Logo" />
      <h1><Message /></h1>
    </div>
  );
};

export default HelloWorld;

Getting Started

Before we begin, ensure you have Node.js and npm installed on your system. If not, download them from nodejs.org.

Step 1: Initialize a Vite Project

To get started with Vite and React, run the following command:

npm create vite@latest my-react-app --template react
cd my-react-app
npm install

This sets up a React project using Vite. Now, let’s configure it to make development faster and easier.

Configuring Vite for React

Below is a complete vite.config.js configuration tailored for React projects:

import path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  base: "/",
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: /^~(.+)/,
        replacement: path.resolve(process.cwd(), "node_modules/$1"),
      },
      {
        find: /^src(.+)/,
        replacement: path.resolve(process.cwd(), "src/$1"),
      },
    ],
  },
  server: {
    port: 3031,
  },
  preview: {
    port: 3031,
  },
  build: {
    sourcemap: true,
  },
});

Breaking Down the Configuration

1. React with SWC

import react from "@vitejs/plugin-react-swc";

We are using @vitejs/plugin-react-swc to compile React faster using SWC. It’s a great alternative to Babel because of its blazing-fast speed.

2. Custom Aliases

To make imports cleaner and avoid lengthy relative paths, we define custom aliases:

resolve: {
  alias: [
    {
      find: /^~(.+)/,
      replacement: path.resolve(process.cwd(), "node_modules/$1"),
    },
    {
      find: /^src(.+)/,
      replacement: path.resolve(process.cwd(), "src/$1"),
    },
  ],
},

~ is used to access modules from node_modules.
src is used to access files from the src directory.

Example Usage:

import MyComponent from 'src/components/MyComponent';

3. Custom Server Port

server: {
  port: 3031,
},
preview: {
  port: 3031,
},

We’ve set the development and preview servers to use port 3031. Feel free to change it to any port you prefer.

4. Source Maps for Easier Debugging

build: {
  sourcemap: true,
},

Enabling source maps helps in debugging by allowing you to see the original source code in the browser’s developer tools.

Installing Dependencies

To use this configuration, install the necessary packages:

npm install @vitejs/plugin-react-swc vite-plugin-checker

Running the Project

After setting up the configuration, you can run the development server with:Running the Project

npm run dev

Open your browser and navigate to http://localhost:3031.

Conclusion

Congratulations! You’ve now mastered configuring Vite for React with:

React and SWC for faster builds.
ESLint integration for consistent code quality.
Custom aliases for cleaner imports.
A custom server port and source maps for better debugging.

This configuration makes development faster, cleaner, and more enjoyable. Experiment with additional plugins and settings to tailor it further to your needs!

Final Thoughts

Vite is revolutionizing frontend development with its speed and simplicity. By combining it with React and SWC, you get the best of both worlds. Use this guide to set up your projects and boost your productivity.

Happy Coding! 🚀

Without JWT Library Decode and Verify a JWT Token in JavaScript

Nilesh Kumar — Fri, 07 Feb 2025 17:36:57 +0000

Description

JSON Web Tokens (JWT) are widely used for authentication, but just decoding them is not enough—you need to verify their signature too. In this blog, we’ll break down how to decode a JWT and verify its signature using JavaScript, all in simple terms.

🔍 What is a JWT?

A JWT (JSON Web Token) is a compact, URL-safe token used for securely transmitting information. It has three parts:

HEADER.PAYLOAD.SIGNATURE

Example JWT:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0NSIsIm5hbWUiOiJKb2huIERvZSIsImV4cCI6MTcxNjAwMDAwMH0.ZXhhbXBsZXNpZ25hdHVyZQ

Header → Metadata about the token (e.g., algorithm used: HS256)
Payload → Data like user ID, roles, and expiration time (exp)
Signature → A secret-key-based hash to verify authenticity

Without verifying the signature, anyone can modify a JWT, which is a security risk! 😱

📌 Step 1: Decode the JWT in JavaScript

Before verifying a JWT, let's first decode it to extract the payload (the actual data inside the token).

🚀 JavaScript Code to Decode JWT

function jwtDecode(token) {
  try {
    const base64Url = token.split(".")[1];
    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
    const jsonPayload = decodeURIComponent(
      window
        .atob(base64)
        .split("")
        .map((c) => `%${`00${c.charCodeAt(0).toString(16)}`.slice(-2)}`)
        .join("")
    );

    const decoded = JSON.parse(jsonPayload);

    // Check if token has expired
    if (decoded.exp) {
      const currentTime = Math.floor(Date.now() / 1000);
      if (decoded.exp < currentTime) {
        console.warn("Token has expired!");
        return null;
      }
    }

    return decoded;
  } catch (error) {
    console.error("Invalid JWT token", error);
    return null;
  }
}

🔹 How It Works?

Splits the token into three parts and extracts the payload (middle part).
Converts Base64 URL-safe encoding into a normal Base64 string.
Decodes it into a readable JSON object.
Checks if the token has expired using the exp field.

🔴 Problem: This does not verify the signature, so anyone could tamper with the payload! 🚨

📌 Step 2: Verify the JWT Signature

To ensure the token is authentic and not modified, we need to verify its signature using a secret key (e.g., "test").

✅ JavaScript Code to Verify JWT Signature

async function jwtVerify(token, secret = "test") {
  try {
    const parts = token.split(".");
    if (parts.length !== 3) throw new Error("Invalid JWT format");

    const [headerB64, payloadB64, signatureB64] = parts;
    const header = JSON.parse(atob(headerB64));
    const payload = JSON.parse(atob(payloadB64));

    const currentTime = Math.floor(Date.now() / 1000);
    if (payload.exp && payload.exp < currentTime) {
      console.warn("Token has expired!");
      return null;
    }

    const encoder = new TextEncoder();
    const keyData = encoder.encode(secret);
    const cryptoKey = await crypto.subtle.importKey("raw", keyData, { name: "HMAC", hash: "SHA-256" }, false, ["sign"]);

    const data = encoder.encode(`${headerB64}.${payloadB64}`);
    const newSignature = await crypto.subtle.sign("HMAC", cryptoKey, data);
    const newSignatureB64 = btoa(String.fromCharCode(...new Uint8Array(newSignature)))
      .replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");

    if (newSignatureB64 !== signatureB64) {
      throw new Error("Invalid signature! JWT is not authentic.");
    }

    return payload;
  } catch (error) {
    console.error("JWT Verification Failed:", error.message);
    return null;
  }
}

🔹 How It Works?

Splits the JWT into three parts: Header, Payload, Signature.
Decodes Header & Payload to JSON format.
Checks expiration time (exp field).
Recreates the signature using HMAC-SHA256 and compares it with the original signature.
✅ If valid, returns decoded payload. Otherwise, it rejects the token.

🔬 Example Usage

const token = "YOUR_JWT_HERE"; // Replace with an actual JWT
jwtVerify(token).then((decoded) => {
  if (decoded) {
    console.log("✅ Valid Token:", decoded);
  } else {
    console.log("❌ Invalid or Expired Token.");
  }
});

🎯 Summary

Step	Action	Code
1️⃣	Decode JWT	Extracts and reads payload (unsafe on its own)
2️⃣	Verify Signature	Ensures token authenticity using a secret key (HMAC-SHA256)
3️⃣	Check Expiration	Rejects expired tokens (via `exp` field)

🔹 Always verify the signature before trusting a JWT!

💡 Final Thoughts

✅ JWTs are great for authentication, but decoding alone is not safe. Always verify the signature before accepting a token!

🔒 Want even better security? Use jsonwebtoken in Node.js:

const jwt = require("jsonwebtoken");
jwt.verify(token, "test");

Learning Node.js with Express.js: A Day-by-Day Guide

Nilesh Kumar — Sun, 26 Jan 2025 06:49:22 +0000

Learning Node.js with Express.js: A Day-by-Day Guide

This document outlines a detailed day-by-day learning path to understand and practice Node.js with Express.js. By the end of the guide, you'll have created a project with login and signup functionality, including password hashing and token management.

Day 1: Introduction to Node.js

Topics:

What is Node.js and why use it?
Installing Node.js and npm
Understanding the Node.js runtime
Exploring Node.js modules and npm packages

Exercises:

Install Node.js and verify the installation with node -v and npm -v.
Create a "Hello World" application using Node.js.

Code:

// hello.js
console.log('Hello, World!');

// Run using: node hello.js

Explore the fs and path modules with small examples.

Code:

const fs = require('fs');
const path = require('path');

// Create a file
fs.writeFileSync('example.txt', 'This is an example');

// Read the file
const data = fs.readFileSync('example.txt', 'utf-8');
console.log(data);

// Get file path info
console.log(path.basename('example.txt'));

Day 2: Setting Up Express.js

Topics:

Introduction to Express.js
Setting up a basic Express application
Understanding middleware and routes

Exercises:

Install Express.js using npm.

Command:

npm install express

Create a basic Express.js server with a "Hello World" route.

Code:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Explore middleware by adding custom logging and error-handling middleware.

Code:

// Custom logging middleware
app.use((req, res, next) => {
  console.log(`${req.method} ${req.url}`);
  next();
});

// Error-handling middleware
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});

Day 3: Routing and API Basics

Topics:

Understanding routes in Express.js
HTTP methods: GET, POST, PUT, DELETE
Using query parameters and route parameters

Exercises:

Create routes for basic CRUD operations.

Code:

app.get('/items', (req, res) => res.json({ message: 'Get all items' }));
app.post('/items', (req, res) => res.json({ message: 'Create an item' }));
app.put('/items/:id', (req, res) => res.json({ message: `Update item ${req.params.id}` }));
app.delete('/items/:id', (req, res) => res.json({ message: `Delete item ${req.params.id}` }));

Build an API endpoint to return JSON data.

Code:

app.get('/api/data', (req, res) => {
  res.json({ id: 1, name: 'Example Item' });
});

Use Postman or a similar tool to test your routes.

Day 4: Working with Middleware

Topics:

Built-in middleware in Express.js
Third-party middleware (e.g., body-parser, cors)
Writing custom middleware

Exercises:

Use body-parser to parse incoming request bodies.

Code:

const bodyParser = require('body-parser');
app.use(bodyParser.json());

Add cors to your application for handling cross-origin requests.

Code:

const cors = require('cors');
app.use(cors());

Write a custom middleware function for logging request details.

Code:

app.use((req, res, next) => {
  console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
  next();
});

Day 5: Connecting to a Database (MongoDB)

Topics:

Introduction to MongoDB and Mongoose
Connecting your Node.js application to MongoDB
Defining and using schemas and models

Exercises:

Set up a local MongoDB instance or use MongoDB Atlas.
Install Mongoose and connect it to your MongoDB database.

Code:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/mydatabase', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

mongoose.connection.once('open', () => {
  console.log('Connected to MongoDB');
});

Create a schema and model for user data.

Code:

const userSchema = new mongoose.Schema({
  email: String,
  password: String,
});

const User = mongoose.model('User', userSchema);
module.exports = User;

Day 6: Password Hashing with bcrypt

Topics:

Why hash passwords?
Using the bcrypt library to hash and compare passwords

Exercises:

Install the bcrypt library.

Command:

npm install bcrypt

Create a function to hash a password before saving it to the database.

Code:

const bcrypt = require('bcrypt');

const hashPassword = async (password) => {
  const salt = await bcrypt.genSalt(10);
  return await bcrypt.hash(password, salt);
};

// Usage
const hashedPassword = await hashPassword('mypassword');

Write a function to compare hashed passwords during login.

Code:

const isMatch = await bcrypt.compare('mypassword', hashedPassword);
console.log(isMatch); // true or false

Day 7: Token Management with JWT

Topics:

Introduction to JSON Web Tokens (JWT)
Creating and verifying JWTs
Storing and using tokens for authentication

Exercises:

Install the jsonwebtoken library.

Command:

npm install jsonwebtoken

Create a function to generate a token after a successful login.

Code:

const jwt = require('jsonwebtoken');

const generateToken = (userId) => {
  return jwt.sign({ id: userId }, process.env.JWT_SECRET, { expiresIn: '1h' });
};

const token = generateToken('12345');
console.log(token);

Add middleware to verify tokens for protected routes.

Code:

app.use((req, res, next) => {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) return res.status(401).json({ message: 'Unauthorized' });

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (err) {
    res.status(401).json({ message: 'Invalid token' });
  }
});

Day 8: Creating the Login and Signup Features

Topics:

Building the signup route
Building the login route
Validating user input

Exercises:

Create a /signup route to register users and save hashed passwords.

Code:

app.post('/signup', async (req, res) => {
  const { email, password } = req.body;
  const hashedPassword = await hashPassword(password);

  const user = new User({ email, password: hashedPassword });
  await user.save();
  res.status(201).json({ message: 'User registered successfully' });
});

Create a /login route to authenticate users and return a token.

Code:

app.post('/login', async (req, res) => {
  const { email, password } = req.body;
  const user = await User.findOne({ email });

  if (!user || !(await bcrypt.compare(password, user.password))) {
    return res.status(401).json({ message: 'Invalid credentials' });
  }

  const token = generateToken(user._id);
  res.json({ token });
});

Add input validation using a library like express-validator.

Code:

const { body, validationResult } = require('express-validator');

app.post(
  '/signup',
  [body('email').isEmail(), body('password').isLength({ min: 6 })],
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }

    const { email, password } = req.body;
    const hashedPassword = await hashPassword(password);
    const user = new User({ email, password: hashedPassword });
    await user.save();
    res.status(201).json({ message: 'User registered successfully' });
  }
);

The added code examples provide practical steps for each learning topic, ensuring hands-on practice throughout the journey.

How to Search Amazon Products Using Node.js and Amazon PA-API

Nilesh Kumar — Tue, 17 Dec 2024 18:10:44 +0000

Description

Learn how to set up and use the Amazon Product Advertising API (PA-API) in a Node.js project to search for products, retrieve details like price and reviews, and make your affiliate marketing easier.

Introduction

Amazon's Product Advertising API (PA-API) is a powerful tool that lets developers access product information directly from Amazon's marketplace. In this blog, we’ll walk through a simple Node.js example to search for products on Amazon and retrieve useful details like price, title, images, and customer reviews.

If you’re an Amazon associate or a developer building a product search tool, this tutorial will help you get started with PA-API in no time.

Step-by-Step Guide

1. Prerequisites

Before starting, ensure you have the following:

Node.js installed on your computer.
An active Amazon Associates account with access to the Product Advertising API.
API credentials: Access Key, Secret Key, and Partner Tag.

Where to get the these API credentials
Generate API credentials

You can also test your api credentials online using these list.
List of all Web Services

2. Setting Up Your Node.js Project

Initialize Your Project

Run the following command in your terminal:
```
npm init -y
```
This creates a package.json file to manage project dependencies.
Install the Required Library

Use the amazon-paapi package to interact with the API:
```
npm install amazon-paapi
```
Secure Your API Keys

Instead of hardcoding sensitive data (like API keys) in your code, store them in an .env file using the dotenv package:
```
npm install dotenv
```
Create a Project Structure

Here’s how you can organize your files:

3. Writing the Code

Configure API Parameters

In the config/amazonConfig.js file, define your API keys and search parameters:

require('dotenv').config();  
const commonParameters = {
    AccessKey: process.env.ACCESS_KEY,
    SecretKey: process.env.SECRET_KEY,   
    PartnerTag: process.env.PARTNER_TAG,   
    Marketplace: process.env.MARKETPLACE,   
    PartnerType: 'Associates', 
};  
const requestParameters = {   
    Keywords: 'Harry Potter',   
    SearchIndex: 'Books',   
    ItemCount: 2,   
    Resources: [     
        'Images.Primary.Medium',     
        'ItemInfo.Title',     
        'Offers.Listings.Price',     
        'CustomerReviews.Count',     
        'CustomerReviews.StarRating',   
    ], 
};  
module.exports = { commonParameters, requestParameters };

Call the Amazon API

In the index.js file, make the API call using the amazon-paapi package:

const amazonPaapi = require('amazon-paapi'); 
const { commonParameters, requestParameters } = require('./config/amazonConfig');  
const fetchProduct = async () => {   
    try {     
        const data = await amazonPaapi.SearchItems(commonParameters, requestParameters);     
        console.log(JSON.stringify(data, null, 2));   
    } catch (error) {     
        console.error('Error:', error);   
    } 
};  
fetchProduct();

Store Your Keys in the .env File

Create a .env file in the project root to securely store your API credentials:

ACCESS_KEY=your-access-key-here 
SECRET_KEY=your-secret-key-here 
PARTNER_TAG=your-partner-tag-here 
MARKETPLACE=www.amazon.com

4. Running Your Project

Run the code using the command:
```
node index.js
```
If everything is set up correctly, the API will fetch details for "Harry Potter" books and display them in the console.

What This Code Does

Defines API Credentials

The API keys, marketplace, and associate tag are set up using environment variables for security.
Searches for Products

The SearchItems function fetches product details based on the keyword "Harry Potter."
Retrieves Product Details

Information such as product title, price, images, and reviews is retrieved from Amazon.

Conclusion

Using the Amazon Product Advertising API in Node.js is straightforward when you have the right tools and setup. This example showed how to search for products, fetch specific details, and handle API responses. By using this approach, you can build robust affiliate applications, product comparison tools, or even a custom storefront!

How to Record and Upload Your Voice Using React Native! 🎙️✨

Nilesh Kumar — Sat, 14 Dec 2024 11:29:21 +0000

Have you ever thought, “What if I could record my voice and send it to an app to turn it into text?” Well, guess what? Today, we're diving into a simple React Native app that does just that. Even if you're just starting out, this explanation is as easy as pie (or candy 🍬). Let’s explore step by step!

What Does This App Do? 🤔

This app is like a superpower for your phone. It lets you:

Record your voice. 🗣️
Save that recording on your phone. 📂
Upload the recording to a magical website (API) that listens to it and writes down exactly what you said! 💬

The Magic Ingredients (Imports) 🧙‍♂️

Here’s the first step. We bring in some super cool tools to make the app work:

Button: For recording actions.
react-native-audio-recorder-player: To record and manage audio.
react-native-fs: To save the audio file in your phone’s storage.
axios: To send the recorded audio file to Backend.

import React, { useState } from 'react';
    import {
      Button,
      Platform,
      SafeAreaView,
      ScrollView,
      StatusBar,
      StyleSheet,
      Text,
      View,
    } from 'react-native';
    import AudioRecorderPlayer from 'react-native-audio-recorder-player';
    import RNFS from 'react-native-fs';

Create state for manage recording state

Create state for recording and for file location path

const [recording, setRecording] = useState(false);
    cosnt [filePath, setFilePath] = useState("");

Getting Ready to Record 🎤

Next, we set up the app to record audio. This involves deciding:

Where to save the audio file.
What format to use (like .mp3 or .m4a).

const audioSet = {
      AudioEncoderAndroid: 'aac', // Audio encoding for Android
      AudioSourceAndroid: 'mic', // Use the microphone
      AVModeIOS: 'measurement',  // iOS audio mode
      AVEncoderAudioQualityKeyIOS: 'high', // High quality for iOS
      AVFormatIDKeyIOS: 'aac', // AAC format for iOS
    };

Start Recording 🎙️

When you press the Start Recording button, the app will:

Find a place to save your voice file.
Start listening and save everything you say.

const startRecording = async () => {
      const dirs = Platform.OS === 'ios' ? RNFS.DocumentDirectoryPath : RNFS.ExternalDirectoryPath;
      const path = Platform.select({
        ios: `${dirs}/hello.m4a`,
        android: `${dirs}/hello.mp3`,
      });
      const result = await audioRecorderPlayer.startRecorder(path, audioSet, true);
      setRecording(true);
      setFilePath(result);
      console.log('Recording started at: ', result);
    };

Stop Recording 🛑

Once you press Stop Recording, the app will:

Stop listening.
Save the recording.
Upload it to an online API that will write down what you said.

 const stopRecording = async () => {
      const result = await audioRecorderPlayer.stopRecorder();
      setRecording(false);
      console.log('Recording saved at: ', result);
      uploadAudio(filePath); // Upload the saved file
    };

Upload Your Voice to the Cloud 🌩️

Now comes the fun part! The app sends your recording to a magical brain on the internet (API) that listens and writes your words into text.

  const uploadAudio = async (filePath) => {
      const file = {
        uri: `file://${filePath}`,
        type: 'audio/aac',
        name: 'audio.aac',
      };
      const formData = new FormData();
      formData.append('audio_file', file);
      formData.append('lang', "en-US");
      try {
        const response = await fetch('https://your-api-url/speech-to-text', {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data',
            'Authorization': `Bearer YOUR_API_TOKEN`,
          },
          body: formData,
        });
        const result = await response.json();
        console.log('Upload success: ', result);
      } catch (error) {
        console.error('Upload failed: ', error);
      }
    };

The App Layout 🖥️

Here’s the UI code that connects everything:

A Button: To toggle between Start and Stop recording.
A Text: To show where the file is saved.

return (
      <SafeAreaView>
        <StatusBar />
        <ScrollView>
          <View style={{ marginTop: 50 }}>
            <Button
              title={recording ? "Stop Recording" : "Start Recording"}
              onPress={recording ? stopRecording : startRecording}
            />
            {filePath ? <Text>File saved at: {filePath}</Text> : null}
          </View>
        </ScrollView>
      </SafeAreaView>
    );

Complete code

Below is the complete working code that we discussed in the blog, showcasing how to build a voice recording app in React Native. It includes functionality to record audio, save the file, and upload it to an API for speech-to-text conversion. This code brings together everything we talked about, from setting up the recording environment to managing the app's UI and integrating with a cloud service, providing a fully functional and ready-to-use solution.

This hook for recording.

import RNFS from 'react-native-fs';
    import AudioRecorderPlayer, {
      AVEncoderAudioQualityIOSType,
      AVEncodingOption,
      AVModeIOSOption,
      AudioEncoderAndroidType,
      AudioSourceAndroidType,
      OutputFormatAndroidType,
    } from 'react-native-audio-recorder-player';
    import { useState } from 'react';
    import { Platform } from 'react-native';
    const audioRecorderPlayer = new AudioRecorderPlayer();
    audioRecorderPlayer.setSubscriptionDuration(0.1);
    const useRecording = () => {
      const [recording, setRecording] = useState(false);
      const [recordingPath, setRecordingPath] = useState('');
      const audioSet = {
        AudioEncoderAndroid: AudioEncoderAndroidType.AAC,
        AudioSourceAndroid: AudioSourceAndroidType.MIC,
        AVModeIOS: AVModeIOSOption.measurement,
        AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high,
        AVNumberOfChannelsKeyIOS: 2,
        AVFormatIDKeyIOS: AVEncodingOption.aac,
        OutputFormatAndroid: OutputFormatAndroidType.AAC_ADTS,
      };
      const startRecording = async () => {
        const dirs =
          Platform.OS === 'ios'
            ? RNFS.DocumentDirectoryPath
            : RNFS.ExternalDirectoryPath;
        console.log('dir', dirs);
        const path = Platform.select({
          ios: `${dirs}hello.m4a`,
          android: `${dirs}/hello.mp3`,
        }); // File name for your recording
        console.log('Recorded File Path:', path);
        const result = await audioRecorderPlayer.startRecorder(
          path,
          audioSet,
          true,
        );
        console.log('result', result);
        setRecording(true);
        setRecordingPath(result);
      };
      const stopRecording = async () => {
        const result = await audioRecorderPlayer.stopRecorder();
        setRecording(false);
      };
      return {
        startRecording,
        stopRecording,
        setRecording,
        recording, 
        recordingPath,
      }
    };
    export default useRecording;

This is for upload

const axios = require('axios');
    const uploadAudio = async (audioFilePath) => {
        try{
            const file = {
                uri: `file://${audioFilePath}`,
                type: 'audio/mp3',
                name: 'audio.mp3',
              };
            const header = {'Content-Type': 'multipart/form-data'};
            const formData = new FormData();
            // formData.append('audio', file);
            formData.append('audio_file', file);
            let config = {
                method: 'post',
                maxBodyLength: Infinity,
                url: 'Your api URL',
                headers: { 
                  'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzM0MDk0MDk0LCJpYXQiOjE3MzQwMDc2OTQsImp0aSI6IjFmMDc2ZDIyMWM2NTQwMDJiMWMwMGU3MjAyODYzMTk2IiwidXNlcl9pZCI6OTZ9.LrBr-Yuy6sDanMuRTrU_EIxgmcYBzmmLtDcMrO1Sft8', 
                  header
                },
                data : formData
              };
              axios.request(config)
              .then((response) => {
                console.log(JSON.stringify(response.data));
              })
              .catch((error) => {
                console.log(error);
              });
        }catch(err){
            console.log(err);
        }finally{
            // console.log("finally speech to text")
        }
    }

This is for UI design.

return (
      <SafeAreaView>
        <StatusBar />
        <ScrollView>
          <View>
            <Button
              title={recording ? "Stop Recording" : "Start Recording"}
              onPress={recording ? stopRecording : startRecording}
            />
            {filePath ? <Text>File saved at: {filePath}</Text> : null}
          </View>
        </ScrollView>
      </SafeAreaView>
    );

Why is This App Awesome? 💡

Fun for Everyone: Kids, teens, and adults can record their voices.
Super Useful: Turn your spoken words into text without typing!
Simple Design: Easy-to-use button for recording and stopping.

Conclusion

Building a voice recording and speech-to-text app in React Native is not only fun but also a great learning experience! This project showcases the power of combining simple UI components with advanced features like audio recording and API integration. By following this guide, you've learned how to record audio, save it locally, and upload it for processing. Whether you're using this app for productivity, creativity, or just experimenting, the possibilities are endless. Keep exploring, keep coding, and let your imagination turn ideas into reality! 🚀

Download base64 Audio Files in React in Two Ways

Nilesh Kumar — Sat, 16 Nov 2024 11:21:42 +0000

Introduction

In modern web development, audio files are commonly used for many features like music players, podcasts, voice recordings, and more. If you're building a React app and want to give users the ability to download audio files.

When working with APIs that return audio data in Base64 format, downloading the audio as a file can be tricky. In this blog, we’ll explore two methods to achieve this, along with their pros and cons. This blog explains a direct approach for small files and a Blob-based method for larger ones. Discover the pros, cons, and when to use each solution in your projects.

Approach 1: Direct Base64 to Download

The first method involves directly using the Base64 string as a data: URI. Here’s the code:

function downloadBase64Audio(base64Data, fileName) {
    const link = document.createElement('a');
    link.href = `data:audio/mpeg;base64,${base64Data}`;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

How It Works

The Base64 string is embedded directly in the URL.
An anchor tag (< a>) is created dynamically with this URL.
The click() method triggers the download.

Approach 2: Decode Base64 and Use Blob

The second method decodes the Base64 string into binary data, creates a Blob, and generates a temporary downloadable URL.

const downloadBase64 = (base64, name) => {
  const byteCharacters = atob(base64);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += 1024) {
    const slice = byteCharacters.slice(offset, offset + 1024);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    byteArrays.push(new Uint8Array(byteNumbers));
  }

  const blob = new Blob(byteArrays, { type: "audio/mp3" });
  const url = URL.createObjectURL(blob);

  var link = document.createElement("a");
  link.download = "audio.mp3";
  link.href = url;
  link.click();
  link.remove();
  URL.revokeObjectURL(url);
};

How It Works

Decodes the Base64 string into binary data using atob().
Breaks the binary string into chunks for efficient processing.
Converts the binary data into a Blob and generates a downloadable URL.

Key Differences

1. Direct Embedding vs Conversion

Approach 1:
- Directly uses the Base64 string in a data: URI to initiate the download.
- No intermediate processing; the Base64 string is directly set as the href attribute of an anchor (<a>).
- Suitable for small files as browsers handle the data: URI directly.
Approach 2:
- Decodes the Base64 string into binary data using atob().
- Converts the binary data into a Blob, which is then used to generate a temporary URL for downloading.
- Ideal for larger files because it avoids the size limitations of data: URIs in some browsers.

2. File Handling

Approach 1:
- Directly creates a download link using data:audio/mpeg;base64,....
- Limited by the length of the URL since browsers impose limits on data: URI sizes (typically a few megabytes).
- Not memory-efficient for large files.
Approach 2:
- Decodes the Base64 string into a binary string and creates a Blob.
- Blob URLs (Object URLs) are better for handling large files because they don't embed the entire file content in the URL.
- Memory usage is lower as it doesn't rely on long strings in memory.

3. Flexibility

Approach 1:
- Simpler, but less flexible and may not work for all use cases (e.g., larger files or certain file formats).
- Limited customisation for file handling.
Approach 2:
- More complex but provides greater flexibility.
- Supports handling files of any size and type by adjusting the Blob type ({ type: "audio/mp3" }).

4. Reusability

Approach 1:
- A straightforward implementation, but its usage is more specific to Base64 audio data.
Approach 2:
- More modular, with reusable functions like downloadURI that can be used for any type of Blob data, not just audio files.

Use Case Recommendations

Approach 1:
- Use when the file is small (e.g., a few KB to a couple of MB).
- The content is guaranteed to fit within the browser's data: URI limits.
- Simpler implementation is preferred.
Approach 2:
- Use for larger files where the data: URI might exceed browser limits.
- When flexibility is needed to support other file types and sizes.
- To ensure better memory management and scalability.

Which Approach Should You Use?

Go with Approach 1 if your audio files are small (a few MB) and you need a quick solution.
Choose Approach 2 for larger files or if you want better performance and flexibility.

Conclusion

Both methods can effectively download Base64 audio files, but their usage depends on the size of the file and your specific needs. Understanding these trade-offs will help you pick the best solution for your project.

Happy Coding :)

How to Cancel API Calls in React with Axios: A Step-by-Step Guide

Nilesh Kumar — Thu, 14 Nov 2024 18:31:54 +0000

Learn how to manage multiple API calls in React by canceling previous requests with Axios. This guide shows you how to use Axios’s CancelToken to cancel requests that are no longer needed. By doing this, you can improve performance and reduce unnecessary network traffic when users switch between selections, like changing stories in a React component.

In modern web apps, especially those built with React, it’s common to fetch data from APIs when users take actions, like clicking on a story or selecting a product. However, if a user triggers multiple actions quickly, previous requests might still be running in the background, using up resources and potentially showing outdated or incorrect data.

In this post, we’ll show you how to solve this problem by canceling ongoing Axios requests whenever a user picks a new item. This helps avoid unnecessary API calls, boosts performance, and makes sure you get the most up-to-date data. Let’s go through the solution with an easy example!

Understanding the Problem:

Imagine you have a React component that loads audio for a story from an API every time a user selects a new story. But if the user quickly switches between stories, the previous API requests might still be running in the background. This can lead to extra load on the server, delays, and problems like playing the wrong audio.

To solve this, we need to cancel the previous request when a new request is triggered.

Using Axios Cancellation Tokens in React

To cancel ongoing requests, we’ll use Axios’s CancelToken. This lets us stop a request if it’s not needed anymore, like when a user picks a different story before the previous request is done. Here’s how you can set this up in a React component:

Step 1: Create a Cancellation Token

First, we need to create a reference that stores the cancellation token. We can use the useRef hook in React to persist the token across re-renders of the component.

const cancelTokenSource = useRef(null);

Step 2: Cancel Previous Request Before Making a New One

Before we make a new API call, we check if there’s an existing request. If there is, we cancel it. We do this by calling cancel() on the current cancelTokenSource.

if (cancelTokenSource.current) {
  cancelTokenSource.current.cancel('Operation canceled due to new request.');
}

Step 3: Create a New Cancellation Token for Each Request

After canceling the previous request, we create a new cancel token source for the next API call.

cancelTokenSource.current = axios.CancelToken.source();

Step 4: Make the API Request with the Cancel Token

Now, when we make the actual API request, we pass the cancel token along with the request. This ensures that the request can be canceled if needed.

const response = await axios.get(url, {
  cancelToken: cancelTokenSource.current.token,
});

Step 5: Handle Request Cancellation

In the catch block, we handle the cancellation error separately. If the request was canceled, we log a message and do not treat it as a real error.

catch (error) {
  if (axios.isCancel(error)) {
    console.log('Request canceled:', error.message); 
  } else {
    // Handle other errors
    console.log('API call error:', error);
  }
}

Example Code: Full React Component Implementation

Here’s the full implementation of the solution in a React component that fetches a story’s audio when the user selects a story:

import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import { toast } from 'react-toastify';

const StorySpeechComponent = ({ id }) => {
  const [base64audio, setBase64audio] = useState(null);
  const cancelTokenSource = useRef(null);  // Store the cancel token

  const getStorySpeech = async (id) => {
    if (cancelTokenSource.current) {
      cancelTokenSource.current.cancel('Operation canceled due to new request.');
    }

    cancelTokenSource.current = axios.CancelToken.source();

    try {
      const url = `http:/localhost:8000/api/v1/getAudio/${id}`; // update your api url here
      const response = await axios.get(url, {
        cancelToken: cancelTokenSource.current.token, // creating the canel token for the api
      });

      if (response?.data?.audio) {
        setBase64audio(response.data.audio); // save your response to any state as requre
      }
    } catch (error) {
      if (axios.isCancel(error)) {
        console.log('Request canceled:', error.message);
      } else {
        console.log('Get Story Speech API error:', error.response);
        if (error.response?.status === 400) {
          toast.error(error.response.data["non_field_errors"][0]);
        }
      }
    }
  };

  useEffect(() => {
    if (id) {
      getStorySpeech(id);
    }

    return () => {
      if (cancelTokenSource.current) {
        cancelTokenSource.current.cancel('Component unmounted or story changed.');
      }
    };
  }, [id]);  // Re-fetch when the selected story Id changes

  return (
    <div>
      <h1>Story Speech</h1>
      {base64audio ? (
        <audio controls>
          <source src={`data:audio/mp3;base64,${base64audio}`} type="audio/mp3" />
          Your browser does not support the audio element.
        </audio>
      ) : (
        <p>Loading audio...</p>
      )}
    </div>
  );
};

export default StorySpeechComponent;

Conclusion:

By using Axios’s cancellation feature, we can avoid unnecessary network requests and keep our React app running smoothly. This is especially helpful when multiple API calls are triggered quickly, like when users are switching between different items. This simple approach boosts performance and improves the user experience by preventing race conditions and cutting down on unnecessary API calls.

How To Logout User From All Tabs At Once In React

Nilesh Kumar — Sat, 09 Nov 2024 18:04:54 +0000

In many React applications, it's common to track changes to state or localStorage values across components, and for this, developers often rely on state management tools like Redux or the Context API. These tools allow you to keep your state in sync within the React component tree. However, a significant challenge arises when you need to update the state from a non-React component (for example, external scripts or browser events). Ensuring that this update is reflected in other React components can be difficult, as it requires careful management of state updates and dispatching actions across different parts of the application.

Tracking localStorage Changes Across Tabs and Active Sessions in React

Managing localStorage in React can be challenging, especially when you need to track changes across different browser tabs or within the same active tab. Imagine having a user logged into your app across multiple tabs—if they log out or update a setting in one tab, wouldn’t it be great to have these changes reflect instantly across all tabs?

In this guide, we’ll explore two useEffect examples to handle these cases:
- Tracking localStorage events in different tabs.
- Tracking events both across tabs and within the same active tab.

Example 1: Basic Multi-Tab localStorage Event Tracking

Let’s start with the first useEffect, which tracks localStorage changes across multiple tabs. Imagine you have a user logged into several tabs. If they log out in one, you want to log them out everywhere to maintain security.

useEffect(() => {
    const handleStorageChange = (event) => {
      if (event.type === 'storage') {
        const token = localStorage.getItem('token');

        if (!token) {
          cleanLocalStorage();
          setLogin("");
          navigate("/login");
        }
      }
    };

    window.addEventListener('storage', handleStorageChange);

    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, []);

How This Works:

We’re adding an event listener for the storage event, which detects changes in localStorage from other browser tabs.
When a user logs out in one tab (removing their token from localStorage), the hook catches this change, and the user is logged out in all other open tabs.

Feature:

This hook allows for cross-tab sync, giving a seamless logout experience if the user leaves a tab open and inactive.

Drawback:

This only listens to storage events, which means changes made within the same tab (like clearing localStorage) won’t trigger any actions.

Example 2: Advanced Multi-Tab and Same-Tab Syncing

Now, let’s look at an upgraded approach for handling localStorage changes across tabs and within the same active tab. This approach is helpful if your app needs to respond to changes made in the current tab as well.

useEffect(() => {
    const handleStorageChange = (event) => {
      if (event.type === "storage" || event.type === "localStorageChanged") {
        if (skipPath.includes(window.location.pathname)) {
          return;
        }
        const token = localStorage.getItem("token");

        if (!token) {
          dispatch({ type: "LOGOUT" });
          clearData();
          navigate("/login", { replace: true });
        }
      }
    };
    window.addEventListener("storage", handleStorageChange);
    window.addEventListener("localStorageChanged", handleStorageChange);

    return () => {
      window.removeEventListener("storage", handleStorageChange);
      window.removeEventListener("localStorageChanged", handleStorageChange);
    };
  }, []);

To trigger the localStorageChanged event in a non-React component, use the following code when updating localStorage within the same tab. This ensures that changes are properly detected and can be handled accordingly in your application.

window.dispatchEvent(new Event("localStorageChanged"));

How This Works:

We add event listeners for both the storage event and a custom event called localStorageChanged.
With the custom event, we can trigger handleStorageChange within the same active tab, allowing single-tab changes to also be detected.
skipPath provides a way to exclude specific routes from the logout functionality, letting you customise where automatic logout should and shouldn’t happen.

Features:

Same-Tab Sync: The custom event, localStorageChanged, lets you detect local changes within the same tab. This can be especially useful for managing user preferences or login sessions.
Selective Path Exclusion: By using skipPath, you can exclude specific routes, such as settings or payment pages, from triggering a logout.
Cross-Tab Sync: Like the first hook, this one still syncs changes across tabs, ensuring a cohesive user experience.

Drawbacks:

Added Complexity: With custom events and path exclusions, managing the code can get a bit more complex, especially if you have many routes or conditional cases.
Potential Overhead: Listening to multiple events could slightly impact performance, especially if there are frequent changes to localStorage.

Real-World Example: Secure, Seamless Logout

Think of a social media app open in several tabs. A user logs out in one tab, and all tabs should log them out immediately to prevent security risks. Similarly, if they’re on a secure settings page, you may want to avoid sudden logouts by excluding this route.

With these hooks, you can:

Automatically log the user out of all tabs when they log out in one.
Avoid logging them out unexpectedly from certain pages.
Detect changes in both multi-tab and single-tab contexts for a smoother experience.

Final Thoughts

Tracking localStorage events across tabs and within the same active session can significantly enhance user experience, especially for multi-tab security and state consistency.

Both useEffect hooks work together without interfering with each other, allowing for both cross-tab and single-tab functionality. Whether it’s a logout action or a user setting change, this approach ensures users see an up-to-date, consistent experience across your entire app.

By understanding and combining these approaches, you can make your app feel more responsive and secure for users, adapting dynamically to user actions across tabs and sessions.

How to Track User Inactivity on Your Website and Why It Matters

Nilesh Kumar — Fri, 08 Nov 2024 14:54:37 +0000

In today’s web applications, ensuring that users remain active while maintaining good user experience is essential. One common scenario is detecting user inactivity and displaying a reminder or warning to keep users engaged before logging them out due to inactivity.

In this blog, we'll break down the concept of user inactivity tracking with a React app and show you how to implement a "Are you active?" prompt, using a timeout system to track the user's activity on the page. Let’s explore the code behind it and how it works.

Problem Statement:

You might have noticed websites that log you out automatically after a certain period of inactivity. This happens because, in some cases, it’s important to maintain security (to avoid leaving sensitive information open if a user walks away from their device) or optimise server resources. So, how do we detect this inactivity in a React app?

Code Breakdown

Let’s go through the code step by step to understand how user inactivity is tracked, and how the "Are you active?" prompt is displayed.

1. React States & Context Setup

const [login, setLogin] = useState("");
const [isActive, setIsActive] = useState(true);
const [showPrompt, setShowPrompt] = useState(false);

login: Holds the user's login token to determine if the user is logged in.
isActive: Tracks whether the user is active or not. Initially set to true.
showPrompt: Controls whether the "Are you active?" prompt is shown.

2. Timeout Logic

const timeoutId = useRef(null);

timeoutId: A reference to store the timeout ID, which helps in clearing the timeout when needed (such as when the user interacts with the page).

3. Reset Timer on Activity

const resetTimer = () => {
  if (showPrompt) {
    return;
  }
  setIsActive(true);
  setShowPrompt(false);
  clearTimeout(timeoutId.current);
  if (login) {
    timeoutId.current = setTimeout(() => {
      setIsActive(false);
      setShowPrompt(true);
    }, 13 * 60 * 1000); // 13 minutes timeout
  }
};

The resetTimer function resets the timer whenever the user interacts with the website (like moving the mouse, pressing keys, etc.).
If the user doesn’t interact for 13 minutes, it triggers the display of the "Are you active?" prompt.
The function also makes sure not to show the prompt repeatedly if the user is already interacting.

4. Activity Event Listener

const handleActivity = () => {
  if (!isActive) {
    resetTimer();
  }
};

This function listens for events such as mouse movements, key presses, and clicks, indicating that the user is still active on the page.
It calls resetTimer() if the user is inactive and then interacts with the page again.

5. Auto Logout if No Action Taken

const logout = () => {
  setShowPrompt(false);
  cleanLocalStorage(); // Clears any saved session data
  navigate("/login");
  setLogin(""); // Resets the login state
}

If the user doesn’t respond to the "Are you active?" prompt within a set time (2 minutes), the **logout()** function is called, logging the user out automatically.

6. Using `useEffect` to Handle Events

First `useEffect` Hook: Checking for a Login Token

useEffect(() => {
  const token = localStorage.getItem('token');
  if (token) {
    setLogin(token);
  }
}, [login]);

This hook is used to check whether a user is logged in when the component mounts or when the login state changes. Here’s how it works:

useEffect runs on component mount or state change:

useEffect is a special React hook that allows you to run some code when the component first renders, or when a specific state or prop changes. In this case, the effect will run whenever the login state changes, which is passed as the second argument [login].

Check for a "token" in localStorage:

The code inside the useEffect looks for a token stored in the browser’s localStorage. localStorage is a simple key-value store in the browser that persists even if the page reloads or the user navigates to another page. The key here is "token", and getItem('token') retrieves the value associated with that key.

If a token is found, update the login state:

If a token is found in localStorage, the setLogin(token) function is called to update the login state with the token's value. This might indicate that the user has logged in and their session is still active (as the token is typically used for authentication).

Why [login] as the dependency array?:

The useEffect will run again whenever the login state changes. However, this approach might cause an issue: because the setLogin function changes the login state, it could cause the useEffect to loop continuously, running each time login changes. In most cases, you would want to set the token only once when the component mounts, so using useEffect with [login] may not be ideal. You might want to pass an empty array [] to run this effect only once when the component mounts, instead of each time login changes.

Second useEffect Hook: Handling User Activity

useEffect(() => {
  if (login) {
    window.addEventListener('mousemove', handleActivity);
    window.addEventListener('keydown', handleActivity);
    window.addEventListener('click', handleActivity);
    resetTimer();
    return () => {
      window.removeEventListener('mousemove', handleActivity);
      window.removeEventListener('keydown', handleActivity);
      window.removeEventListener('click', handleActivity);
      clearTimeout(timeoutId.current);
    };
  }
  setIsActive(false);
}, [login]);

This useEffect handles user activity detection and manages event listeners that track whether the user is interacting with the page. Here's how it works:

- useEffect listens for changes in login state:

This useEffect hook depends on the login state (just like the previous one). It runs whenever the login state changes, which means it will run:
After the initial render (when the component mounts), and
Whenever the login state updates.

- If the user is logged in (login is truthy):

The first thing the hook does is check if login has a truthy value (i.e., the user is logged in).
If login exists (meaning the user is logged in), it sets up three event listeners on the window object:
mousemove: Detects if the user moves the mouse.
keydown: Detects if the user presses any keys on the keyboard.
click: Detects if the user clicks anywhere on the page.

These event listeners are used to track user activity. Every time one of these events occurs, it will trigger the handleActivity function, which will presumably reset the inactivity timer, ensuring the user is considered active and not logged out due to inactivity.

- Reset the inactivity timer:

resetTimer() is called after setting up the event listeners. This function likely resets a timeout timer that keeps track of how long the user has been inactive.

- Clean up event listeners on unmount or when login changes:

The return statement inside the useEffect defines a cleanup function that is executed when:
The component is about to unmount, or
The login state changes.

- Inside the cleanup function:
The window.removeEventListener methods are used to remove the event listeners that were previously set up. This is important to avoid memory leaks and prevent unnecessary listeners running after the user logs out or the component is removed.
clearTimeout(timeoutId.current) is used to clear the timeout that might still be running, so no unnecessary logout logic is triggered.

If login is falsy (user is not logged in):

If the login state is falsy (the user is not logged in), the function calls setIsActive(false) to set the user's activity state to false. This might indicate that the user is not active because they are logged out, and no activity is being tracked.

7. Showing the "Are You Active?" Prompt

<ConfirmPopup
  open={showPrompt}
  setOpen={setShowPrompt}
  setAccepted={resetTimer}
  message={"You will be logged out soon due to inactivity. Click 'Continue' to stay logged in."}
  handleNo={logout}
  yesBtn={"Continue"}
  hideNoBtn={true}
/>

The ConfirmPopup component is a modal that displays the "Are you active?" message with the option to either stay logged in or be logged out.
setAccepted={resetTimer} means that clicking "Continue" resets the inactivity timer, keeping the user logged in.
handleNo={logout} means clicking "No" will log the user out after the specified time.

## You can customise your modal as you want.

Complete working code

import { useEffect, useState, useRef, createContext, lazy } from 'react';
import { useNavigate } from 'react-router-dom';
import './tailwind.css'
import { cleanLocalStorage } from './helpers/helper';
const ConfirmPopup = lazy(() => import('./helpers/common/modals/ConfirmPopup'));

export const MyContext = createContext("");

function App() {
  const [login, setLogin] = useState("");
  const [isActive, setIsActive] = useState(true);
  const [showPrompt, setShowPrompt] = useState(false);
  const timeoutId = useRef(null);
  const navigate = useNavigate();

  const resetTimer = () => {
    if (showPrompt) {
      return;
    }
    setIsActive(true);
    setShowPrompt(false);
    clearTimeout(timeoutId.current);
    if (login) {
      timeoutId.current = setTimeout(() => {
        setIsActive(false);
        setShowPrompt(true);
      }, 13 * 60 * 1000); // 1 minute = 60000 milliseconds
    }
  };

  // Function to handle user activity
  const handleActivity = () => {
    if (!isActive) {
      resetTimer();
    }
  };

  const logout = () => {
    setShowPrompt(false);
    cleanLocalStorage();
    navigate("/login");
    setLogin("");
  }

  useEffect(() => {
    const token = localStorage.getItem('token');

    if (token) {
      setLogin(token)
    }
  }, [login]);

  useEffect(() => {
    let timer
    clearTimeout(timer);
    if (showPrompt) {
      timer = setTimeout(() => {
        logout();
      }, 2 * 60 * 1000);
    }
    return () => {
      clearTimeout(timer);
    }

  }, [showPrompt])

  useEffect(() => {
    if (login) {
      window.addEventListener('mousemove', handleActivity);
      window.addEventListener('keydown', handleActivity);
      window.addEventListener('click', handleActivity);

      // Start the timer on mount
      resetTimer();

      // Clean up event listeners on unmount
      return () => {
        window.removeEventListener('mousemove', handleActivity);
        window.removeEventListener('keydown', handleActivity);
        window.removeEventListener('click', handleActivity);
        clearTimeout(timeoutId.current);
      };
    }
    setIsActive(false);
  }, [login]);

  return (
    <MyContext.Provider value={{ login, setLogin }} >
      <div>
       {/* You can update this model component with your own UI */}
        <ConfirmPopup
          open={showPrompt}
          setOpen={setShowPrompt}
          setAccepted={resetTimer}
          message={"You will be logged out soon due to inactivity. Click 'Continue' to stay logged in."}
          handleNo={logout}
          yesBtn={"Continue"}
          hideNoBtn={true}
        />
      </div>
    </MyContext.Provider >
  );
}

export default App;

Conclusion

Tracking user inactivity is a powerful way to improve both security and user engagement on your website. By setting up timeouts, listening for user interactions, and displaying a thoughtful inactivity prompt, you can ensure that your users have the best experience possible while keeping their sessions secure.

This approach can be extended to a wide variety of use cases, such as auto-saving data, preventing session hijacking, or prompting users to complete tasks before they leave your site. Experiment with different timeout periods, messaging, and prompts to find what works best for your application.

Building a Custom Audio Player in React: A Step-by-Step Guide

Nilesh Kumar — Thu, 07 Nov 2024 09:14:30 +0000

Introduction: In this blog, we’re building a simple yet powerful audio player component in React. With the ability to play, pause, stop, and skip audio, this component leverages React hooks and interactive icons to create a seamless audio experience. Let's dive into each part and learn how to integrate this audio player in any project that uses audio in base64 format.

Component Breakdown

This PlayStory component makes use of React Icons for play, pause, skip, and stop buttons. It also handles audio state and playback using useState and useEffect hooks.

import {
  IoPlayCircleOutline,
  IoPauseCircleOutline,
  IoStopCircleOutline,
  IoPlaySkipBackCircleOutline,
  IoPlaySkipForwardCircleOutline,
} from "react-icons/io5";

These imported icons give the player a clean, accessible design. Let's go over each major part:

Install react-icon from npm store

npm i react-icons

1. Component Initialization

The PlayStory component receives an audio prop in base64 format. This is converted into a playable audio file inside the useEffect hook. The playing state determines whether the audio is currently playing or paused, while duration and currentTime handle the audio’s total time and current time display.

Key states:

playing: Boolean, toggles audio play and pause.

audioFile: Holds the created audio file object.

duration: Stores formatted total duration of the audio.

currentTime: Stores formatted time of the current playback position.

2. Formatting Audio Time

The formatTime function converts raw audio seconds into an "MM
" format. This is used to show duration and currentTime for a better user experience.

const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  return `${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
};

3. Audio Controls

This component comes with essential playback controls:

Play/Pause Toggle
The handlePlayPause function toggles between playing and pausing the audio based on the playing state. When paused, it stops audio playback; when played, it resumes.
Stop
The handleStop function stops the audio, sets currentTime to the beginning, and resets the playing state.
Skip Back/Forward
The handleSkipBack and handleSkipForward functions allow users to jump back or forward by 10 seconds in the audio.

const handlePlayPause = () => {
  if (audioFile) {
    if (playing) {
      audioFile.pause();
    } else {
      audioFile.play();
    }
    isPlaying((pre) => !pre);
  }
};

const handleStop = () => {
    audioFile.pause();
    audioFile.currentTime = 0;
    isPlaying(false);
  };

  const handleSkipBack = () => {
    const newTime = audioFile.currentTime - 10;
    audioFile.currentTime = newTime < 0 ? 0 : newTime;
  };

  const handleSkipForward = () => {
    const newTime = audioFile.currentTime + 10;
    audioFile.currentTime =
      newTime > audioFile.duration ? audioFile.duration : newTime;
  };

4. State to be manage for player

 const { base64audio } = props; // get the audio data in base64
  const [playing, isPlaying] = useState(false);
  const [audioFile, setAudioFile] = useState(null);
  const [duration, setDuration] = useState("00:00");
  const [currentTime, setCurrentTime] = useState("00:00");

5. Managing Audio Playback with Hooks

Two useEffect hooks are used for:

Setting up the audio file from the base64 prop, and setting duration when audio is loaded.
Updating currentTime while the audio plays, and resetting playing state when the audio ends.

useEffect(() => {
  if (base64adio) {
    const audio = new Audio(`data:audio/x-wav;base64, ${base64adio}`);
    setAudioFile(audio);

    audio.onloadeddata = () => {
      const audioDuration = audio.duration;
      if (typeof audioDuration === "number" && !isNaN(audioDuration)) {
        setDuration(formatTime(audioDuration));
      }
    };
  }
}, [base64adio]);

6. Update current time while audio is playing

adding the event to manage current time

useEffect(() => {
    if (audioFile) {
      // // Update current time while audio is playing
      audioFile.ontimeupdate = () => {
        const duration = audioFile.duration;
        const currentTime = audioFile.currentTime;
        if (duration === currentTime) {
          isPlaying(false);
          audioFile.currentTime = 0;
          audioFile.pause();
          setCurrentTime(formatTime(audioFile.currentTime));
        } else {
          setCurrentTime(formatTime(currentTime));
        }
      };
    }

7. Rendering the Component

The component’s return function includes:

currentTime and duration display.
Icon buttons for skip back, play/pause, stop, and skip forward. Each icon is styled and sized for a better look and user interaction.

return (
  <div className="flex items-center justify-between mx-1">
    {currentTime}
    <IoPlaySkipBackCircleOutline onClick={handleSkipBack} size={25} />
    {playing ? (
      <IoPauseCircleOutline onClick={handlePlayPause} size={25} />
    ) : (
      <IoPlayCircleOutline onClick={handlePlayPause} size={25} />
    )}
    <IoStopCircleOutline onClick={handleStop} size={25} />
    <IoPlaySkipForwardCircleOutline onClick={handleSkipForward} size={25} />
    {duration}
  </div>
);

Usage Example

To integrate this audio player in your project, you only need to pass the audio data in base64 format to the any component. The player will handle playback controls seamlessly, providing an easy-to-use audio experience.

Complete code

Here is the complete working code.


import React, { useEffect, useState } from "react";
import {
  IoPlayCircleOutline,
  IoPauseCircleOutline,
  IoStopCircleOutline,
  IoPlaySkipBackCircleOutline,
  IoPlaySkipForwardCircleOutline,
} from "react-icons/io5";

const PlayStory = (props) => {
  const { base64adio } = props;
  const [playing, isPlaying] = useState(false);
  const [audioFile, setAudioFile] = useState(null);
  const [duration, setDuration] = useState("00:00");
  const [currentTime, setCurrentTime] = useState("00:00");

  const handleStop = () => {
    audioFile.pause();
    audioFile.currentTime = 0;
    isPlaying(false);
  };

  const handleSkipBack = () => {
    const newTime = audioFile.currentTime - 10;
    audioFile.currentTime = newTime < 0 ? 0 : newTime;
  };

  const handleSkipForward = () => {
    const newTime = audioFile.currentTime + 10;
    audioFile.currentTime =
      newTime > audioFile.duration ? audioFile.duration : newTime;
  };

  const handlePlayPause = () => {
    if (audioFile) {
      if (playing) {
        audioFile.pause();
      } else {
        audioFile.play();
      }
      isPlaying((pre) => !pre);
    }
  };

  useEffect(() => {
    if (base64adio) {
      const audio = new Audio(`data:audio/x-wav;base64, ${base64adio}`);
      setAudioFile(audio);

      audio.onloadeddata = () => {
        const audioDuration = audio.duration;
        if (typeof audioDuration === "number" && !isNaN(audioDuration)) {
          setDuration(formatTime(audioDuration));
        }
      };
    }
  }, [base64adio]);

  useEffect(() => {
    if (audioFile) {
      // // Update current time while audio is playing
      audioFile.ontimeupdate = () => {
        const duration = audioFile.duration;
        const currentTime = audioFile.currentTime;
        if (duration === currentTime) {
          isPlaying(false);
          audioFile.currentTime = 0;
          audioFile.pause();
          setCurrentTime(formatTime(audioFile.currentTime));
        } else {
          setCurrentTime(formatTime(currentTime));
        }
      };
    }

    return () => {
      if (audioFile) {
        audioFile.onloadeddata = null; // Cleanup on unmount
        audioFile.ontimeupdate = null; // Cleanup on unmount
      }
    };
  }, [audioFile]);

  return (
    <div className="flex items-center justify-between mx-1">
      {currentTime}
      <IoPlaySkipBackCircleOutline
        className="cursor-pointer text-gray-800 size-6"
        size={25}
        onClick={handleSkipBack}
      />
      {playing ? (
        <IoPauseCircleOutline
          onClick={handlePlayPause}
          className="cursor-pointer text-gray-800 size-6"
          size={25}
        />
      ) : (
        <IoPlayCircleOutline
          onClick={handlePlayPause}
          className="cursor-pointer text-gray-800 size-6"
          size={25}
        />
      )}
      <IoStopCircleOutline
        className="cursor-pointer text-gray-800 size-6"
        size={25}
        onClick={() => handleStop()}
      />
      <IoPlaySkipForwardCircleOutline
        className="cursor-pointer text-gray-800 size-6"
        size={25}
        onClick={handleSkipForward}
      />
      {duration}
    </div>
  );
};

export default PlayStory;

const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  return `${minutes.toString().padStart(2, "0")}:${remainingSeconds
    .toString()
    .padStart(2, "0")}`;
};

Conclusion

This audio player component provides a great way to integrate audio playback controls in React applications. With customizable controls and a clear visual layout, it’s easy to add, modify, or expand its functionalities.

DEV Community: Nilesh Kumar

🚀 Supercharge Your React Apps with Event Delegation! ✨

The Hidden Cost of Too Many Listeners

What is Event Delegation? The Magic Behind the Scenes

Why React Loves Event Delegation (and you should too!)

The advantages are clear:

The Million-Dollar Question: Getting Each Object on Row Click in Event Delegation

The Strategy:

Example 1: Basic List of Products (Using data-id)

Explanation:

Example 2: Interactive Table (Using data-index)

Key Difference with data-index:

Example 3: Handling Specific Actions within a Row

Key takeaways from this example:

Final Thoughts

How to Fix “Permission Denied (publickey)” When Using Git with GitHub on Windows

🐛 Common Errors and What They Mean

✅ Step 1: Check if You Already Have an SSH Key

🔐 Step 2: Generate a New SSH Key

⚙️ Step 3: Enable and Start the SSH Agent (Properly on Windows)

🔗 Step 4: Add Your SSH Key to GitHub

🧪 Step 5: Test Your SSH Connection to GitHub

🚀 Step 6: Push Your Code

🧾 Summary of All Possible Errors and Fixes

🙋 Troubleshooting Tips

📌 Final Thoughts

How to Create Custom Aliases in Vite for Cleaner Imports

Description

A Step-by-Step Guide

Why Use Vite with React?

Before

After

Getting Started

Step 1: Initialize a Vite Project

Configuring Vite for React

Breaking Down the Configuration

Installing Dependencies

Running the Project

Conclusion

Final Thoughts

Without JWT Library Decode and Verify a JWT Token in JavaScript

Description

🔍 What is a JWT?

📌 Step 1: Decode the JWT in JavaScript

🚀 JavaScript Code to Decode JWT

🔹 How It Works?

📌 Step 2: Verify the JWT Signature

✅ JavaScript Code to Verify JWT Signature

🔹 How It Works?

🔬 Example Usage

🎯 Summary

💡 Final Thoughts

Learning Node.js with Express.js: A Day-by-Day Guide

Learning Node.js with Express.js: A Day-by-Day Guide

Day 1: Introduction to Node.js

Topics:

Exercises:

Code:

Code:

Day 2: Setting Up Express.js

Topics:

Exercises:

Command:

Code:

Code:

Day 3: Routing and API Basics

Topics:

Exercises:

Code:

Code:

Day 4: Working with Middleware

Topics:

Exercises:

Code:

Code:

Code:

Day 5: Connecting to a Database (MongoDB)

Topics:

Exercises:

Code:

Example 1: Basic List of Products (Using `data-id`)

Example 2: Interactive Table (Using `data-index`)

Key Difference with `data-index`: