DEV Community: Sudhanshu Gaikwad

Brute Force Algorithm in DSA: Best Case and Worst Case Explained with JavaScript.

Sudhanshu Gaikwad — Mon, 31 Aug 2026 07:34:12 +0000

If you are learning Data Structures and Algorithms (DSA), you will often hear the term Brute Force.
But what does a brute force algorithm actually mean?
In this article, we will understand Brute Force in DSA, along with its Best Case, Worst Case, and Time Complexity, using a simple JavaScript example.

What Is a Brute Force Algorithm?

A Brute Force algorithm solves a problem by trying every possible option until it finds the correct answer. It is usually the simplest approach to solving a problem.
For example, imagine you have a list of numbers and want to find a specific number.

[10, 25, 7, 40, 15]

If you want to find 40, a brute force approach checks the numbers one by one: 10 → 25 → 7 → 40. Once it finds 40, it stops.

This approach is also called Linear Search.

Simple Brute Force Example in JavaScript

Let's write a simple function to search for a number in an array.

function findNumber(arr, target) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === target) {
      return i;
    }
  }

  return -1;
}
const numbers = [10, 25, 7, 40, 15];
console.log(findNumber(numbers, 40));

Output: 3
The output is 3 because 40 is located at index 3.

How does it work?

What is Best Case and Worst Case?

In algorithms, we measure how the running time changes based on the input. Two important terms are:

Best Case O(1): The situation where the algorithm does the least amount of work. It finishes as quickly as possible.

const numbers = [40, 10, 25, 7, 15];
console.log(findNumber(numbers, 40)); // Found in 1 comparison → O(1)

Worst Case O(n): The situation where the algorithm does the most amount of work. It takes the longest time.

const numbers = [10, 25, 7, 15, 40];
console.log(findNumber(numbers, 40)); // Checks all 5 elements → O(n)
console.log(findNumber(numbers, 99)); // Checks all 5 elements → O(n)

Simple Real-Life Example
Imagine you are looking for a friend’s name in a list of 5 names written on paper:

List: ["Sudhanshu", "Priya", "Rahul", "Sneha", "Vikram"]

Best Case: You are looking for “Sudhanshu”. It is the first name, so you find it immediately. → Only 1 check needed → O(1).

Worst Case: You are looking for “Vikram” (last name) or a name that is not in the list (like “Neha”). → You have to check every name until the end → O(n)

This is exactly how brute force algorithms behave — sometimes they are lucky (best case), and sometimes they have to check almost everything (worst case).

Space complexity for this approach is O(1) because we only use a few variables.

When Should You Use Brute Force?

The input size is small.
You need a correct solution quickly, and performance is not critical yet.
You want a clear baseline before optimizing with better algorithms (binary search, hashing, etc.).

Brute force is rarely the final answer for large datasets, but it is almost always the first solution you should write. Once it works, you can improve it.

Integrate Razorpay Payment Gateway into your React app

Sudhanshu Gaikwad — Fri, 14 Aug 2026 23:30:00 +0000

What is Razorpay?

Razorpay is a popular payment gateway.
It lets your website or app accept payments via:

Credit / Debit cards
Net Banking
UPI
Wallets (Paytm, PhonePe, etc.)

It also supports multiple currencies, so you can use it for Indian as well as international customers.
Before writing any code, let’s understand the payment flow.

Payment Flow (Simple Explanation)

High-level flow

User clicks the Pay button
Frontend asks your backend to create a Razorpay Order
Backend creates the order and sends back order_id, amount, and currency
Frontend opens Razorpay Checkout with those details
After successful payment, Razorpay gives you payment_id, order_id, and signature
Frontend sends these three values to your backend
Backend verifies the signature using HMAC-SHA256 Only after verification, mark the order as Paid in your database

Important: Never skip step 7. Always verify the signature on the backend.

This is a high-level overview of how the Razorpay payment flow works. Understanding this flow will make it easier to integrate Razorpay securely into a React application.

1. Razorpay account & keys

Sign up at dashboard.razorpay.com
Stay in Test Mode while developing
Generate API keys under Account & Settings → API Keys
Store them securely:


RAZORPAY_KEY_ID=rzp_test_xxxxxxxx     # This can be used in frontend (public)
RAZORPAY_KEY_SECRET=your_secret_here  # This must stay only on backend

2. Backend (Node + Express)

Create a new folder and install packages:


mkdir razorpay-server
cd razorpay-server
npm init -y
npm install express cors razorpay dotenv crypto

Create a .env file:


RAZORPAY_KEY_ID=rzp_test_xxxxxxxx
RAZORPAY_KEY_SECRET=your_secret_here
PORT=5000

Create server.js:

require("dotenv").config();
const express = require("express");
const cors = require("cors");
const Razorpay = require("razorpay");
const crypto = require("crypto");

const app = express();
app.use(cors());
app.use(express.json());

const razorpay = new Razorpay({
  key_id: process.env.RAZORPAY_KEY_ID,
  key_secret: process.env.RAZORPAY_KEY_SECRET,
});

// Create Order
app.post("/api/create-order", async (req, res) => {
  try {
    const { amount, currency = "INR", receipt } = req.body;

    if (!amount || amount < 1) {
      return res.status(400).json({ error: "Invalid amount" });
    }

    const order = await razorpay.orders.create({
      amount: Math.round(amount * 100), // Convert rupees to paise
      currency,
      receipt: receipt || `rcpt_${Date.now()}`,
    });

    res.json({
      id: order.id,
      amount: order.amount,
      currency: order.currency,
    });
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: "Could not create order" });
  }
});

// Verify Payment
app.post("/api/verify-payment", async (req, res) => {
  try {
    const {
      orderCreationId,
      razorpayPaymentId,
      razorpayOrderId,
      razorpaySignature,
    } = req.body;

    // Create our own signature
    const shasum = crypto.createHmac(
      "sha256",
      process.env.RAZORPAY_KEY_SECRET
    );
    shasum.update(`${orderCreationId}|${razorpayPaymentId}`);
    const digest = shasum.digest("hex");

    // Compare signatures
    if (digest !== razorpaySignature) {
      return res.status(400).json({ msg: "Transaction not legit!" });
    }

    // Payment is verified
    // You can now save order details in your database
    res.json({
      success: true,
      msg: "Payment verified successfully",
      orderId: razorpayOrderId,
      paymentId: razorpayPaymentId,
    });
  } catch (error) {
    res.status(500).send(error);
  }
});

app.listen(process.env.PORT || 5000, () => {
  console.log("Server is running on port 5000");
});

Run the server:

node server.js

3. Frontend (Vite + React)

Create a new React app:


npm create vite@latest razorpay-client -- --template react
cd razorpay-client
npm install

Create a .env file in the React project:


VITE_RAZORPAY_KEY_ID=rzp_test_xxxxxxxx

Payment Button Component

Create a file PayButton.jsx:

import { useState } from "react";

export default function PayButton({ amount = 499, productName = "Premium Plan" }) {
  const [loading, setLoading] = useState(false);

  // Load Razorpay script
  const loadScript = (src) =>
    new Promise((resolve) => {
      const script = document.createElement("script");
      script.src = src;
      script.onload = () => resolve(true);
      script.onerror = () => resolve(false);
      document.body.appendChild(script);
    });

  const handlePay = async () => {
    setLoading(true);

    const scriptLoaded = await loadScript(
      "https://checkout.razorpay.com/v1/checkout.js"
    );

    if (!scriptLoaded) {
      alert("Failed to load Razorpay. Please check your internet.");
      setLoading(false);
      return;
    }

    try {
      // 1. Create order from backend
      const orderRes = await fetch("http://localhost:5000/api/create-order", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ amount, currency: "INR" }),
      });

      const order = await orderRes.json();

      if (!order.id) throw new Error("Order creation failed");

      // 2. Open Razorpay Checkout
      const options = {
        key: import.meta.env.VITE_RAZORPAY_KEY_ID,
        amount: order.amount,
        currency: order.currency,
        name: "Your Brand Name",
        description: productName,
        order_id: order.id,
        handler: async (response) => {
          // 3. Send payment details to backend for verification
          const verifyRes = await fetch(
            "http://localhost:5000/api/verify-payment",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                orderCreationId: order.id,
                razorpayPaymentId: response.razorpay_payment_id,
                razorpayOrderId: response.razorpay_order_id,
                razorpaySignature: response.razorpay_signature,
              }),
            }
          );

          const result = await verifyRes.json();

          if (result.success) {
            alert("Payment successful!");
            // You can redirect or update UI here
          } else {
            alert(result.msg || "Payment verification failed");
          }
        },
        prefill: {
          name: "",
          email: "",
          contact: "",
        },
        theme: {
          color: "#0f172a",
        },
      };

      const rzp = new window.Razorpay(options);

      rzp.on("payment.failed", (res) => {
        console.error(res.error);
        alert(res.error.description || "Payment failed");
      });

      rzp.open();
    } catch (err) {
      console.error(err);
      alert("Something went wrong. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <button onClick={handlePay} disabled={loading}>
      {loading ? "Processing..." : `Pay ₹${amount}`}
    </button>
  );
}

Use the component anywhere:


<PayButton amount={999} productName="Pro Subscription" />

4. How Verification Works

After payment succeeds, Razorpay sends you:

orderCreationId
razorpayPaymentId
razorpayOrderId
razorpaySignature

On the backend, we create a signature ourselves using:


HMAC-SHA256(orderCreationId + "|" + razorpayPaymentId, KEY_SECRET)

If our calculated signature matches the one sent by Razorpay, the payment is genuine.

Verify the payment

For this step we just need to create a signature by ourselves in the back-end and check if our signature is same as the signature sent by Razorpay.
Remember, after successful payment, our React app is sending back four values to the backend route:

orderCreationId(order id we got back while creating the order)
razorpayPaymentId
razorpayOrderId
razorpaySignature

We'll need to use the SHA256algorithm, use the razorpayPaymentIdand the orderCreationIdto construct a HMAC hex digest. Then compare the digest with the razorpaySignature. If both are equal, then our payment is verified.

Create a route for verification
Add this POST route to your backend (you can put it in the same server.js or in a routes/payment.js file):

app.post("/api/verify-payment", async (req, res) => {
  try {
    // getting the details back from our front-end
    const {
      orderCreationId,
      razorpayPaymentId,
      razorpayOrderId,
      razorpaySignature,
    } = req.body;

    // Creating our own digest
    // The format should be like this:
    // digest = hmac_sha256(orderCreationId + "|" + razorpayPaymentId, secret);
    const shasum = crypto.createHmac(
      "sha256",
      process.env.RAZORPAY_KEY_SECRET   // never hardcode the secret
    );

    shasum.update(`${orderCreationId}|${razorpayPaymentId}`);

    const digest = shasum.digest("hex");

    // comparing our digest with the actual signature
    if (digest !== razorpaySignature) {
      return res.status(400).json({ msg: "Transaction not legit!" });
    }

    // THE PAYMENT IS LEGIT & VERIFIED
    // YOU CAN SAVE THE DETAILS IN YOUR DATABASE IF YOU WANT

    res.json({
      success: true,
      msg: "success",
      orderId: razorpayOrderId,
      paymentId: razorpayPaymentId,
    });
  } catch (error) {
    res.status(500).send(error);
  }
});

Now all the steps are completed.
You can proceed to make a payment, and if successful, you can view the payment inside your Razorpay Dashboard in the Transactions tab.

And if you click the Pay ₹2,998 button, a pop-up should appear.

Testing checklist

Use Razorpay test cards (e.g. 4111 1111 1111 1111)
Test both successful and failed payments
Confirm the signature verification endpoint rejects tampered data
Check the network tab: Key Secret must never appear in any request from the browser

That’s it! All the steps are done. Now try making a payment.
Once it succeeds, you’ll see the transaction in your Razorpay Dashboard → Transactions. In your Admin panel, the order will also appear with status Paid, like this:

Build a Production Ready MERN Stack e-Commerce Website with React, Node.js, MongoDB, JWT & Razorpay.

Sudhanshu Gaikwad — Mon, 03 Aug 2026 16:59:24 +0000

A complete walkthrough of a full-stack online store with JWT auth, OTP verification, Razorpay payments, Cloudinary uploads, and a real admin dashboard and why you should fork it.

If you’ve ever wanted a clean, modern, fully functional e-commerce project that actually feels production-ready, meet eKart.
eKart is a complete MERN stack online shopping platform that goes far beyond the typical “todo + cart” tutorial. It includes secure authentication with OTP email verification, real payment processing via Razorpay, image uploads with Cloudinary, a polished admin dashboard with sales analytics, and a responsive user experience built with modern tools.

Live demo: eKart
GitHub repo: ekart-ecommerce-website

Anyone can clone it, fork it, run it locally, or deploy their own version. The project is open-source under the MIT License.

Why This Project Exists

Most MERN e-Commerce tutorials stop at the basics: product listing, a simple cart, and maybe a fake checkout. Real applications need authentication that actually works, email verification, secure payments, image handling, role-based access, and an admin side that can manage the whole store.
eKart was built to fill that gap. It is a single repository that contains both the frontend and backend, properly structured, with environment variable examples and clear installation steps.

What Users Can Do

User Registration & Login
JWT Authentication
OTP Email Verification
Secure Password Encryption
Browse products, view details, and search
Manage their profile
View order history
Product Details Page
Search Products
Add to Cart
Update Cart Quantity
Remove Cart Items
User Profile Management
Order History
Razorpay Secure Payment
Responsive Design

What Admins Can Do

Admin Authentication
Manage Users
Add Products
Edit Products
Delete Products
Upload Product Title, Product Info with 5 Images (Cloudinary)
Create, edit, and delete products
Access a dashboard with total users
Sales charts (Recharts) and recent orders
Manage orders and update order status
Manage Payments
Update Order Status
Access a dashboard with total users, products, orders, revenue, and monthly
Dashboard Analytics
Sales Reports using Recharts
User Control Permissions: User, Admin, Delete, Edit.

Tech Stack

Frontend :

React.js 19 (Vite)
Redux Toolkit
Tailwind CSS
Shadcn UI
React Router DOM
Axios
Recharts
React Medium Image Zoom

Backend :

Node.js
Express.js
MongoDB + Mongoose
JWT
bcryptjs
Nodemailer
Multer
Cloudinary
DataURI

Payments :

Razorpay (order creation + payment verification)

Other :

Protected Routes
OTP Email Verification
CORS
Environment Variables
Cloudinary Image Upload

Project Structure (High Level)


eKart
│
├── Frontend
│   ├── public
│   ├── src
│   │   ├── assets
│   │   ├── components
│   │   ├── pages
│   │   ├── layouts
│   │   ├── redux
│   │   ├── hooks
│   │   ├── services
│   │   ├── utils
│   │   ├── App.jsx
│   │   └── main.jsx
│   ├── package.json
│   └── .env.example
│
├── Backend
│   ├── config
│   ├── controllers
│   ├── middleware
│   ├── models
│   ├── routes
│   ├── uploads
│   ├── utils
│   ├── app.js
│   ├── server.js
│   ├── package.json
│   └── .env.example
│
├── README.md
├── LICENSE
└── .gitignore

The separation is clean. Frontend and backend each have their own package.json and.env.example, so you can run them independently during development.

Authentication & Security Highlights

JWT Authentication
Protected Routes
Password Hashing (bcrypt)
OTP Email Verification
Role-Based Authorization
Admin Access

Payment Integration

User proceeds to checkout
Backend creates a Razorpay order
Frontend opens the Razorpay checkout
After successful payment, the backend verifies the signature
Order is created automatically This is the real integration pattern, not a mock.

Admin Dashboard

The dashboard shows:

Total Users
Total Products
Total Orders
Total Revenue
Monthly Sales Analytics
Recent Orders
Revenue Charts It gives a practical feel of what a real store owner would need day-to-day.

API Modules

Authentication

Register
Login
Logout
Verify OTP

Users

User Profile
Update Profile

Products

Get Products
Product Details
Add Product
Update Product
Delete Product

Cart

Add Item
Update Quantity
Remove Item
Get Cart

Orders

Create Order
View Orders
Update Order Status

Payments

Create Razorpay Order
Verify Payment

Admin

Dashboard Statistics
Manage Users
Manage Products
Manage Orders

Getting Started in Minutes


git clone https://github.com/sudhanshugaikwad/free-mern-ecommerce-website.git

cd mern-ecommerce-website

Frontend


cd Frontend
npm install
npm run dev

Backend


cd Backend
npm install
npm run dev

You will need to fill in the environment variables (examples are provided in both folders):

Backend `.env`


PORT=
MONGODB_URI=
JWT_SECRET=
EMAIL_USER=
EMAIL_PASS=
RAZORPAY_KEY_ID=
RAZORPAY_KEY_SECRET=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

Frontend `.env`


VITE_API_URL=http://localhost:5000
VITE_RAZORPAY_KEY_ID=

Future Roadmap

The project already has a solid foundation. Planned improvements include:

Product reviews & ratings
Wishlist
Coupon system
Inventory management
Better email/SMS notifications
Dark mode
Multi-language support

Why You Should Fork It

Clean, readable code
Modern stack (React 19 + Vite, Redux Toolkit, Tailwind + Shadcn)
Real-world features (OTP, Razorpay, Cloudinary, analytics)
MIT License use it commercially if you want
Active and ready for contributions

Whether you are learning the MERN stack, building a portfolio project, or looking for a solid base to customize into your own store, eKart is a great starting point.

Support the Project

If the project helps you, give it a ⭐ on GitHub. Stars make it easier for other developers to discover it.

GitHub: eKart mern-ecommerce-website

Live Demo: eKart

Built by Sudhanshu Gaikwad

GitHub: https://github.com/sudhanshugaikwad/free-mern-ecommerce-website
LinkedIn: https://www.linkedin.com/in/sudhanshugaikwad/

Happy coding, and feel free to fork, improve, and ship your own version of eKart!

The Most Important SQL Concepts Every Data Scientist

Sudhanshu Gaikwad — Sat, 16 May 2026 08:14:48 +0000

SQL is one of the most important skills in data science.
Whether you want to become a Data Analyst, Data Scientist, or Machine Learning Engineer, SQL helps you work with real-world data efficiently.

Most beginners learn basic SELECT queries but struggle when dealing with large datasets, business reports, or analytical problems.

In this article, we’ll explore the most important SQL concepts used in real data science workflows with examples and simple workflow diagrams.

Why SQL Matters in Data Science

Before building Machine Learning models, data scientists spend most of their time:

Cleaning data
Filtering data
Combining tables
Finding patterns
Generating reports
Creating business insights

And SQL is the fastest way to do all of that.

1. Aggregation (Turning Raw Data into Insights)

Aggregation helps summarize large datasets.

Functions:

SUM()
AVG()
COUNT()
MAX()
MIN()

Example

SELECT department,
       AVG(salary) AS average_salary
FROM employees
GROUP BY department;

2. JOINs Connecting Multiple Tables

JOINs combine data from multiple tables.

Types:

INNER JOIN
LEFT JOIN
RIGHT JOIN
FULL JOIN

Example

SELECT customers.name,
       orders.product_name
FROM customers
INNER JOIN orders
ON customers.id = orders.customer_id;

3. CTEs (Common Table Expressions)

CTEs make complex queries easier to read.

Example

WITH HighSalary AS (
    SELECT *
    FROM employees
    WHERE salary > 50000
)

SELECT * FROM HighSalary;

4. Window Functions ( Advanced Data Analysis )

Window functions perform calculations across rows without grouping data.

Popular functions:

ROW_NUMBER()
RANK()
DENSE_RANK()

Example

SELECT name,
       salary,
       RANK() OVER(ORDER BY salary DESC) AS salary_rank
FROM employees;

5. Subqueries ( Queries Inside Queries )

Subqueries help solve complex problems step-by-step.

Example

SELECT name
FROM employees
WHERE salary > (
    SELECT AVG(salary)
    FROM employees
);

6. Data Cleaning ( The Most Important Skill )

Real-world data is messy.

Common cleaning operations:

Removing NULL values
Removing duplicates
Formatting text
Standardizing data

Example

SELECT *
FROM customers
WHERE email IS NOT NULL;

7. Date Functions ( Time-Based Analysis )

Date functions are heavily used in business analytics.

Example

SELECT MONTH(order_date) AS month,
       COUNT(*) AS total_orders
FROM orders
GROUP BY MONTH(order_date);

8. Ranking Data

Ranking helps identify:

Top customers
Best-selling products
Highest-performing employees

Example

SELECT product_name,
       sales,
       DENSE_RANK() OVER(ORDER BY sales DESC) AS ranking
FROM products;

9. Pivoting Data

Pivoting transforms rows into columns.

Useful for dashboards and reports.

Example

SELECT
    department,
    SUM(CASE WHEN gender = 'Male' THEN salary ELSE 0 END) AS male_salary,
    SUM(CASE WHEN gender = 'Female' THEN salary ELSE 0 END) AS female_salary
FROM employees
GROUP BY department;

10. Query Optimization ( Writing Faster SQL )

Slow queries become a huge problem with large datasets.

Optimization techniques:

Using indexes
Avoiding SELECT *
Filtering early
Using proper joins

Better Query

SELECT id, name, salary
FROM employees
WHERE salary > 50000;

11. CASE Statements ( Smart Conditional Logic )

CASE statements work like if-else in programming.

Example

SELECT name,
       salary,
       CASE
           WHEN salary > 50000 THEN 'High Salary'
           ELSE 'Average Salary'
       END AS salary_category
FROM employees;

12. Business Metrics ( Real Data Science Insights )

Companies use SQL to measure:

Revenue
Growth
Customer retention
Profit
Conversion rate

Example

SELECT SUM(price) AS total_revenue
FROM orders;

How to Add Clerk Login & Logout Authentication in React.js Web Application

Sudhanshu Gaikwad — Sat, 30 Aug 2025 06:30:00 +0000

Authentication is one of the most essential parts of any modern web application. Instead of building everything from scratch, we can use Clerk, a developer-friendly authentication and user management solution, to add secure and scalable login to a React.js app.

Why Clerk?

Easy-to-use authentication flows (email, social logins, etc.)
Pre-built UI components for login, sign-up, and user profiles
Secure session management and JWT support
Scalable and customizable for your app’s needs

Method 1: Full Routing & Protected Pages Setup

Step-by-Step Guide to Adding Clerk Authentication

1. Set Up Your Clerk Account

Head to Clerk’s website and sign up for a free account.

Create a new application in the Clerk dashboard and grab your Publishable Key and Secret Key.

2. Install Clerk in Your React Project

Assuming you have a React.js app set up (if not, use npx create-react-app my-app), install the Clerk SDK:

npm install @clerk/clerk-react

3. Configure Clerk in Your App

Wrap your app with the ClerkProvider component to enable Clerk’s functionality. In your index.js or App.js:

import { ClerkProvider } from '@clerk/clerk-react';  
import { BrowserRouter } from 'react-router-dom';  

const clerkPubKey = 'YOUR_PUBLISHABLE_KEY'; // Replace with your Clerk Publishable Key  

function App() {  
  return (  
    <ClerkProvider publishableKey={clerkPubKey}>  
      <BrowserRouter>  
        {/* Your app components go here */}  
      </BrowserRouter>  
    </ClerkProvider>  
  );  
}  

export default App;

4. Add Clerk’s Pre-Built Components

Clerk provides ready-to-use components like SignIn and SignUp. Add a login page to your app:

// src/pages/Login.js  
import { SignIn } from '@clerk/clerk-react';  

function Login() {  
  return (  
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>  
      <SignIn />  
    </div>  
  );  
}  

export default Login;

Add this to your routes (e.g., using react-router-dom):

import { Routes, Route } from 'react-router-dom';  
import Login from './pages/Login';  

function App() {  
  return (  
    <ClerkProvider publishableKey={clerkPubKey}>  
      <BrowserRouter>  
        <Routes>  
          <Route path="/login" element={<Login />} />  
          {/* Other routes */}  
        </Routes>  
      </BrowserRouter>  
    </ClerkProvider>  
  );  
}

5. Protect Routes with Clerk

To restrict access to authenticated users only, use Clerk’s SignedIn and SignedOut components or the useAuth hook. Example:

import { SignedIn, SignedOut, RedirectToSignIn, UserButton } from '@clerk/clerk-react';  

function Dashboard() {  
  return (  
    <div>  
      <SignedIn>  
        <h1>Welcome to the Dashboard!</h1>  
        <UserButton /> {/* Displays user profile and sign-out option */}  
      </SignedIn>  
      <SignedOut>  
        <RedirectToSignIn /> {/* Redirects to login if not signed in */}  
      </SignedOut>  
    </div>  
  );  
}  

export default Dashboard;

6. Customize the Look and Feel

Clerk’s components are customizable via their dashboard or by overriding CSS. You can also use the appearance prop to style components:

<SignIn  
  appearance={{  
    elements: {  
      formButtonPrimary: 'bg-blue-500 hover:bg-blue-600 text-white',  
    },  
  }}  
/>

7. Test Your Authentication Flow

Run your app (npm start).
Navigate to /login to see the Clerk login UI.
Test signing up, logging in, and accessing protected routes.

Bonus: Accessing User Data

Use Clerk’s useUser hook to access the authenticated user’s info:

import { useUser } from '@clerk/clerk-react';  

function Profile() {  
  const { user } = useUser();  

  if (!user) return <div>Loading...</div>;  

  return <div>Welcome, {user.firstName}!</div>;  
}

Method 2: Minimal Setup with SignIn/SignUp

Authentication is one of the most essential parts of any modern app. Instead of building everything manually, Clerk gives us:

Pre-built sign-in/sign-up components
Support for Google, GitHub & other providers
Simple React hooks & APIs

Step 1: Create React App

npx create-react-app my-app
cd my-app

Step 2: Install Clerk

npm install @clerk/clerk-react

Step 3: Wrap with ClerkProvider

import React from "react";
import ReactDOM from "react-dom";
import { ClerkProvider } from "@clerk/clerk-react";
import App from "./App";

const clerkFrontendApi = "YOUR_FRONTEND_API_KEY";

ReactDOM.render(
  <ClerkProvider publishableKey={clerkFrontendApi}>
    <App />
  </ClerkProvider>,
  document.getElementById("root")
);

Step 4: Add Authentication Components

import { SignIn, SignUp, UserButton, useUser } from "@clerk/clerk-react";

function App() {
  const { isSignedIn } = useUser();

  return (
    <div>
      {!isSignedIn ? (
        <>
          <h2>Welcome! Please Sign In</h2>
          <SignIn />
          <SignUp />
        </>
      ) : (
        <>
          <h2>Dashboard</h2>
          <UserButton />
        </>
      )}
    </div>
  );
}

export default App;

Step 5: Run Your App

npm start

You now have a working React app with Clerk authentication 🎉

Next Steps

Add protected routes with SignedIn and SignedOut.
Explore OAuth (Google, GitHub, etc.).
Build a custom Profile Page using useUser.

Resources

Conclusion

Clerk makes authentication in React apps simple, secure, and production-ready without the headache of managing sessions and tokens manually. If you’re building a React.js project, Clerk is worth trying out for fast authentication setup.

Free APIs for Developers Learn, Experiment & Create Effortlessly

Sudhanshu Gaikwad — Sun, 24 Aug 2025 17:40:11 +0000

APIs are the secret sauce of modern applications. Whether you’re building a web app, a mobile app, or a SaaS product, APIs help you fetch data, integrate services, and scale faster.

But most APIs require API keys or subscriptions, which can feel like a roadblock for students, beginners, or indie developers.

This is where API Key Free APIs come to the rescue. These APIs let you experiment, learn, and prototype without signup, credit cards, or complicated authentication.

Why Use Free APIs Without Keys?

No Setup Overhead: Call them directly from your frontend or backend without registration.
Cost-Free: Unlimited usage in most cases (check rate limits).
Project-Friendly: Ideal for React apps, as you can fetch data client-side without CORS issues (many support JSONP or have open CORS).

Benefits of API Key Free APIs

Faster Prototyping – Build and test quickly

🧑‍💻 Perfect for Beginners – Learn API integration without complexity
💸 Completely Free – No credit card or paid plan needed
🌍 Community Driven – Open-source and educational APIs
⚡ Hackathon Friendly – Save time in competitions

Top 10 Free APIs Without API Keys

Here’s a curated list of useful, fun, and beginner-friendly APIs that work without authentication:

1 JSONPlaceholder – Fake REST API Realistic E-Commerce Data

https://jsonplaceholder.typicode.com/posts

2 Reqres – Test REST APIs for front-end developers

https://reqres.in/api/users

3 Dog CEO API – Random dog images

https://dog.ceo/api/breeds/image/random

4 PokeAPI – Pokémon database

https://pokeapi.co/api/v2/pokemon/pikachu

5 The Cat API – Random cat images

https://api.thecatapi.com/v1/images/search

6 Open-Meteo API – Free weather forecast API

https://api.open-meteo.com/v1/forecast?latitude=35&longitude=139&hourly=temperature_2m

7 Public APIs Project – Directory of 1000+ APIs

https://api.publicapis.org/entries

8 Bored API – Get activity ideas

https://www.boredapi.com/api/activity

9 Advice Slip API – Random advice

https://api.adviceslip.com/advice

10 University API – Global universities list

http://universities.hipolabs.com/search?country=India

https://github.com/Hipo/university-domains-list

1 Example

Here’s a quick JavaScript example using the Fake REST API:

Output :

{
  "message": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_t.png",
  "status": "success"
}

2 Example

Here’s a quick React JS example using the Fake REST API:

Resources:

Conclusion

Free APIs without keys are perfect for learning, testing, and prototyping without barriers. They let you build faster, experiment freely, and focus on creating. Try one today and share your favorite free API with the community!

How to Use GenKit in Your React.js Project

Sudhanshu Gaikwad — Sat, 16 Aug 2025 06:30:00 +0000

If you’ve been exploring AI-powered applications in React, you might have come across GenKit — an AI toolkit that helps you build intelligent features like chatbots, text generation, and more.

In this post, we’ll learn how to integrate GenKit into a React.js app with a simple example:
An AI-powered text generator.

Step 1 — Install GenKit

First, make sure you have a React project ready.
If not, create one:

npx create-react-app genkit-demo
cd genkit-demo

Now install GenKit:

npm install @genkit-ai/core @genkit-ai/llm

Step 2 — Set up GenKit in Your Project

We’ll create a simple function to call GenKit’s text generation API.

// src/genkit.js
import { Genkit, LLM } from "@genkit-ai/core";
import { OpenAI } from "@genkit-ai/llm-openai"; // Example provider

// Initialize GenKit
const genkit = new Genkit({
  llm: new OpenAI({
    apiKey: process.env.REACT_APP_OPENAI_KEY, // Store securely in .env
  }),
});

export async function generateText(prompt) {
  const result = await genkit.llm.generate({
    prompt: prompt,
    maxTokens: 100,
  });

  return result.outputText;
}

Step 3 — Create a Simple React UI

// src/App.js
import React, { useState } from "react";
import { generateText } from "./genkit";

function App() {
  const [prompt, setPrompt] = useState("");
  const [output, setOutput] = useState("");

  const handleGenerate = async () => {
    const text = await generateText(prompt);
    setOutput(text);
  };

  return (
    <div style={{ padding: "20px" }}>
      <h2>🧠 GenKit AI Text Generator</h2>
      <textarea
        rows="4"
        cols="50"
        placeholder="Enter your prompt..."
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
      />
      <br />
      <button onClick={handleGenerate}>Generate</button>
      <div style={{ marginTop: "20px", padding: "10px", border: "1px solid gray" }}>
        <strong>Output:</strong>
        <p>{output}</p>
      </div>
    </div>
  );
}

export default App;

Step 4 — Store Your API Key Securely

In .env:

REACT_APP_OPENAI_KEY=your_openai_api_key

Then restart your app:

npm start

Tips

You can swap the LLM provider (e.g., Anthropic, Gemini) easily.
GenKit can also do streaming outputs, chat sessions, embeddings, and tool integration.
Always keep your API key secure (never commit .env to GitHub).

Conclusion

GenKit makes adding AI features to React super easy. With just a few lines of code, you can bring natural language capabilities to your project.

Top 10 JavaScript Libraries and Tools You Can’t Ignore in 2025

Sudhanshu Gaikwad — Fri, 01 Aug 2025 14:30:00 +0000

JavaScript continues to dominate web development in 2025, powering dynamic, scalable, and interactive applications. With an ever-evolving ecosystem, developers need tools and libraries that streamline workflows, enhance code quality, and boost performance. This article highlights 10 must-know JavaScript libraries and tools—Lodash, Axios, Day.js, D3.js, Zustand, Vite, ESLint, Prettier, Chart.js, and React Hook Form—that are essential for building modern apps. We’ll explore their features, use cases, and provide practical examples using the JSONPlaceholder API (https://jsonplaceholder.typicode.com) to demonstrate their power. These tools are popular because they save time, reduce complexity, and help developers build robust, scalable applications.

1. Lodash

What It Is: A utility library offering over 300 functions for manipulating arrays, objects, strings, and more, with a focus on functional programming.
Why It’s Essential: Despite ES6+ advancements, Lodash offers concise and optimised utilities for complex tasks, although selective imports are recommended to minimise bundle size.
Use Case: Simplifying data transformations in data-heavy apps.

Example: Filtering and mapping posts from JSONPlaceholder:

import _ from 'lodash';

async function fetchAndProcessPosts() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();
  const filteredPosts = _.filter(posts, post => post.userId === 1);
  const titles = _.map(filteredPosts, 'title');
  console.log('Titles:', titles.slice(0, 2));
}

fetchAndProcessPosts();

Why Use It: Lodash’s_.filter and _.map simplify array operations, though ES6 equivalents (filter, map) are viable for basic tasks. Use modular imports (e.g., import filter from 'lodash/filter') to keep bundles lean.

2. Axios

What It Is: A promise-based HTTP client for making API requests, supporting both browser and Node.js environments.
Why It’s Essential: Axios simplifies HTTP requests with features like interceptors, automatic JSON parsing, and request cancellation. While the native Fetch API has improved, Axios remains a favorite for its clean syntax and robust error handling.
Use Case: Fetching data from APIs in frontend or backend apps.

Example: Fetching a post and its comments from JSONPlaceholder:

import axios from 'axios';

async function fetchPostAndComments(postId) {
  try {
    const post = await axios.get(`https://jsonplaceholder.typicode.com/posts/${postId}`);
    const comments = await axios.get(`https://jsonplaceholder.typicode.com/posts/${postId}/comments`);
    console.log('Post:', post.data);
    console.log('Comments:', comments.data.slice(0, 2));
  } catch (error) {
    console.error('Error:', error.response?.data || error.message);
  }
}

fetchPostAndComments(1);

Why Use It: Axios’s clean API and error handling make it ideal for complex API interactions, though Fetch is sufficient for simpler cases.

3. Day.js

What It Is: A lightweight (2KB) library for parsing, manipulating, and formatting dates, a modern alternative to Moment.js.
Why It’s Essential: Day.js offers a familiar API with better performance and a smaller footprint, perfect for handling dates in modern apps.
Use Case: Formatting and manipulating dates in user interfaces.

Example: Formatting a post’s creation date (mocked for JSONPlaceholder):

import dayjs from 'dayjs';

async function fetchPostWithDate(postId) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
  const post = await response.json();
  const mockDate = new Date(2025, 0, 1); // Mock post creation date
  const formattedDate = dayjs(mockDate).format('MMMM D, YYYY');
  console.log('Post:', post.title);
  console.log('Created:', formattedDate);
}

fetchPostWithDate(1);

Why Use It: Day.js is fast, lightweight, and supports plugins for advanced features like relative time (fromNow). It’s a safer bet than Moment.js, which is in maintenance mode.

4. D3.js

What It Is: A powerful library for creating data-driven visualizations using HTML, SVG, and Canvas.
Why It’s Essential: D3.js enables highly customizable, interactive charts and dashboards, making it the go-to for data visualization in 2025.
Use Case: Building interactive data dashboards or charts.

Example: Creating a simple bar chart with JSONPlaceholder data:

import * as d3 from 'd3';

async function renderPostLengths() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();
  const data = posts.slice(0, 5).map(post => ({ id: post.id, length: post.body.length }));

  const svg = d3.select('body').append('svg').attr('width', 400).attr('height', 200);
  svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', (d, i) => i * 80)
    .attr('y', d => 200 - d.length)
    .attr('width', 70)
    .attr('height', d => d.length)
    .attr('fill', 'steelblue');
}

renderPostLengths();

Why Use It: D3.js’s flexibility and data-binding capabilities make it unmatched for complex visualizations, though it has a steeper learning curve.

5. Zustand

What It Is: A lightweight state management library for React, using simplified flux principles.
Why It’s Essential: Zustand offers a minimal API for managing global and local state, making it ideal for React apps without the boilerplate of Redux.
Use Case: Managing state in React applications.

Example: Managing a post list state with JSONPlaceholder:

import create from 'zustand';

const usePostStore = create(set => ({
  posts: [],
  fetchPosts: async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await response.json();
    set({ posts: posts.slice(0, 5) });
  }
}));

function PostList() {
  const { posts, fetchPosts } = usePostStore();
  return (
    <div>
      <button onClick={fetchPosts}>Fetch Posts</button>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Why Use It: Zustand’s simplicity and performance make it a top choice for React state management, especially for small to medium-sized apps.

6. Vite

What It Is: A modern build tool and development server focused on speed and simplicity, supporting frameworks like React and Vue.
Why It’s Essential: Vite’s fast hot module replacement (HMR) and ES module-based bundling make it a favorite over Webpack for many projects in 2025.
Use Case: Building and bundling modern web apps.

Example Setup (vite.config.js):

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  }
});

Why Use It: Vite’s performance and ease of use make it ideal for single-page applications (SPAs) and rapid development. Companies like OpenAI and Google have adopted it for its speed.

7. ESLint

What It Is: A static code analysis tool for identifying and fixing JavaScript code issues.
Why It’s Essential: ESLint enforces coding standards, catches errors early, and integrates with IDEs for real-time feedback.
Use Case: Maintaining clean, consistent codebases.

Example Configuration (.eslintrc.json):

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "no-console": "warn"
  }
}

Why Use It: ESLint ensures code quality and prevents bugs, especially in team projects. Pair it with popular style guides like Airbnb’s.

8. Prettier

What It Is: An opinionated code formatter for JavaScript, CSS, and HT**ML, ensuring consistent code style.
**Why It’s Essential: Prettier automates formatting, saving time and reducing style debates in teams.
Use Case: Enforcing uniform code formatting.

Example Configuration (.prettierrc):

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80
}

Why Use It: Prettier integrates with ESLint and IDEs, formatting code on save for a polished codebase.

9. Chart.js

What It Is: A simple, responsive library for creating interactive charts and graphs.
Why It’s Essential: Chart.js is lightweight and easy to use, making it ideal for quick data visualizations without D3.js’s complexity.
Use Case: Adding charts to dashboards or reports.

Example: Plotting post counts by user from JSONPlaceholder:

import Chart from 'chart.js/auto';

async function renderUserPostChart() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();
  const userCounts = posts.reduce((acc, post) => {
    acc[post.userId] = (acc[post.userId] || 0) + 1;
    return acc;
  }, {});
  const labels = Object.keys(userCounts);
  const data = Object.values(userCounts);

  new Chart(document.getElementById('chart'), {
    type: 'bar',
    data: {
      labels,
      datasets: [{ label: 'Posts per User', data, backgroundColor: 'rgba(75, 192, 192, 0.2)' }]
    }
  });
}

renderUserPostChart();

Why Use It: Chart.js is perfect for simple, attractive charts with minimal setup.

10. React Hook Form

What It Is: A performant, flexible library for managing forms in React with minimal re-renders.
Why It’s Essential: React Hook Form simplifies form validation and state management, outperforming alternatives like Formik in 2025.
Use Case: Building complex forms in React apps.

Example: Creating a form to submit a new post to JSONPlaceholder:

import { useForm } from 'react-hook-form';

function PostForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = async data => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
      const result = await response.json();
      console.log('Posted:', result);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <form onClick={handleSubmit(onSubmit)}>
      <input {...register('title', { required: 'Title is required' })} placeholder="Title" />
      {errors.title && <p>{errors.title.message}</p>}
      <textarea {...register('body')} placeholder="Body"></textarea>
      <button type="submit">Submit</button>
    </form>
  );
}

Why Use It: React Hook Form’s hook-based API and validation (e.g., with Zod) make it ideal for efficient form handling in React.

Why These Tools Matter in 2025

These libraries and tools address key developer needs:

Efficiency: Lodash, Axios, and Day.js simplify common tasks.
Scalability: Zustand and React Hook Form streamline state and form management in large apps.
Quality: ESLint and Prettier ensure clean, maintainable code.
Performance: Vite’s fast builds and D3.js/Chart.js’s optimized visualizations boost app speed.
User Experience: Interactive visualizations (D3.js, Chart.js) and forms (React Hook Form) enhance UI.

Tips for Using These Tools

Optimize Bundles: Use modular imports for Lodash and tree-shakeable libraries to reduce bundle size.
Stay Updated: Follow tools’ GitHub repos or newsletters (e.g., JavaScript Weekly) for updates.
Combine Wisely: Pair ESLint with Prettier for code quality, and use Vite for fast development.
Test Thoroughly: Test API integrations (Axios, React Hook Form) with JSONPlaceholder to simulate real-world scenarios.

Conclusion
In 2025, mastering these 10 JavaScript libraries and tools—Lodash, Axios, Day.js, D3.js, Zustand, Vite, ESLint, Prettier, Chart.js, and React Hook Form—will empower you to build faster, cleaner, and more scalable web apps. Experiment with the JSONPlaceholder examples, integrate these tools into your projects, and watch your productivity soar. Stay ahead in the JavaScript ecosystem by leveraging these powerful, developer-friendly solutions!

How to Use Shadcn UI in Your React + Vite Project

Sudhanshu Gaikwad — Fri, 04 Jul 2025 06:30:00 +0000

Shadcn UI is a modern React + Tailwind component library that gives you full control by letting you copy and customize components directly. This guide shows how to integrate Shadcn UI into a React.js project using Vite for a fast and efficient setup.

Step 1: Create a New Vite + React Project

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

This sets up a Vite project with the React template (JavaScript). If you prefer TypeScript, replace react with react-ts in the template flag.

Step 2: Install and Configure Tailwind CSS

Shadcn UI relies on Tailwind CSS for styling. Install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This creates two configuration files: tailwind.config.js and postcss.config.js. Update tailwind.config.js to include the paths for your project files:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Next, update src/index.css to include Tailwind's directives. Replace its content with:

@import "tailwindcss";

Step 3: Configure Vite for Path Aliases

To simplify imports, configure Vite to use the @ alias for the src directory. Update vite.config.js:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

Install @types/node to avoid errors with the path module:

npm install -D @types/node

For JavaScript projects, create a jsconfig.json file in the root directory to enable path alias support in your IDE:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Step 4: Initialize Shadcn UI

Install the Shadcn UI CLI and initialize it in your project:

npx shadcn@latest init

Follow the prompts to configure components.json. A typical configuration might look like this:

Would you like to use TypeScript? No (for JavaScript projects)
Which style would you like to use? New York
Which color would you like to use as base color? Zinc
Where is your global CSS file? src/index.css
Where is your tailwind.config.js located? tailwind.config.js
Configure the import alias for components: @/components
Configure the import alias for utils: @/lib/utils
Are you using React Server Components? No
Do you want to use CSS variables for colors? Yes

This creates a components.json file and sets up the necessary dependencies, including tailwindcss-animate, class-variance-authority, clsx, tailwind-merge, and lucide-react.

Step 5: Add a Shadcn UI Component

To test the setup, add a Button component using the Shadcn CLI:

npx shadcn@latest add button

This creates a src/components/ui/button.jsx file. You can now use the Button component in your application.
For example, update src/App.jsx:

import { Button } from '@/components/ui/button';

function App() {
  return (
    <div className="flex flex-col justify-center items-center gap-4 min-h-screen">
      <h1 className="text-3-5xl font-bold">Vite + React + Shadcn UI</h1>
      <Button>Primary Button</Button>
      <Button variant="outline">Outline Button</Button>
      <Button variant="destructive">Destructive Button</Button>
    </div>
  );
}

export default App;

Simple Shadcn UI Landing Page

Folder structure of Project

Shadcn UI Landing Page

Project Code

GitHub Link : Simple Shadcn UI Project

Conclusion

Integrating Shadcn UI with React and Vite provides a powerful, flexible, and modern setup for building web applications. By leveraging Vite's speed, Tailwind's utility-first styling, and Shadcn UI's customizable components, developers can create professional-grade UIs with ease. This guide walked you through the setup process, from initializing a Vite project to adding dark mode support. Now, you're ready to build stunning, responsive applications!

10 Useful JavaScript Utility Functions Every Developer Should Know

Sudhanshu Gaikwad — Fri, 06 Jun 2025 14:30:00 +0000

JavaScript is a versatile language, and having a set of reliable utility functions can significantly enhance development efficiency. These functions simplify common tasks, improve code readability, and reduce errors. Below, we explore ten essential JavaScript utility functions that every developer should have in their toolkit, complete with explanations and practical examples.

1.Deep Clone an Object

Creating a deep copy of an object ensures that nested objects or arrays are fully copied, preventing unintended mutations of the original data.


function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

Example:

const original = { a: 1, b: { c: 2 } };
const copy = deepClone(original);
copy.b.c = 99; // original remains unchanged

2.Format Numbers with Commas

Formatting numbers for display, such as adding commas for thousands or fixing decimal places, enhances user experience.

function formatNumber(n) {
  return n.toLocaleString();
}

Example:

formatNumber(1000000); // "1,000,000"

3.Capitalize the First Letter

function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

Example:

capitalize("hello world"); // "Hello world"

4.Flatten an Array

function flattenArray(arr) {
  return arr.flat(Infinity);
}

Example:

const log = debounce(() => console.log('Debounced!'), 500);
window.addEventListener('resize', log); // Logs only after 500ms of no resizing

5.Debounce a Function

function debounce(fn, delay = 300) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}

Example:


window.addEventListener('resize', debounce(() => {
  console.log('Window resized!');
}, 500));

6.Generate a Random Hex Color


function randomColor() {
  return `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;
}

Example:


randomColor(); // "#a3e12f"

7.Check If an Object is Empty


function isEmpty(obj) {
  return Object.keys(obj).length === 0;
}

Example:


isEmpty({}); // true
isEmpty({ name: 'John' }); // false

8.Convert Query String to Object


function parseQueryString(query) {
  return Object.fromEntries(new URLSearchParams(query));
}

Example:
Converts ?name=John&age=30 into a usable object.

parseQueryString('?name=John&age=30'); // { name: "John", age: "30" }

9.Copy Text to Clipboard

Splitting an array into smaller chunks is useful for pagination or batch processing.


async function copyToClipboard(text) {
  await navigator.clipboard.writeText(text);
}

Example:
Enable “copy” buttonsfor links, promo codes, etc.


copyToClipboard("Hello, world!");

Works only on HTTPSand requires user interaction in modern browsers.

10.Generate a UUID (v4-style)


function generateUUID() {
  return crypto.randomUUID();
}

Example:
Create unique IDs for form elements, DB records, or tokens.


generateUUID(); // "6fd9f51c-8df3-4a7b-a1f7-3c72ec518d1a"

Native crypto.randomUUID() is supported in all modern browsers (2022+).

Bonus: Wrap These in a Utility Module

You can group all of these into a single reusable file:


// utils.js
export {
  deepClone,
  formatNumber,
  capitalize,
  flattenArray,
  debounce,
  randomColor,
  isEmpty,
  parseQueryString,
  copyToClipboard,
  generateUUID
};

Then use them across your app:


import { debounce, formatNumber } from './utils.js';

JavaScript utility functions are more than time-savers — they make your code cleaner, safer, and easier to maintain. Whether you're building a side project, an enterprise dashboard, or contributing to open source, mastering these functions gives you a real productivity boost.

Tip: Avoid rewriting the wheel on large projects. Use libraries like Lodash, Ramda, or Rambdawhen your app grows.

Destructuring in JavaScript

Sudhanshu Gaikwad — Fri, 30 May 2025 11:30:00 +0000

Destructuring is one of JavaScript's most powerful features, introduced in ES6 (ECMAScript 2015), that allows developers to extract values from arrays or objects into distinct variables in a concise and readable way. It simplifies code, reduces repetition, and makes data manipulation more intuitive. Whether you're working with arrays, objects, or complex data structures, destructuring can streamline your workflow. In this article, we'll dive deep into all types of destructuring in JavaScript, including array destructuring, object destructuring, and destructuring arrays of objects, with practical examples to help you master this feature.

What is Destructuring?

Destructuring is a syntax that lets you "unpack" values from arrays or properties from objects into individual variables. Instead of accessing elements or properties one by one, you can assign them to variables in a single statement. This not only makes your code cleaner but also improves its maintainability.

Destructuring allows us to unpack values from arrays or properties from objects into variables in a concise and readable way.

Without Destructuring:

const user = { name: "Sam", age: 25 };
const name = user.name;
const age = user.age;

With Destructuring:

const { name, age } = user;

Array Destructuring

Array destructuring allows you to extract elements from an array and assign them to variables based on their position. The syntax uses square brackets [] on the left side of an assignment.

const colors = ['red', 'blue', 'green'];

// Without destructuring
const first = colors[0]; // red
const second = colors[1]; // blue
const third = colors[2]; // green

// With destructuring
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor); // red
console.log(secondColor); // blue
console.log(thirdColor); // green

Skipping Elements

You can skip elements in an array by using commas without variable names.

const numbers = [1, 2, 3, 4, 5];
const [first, , third, , fifth] = numbers;

console.log(first); // 1
console.log(third); // 3
console.log(fifth); // 5

Here, the commas with no variable names skip the second and fourth elements.

Rest Operator in Array Destructuring

The rest operator (...) collects the remaining elements into a new array.

const fruits = ['apple', 'banana', 'orange', 'mango'];
const [firstFruit, ...otherFruits] = fruits;

console.log(firstFruit); // apple
console.log(otherFruits); // ['banana', 'orange', 'mango']

The otherFruitsvariable captures all elements after the first one as an array.

Default Values

You can assign default values in case an element is undefined.

const coordinates = [10, 20];
const [x, y, z = 0] = coordinates;

console.log(x); // 10
console.log(y); // 20
console.log(z); // 0 (default value)

If the array has fewer elements than variables, the default value is used.

Object Destructuring

Object destructuring extracts properties from an object and assigns them to variables with the same name as the properties. The syntax uses curly braces {}.

const user = {
  name: 'Alice',
  age: 30,
  city: 'New York'
};

// Without destructuring
const name = user.name;
const age = user.age;

// With destructuring
const { name, age } = user;

console.log(name); // Alice
console.log(age); // 30

Renaming Variables

You can assign properties to variables with different names using the property: newName syntax.

const person = {
  firstName: 'Bob',
  lastName: 'Smith'
};

const { firstName: fname, lastName: lname } = person;

console.log(fname); // Bob
console.log(lname); // Smith

Here, firstName is renamed to fname, and lastNameto lname.

Default Values in Object Destructuring

Similar to arrays, you can provide default values for missing properties.

const settings = {
  theme: 'dark',
  fontSize: 16
};

const { theme, fontSize, mode = 'standard' } = settings;

console.log(theme); // dark
console.log(fontSize); // 16
console.log(mode); // standard (default value)

Rest Operator in Object Destructuring

The rest operator collects the remaining properties into a new object.

const product = {
  id: 1,
  name: 'Laptop',
  price: 999,
  brand: 'TechCo'
};

const { id, ...details } = product;

console.log(id); // 1
console.log(details); // { name: 'Laptop', price: 999, brand: 'TechCo' }

Nested Object Destructuring

You can destructure nested objects by nesting curly braces.

const employee = {
  id: 101,
  info: {
    name: 'Carol',
    role: 'Developer'
  }
};

const { id, info: { name, role } } = employee;

console.log(id); // 101
console.log(name); // Carol
console.log(role); // Developer

Destructuring Arrays of Objects

Arrays of objects are common in JavaScript, especially when working with APIs or databases. Destructuring can simplify accessing their properties.

Basic Array of Objects Destructuring

Suppose you have an array of objects representing users:

const users = [
  { id: 1, name: 'Alice', role: 'Admin' },
  { id: 2, name: 'Bob', role: 'User' },
  { id: 3, name: 'Carol', role: 'Moderator' }
];

const [user1, user2, user3] = users;

console.log(user1.name); // Alice
console.log(user2.name); // Bob
console.log(user3.name); // Carol

Using Rest Operator with Arrays of Objects

The rest operator can collect remaining objects in the array.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carol' }
];

const [{ name: firstName }, ...otherUsers] = users;

console.log(firstName); // Alice
console.log(otherUsers); // [{ id: 2, name: 'Bob' }, { id: 3, name: 'Carol' }]

Practical Use Cases

Destructuring is incredibly versatile. Here are some real-world scenarios where it shines:

1. Function Parameters

Destructuring can simplify function parameters, especially when passing objects.

function displayUser({ name, age, city = 'Unknown' }) {
  console.log(`${name} is ${age} years old and lives in ${city}.`);
}

const user = { name: 'Dave', age: 25 };
displayUser(user); // Dave is 25 years old and lives in Unknown.

2. Swapping Variables

Array destructuring makes swapping variables straightforward without needing a temporary variable.

let a = 10, b = 20;
[a, b] = [b, a];

console.log(a); // 20
console.log(b); // 10

3. Working with APIs

When fetching data from an API, destructuring simplifies accessing nested data.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(({ results: [{ id, name }] }) => {
    console.log(`ID: ${id}, Name: ${name}`);
  });

4. Looping Through Arrays of Objects

Destructuring can make loops cleaner when working with arrays of objects.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

for (const { id, name } of users) {
  console.log(`ID: ${id}, Name: ${name}`);
}

Conclusion

Destructuring in JavaScript is a game-changer for writing concise, readable, and maintainable code. Whether you're unpacking arrays, objects, or arrays of objects, this feature simplifies data extraction and manipulation. By mastering array destructuring, object destructuring, and their combinations, you can handle complex data structures with ease. Experiment with the examples above, and try incorporating destructuring into your next project to see how it improves your code.

Connect a React App with MongoDB using Node.js and Express.js

Sudhanshu Gaikwad — Fri, 23 May 2025 14:35:56 +0000

Unlock the full potential of the MERN stack with this complete, beginner-to-pro guide! In this hands-on tutorial, you'll learn how to seamlessly connect your React.js frontend to a MongoDB database using Node.js and Express.js in 2025. We cover everything step-by-step—from setting up the backend server and creating RESTful APIs to integrating them into your React application.

📁 Folder Structure

project-root/
│
├── backend/
│   ├── config/
│   │   └── db.js
│   ├── models/
│   │   └── Note.js
│   ├── routes/
│   │   └── notes.js
│   ├── server.js
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   └── App.js

Setup the Backend with Node.js, Express & MongoDB

mkdir backend
cd backend
npm init -y
npm install express mongoose cors dotenv

Create MongoDB Connection File (`config/db.js`)

const mongoose = require("mongoose");

const connectDB = async (url) => {
  try {
    await mongoose.connect(url); // ✅ Clean usage
    console.log("✅ MongoDB Connected");
  } catch (error) {
    console.error("❌ MongoDB connection error:", error.message);
    process.exit(1);
  }
};

module.exports = connectDB;

Define a Mongoose Model (`models/Note.js`)

const express = require("express");
const router = express.Router();
const Note = require("../models/Note");

router.get("/", async (req, res) => {
  const notes = await Note.find();
  res.json(notes);
});

router.post("/", async (req, res) => {
  const note = new Note(req.body);
  await note.save();
  res.status(201).json(note);
});

module.exports = router;

Create API Routes (`routes/notes.js`)

const express = require("express");
const router = express.Router();
const Note = require("../models/Note");

router.get("/", async (req, res) => {
  const notes = await Note.find();
  res.json(notes);
});

router.post("/", async (req, res) => {
  const note = new Note(req.body);
  await note.save();
  res.status(201).json(note);
});

module.exports = router;

Create server.js (Entry Point)

const express = require("express");
const cors = require("cors");
const dotenv = require("dotenv"); // ✅ Required for env support

const connectDB = require("./config/db");
const notesRoutes = require("./routes/notes");

dotenv.config(); // ✅ Load .env variables

const app = express();

const connection_url = "Enter your URL";

// ✅ Pass your connection URL to the connectDB function
connectDB(connection_url);

app.use(cors());
app.use(express.json());

app.use("/api/notes", notesRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`🚀 Server running on port ${PORT}`));

Setup Frontend with React

npx create-react-app frontend
cd frontend
npm install axios

Connect Frontend to Backend

import React, { useEffect, useState } from "react";
import axios from "axios";
import styled from "styled-components";
import { FaEdit, FaTrash } from "react-icons/fa"; // React Icons

// Styled Components
const Container = styled.div`
  max-width: 800px;
  margin: auto;
  padding: 1rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
  /* background: linear-gradient(145deg, #0d0d0d, #1a1a1a); */
  min-height: 100vh;
`;

const Title = styled.h1`
  text-align: center;
  color: #00aaff;
`;

const Form = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
`;

const Input = styled.input`
  padding: 0.75rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  border: 1px solid #353535;
  color: white;
  &:focus {
    border-color: #3f51ff;
    outline: none;
  }
`;

const TextArea = styled.textarea`
  padding: 0.75rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  border: 1px solid #353535;
  color: white;
  resize: vertical;
  &:focus {
    border-color: #3f51ff;
    outline: none;
  }
`;

const Button = styled.button`
  padding: 0.75rem;
  font-size: 1rem;
  background: #194bfd;
  background: linear-gradient(
    90deg,
    rgba(25, 75, 253, 1) 0%,
    rgba(173, 19, 251, 1) 100%
  );
  transition: all 0.3s ease;
  color: #ffffff;

  border: none;
  border-radius: 8px;
  cursor: pointer;

  &:hover {
    background-color: #5a189a;
    box-shadow: 0 6px 16px rgba(90, 24, 154, 0.5);
    color: #ffffff;
    transform: translateY(-2px);
  }
`;

const NoteGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
`;

const NoteCard = styled.div`
  background: #1e1e1e;
  border-radius: 12px;
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);

  h3 {
    margin-top: 0;
    color: #00aaff;
  }

  p {
    color: #ccc;
  }

  .actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;

    button {
      flex: 1;
      padding: 0.5rem;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .edit {
      background-color: #ffaa00;
      color: #121212;

      &:hover {
        background-color: #e69a00;
      }
    }

    .delete {
      background-color: #ff4d4d;
      color: white;

      &:hover {
        background-color: #e04343;
      }
    }
  }
`;

function App() {
  const [notes, setNotes] = useState([]);
  const [form, setForm] = useState({ title: "", content: "" });
  const [editingId, setEditingId] = useState(null);

  const fetchNotes = async () => {
    const res = await axios.get("http://localhost:5000/api/notes");
    setNotes(res.data);
  };

  const addOrUpdateNote = async () => {
    if (editingId) {
      await axios.put(`http://localhost:5000/api/notes/${editingId}`, form);
      setEditingId(null);
    } else {
      await axios.post("http://localhost:5000/api/notes", form);
    }
    fetchNotes();
    setForm({ title: "", content: "" });
  };

  const deleteNote = async (id) => {
    await axios.delete(`http://localhost:5000/api/notes/${id}`);
    fetchNotes();
  };

  const editNote = (note) => {
    setForm({ title: note.title, content: note.content });
    setEditingId(note._id);
  };

  useEffect(() => {
    fetchNotes();
  }, []);

  return (
    <Container>
      <Title>📝 Notes App</Title>
      <Form>
        <Input
          type="text"
          placeholder="Title"
          value={form.title}
          onChange={(e) => setForm({ ...form, title: e.target.value })}
        />
        <TextArea
          placeholder="Content"
          rows={4}
          value={form.content}
          onChange={(e) => setForm({ ...form, content: e.target.value })}
        />
        <Button onClick={addOrUpdateNote}>
          {editingId ? "Update Note" : "Add Note"}
        </Button>
      </Form>

      <h2 style={{ color: "#ccc" }}>All Notes</h2>
      <NoteGrid>
        {notes.map((note) => (
          <NoteCard key={note._id}>
            <h3>{note.title}</h3>
            <p>{note.content}</p>
            <div className="actions">
              <button className="edit" onClick={() => editNote(note)}>
                <FaEdit /> Edit
              </button>
              <button className="delete" onClick={() => deleteNote(note._id)}>
                <FaTrash /> Delete
              </button>
            </div>
          </NoteCard>
        ))}
      </NoteGrid>
    </Container>
  );
}

export default App;

Final Steps

Run backend:

node server.js

Run frontend:

npm start

Deploying to the Internet

Use Render or Railway for backend deployment
Use Vercel or Netlify for frontend deployment
Connect via environment variables and update frontend API URL

Conclusion

Congratulations! You've successfully built a full-stack MERN application by connecting a React frontend to a MongoDB database using Node.js and Express. From setting up the server and creating RESTful APIs to integrating them into your React components—you've now covered all the essential steps needed to master the foundational flow of full-stack development.

DEV Community: Sudhanshu Gaikwad

Brute Force Algorithm in DSA: Best Case and Worst Case Explained with JavaScript.

What Is a Brute Force Algorithm?

Simple Brute Force Example in JavaScript

How does it work?

What is Best Case and Worst Case?

When Should You Use Brute Force?

Integrate Razorpay Payment Gateway into your React app

What is Razorpay?

Payment Flow (Simple Explanation)

High-level flow

1. Razorpay account & keys

2. Backend (Node + Express)

3. Frontend (Vite + React)

Payment Button Component

Use the component anywhere:

4. How Verification Works

Verify the payment

Testing checklist

Build a Production Ready MERN Stack e-Commerce Website with React, Node.js, MongoDB, JWT & Razorpay.

Why This Project Exists

What Users Can Do

What Admins Can Do

Tech Stack

Frontend :

Backend :

Payments :

Other :

Project Structure (High Level)

Authentication & Security Highlights

Payment Integration

Admin Dashboard

API Modules

Authentication

Users

Products

Cart

Orders

Payments

Admin

Getting Started in Minutes

Frontend

Backend

Backend .env

Frontend .env

Future Roadmap

Why You Should Fork It

Support the Project

The Most Important SQL Concepts Every Data Scientist

Why SQL Matters in Data Science

1. Aggregation (Turning Raw Data into Insights)

2. JOINs Connecting Multiple Tables

3. CTEs (Common Table Expressions)

4. Window Functions ( Advanced Data Analysis )

5. Subqueries ( Queries Inside Queries )

6. Data Cleaning ( The Most Important Skill )

7. Date Functions ( Time-Based Analysis )

8. Ranking Data

9. Pivoting Data

10. Query Optimization ( Writing Faster SQL )

11. CASE Statements ( Smart Conditional Logic )

12. Business Metrics ( Real Data Science Insights )

How to Add Clerk Login & Logout Authentication in React.js Web Application

Why Clerk?

Method 1: Full Routing & Protected Pages Setup

Step-by-Step Guide to Adding Clerk Authentication

Method 2: Minimal Setup with SignIn/SignUp

Resources

Conclusion

Free APIs for Developers Learn, Experiment & Create Effortlessly

Why Use Free APIs Without Keys?

Benefits of API Key Free APIs

Top 10 Free APIs Without API Keys

1 Example

2 Example

Resources:

Conclusion

How to Use GenKit in Your React.js Project

Step 1 — Install GenKit

Step 2 — Set up GenKit in Your Project

Backend `.env`

Frontend `.env`

Create MongoDB Connection File (`config/db.js`)

Define a Mongoose Model (`models/Note.js`)

Create API Routes (`routes/notes.js`)