Forem: Suman Kumar

In a world flooded with headlines, bias, and misinformation, NewsPulse AI acts like an AI-powered research assistant. You ask a question, and it fetches, scrapes, analyzes, and visualizes fresh news articles in real-time—just like a human researcher, but supercharged.

🚀 What It Does

🔍 Enter any news-related query (e.g. farmers protest, AI in education, etc.)
🌐 NewsPulse fetches real-time articles via Bright Data’s MCP scraping infrastructure
🧠 LangChain & GPT-3.5 process each article for:
Sentiment (positive/neutral/negative)
Bias
Political lean
Toxicity and propaganda presence
📊 Get aggregate insights and transparent logs instantly

What I Built

NewsPulse AI is an intelligent real-time news analysis engine that allows users to query any news-related topic and instantly receive a stream of analyzed articles. It mimics how a human researcher might discover, navigate, extract, and interact with web content—but does it entirely autonomously.

The project solves the problem of understanding media bias, misinformation, and sentiment across different news sources in real-time. Whether a user wants to explore how different platforms cover a political event, assess the emotional tone of news about a public figure, or analyze the presence of propaganda or toxicity in media, NewsPulse AI provides deep insights in seconds.

🔧 Deep Integration with FastMCP via STDIO

🔥 One of the key differentiators of our solution is that we have directly integrated Bright Data’s official MCP source code with our Node.js backend using FastMCP over standard input/output (STDIO).

We are:

Running the FastMCP server inside our Express (Node.js) environment
Communicating with it through STDIO (stdin/stdout)
Launching and managing scraping methods programmatically from Node.js

This level of integration is not just plug-and-play—it required fine-tuning STDIO communication and handling input/output streams carefully. But it makes our backend much more flexible and efficient, enabling real-time task execution without relying on HTTP or RPC overhead.

It also aligns perfectly with Bright Data’s vision for real-time AI agents interacting with the open web, giving us full control over tool orchestration, logging, and performance.

🛠️ Tech Stack & Architecture

Our project is built entirely on modern, open-source tools optimized for real-time web data extraction and analysis:

Frontend: React + Vite
Backend: Node.js + Express
AI Orchestration: LangChain + OpenAI GPT-3.5 Turbo
Scraping Infrastructure: Bright Data MCP (FastMCP Server)
Communication: REST APIs + WebSocket (for real-time logs & results)
Deployment: Hosted on an EC2 instance with persistent STDIO-based communication

⚡ No Database Used:
We do not persist any data. Everything — from scraping to analysis — happens live from the open web. This ensures:

Real-time results for every query
No stale or outdated information
Transparent validation that scraping works on-demand
Compliance with the hackathon’s goal of showcasing live data access

This stateless, no-DB approach proves the reliability of Bright Data’s infrastructure in powering real-time AI agents without any dependency on pre-stored content.

Demo

Video Demo

📁 GitHub Repo: https://github.com/sumankalia/news-pulse-ai

🌐 Live Site:
Frontend: http://ec2-16-170-239-65.eu-north-1.compute.amazonaws.com:5173/
Backend: http://ec2-16-170-239-65.eu-north-1.compute.amazonaws.com:4002/api/articles/ping

📸 Screenshots:

🔍 Search Input Interface – Users can enter any news-related query, such as “farmers protest” or “AI in education,” to fetch real-time news articles and analyze them instantly.

⚙️ Real-Time Query Processing – The system uses Bright Data’s MCP server to fetch and analyze fresh articles from Indian news sources. Logs show live scraping and analysis updates for transparency and debugging.

📰 Scraped Article Snapshot – A detailed preview of an individual article showing title, source, timestamp, and extracted summary. Each result is processed for bias, sentiment, and lean.

📊 Sentiment, Bias, and Political Lean Breakdown – Each article undergoes NLP-based analysis to categorize tone (positive/neutral/negative), detect media bias, and predict political inclination.

📈 Aggregate Insights Dashboard – Provides a summary of all fetched articles, highlighting sentiment distribution, bias frequency, and lean trends to help users quickly assess media coverage patterns.

How I Used Bright Data's Infrastructure

This project is powered by Bright Data’s MCP infrastructure, particularly the FastMCP server, which enables our AI agent to simulate human browsing behavior and extract structured information in real time. Here’s how the four key actions were implemented:

1. Discover

We use LangChain with a custom PromptTemplate to dynamically route user queries to one of four scraping methods:

scrape_as_article: Direct article URLs
scrape_a_homepage: Homepage or latest headline queries
search_via_google: Informational and broad-topic queries
search_via_bing: Dynamic, JS-heavy search result pages

switch (result.method) {
      case "scrape_as_article":
        data = await runToolCall("scrape_as_article", { url: query });
        break;
      case "scrape_a_homepage":
        data = await runToolCall("scrape_a_homepage", {
          url: result?.homepageUrl,
        });
        break;
      case "search_via_google":
        data = await runToolCall("search_via_google", { query });
        break;
      case "search_via_bing":
        processedResults = await searchViaBing({
          query,
          userId,
        });
    }

LangChain decides the optimal route based on user intent, and our backend follows through using the selected method.

2. Access

We leverage Bright Data’s FastMCP to access dynamic and protected web pages like news homepages or search results.

Here’s what happens:

First, we load the target page (e.g., a news homepage or Bing/Google search results).
We then scrape all the article links visible on that page.
Next, we go article-by-article, scraping each one individually for full content and metadata.
This method helps us analyze multiple perspectives from a single page, all without hitting stale data or relying on pre-saved content.

This smart multi-link scraping approach powers our real-time insights across 50+ articles per query.

// Step 1: Navigate to the target page (homepage or search results)
await runToolCall("scraping_browser_navigate", {
  url: "https://www.newswebsite.com/",
});

// Step 2: Wait for articles to load on the page
await runToolCall("scraping_browser_wait_for", {
  selector: "article a[href]",
  timeout: 10000,
});

// Step 3: Extract all article links
const linksResult = await runToolCall("scraping_browser_links", {});

// Step 4: Iterate through each link and trigger detailed article scraping
for (const link of linksResult.links) {
  await runToolCall("scrape_as_article", { url: link });
}

3. Extract

We extract detailed article metadata, including:
• title, content, url, published date, author, source, and image

Bright Data supports extraction via:

✅ rawHtml – full HTML of the scraped content
✅ markdown – clean, AI-friendly summary format

server.addTool({
  name: "scrape_a_homepage",
  description:
    "Scrape a single webpage URL with advanced options for " +
    "content extraction and get back the results in MarkDown language. " +
    "This tool can unlock any webpage even if it uses bot detection or " +
    "CAPTCHA.",
  parameters: z.object({ url: z.string().url() }),
  execute: tool_fn("scrape_a_homepage", async ({ url }) => {
    let response = await axios({
      url: "https://api.brightdata.com/request",
      method: "POST",
      data: {
        url,
        zone: unlocker_zone,
        format: "raw",
        data_format: "markdown",
      },
      headers: api_headers(),
      responseType: "text",
    });
    return response.data;
  }),
});

We utilized a combination of custom and prebuilt functions to clean the raw data and extract the necessary information for analysis.

4. Interact

This is where Bright Data’s full capabilities come to life. In the search_via_bing method, we simulate a full browser interaction flow using MCP tools:

Navigate to Bing.com
Wait for the page to load
Clear the input field
Enter the search text
Press Enter
Wait ~5 seconds
Wait for a result-related HTML selector to appear
Scrape result links using scraping_browser_links

This closely mimics human behavior, allowing us to pull data from otherwise inaccessible or JS-heavy websites.

const url = "https://www.bing.com/news";
  const searchSelector = "input#sb_form_q";
  const searchText = query;
  const processedResults = [];


    // Navigate to the webpage using scraping_browser_navigate
    await runToolCall("scraping_browser_navigate", {
      url,
    });

    await runToolCall("scraping_browser_wait_for", {
      selector: searchSelector,
      timeout: 10000,
    });

    // Clear the search field first using scraping_browser_type
    await runToolCall("scraping_browser_type", {
      selector: searchSelector,
      text: "",
      submit: false,
    });
    // Type the search text using scraping_browser_type
    await runToolCall("scraping_browser_type", {
      selector: searchSelector,
      text: searchText,
      submit: false,
    });
    // Press Enter to submit the search
    await runToolCall("scraping_browser_press", {
      key: "Enter",
    });
    // Wait for the search results to load
    // First wait for network to be idle
    await new Promise((resolve) => setTimeout(resolve, 3000));

    // Wait for search results container
    await runToolCall("scraping_browser_wait_for", {
      selector: 'a.linkBtn[aria-label="Best match"]',
      timeout: 50000,
    });
    // Additional wait for search results to be fully loaded
    await new Promise((resolve) => setTimeout(resolve, 2000));
    // Wait for article links to be present
    await runToolCall("scraping_browser_wait_for", {
      selector: "article a[href*='/articles/']",
      timeout: 5000,
    });
    // Get all links from the page using scraping_browser_links
    const linksResult = await runToolCall("scraping_browser_links", {});

Performance Improvements

Before integrating Bright Data’s MCP server, our initial architecture relied on:

Sequential proxy rotation using Bright Data’s Residential, Web Unlocker, and Mobile proxies
Headless browser automation via Puppeteer
Custom code for region-based rotation and JavaScript-rendered scraping

While functional, this method had significant drawbacks:

High latency per article (6–12 seconds)
Increased code complexity and maintenance overhead
Failures on JS-heavy or protected pages

🚀 Transition to Bright Data MCP (FastMCP Server)

By switching to the Fast MCP server, we achieved:

⏱ ~80% reduction in scraping latency per article
💡 Seamless access to protected and JavaScript-heavy sites with zero-code browser interaction
⚙️ Lightweight, declarative scraping powered by STDIO communication between our Node.js backend and MCP server
📦 Simplified architecture (less boilerplate, no Puppeteer or manual proxy handling)
✅ Greater reliability across countries and site types — with support for region-specific scraping

We are now scraping 50+ articles across multiple countries in real time without bottlenecks or rate-limiting issues.

You can even compare our old Puppeteer-based proxy project here:
👉 Legacy Puppeteer Proxy Scraper https://inspiring-taffy-5808f5.netlify.app/
And see how Bright Data MCP gave us a 10x better development and performance experience.

Future Improvements

We built NewsPulse AI to meet hackathon goals with a real-time, stateless architecture. For the next phase, we plan to:

Integrate a Vector DB (like Pinecone or Qdrant) to enable semantic search and avoid redundant scraping.
Add a Scalable Job Queue for handling spikes using tools like BullMQ or Redis.
Implement Auth & API Keys to support user-specific usage and rate-limiting.
Secure Secrets Properly, moving all credentials to secret managers for a real deployment.
Improve UX with features like sentiment trend visualizations, historical comparisons, and saved analyses.

These updates will make the platform more robust, scalable, and production-ready.

Final Notes

NewsPulse AI showcases how powerful AI agents become when paired with open, real-time, structured web data. We didn’t just build a tool—we built a thinking system that mimics human research patterns at internet speed.

Lovingly crafted by Suman and his wife Sarita. 💫

🙌 Shoutout
Big thanks to the team at Bright Data! Loved integrating your MCP platform.

If you're reading this and found Bright Data useful, give their repo some love:
🌟 https://github.com/luminati-io/brightdata-mcp

Smart Doctor: AI-Powered Medical Assistant with Human-in-the-Loop Access Control using Permit.io- Permissions Redefined

Suman Kumar — Sun, 04 May 2025 15:51:00 +0000

This is a submission for the Permit.io Authorization Challenge: AI Access Control

What I Built

Smart Doctor is an AI-powered medical assistant that allows patients to enter symptoms and receive instant diagnosis and treatment suggestions using OpenAI (ChatGPT). But we didn’t stop there — this app is designed to mirror real-world workflows with built-in authorization controls, ensuring AI suggestions are always reviewed by licensed doctors before reaching the patient.

It’s more than a demo — it’s a realistic, scalable solution that demonstrates responsible AI integration with fine-grained, role-based and attribute-based access control (ABAC) using Permit.io.

Demo

🧪 Live Frontend: https://rainbow-parfait-febebb.netlify.app/auth/login
⚙️ Live Backend API: https://smart-doctor-backend.onrender.com/api/

Test Credentials:

Role        Username       Password
Admin       admin      2025DEVChallenge
Doctor      doctor     2025DEVChallenge
Patient     patient    2025DEVChallenge

Project Repo

🔗 GitHub: https://github.com/sumankalia/smart-doctor

🛡️ Feature Access Table

🛡️ Authorization for AI Applications with Permit.io

In Smart Doctor, authorization is more than just frontend role checks — it's enforced through centralized policies with Permit.io, tightly integrated into our backend system. Here's how we leveraged Permit to secure our AI-driven healthcare platform:

✅ Real-Time User Sync with Permit

As soon as a user is created in MongoDB, we sync them in real-time with Permit using:

await permitInstance.api.syncUser({
  key: user._id.toString(),
  first_name: user.firstName,
  last_name: user.lastName || ".",
  email: user.email,
});

This ensures every user exists in the Permit dashboard and can be managed through policies.

🔐 Automatic Role Assignment
After syncing, we assign roles dynamically via:

await permitInstance.api.assignRole({
  role: roleMap.Doctor, // or Admin, Patient
  tenant: "default",
  user: user._id.toString(),
});

This lets us externalize access logic entirely — users can only see or perform actions based on their role and the resource state (e.g., AI diagnosis approved or not).

Walkthrough

Here’s a step-by-step walkthrough of how Smart Doctor works, showcasing the full user flow and fine-grained access control in action.

1. Patient: Submit a New Case
A logged-in patient starts by submitting symptoms using a simple form.

The frontend sends this data to the backend API.
The backend calls the OpenAI API to generate a diagnosis and treatment plan.
The case is then assigned to the doctor with the lowest workload.

2. AI: Generate Diagnosis + Treatment
Using the submitted symptoms, the backend triggers a call to OpenAI (ChatGPT model) and returns a recommended diagnosis and treatment.

const userQuery = `
      Symptoms: ${symptoms}
      Case Description: ${caseDescription}
      Additional Information: ${additionalInfo}

      Please provide your response in two sections:
      1. Possible Diagnosis
      2. Suggested Treatment Plan
 `;


const chatCompletion = await openai.chat.completions.create({
      model: process.env.OPENAI_MODEL,
      messages: [
        {
          role: "system",
          content: userQuery,
        },
        {
          role: "user",
          content: `Please analyze the following medical case and 
         provide a professional medical assessment:\n\n${userQuery}`,
        },
      ],
      temperature: 0.7, 
      max_tokens: 1000,
    });

const aiResponse = chatCompletion.choices[0].message.content;

3. Doctor: Review + Approve/Override
Doctors are notified of new cases assigned to them. They can:

View AI-generated results
Approve the diagnosis/treatment
Override and edit them
Add additional notes

Permit.io enforces that only doctors assigned to the case have edit permissions on that record.

4. Admin: Manage Ecosystem (Without Overreach)
Admins can:

View all users and cases
Reassign doctors
Update case status

BUT: Admins cannot modify diagnosis or treatment fields. This safeguard is enforced using ABAC policies in Permit.io.

5. Role-Based UI Access
Each user role has a distinct UI:

Patients: Can only view their own cases and AI response.
Doctors: Can edit AI output only for cases assigned to them.
Admins: Full visibility but restricted write access.

Permit.io checks are run before every sensitive action using custom middleware.

// Middleware check
 let permitted;
 if (resource === roleMap.Patient || resource === roleMap.Doctor) {
   permitted = await permitInstance.check(decoded._id.toString(), 
      action, {
          type: "users",
          attributes: {
            role: resource,
          },
        });
      } else {
        permitted = await permitInstance.check(
          decoded._id.toString(),
          action,
          resource
    );
 }

checkPermission("create", "medical_test")

6. Edge Cases & Safeguards

If AI fails, the doctor is prompted to diagnose manually.
Patients cannot re-edit submitted cases.
Unauthorized access triggers a 403 Forbidden from the backend.

My Journey

The idea sparked from the growing use of AI in health tech, and the need to design systems where AI doesn’t overstep boundaries. I wanted to explore:

How can AI suggest treatment, but still leave the final word to humans?
How can we govern AI responses using access policies?
How can a real app enforce that patients can’t view unapproved AI content, and admins can’t tamper with diagnoses?

I explored Permit.io as the perfect ABAC solution. It allowed me to define policies externally while keeping the code clean and scalable. The biggest challenge was getting Permit and the AI logic to talk smoothly, but once I modularized permissions (middlewares for protect and checkPermission), it all clicked.

Authorization for AI Applications with Permit.io

This project is a practical demonstration of AI Access Control in healthcare:

Patients can submit symptoms and view only doctor-approved AI results.
Doctors can review, approve, or override AI-generated diagnosis and treatment.
Admins can manage users and assignments but can’t access AI data — a deliberate, governance-first design.

How Permit.io Helped

Used Permit.io’s ABAC model with resource-level permissions (users, medical_cases).
Defined roles (patient, doctor, admin) and enforced actions like read, update, approve, etc.
Added checkPermission("update", "medical_case") middleware to secure AI-related endpoints.

By separating AI generation from user access, and wrapping it in Permit.io-driven access gates, the app shows how AI can remain useful without being unchecked.

Special Thanks

Huge thanks to Permit.io for building a developer-friendly access control system and for organizing this hackathon!

Built with ❤️ by Suman Kumar

Boost Node.js Performance with Worker Threads 🚀 | Multithreading Explained!

Suman Kumar — Sun, 30 Mar 2025 11:35:43 +0000

Node.js is great for handling multiple requests asynchronously, but what if I tell you it struggles with CPU-intensive tasks?

You may have noticed the server slows down when processing large files or running complex calculations.

As we know, Node.js runs on a single thread, meaning CPU-heavy tasks like large calculations or image processing can block the server.

The async/await can’t help because JS’s event loop is still single-threaded.

Well, the solution for this problem is “Worker Threads!”

Worker Threads help us run tasks in separate threads without blocking the main event loop.

We will understand this by a simple example of a CPU-intensive calculation with and without Worker Threads.

So, first we’ll create a function to calculate the “perfect numbers” below a certain number.

function isPerfectNumber(num) {
    // Find all divisors and sum them
    let sum = 0;
    for(let i = 1; i < num; i++) {
        if(num % i === 0) {
            sum += i;
        }
    }
    // If sum of divisors equals the number, it's perfect
    return sum === num;
}

 function findPerfectNumbers(maxNumber) {
    const perfectNumbers = [];
    // Check each number up to maxNumber
    for(let i = 1; i <= maxNumber; i++) {
        if(isPerfectNumber(i)) {
            perfectNumbers.push(i);
        }
    }
    return perfectNumbers;
}

module.exports = {
    isPerfectNumber,
    findPerfectNumbers
};

Now, we will use this to check if it's blocking the next process while execution. We’ll also add a function that will log the count after executing the “Main thread finished” log.


console.log("Main thread started");

console.time("Without Worker");
console.log("Result:", findPerfectNumbers(100000));
console.timeEnd("Without Worker");

console.log("Main thread finished");

// Add a simple counting task to show blocking
console.log("\nStarting simple counting task...");
console.time("Simple Count");
let count = 0;
for(let i = 0; i < 10; i++) {
    console.log(`Counting: ${i}`);
    count++;
    // Small delay to make the counting visible
    const start = Date.now();
    while(Date.now() - start < 1000) {} // Busy wait for 1 second
}

console.timeEnd("Simple Count");

In the above example, when we run it, we’ll notice that when the execution of “findPerfectNumbers” starts, it blocks the other execution for approximately. 7 seconds(in my Macbook Air). After its execution, the counter starts executing.

Now, we have understood the problem, that we can’t block the server for any process for this long time. The server must be responsive. So, for these types of heavy calculations, we use Worker Threads.

Let’s solve this problem with the Worker Thread.

“worker_threads” is a core module of Node.js; we don’t have to install it separately.

Let’s create a separate file as “worker.js”

const { parentPort } = require('worker_threads');
const { findPerfectNumbers } = require('./helpers');

//Listen for messages from the main thread
parentPort.on('message', (num) => {
    const result = findPerfectNumbers(num);
    parentPort.postMessage(result); //Send result back
})

In this file, we’ll write the worker logic. Basically, it will listen for the “message” from parentPort or from the main thread where it's called. When it receives this event, it starts executing and returns the result to the main thread after execution.

Now, we will call this worker from our main file,

const { Worker } = require('worker_threads');

// Create a worker thread
const worker = new Worker('./worker.js');

worker.postMessage(100000); // Send a number to the worker for calculation

worker.on('message', (result) => {
    console.log("Worker Result:", result);
});

console.log("Main thread continues executing...");



// Add a simple counting task to show blocking
console.log("\nStarting simple counting task...");
console.time("Simple Count");
let count = 0;
for(let i = 0; i < 10; i++) {
    console.log(`Counting: ${i}`);
    count++;
    // Small delay to make the counting visible
    const start = Date.now();
    while(Date.now() - start < 1000) {} // Busy wait for 1 second
}

console.timeEnd("Simple Count");

From the main file, we basically define the worker first, by giving the path of the worker file, and then post a “message” event to the worker. In this case, we are sending the number “1,00,000”. And then we’ll listen for the “message” event from the worker by using the “on” method. After this, we have used the same logic to log the count.

The result of this is as expected. After the worker is called for the calculation, the main thread is not blocked and starts executing the next count script immediately. And when the result of the Worker Thread is ready, it’ll send it back through the “message” event.

We can use this in case of CPU-intensive tasks. Better not to use these for asynchronous tasks like database queries.

Github- https://github.com/sumankalia/react_web_workers/tree/type

If you want to watch this tutorial on YouTube in Hindi. Here's the link

If you like the above article, please clap on the article.

Thanks for reading.

Web workers in ReactJs

Suman Kumar — Sat, 16 Sep 2023 07:16:58 +0000

Have you ever faced a situation in which you are executing a block of code and it is freezing the UI for a few seconds? If yes then you surely need a solution to handle that block of code in the background.

In React we have a simple way to do these types of CPU-intensive processes in the background with the help of web workers. First of all what a web worker is?

A web worker is a JavaScript feature that allows you to run scripts in the background, separate from the main thread of your web page. This background execution enables you to perform tasks concurrently without blocking the user interface (UI) or causing it to become unresponsive. Web workers are particularly useful for handling computationally intensive or time-consuming operations without impacting the user's experience.

The use cases for a web worker are

Complex Calculations: Web workers are ideal for performing complex mathematical calculations or data processing tasks without impacting the main thread.
Large Data Handling: When dealing with large datasets or files, web workers can help process and parse the data in the background.
Background Services: Web workers can be used to run background services such as periodic data synchronization or background notifications.

So, let's try to implement a web worker in a React application.

First, we create a react project, and then we use a service faker to create 25000 user records.

import { faker } from '@faker-js/faker';

export function fetchUsers() {
    const users = [];

    for (let i = 0; i < 25000; i++) {
        let id = i + 1;
        let name = faker.person.fullName();
        let email = faker.internet.email();
        let joinedOn = faker.date.recent();
        let commentCount = faker.number.int({ min: 0, max: 100 });
        let user = {
            id,
            name,
            email,
            joinedOn,
            commentCount
        };
        users.push(user);
    }
    return Promise.resolve(users);
}

Now, our goal is to sort these records ascending and descending based on "commentCount" by using a web worker.

So, first, we will create two files "src/app.worker.js" and "src/WebWorker.js".

In the "app.worker.js" file we will export an arrow function in which we will add an event listener on the window object(self) to listen to the "message". This "message" will be triggered from the UI with "users" and "type"(ascending or descending" variables.

export default () => {
  self.addEventListener('message', e => { // eslint-disable-line no-restricted-globals
      if (!e) return;
      let { users, type } = e.data;

      if(type === "asc") {
        users = users.sort((a, b) => a.commentCount - b.commentCount);
      } else {
        users = users.sort((a, b) => b.commentCount - a.commentCount);
      }

      postMessage(users);
  })
}

And we will sort it according to the "type" variable and return it by "postMesssage" method.

And in the "WebWorker.js" we will export a class.

export default class WebWorker {
    constructor(worker) {
        const code = worker.toString();
        const blob = new Blob(['('+code+')()']);
        return new Worker(URL.createObjectURL(blob));
    }
}

It will simply change the worker we defined in "app.worker.js" to an object URL.

Now, let's connect this webworker to the UI.

First we will import both the "worker" and "WebWorker" from the respective files.

import worker from './app.worker.js';
import WebWorker from './WebWorker';

Then, we will initialize the "WebWorker" with the argument "worker".

const webWorker = new WebWorker(worker);

First, we will work on the ascending logic. So, we will send the "users" and "type" to the worker by the "postMessage" method on this web worker.

webWorker.postMessage({ users, type: "asc"});

Then, we will listen to the "message" and get the sorted data from the web worker like this.

webWorker.addEventListener('message', (event) => {
            const sortedList = event.data;

            setUsers(sortedList);
        });

Same logic we will add for the descending function as well.

webWorker.postMessage({ users, type: "desc"});
        webWorker.addEventListener('message', (event) => {
            const sortedList = event.data;

            setUsers(sortedList);
        });

So, now our sorting is working fine. But don't forget to terminate the web worker at the time of component unmounting.

return () => {
            webWorker.terminate()
        }

So, finally, our application will look something like this.

Working Example- https://6505555525bea36e699fd62c--monumental-cuchufli-bc3416.netlify.app/

Github- https://github.com/sumankalia/react_web_workers/tree/type

If you want to watch this tutorial on YouTube in Hindi. Here's the link

If you like the above article, please clap on the article.

Thanks for reading.

10 Top AI Tools for Boosting Productivity in 2023: From Grammarly to ChatGPT

Suman Kumar — Mon, 20 Mar 2023 13:21:37 +0000

Artificial intelligence has become an integral part of modern-day technology and has transformed various aspects of our lives. AI tools have proven to be incredibly useful in increasing productivity in a wide range of industries, from healthcare to finance to marketing. In this article, we will look at the top 10 AI tools that can help you increase your productivity.

1. ChatGPT

ChatGPT is a chatbot powered by OpenAI that can help you perform a variety of tasks, from answering questions to generating text. It uses natural language processing to understand user input and provide helpful responses. ChatGPT can help you save time and increase productivity by automating tasks that would normally require manual effort.

2. Grammarly

Grammarly is an AI-powered writing tool that can help you enhance your writing skills and eliminate grammatical errors. It not only checks for grammar, spelling, and punctuation errors, but it also offers suggestions for improving sentence structure, word choice, and style. This tool is particularly useful for writers, editors, and content creators.

3. Hootsuite Insights

Hootsuite Insights is an AI tool that helps businesses monitor their social media activity and track their brand’s online reputation. It analyzes social media data to provide insights into customer sentiment, brand mentions, and trending topics. This tool can help businesses make informed decisions about their social media strategy and improve their online presence.

4. Trello

Trello is a project management tool that uses AI to help you organize your tasks and projects. It allows you to create boards, lists, and cards to keep track of your progress and deadlines. Trello also uses AI to suggest the best time to schedule tasks based on your productivity patterns.

5. SalesForce Einstein

SalesForce Einstein is an AI-powered sales tool that can help sales teams streamline their processes and improve their sales performance. It uses machine learning to analyze customer data and offer insights into sales trends, customer behavior, and sales forecasts. This tool can help sales teams prioritize leads and improve their conversion rates.

6. QuickBooks

QuickBooks is an accounting tool that uses AI to automate financial tasks and improve accuracy. It can help businesses manage invoices, expenses, and payroll, and it can also generate financial reports. This tool can save businesses time and money by streamlining their accounting processes.

7. Siri

Siri is an AI-powered virtual assistant that can help you perform tasks on your Apple devices. It can help you set reminders, send messages, make phone calls, and search the web using voice commands. This tool can help you save time and increase productivity by allowing you to perform tasks hands-free.

8. Wunderlist

Wunderlist is a to-do list app that uses AI to help you organize your tasks and prioritize your workload. It allows you to create to-do lists, set reminders, and collaborate with others on projects. Wunderlist also uses AI to suggest the best time to schedule tasks based on your productivity patterns.

9. Blackbox AI

Blackbox AI is an AI-powered email tool that uses natural language processing to help you manage your inbox and increase productivity. It can analyze your email history to identify important messages and prioritize your inbox accordingly. Blackbox AI can also suggest responses to emails based on your previous conversations. This tool can help you stay organized and focused on important tasks.

10. Otter.ai

Otter.ai is an AI-powered transcription tool that can help you transcribe and organize your meetings and interviews. It uses machine learning to transcribe audio recordings into text, and it can also identify speakers and differentiate between them. This tool can save you time and improve productivity by eliminating the need for manual transcription.

In conclusion, AI tools have the potential to revolutionize the way we work and increase our productivity. These top 10 AI tools can help you improve your writing

Thanks for reading 😀

Why You Should Learn the MERN Stack in 2023?

Suman Kumar — Tue, 14 Mar 2023 08:08:45 +0000

In the ever-evolving world of web development, staying up to date with the latest technologies and frameworks is crucial to your success. One technology that has been gaining popularity in recent years is the MERN stack, which stands for MongoDB, Express.js, React, and Node.js. In this article, we’ll explore why you should consider learning the MERN stack in 2023.

High Demand for MERN Stack Developers-

As more and more companies move their businesses online, the demand for skilled web developers continues to grow. According to a recent survey by Stack Overflow, JavaScript is the most popular programming language, with React and Node.js ranking as the second and third most popular web frameworks, respectively. This means that there is a high demand for developers who are skilled in the MERN stack, as it combines all three of these popular technologies.

Full-Stack Development with JavaScript-

One of the biggest advantages of the MERN stack is that it allows you to build full-stack web applications using only JavaScript. This means that you can write both the front-end and back-end of your application using the same language, making it easier to maintain and debug your code. This also means that you can use a single set of tools and libraries for your entire application, reducing the complexity of your development environment.

Scalability and Flexibility

The MERN stack is highly scalable and flexible, making it a great choice for building large and complex applications. MongoDB, for example, is a NoSQL database that can handle large amounts of unstructured data, while Node.js is known for its ability to take a high volume of simultaneous connections. This makes the MERN stack ideal for building applications that need to handle a large number of users and data.

Large Community and Extensive Resources

One of the advantages of using a popular technology stack like MERN is that it has a large and active community of developers. This means that you can find extensive documentation, tutorials, and resources online to help you learn and solve problems as you build your application. Additionally, there are many open-source libraries and tools available for the MERN stack, which can save you time and effort in development.

Future-Proofing Your Skills

Learning the MERN stack can be a great investment in your future career as a web developer. With its popularity and demand, it is likely to remain relevant and in demand for years to come. Additionally, the skills you gain from learning the MERN stack can be easily transferable to other popular web frameworks and technologies, such as MEAN (MongoDB, Express.js, Angular, and Node.js) or GraphQL.

Conclusion

In conclusion, the MERN stack is a powerful and versatile technology stack that can help you build scalable and flexible web applications using only JavaScript. With its high demand, extensive resources, and future-proofing potential, it is definitely worth considering learning in 2023. So, if you’re ready to take your web development skills to the next level, start exploring the MERN stack today!

Record Screen App with Javascript

Suman Kumar — Mon, 06 Mar 2023 06:12:55 +0000

Below is the tutorial on how we can use Screen Record API in javascript.

First, we will create an index.html file in a newly created project.

<html>
  <head>
    <meta charset="UTF-8" />

    <link rel="stylesheet" type="text/css" href="index.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <title>Screen capture api Demo</title>
  </head>

  <body>
    <div class="container">
      <h3>
        Click the "Start" button to begin video recording. You can stop the
        video by clicking the creatively-named "Stop" button. The "Download"
        button will download the received data
      </h3>
      <br />
      <div class="row">
        <div class="col-md-4 col-sm-12">
          <h2>Preview</h2>
          <video id="preview" width="300" height="200" autoplay muted></video>
          <button id="startButton" class="btn btn-primary mt-2">
            Start Recording
          </button>
          <button id="stopButton" class="btn btn-danger mt-2">
            Stop Recording
          </button>
          <div>
            <pre id="log"></pre>
          </div>
        </div>
        <div class="col-md-4 col-sm-12">
          <h2>Recording</h2>
          <video id="recording" width="300" height="200" controls></video>
          <br />
          <a id="downloadButton" class="btn btn-success mt-2"> Download </a>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

I am using “bootstrap” as the styling library and have added some CSS styling in the index.css file.

body {
  font: 14px "Open Sans", "Arial", sans-serif;
}

.container {
  margin: auto;
  background: paleturquoise;
  height: 800px;
}

video {
  margin-top: 2px;
  border: 1px solid black;
}

The result will look something like this.

Now, we will write some javascript, first, we will add a script.js file and import this into our index.html file.

First, we will define all the elements by getting them from id’s defined.

let preview = document.getElementById("preview");
let recording = document.getElementById("recording");
let startButton = document.getElementById("startButton");
let stopButton = document.getElementById("stopButton");
let downloadButton = document.getElementById("downloadButton");
let logElement = document.getElementById("log");

Whenever a user clicks on the “Start Recording” button it will call the method “navigator.mediaDevices.getDisplayMedia”. And we will pass a JSON object with two keys video and audio. This configuration will allow the app to record the video and audio.

navigator.mediaDevices
      .getDisplayMedia({
        video: true,
        audio: true,
})

The above method will return a “promise”. In the “then” block we will get the “stream” which will be the MediaStreamTrack object of javascript. We will use this stream to show the live preview in the preview window.

navigator.mediaDevices
      .getDisplayMedia({
        video: true,
        audio: true,
      })
      .then((stream) => {
        preview.srcObject = stream;
        preview.captureStream =
          preview.captureStream || preview.mozCaptureStream;
        return new Promise((resolve) => (preview.onplaying = resolve));
      })

Now we will call another and then block on the same promise which will call a method “startRecording” and we will pass the “preview.captureStream()” in this method. The “captureStream” will return a MediaStream object which is streaming a real-time capture of the content being rendered in the media element.

navigator.mediaDevices
      .getDisplayMedia({
        video: true,
        audio: true,
      })
      .then((stream) => {
        preview.srcObject = stream;
        preview.captureStream =
          preview.captureStream || preview.mozCaptureStream;
        return new Promise((resolve) => (preview.onplaying = resolve));
      })
      .then(() => startRecording(preview.captureStream()))

And the “startRecording” method will be as follows

function startRecording(stream) {
  //start recording
  recorder = new MediaRecorder(stream); //api to record media in javascript provides different functionalities
  // as media pause, resume, start, stop, requestData - request blob of recorded media
  let data = [];

  //ondataavailable - fires periodically each time timeslice milliseconds of media have been recorded or
  //when the entire media is recorded if no timeslice is specified
  recorder.ondataavailable = (event) => data.push(event.data);
  recorder.start(); //strt the recording

  log('"Recording..."');

  //when stopped it will resolve the promise
  let stopped = new Promise((resolve, reject) => {
    recorder.onstop = resolve;
    recorder.onerror = (event) => reject(event.name);
  });

  //when stopped it will return the data when it is recorded and stopped completely
  return Promise.all([stopped, recorder]).then(() => data);
}

In the above method, we are using a “log” method to log messages in the app.

function log(msg) {
  //log messages on screen
  logElement.innerHTML = msg + "\n";
}

Now, we have to add the functionality for the “stop” button.

stopButton.addEventListener(
  "click",
  function () {
    //passing the stream as argument - MediaStreamTrack
    stop(preview.srcObject);
  },
  false
);


function stop(stream) {
  if (recorder.state == "recording") {
    recorder.stop();
  }

  //getTracks = returns a sequence that represents all 
  //the MediaStreamTrack objects and stop
  //all of them
  stream.getTracks().forEach((track) => track.stop());
}

When you stop the recording it will stop every stream track as well as the recorder instance.

After this, we will add functionality for the recorded video preview and the downloading of recorded media. For this, we have to add another then block in the “getDisplayMedia” method.

navigator.mediaDevices
      .getDisplayMedia({
        video: true,
        audio: true,
      })
      .then((stream) => {
        preview.srcObject = stream;
        preview.captureStream =
          preview.captureStream || preview.mozCaptureStream;
        return new Promise((resolve) => (preview.onplaying = resolve));
      })
      .then(() => startRecording(preview.captureStream()))
      .then((recordedChunks) => {
        let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
        recording.src = URL.createObjectURL(recordedBlob);
        downloadButton.href = recording.src;
        downloadButton.download = "RecordedVideo.webm";

        log(
          "Successfully recorded " +
            recordedBlob.size +
            " bytes of " +
            recordedBlob.type +
            " media."
        );
      })
      .catch(log);

In the last “then” block we will get the recorded media chunks and now, we will create a “blob” object with the type “video/webm” and also set the “recording.src” equal to “recordedBlob”. It will preview the recorded media. Then in the next step, we will set the download button ‘href’ equal to the recorded media URL. And the “downloadButton.download” is equal to the name of the exported file.

When we will click on the “download” button it will start downloading the recorded media.

The final script.js file will look something like this.

let preview = document.getElementById("preview");
let recording = document.getElementById("recording");
let startButton = document.getElementById("startButton");
let stopButton = document.getElementById("stopButton");
let downloadButton = document.getElementById("downloadButton");
let logElement = document.getElementById("log");
let recorder;

function log(msg) {
  //log messages on screen
  logElement.innerHTML = msg + "\n";
}

function startRecording(stream) {
  //start recording
  recorder = new MediaRecorder(stream); //api to record media in javascript provides different functionalities
  // as media pause, resume, start, stop, requestData - request blob of recorded media
  let data = [];

  //ondataavailable - fires periodically each time timeslice milliseconds of media have been recorded or
  //when the entire media is recorded if no timeslice is specified
  recorder.ondataavailable = (event) => data.push(event.data);
  recorder.start(); //strt the recording

  log('"Recording..."');

  //when stopped it will resolve the promise
  let stopped = new Promise((resolve, reject) => {
    recorder.onstop = resolve;
    recorder.onerror = (event) => reject(event.name);
  });

  //when stopped it will return the data when it is recorded and stopped completely
  return Promise.all([stopped, recorder]).then(() => data);
}

function stop(stream) {
  if (recorder.state == "recording") {
    recorder.stop();
  }

  //getTracks = returns a sequence that represents all the MediaStreamTrack objects and stops
  //all them
  stream.getTracks().forEach((track) => track.stop());
}

startButton.addEventListener(
  "click",
  function () {
    navigator.mediaDevices
      .getDisplayMedia({
        video: true,
        audio: true,
      })
      .then((stream) => {
        //stream - MediaStreamTrack
        preview.srcObject = stream;
        // downloadButton.href = stream;
        preview.captureStream =
          preview.captureStream || preview.mozCaptureStream;
        return new Promise((resolve) => (preview.onplaying = resolve));
      })
      .then(() => startRecording(preview.captureStream()))
      //captureStream() will return a MediaStream object
      //which is streaming a real-time capture of the
      // content being rendered in the media element.
      .then((recordedChunks) => {
        let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
        recording.src = URL.createObjectURL(recordedBlob);
        downloadButton.href = recording.src;
        downloadButton.download = "RecordedVideo.webm";

        log(
          "Successfully recorded " +
            recordedBlob.size +
            " bytes of " +
            recordedBlob.type +
            " media."
        );
      })
      .catch(log);
  },
  false
);

stopButton.addEventListener(
  "click",
  function () {
    //passing the recorded chunks as argument
    stop(preview.srcObject);
  },
  false
);

The final app will look like this

GitHub- https://github.com/sumankalia/screen_capture_and_download

Live Preview- https://main--cool-semolina-7c039d.netlify.app/

Youtube tutorial link in “Hindi”-

Thanks for reading 😀

How to integrate EditorJs in ReactJs

Suman Kumar — Thu, 23 Feb 2023 07:06:44 +0000

If you ever worked with front-end development, you will surely know how difficult it is to integrate a rich text editor into your application. There are a lot of rich text libraries out there which are compatible with different javascript frameworks.

A few days ago, I was searching for a rich text editor. This was not the first time I was going to integrate a rich text editor in a React application. In the past times, I have used the react-quill, DraftJs, WYSIWYG, etc. But this time the requirements were quite different and somebody suggested me this editor — Editorjs.

Editorjs is a pretty popular editor backed up by a good dev team with time-to-time updates. This editor is pretty different from other rich text editors out there.

Block Style Editor- every piece of content in the editor is a block. A block can be anything — a paragraph, header, image, or literally anything.
Clean JSON data output- It gives the final data output in JSON format
Supports Plugins- It supports plugins to add any feature in this editor ie. paragraphs, images, quote,s, etc. We can also create and integrate our custom plugins.
Clear Documentation- The documentation is clear and helpful.

So, let’s discuss how we can integrate it into our React project.

First, we need to install this library with npm — @editorjs/editorjs.

Then we will create a component as EditorComponent.js in our code repository.

In this component, we will return a “div” with “id=editorjs”.

const EditorComponent = () => {
    return  <><div id='editorjs'></div></>;
}

We will use this “id” attribute to integrate the editors in this div.

In the next step, we will create a method to initialize the EditorJs class imported from the Editorjs library.

First, we will import the EditorJs class

import EditorJS from "@editorjs/editorjs";

Then, we will initiate this class in a method and call this method in “useEffect” hook while initial load of the page.

const initEditor = () => {
       const editor = new EditorJS({
          holder: 'editorjs',
          onReady: () => {
            ejInstance.current = editor;
          },
          autofocus: true,
          data: DEFAULT_INITIAL_DATA,
          onChange: async () => {
            let content = await editor.saver.save();

            console.log(content);
          }
        });
      };

In the above code snippet, the “holder” key value should be the same as the id of the div defined in the first step.

We are using the “ejInstance” reference to the editor to check if the editor is loaded already or not.

const ejInstance = useRef();

The “autofocus” will focus the editor on the first load. In the data key, we can pass the initial data.

const DEFAULT_INITIAL_DATA =  {
      "time": new Date().getTime(),
      "blocks": [
        {
          "type": "header",
          "data": {
            "text": "This is my awesome editor!",
            "level": 1
          }
        },
      ]
  }

In the onChange method, we will get the editor data in “content”.

To make sure the editor load only once we have to add this condition in “useEffect”.

 useEffect(() => {
    if (ejInstance.current === null) {
      initEditor();
    }

    return () => {
      ejInstance?.current?.destroy();
      ejInstance.current = null;
    };
  }, []);

And we will destroy the instance while the component unmounts.

Adding a plugin

By default, Editorjs provides only simple text or paragraphs, but if we want to add more functionality like, headings, upload images, embeds, etc. Then, we need to use different plugins provided by EditorJs team.

In this application, we will use the “Header” plugin to enable headings. For this, we have to install a package- @editorjs/header.

To enable this in the editor we need to add a key “tools” in the editor instance like this.

const editor = new EditorJS({
          holder: 'editorjs',
          onReady: () => {
            ejInstance.current = editor;
          },
          autofocus: true,
          data: DEFAULT_INITIAL_DATA,
          onChange: async () => {
            let content = await editor.saver.save();

            console.log(content);
          },
          tools: { 
            header: Header, 
          },
        });
      };

If you need other plugins, you can check them on this link.

If you want to build a custom plugin, you can check this link.

GitHub Link- https://github.com/sumankalia/react-editorjs

Check youtube video in Hindi-

Thanks for reading 😀

Export Excel(XLSX) file in react with images and custom styles in ReactJs

Suman Kumar — Thu, 02 Feb 2023 11:37:42 +0000

If you have ever worked with react and NodeJs. Then you have surely added the export excel file in any of your projects. Exporting an excel file might be easy but sometimes we have to export a more custom excel file with some custom styles as marking cells with different colors and sometimes we also need to add the images in the same file.

For this, you have different options to export the file whether in NodeJs or ReactJs. But, today we will discuss a way to export a feature-rich excel file in ReactJs. We are exporting it in ReactJs. So, it would be useful for both React and full-stack developers.

For this, we are going to use a third-party package - ExecelJs
Why ExcelJs- because it offers a lot of features and works with bulk data. I have tested it with a spreadsheet file with over 50000 records.
This package is used to read, manipulate and write spreadsheet data and styles to XLSX and JSON

We will understand the process by creating a react app by create-react-app.
We will add a free API to get data - https://dummyjson.com/products

In the app, we will first load the data from the API. We will get 30 product data with details of id, title, price, photo, etc. Then, we will create a table with product data id, title, price, thumbnail, etc.

Our primary focus is to export the same table's data in a spreadsheet(xlsx) file. The spreadsheet's data will look something like this

We have also added a conditional styling for the price if the price is between 50 and 1000 then the cell will be red colour.

Implementation

First, we will install the ExcelJs package in our project.

Then, we will call the API to get the data and set it in the state on the first-page load.

const [data, setData] = useState([]);
  useEffect(() => {
    fetch("https://dummyjson.com/products")
      .then((res) => res.json())
      .then(async (data) => {
        setData(data);
      })
      .then((json) => console.log(json));
  }, []);

Now, we will add a button as "Export" on top of the table, when someone clicks on this button it will create a spreadsheet and download it in the front end side.

Now we will create a new workbook with Exceljs.

const workbook = new ExcelJS.Workbook();

Then, we will add a sheet to this workbook

const sheet = workbook.addWorksheet("My Sheet");

Now, we have to add an image to every row in the spreadsheet. So, we will add some default height to every row in the sheet.

sheet.properties.defaultRowHeight = 80;

We have the first row of the sheet as the header of the sheet with different column titles. So we will add some styles to this as well ie. some borders, fonts, fill, etc.

sheet.getRow(1).border = {
      top: { style: "thick", color: { argb: "FFFF0000" } },
      left: { style: "thick", color: { argb: "000000FF" } },
      bottom: { style: "thick", color: { argb: "F08080" } },
      right: { style: "thick", color: { argb: "FF00FF00" } },
    };

    sheet.getRow(1).fill = {
      type: "pattern",
      pattern: "darkVertical",
      fgColor: { argb: "FFFF00" },
    };

    sheet.getRow(1).font = {
      name: "Comic Sans MS",
      family: 4,
      size: 16,
      bold: true,
    };

Now, we will define the columns, this will be an array of objects. And each object has three keys header, key, and width. The "header" is the title of the column, the "key" must be the same as the JSON key of data to map data in the column, and the "width" is the width of the column.

sheet.columns = [
      {
        header: "Id",
        key: "id",
        width: 10,
      },
      { header: "Title", key: "title", width: 32 },
      {
        header: "Brand",
        key: "brand",
        width: 20,
      },
      {
        header: "Category",
        key: "category",
        width: 20,
      },
      {
        header: "Price",
        key: "price",
        width: 15,
      },
      {
        header: "Rating",
        key: "rating",
        width: 10,
      },
      {
        header: "Photo",
        key: "thumbnail",
        width: 30,
      },
    ];

Now, it's time to add the data in each column with the same key name we have in column objects.

data?.products?.map((product) => {
        sheet.addRow({
          id: product?.id,
          title: product?.title,
          brand: product?.brand,
          category: product?.category,
          price: product?.price,
          rating: product?.rating,
        });
      })

The above code is to add simple data to the sheet. But for the images, we need to have a different approach.

const promise = Promise.all(
      data?.products?.map(async (product, index) => {
        const rowNumber = index + 1;
        sheet.addRow({
          id: product?.id,
          title: product?.title,
          brand: product?.brand,
          category: product?.category,
          price: product?.price,
          rating: product?.rating,
        });

        const result = await toDataURL(product?.thumbnail);
        const splitted = product?.thumbnail.split(".");
        const extName = splitted[splitted.length - 1];

        const imageId2 = workbook.addImage({
          base64: result.base64Url,
          extension: extName,
        });

        sheet.addImage(imageId2, {
          tl: { col: 6, row: rowNumber },
          ext: { width: 100, height: 100 },
        });
      })
    );

Here, we are calling an async method "toDataURL", in which we are passing the image URL and getting the base64 encoded image.

Then, we are getting the image extension in the next step ie. png, jpeg, etc.

Then, we will create the imageId2 object, by base64 image string and the image extension. And, in the next step, we pass it to the sheet.addImage() method with the "tl" key(column and row) and "ext" key(to define the height and width).

const toDataURL = (url) => {
  const promise = new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
      var reader = new FileReader();
      reader.readAsDataURL(xhr.response);
      reader.onloadend = function () {
        resolve({ base64Url: reader.result });
      };
    };
    xhr.open("GET", url);
    xhr.responseType = "blob";
    xhr.send();
  });

  return promise;
};

The above method is to convert an image from URL to base64 encoded.

In this method, we will call the URL and get the image data, and convert it to a base64 encoded image.

After this step, we will have a promise. Now, in the "then" block of the promise we will add the price column styles to fill the cell red if the price is between 50 and 1000.

promise.then(() => {
      const priceCol = sheet.getColumn(5);

      // iterate over all current cells in this column
      priceCol.eachCell((cell) => {
        const cellValue = sheet.getCell(cell?.address).value;
        // add a condition to set styling
        if (cellValue > 50 && cellValue < 1000) {
          sheet.getCell(cell?.address).fill = {
            type: "pattern",
            pattern: "solid",
            fgColor: { argb: "FF0000" },
          };
        }
      });
    });

Now, in the last step, we use the workbook writeBuffer method to create the xlsx file and download it as below.

workbook.xlsx.writeBuffer().then(function (data) {
        const blob = new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        const url = window.URL.createObjectURL(blob);
        const anchor = document.createElement("a");
        anchor.href = url;
        anchor.download = "download.xlsx";
        anchor.click();
        window.URL.revokeObjectURL(url);
      });

In the above code snippet we are getting data after the promise is resolved, then we will create it to buffer and define the type of the file ie. spreadsheet.

Then we are creating a temporary anchor to download the file by giving the file name "download.xlsx". And we will click this anchor programmatically and download the file and revoke the anchor in the next step as well.

Now finally the download function and price styling step will look something like this

promise.then(() => {
      const priceCol = sheet.getColumn(5);

      // iterate over all current cells in this column
      priceCol.eachCell((cell) => {
        const cellValue = sheet.getCell(cell?.address).value;
        // add a condition to set styling
        if (cellValue > 50 && cellValue < 1000) {
          sheet.getCell(cell?.address).fill = {
            type: "pattern",
            pattern: "solid",
            fgColor: { argb: "FF0000" },
          };
        }
      });

      workbook.xlsx.writeBuffer().then(function (data) {
        const blob = new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        const url = window.URL.createObjectURL(blob);
        const anchor = document.createElement("a");
        anchor.href = url;
        anchor.download = "download.xlsx";
        anchor.click();
        window.URL.revokeObjectURL(url);
      });
    });

GitHub Link- https://github.com/sumankalia/export-xlsx-react

Live demo- https://63da86a84679e413b00fd738--dreamy-pithivier-43351e.netlify.app/

Youtube video link in Hindi -

If you find this article helpful, please do like this and follow me.

Thanks for reading