DEV Community: Md Nazmus Sakib

গিটহাব লাইসেন্স: কোনটি কবে ব্যবহারযোগ্য?

Md Nazmus Sakib — Tue, 09 Sep 2025 05:43:41 +0000

✍🏻 মো. নাজমুচ্ছাকিব

ফুলস্ট্যাক ডেভেলপার ও কলামিস্ট

ক্যারিয়ার ভাবনা || সিরিজ: ০১ || পর্ব: ০৩

গিটহাবে ওপেন সোর্স প্রজেক্ট শেয়ার করার সময় লাইসেন্স নির্বাচন অত্যন্ত গুরুত্বপূর্ণ। এটি কেবল আইনি সুরক্ষা দেয় না, বরং প্রজেক্টের ব্যবহার, বিতরণ এবং ডেরাইভেটিভ কোড তৈরির শর্তও নির্ধারণ করে। লাইসেন্সের সঠিক নির্বাচন ডেভেলপার ও ব্যবহারকারীর জন্য উভয়ের জন্য নিরাপত্তা ও স্বচ্ছতা নিশ্চিত করে। ডেভেলপাররা প্রায়শই MIT, Apache 2.0, GPL এবং Creative Commons (CC) লাইসেন্সের মধ্যে পছন্দ করেন। কোনটি ব্যবহারযোগ্য হবে তা নির্ভর করে প্রজেক্টের উদ্দেশ্য, লক্ষ্য ব্যবহারকারী এবং আইনি ঝুঁকির পরিমাণের ওপর।

MIT লাইসেন্স

MIT লাইসেন্সের সবচেয়ে বড় বৈশিষ্ট্য হলো এর সরলতা। এটি ডেভেলপারদের প্রজেক্ট ব্যবহার, কপি, পরিবর্তন, মার্জ এবং বিতরণের অনুমতি দেয়, কোনো বড় সীমাবদ্ধতা ছাড়া। MIT লাইসেন্স ব্যবহার করলে মূল কপিরাইট নোট এবং লাইসেন্স উল্লেখ করতে হবে, যা প্রজেক্টে অবদান রাখা ব্যক্তিদের স্বীকৃতি নিশ্চিত করে। শিক্ষামূলক প্রজেক্ট, স্টার্টআপ, প্রোটোটাইপ বা ব্যবসায়িক উদ্দেশ্যে কোড দ্রুত এবং সহজে ব্যবহার করতে চাইলে এটি আদর্শ। উদাহরণস্বরূপ, একটি স্টার্টআপ যদি নতুন ওয়েব অ্যাপ্লিকেশন তৈরি করে এবং দ্রুত বাজারে আনার লক্ষ্য রাখে, MIT লাইসেন্সের কোড ব্যবহার করে দ্রুত ডেভেলপমেন্ট করা সম্ভব। ওপেন সোর্স সম্প্রদায়ের মধ্যে সহযোগিতা এবং জ্ঞান ভাগাভাগি নিশ্চিত করার দিক থেকেও MIT লাইসেন্স কার্যকর। এটি এমন পরিস্থিতির জন্য উপযুক্ত যেখানে ডেভেলপাররা চাইছেন ব্যবহারকারীরা সীমাহীনভাবে কোড ব্যবহার করুক, তবে মূল লেখকের স্বীকৃতি বজায় থাকুক।

ব্যবহারবিধি: সহজ, দ্রুত, সীমাহীন ব্যবহারের জন্য। শিক্ষামূলক, স্টার্টআপ, প্রোটোটাইপ বা ব্যবসায়িক প্রজেক্টে আদর্শ। মূল কপিরাইট ও লাইসেন্স টেক্সট রাখতে হবে।
ব্যাজ:
লাইসেন্স লিংক: MIT License Details
লাইসেন্স টেক্সট:

  MIT License

  Copyright (c) [year] [fullname]

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
  in the Software without restriction, including without limitation the rights
  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  SOFTWARE.

Apache 2.0 লাইসেন্স

Apache 2.0 লাইসেন্স তুলনামূলকভাবে আরও শক্তিশালী এবং আইনি সুরক্ষার ওপর গুরুত্ব দেয়। এটি কেবল কোড ব্যবহার ও বিতরণ অনুমোদন দেয় না, বরং পেটেন্ট সম্পর্কিত বিষয়গুলোও সুরক্ষিত রাখে। বড় প্রতিষ্ঠান বা কর্পোরেট ব্যবহারকারীরা Apache লাইসেন্সযুক্ত প্রজেক্ট ব্যবহার করলে আইনি ঝুঁকি অনেক কমে। ডেরাইভেটিভ কোডের ক্ষেত্রে স্বচ্ছতা বজায় রাখা Apache লাইসেন্সের প্রধান বৈশিষ্ট্য। এটি নিশ্চিত করে যে, প্রজেক্ট পরিবর্তন বা সম্প্রসারণের সময় মূল লাইসেন্স ও কপিরাইট নোট বজায় থাকবে। দীর্ঘমেয়াদী এবং বড় সম্প্রদায়ভিত্তিক ওপেন সোর্স প্রজেক্টের জন্য Apache 2.0 একটি কার্যকরী এবং নিরাপদ বিকল্প। উদাহরণস্বরূপ, একটি বড় সফটওয়্যার কোম্পানি যদি ক্লাউড সার্ভিস প্ল্যাটফর্ম তৈরি করে, তারা Apache 2.0 লাইসেন্স ব্যবহার করে আইনি ঝুঁকি কমাতে পারে এবং পেটেন্ট বিষয়েও সুরক্ষা পায়।

ব্যবহারবিধি: পেটেন্ট সুরক্ষা ও বড় প্রতিষ্ঠানের জন্য উপযুক্ত। আইনি সুরক্ষা ও স্বচ্ছতা চায় এমন প্রজেক্টে ব্যবহার করুন। মূল লাইসেন্স ও কপিরাইট টেক্সট রাখতে হবে।
ব্যাজ:
লাইসেন্স লিংক: Apache License 2.0
লাইসেন্স টেক্সট:

  Apache License
  Version 2.0, January 2004
  http://www.apache.org/licenses/

  TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

  [Full Apache 2.0 license text: https://www.apache.org/licenses/LICENSE-2.0.txt]

GPL (General Public License)

GPL লাইসেন্স মূলত ফ্রি সফটওয়্যার এবং ওপেন সোর্স সম্প্রদায়কে রক্ষা করার জন্য তৈরি। এটি নিশ্চিত করে যে, প্রজেক্টের পরিবর্তিত বা ডেরাইভেটিভ কোডও একই লাইসেন্সের অধীনে প্রকাশিত হবে। অর্থাৎ, কেউ যদি আপনার কোড ব্যবহার বা পরিবর্তন করে, তবে তাকে তার পরিবর্তিত কোডও ফ্রিতে প্রকাশ করতে হবে। GPL বিশেষভাবে সেই প্রজেক্টের জন্য উপযুক্ত যেখানে কমিউনিটি ভিত্তিক সহযোগিতা এবং ওপেন সোর্স ফিলোসফি বজায় রাখা প্রয়োজন। শিক্ষামূলক প্রজেক্ট, গবেষণা বা মুক্ত সফটওয়্যার সম্প্রদায়ের জন্য GPL আদর্শ। উদাহরণস্বরূপ, একটি বিশ্ববিদ্যালয় গবেষণা দল যদি একটি নতুন অ্যালগরিদম তৈরি করে, GPL লাইসেন্সের অধীনে এটি প্রকাশ করলে অন্যরা এটি ব্যবহার ও উন্নয়ন করতে পারে, তবে মূল কোডের ওপেন সোর্স বৈশিষ্ট্য বজায় থাকে। যদিও GPL কোডের কমার্শিয়াল ব্যবহার কিছুটা সীমিত করতে পারে, তবে এটি নিশ্চিত করে যে প্রজেক্ট সর্বদা ওপেন এবং ফ্রিতে থাকবে।

ব্যবহারবিধি: ওপেন সোর্স ও কমিউনিটি সহযোগিতার জন্য উপযুক্ত। পরিবর্তিত/ডেরাইভেটিভ কোডও ওপেন সোর্স রাখতে হবে। ব্যবহারকারীদের কোড ওপেন রাখতে বাধ্য করে।
ব্যাজ:
লাইসেন্স লিংক: GNU GPL v3
লাইসেন্স টেক্সট:

  GNU GENERAL PUBLIC LICENSE
  Version 3, 29 June 2007

  Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>

  [Full GPL v3 license text: https://www.gnu.org/licenses/gpl-3.0.txt]

Creative Commons (CC) লাইসেন্স

Creative Commons লাইসেন্স মূলত কোডের জন্য নয়, বরং মিডিয়া, ডকুমেন্টেশন, ছবি, ভিডিও এবং অন্যান্য কনটেন্টের জন্য তৈরি। CC লাইসেন্স ব্যবহারকারীদের কনটেন্ট ব্যবহার, বিতরণ এবং প্রয়োজন অনুযায়ী পরিবর্তনের অনুমতি দেয়, তবে শর্ত অনুযায়ী। উদাহরণস্বরূপ, CC BY লাইসেন্সে ব্যবহারকারীদের অবশ্যই মূল লেখককে স্বীকৃতি দিতে হবে, এবং CC BY-SA লাইসেন্সে পরিবর্তিত কনটেন্টও একই লাইসেন্সে শেয়ার করতে হবে। CC লাইসেন্স শিক্ষামূলক প্রতিষ্ঠান, ডিজাইনার, ব্লগার এবং মিডিয়া প্রফেশনালদের জন্য কার্যকর। কোডের জন্য এটি উপযুক্ত নয়, তবে ডকুমেন্টেশন, টিউটোরিয়াল বা মিডিয়া প্রজেক্টের ক্ষেত্রে CC লাইসেন্স ব্যবহারে কনটেন্ট সহজে শেয়ারযোগ্য এবং স্বীকৃতিও নিশ্চিত হয়।

ব্যবহারবিধি: কোড নয়, মিডিয়া/ডকুমেন্টেশন/ছবি/ভিডিও ইত্যাদির জন্য। বিভিন্ন ধরনের শর্তযুক্ত (BY, BY-SA, BY-NC, ইত্যাদি)।
ব্যাজ:
লাইসেন্স লিংক: Creative Commons BY 4.0
লাইসেন্স টেক্সট:

  Creative Commons Attribution 4.0 International

  You are free to:
  - Share — copy and redistribute the material in any medium or format
  - Adapt — remix, transform, and build upon the material for any purpose, even commercially.
  Under the following terms:
  - Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. 
  [Full CC BY 4.0 license text: https://creativecommons.org/licenses/by/4.0/legalcode]

লাইসেন্স নির্বাচন প্রজেক্টের উদ্দেশ্য অনুযায়ী হওয়া উচিত। দ্রুত এবং সীমাহীন ব্যবহার চাইলে MIT, আইনি সুরক্ষা ও বড় প্রতিষ্ঠানের জন্য Apache 2.0, কমিউনিটি ও ফ্রি সফটওয়্যারের জন্য GPL, এবং মিডিয়া বা ডকুমেন্টেশনের জন্য Creative Commons আদর্শ। সঠিক লাইসেন্স নির্বাচনের মাধ্যমে আপনি শুধু আইনি ঝুঁকি এড়াবেন না, বরং প্রজেক্টের ব্যবহারযোগ্যতা, সম্প্রদায়ভিত্তিক সহযোগিতা এবং স্থায়িত্বও নিশ্চিত করবেন। প্রতিটি লাইসেন্সের নিজস্ব শক্তি ও সীমাবদ্ধতা বোঝা খুব জরুরি, যাতে প্রজেক্টের লক্ষ্য ও দর্শকদের চাহিদা মিলে যায়।

🔍 কোন লাইসেন্স কবে ব্যবহার করবেন?

লাইসেন্স	কবে ব্যবহার করবেন	আইনি সুরক্ষা	কমার্শিয়াল	ডেরাইভেটিভ কোড	মিডিয়া/ডকু/ছবি
MIT	দ্রুত, সীমাহীন ব্যবহারের জন্য	সাধারণ	হ্যাঁ	হ্যাঁ	না
Apache 2.0	বড় কোম্পানি/পেটেন্ট সুরক্ষার জন্য	শক্তিশালী	হ্যাঁ	হ্যাঁ	না
GPL v3	ওপেন সোর্স/কমিউনিটির জন্য	শক্তিশালী	সীমিত	হ্যাঁ, কিন্তু ওপেন	না
CC BY 4.0	মিডিয়া, ডকুমেন্টেশন, ছবি, ভিডিও ইত্যাদির জন্য	সাধারণ	হ্যাঁ	শর্তসাপেক্ষে	হ্যাঁ

এই ডকুমেন্টটি ওপেন সোর্স কমিউনিটির জন্য সচেতনতামূলক, আইনি পরামর্শের বিকল্প নয়।

PostgreSQL Tutorial & Real World Guide

Md Nazmus Sakib — Tue, 02 Sep 2025 05:11:52 +0000

Made by: Md. Nazmus Sakib

Profession: Full Stack Developer

PostgreSQL Home
PostgreSQL Intro
PostgreSQL Install
PostgreSQL Get Started
PostgreSQL pgAdmin 4
DBeaver: Universal DB Client
Database Operations
Create Demo Database
PostgreSQL Syntax & Operators
PostgreSQL SELECT & Clauses
PostgreSQL Joins
Other Important Clauses
Prisma Integration
Resources

PostgreSQL Home

PostgreSQL is a powerful, open-source relational database system that’s trusted for robustness, scalability, and extensibility.

Used by companies like Apple, Instagram, and Reddit for storing millions of records and complex business logic.

PostgreSQL Intro

Relational Database: Stores data in tables with rows and columns.
Open Source: Free, community-driven, and highly extensible.
Real Life Example: Instagram uses PostgreSQL for user data, photos, likes, comments, and relationships.

PostgreSQL Install

Ubuntu:

sudo apt update
sudo apt install postgresql postgresql-contrib

macOS (Homebrew):

brew install postgresql

Windows:

Download installer from PostgreSQL Official Site

PostgreSQL Get Started

Start the PostgreSQL service:

sudo service postgresql start

Access the CLI:

sudo -u postgres psql

Create a database:

CREATE DATABASE shop;

Create a user:

CREATE USER shopuser WITH PASSWORD 'strongpassword';
GRANT ALL PRIVILEGES ON DATABASE shop TO shopuser;

PostgreSQL pgAdmin 4

pgAdmin 4 is the official graphical user interface for PostgreSQL.

It allows you to manage databases, run queries, view statistics, and more — all via a web browser.

DBeaver: Universal DB Client

DBeaver is a powerful database management tool supporting PostgreSQL and many other databases.

Use it for visual table design, ER diagrams, queries, and data analysis.
Real Life: Data analysts use DBeaver to explore customer purchase histories and sales trends from PostgreSQL.

Database Operations

PostgreSQL CREATE TABLE

CREATE TABLE customers (
  id SERIAL PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Real Life: E-commerce platforms store customer info.

PostgreSQL INSERT INTO

INSERT INTO customers (name, email) VALUES ('Sakib', 'sakib@gmail.com');

Real Life: Registering new users on a website.

PostgreSQL Fetch Data

SELECT * FROM customers;

Real Life: Admin dashboard shows all customers.

PostgreSQL ADD COLUMN

ALTER TABLE customers ADD COLUMN phone VARCHAR(20);

Real Life: Adding mobile number support.

PostgreSQL UPDATE

UPDATE customers SET email = 'sakib@outlook.com' WHERE id = 1;

Real Life: User updates their email address.

PostgreSQL ALTER COLUMN

ALTER TABLE customers ALTER COLUMN phone TYPE VARCHAR(30);

Real Life: Allow longer phone numbers.

PostgreSQL DROP COLUMN

ALTER TABLE customers DROP COLUMN phone;

Real Life: Remove unnecessary data fields.

PostgreSQL DELETE

DELETE FROM customers WHERE id = 1;

Real Life: GDPR request to delete user data.

PostgreSQL DROP TABLE

DROP TABLE customers;

Real Life: Remove legacy tables after migration.

Create Demo Database

CREATE DATABASE demo;
-- Connect to demo
\c demo

-- Create table
CREATE TABLE products (
  id SERIAL PRIMARY KEY,
  title VARCHAR(100),
  price NUMERIC
);

INSERT INTO products (title, price) VALUES ('Laptop', 1200), ('Mouse', 25);

Real Life: Inventory management for an electronics shop.

PostgreSQL Syntax & Operators

Syntax

SELECT column1, column2 FROM table_name WHERE condition;

Operators

= (equal), <> (not equal), <, >, <=, >=
AND, OR, NOT
IN, BETWEEN, LIKE

SELECT * FROM products WHERE price > 100 AND title LIKE '%top%';

PostgreSQL SELECT & Clauses

PostgreSQL SELECT

SELECT * FROM products;

SELECT DISTINCT

SELECT DISTINCT title FROM products;

WHERE

SELECT * FROM products WHERE price > 500;

ORDER BY

SELECT * FROM products ORDER BY price DESC;

LIMIT

SELECT * FROM products LIMIT 5;

MIN and MAX

SELECT MIN(price), MAX(price) FROM products;

COUNT

SELECT COUNT(*) FROM products WHERE price > 500;

SUM

SELECT SUM(price) FROM products;

AVG

SELECT AVG(price) FROM products;

LIKE

SELECT * FROM products WHERE title LIKE 'Lap%';

IN

SELECT * FROM products WHERE price IN (25, 1200);

BETWEEN

SELECT * FROM products WHERE price BETWEEN 100 AND 1300;

AS (Alias)

SELECT title AS "Product Name", price AS "Cost" FROM products;

PostgreSQL Joins

Suppose you have tables orders and customers.

INNER JOIN

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

LEFT JOIN

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

RIGHT JOIN

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

FULL JOIN

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

CROSS JOIN

SELECT customers.name, products.title
FROM customers
CROSS JOIN products;

UNION

SELECT name FROM customers
UNION
SELECT title FROM products;

GROUP BY

SELECT customer_id, COUNT(*) AS order_count
FROM orders
GROUP BY customer_id;

HAVING

SELECT customer_id, COUNT(*) AS order_count
FROM orders
GROUP BY customer_id
HAVING COUNT(*) > 5;

EXISTS

SELECT name FROM customers WHERE EXISTS (
  SELECT 1 FROM orders WHERE orders.customer_id = customers.id
);

ANY

SELECT * FROM products WHERE price = ANY (SELECT price FROM products WHERE price < 100);

ALL

SELECT * FROM products WHERE price > ALL (SELECT price FROM products WHERE price < 1000);

CASE

SELECT
  title,
  price,
  CASE 
    WHEN price > 1000 THEN 'Expensive'
    ELSE 'Affordable'
  END AS category
FROM products;

Prisma Integration with PostgreSQL

Prisma is a next-generation Node.js/TypeScript ORM for PostgreSQL (and more).

It makes database access safe, fast, and easy.

How Prisma Works

Define your DB schema in schema.prisma
Generate type-safe client code
Write database queries in JavaScript/TypeScript

Install & Set Up

npm install @prisma/client
npx prisma init

Add your PostgreSQL URL in .env:

DATABASE_URL="postgresql://shopuser:strongpassword@localhost:5432/shop"

Example Prisma Schema

model Customer {
  id      Int     @id @default(autoincrement())
  name    String
  email   String  @unique
  orders  Order[]
}

model Order {
  id          Int      @id @default(autoincrement())
  product     String
  customerId  Int
  customer    Customer @relation(fields: [customerId], references: [id])
}

Migration

npx prisma migrate dev --name init

Query Examples

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

// Create a customer
await prisma.customer.create({
  data: { name: 'Sakib', email: 'sakib@gmail.com' }
})

// Find all customers
const customers = await prisma.customer.findMany()

// Create an order for a customer
await prisma.order.create({
  data: { product: 'Laptop', customerId: 1 }
})

Real World Use Cases

E-commerce: Customers, Orders, Products — with relations and constraints.
Blog/CMS: Users, Posts, Comments — with easy querying and filtering.
Analytics: Store logs/events as JSONB, aggregate with SQL and Prisma.
Healthcare: Patients, Doctors, Appointments, secure medical records.
Education: Students, Courses, Enrollments, track progress.

Resources

PostgreSQL and Prisma together empower you to build scalable, high-performance, and secure applications for any real world need!

টাইপ অ্যাসার্শন: TypeScript-এ টাইপ নিরাপত্তার গোপন হাতিয়ার

Md Nazmus Sakib — Fri, 02 May 2025 19:34:04 +0000

টাইপস্ক্রিপ্টের টাইপ অ্যাসার্শন (Type Assertion) হলো এমন একটি যাদুকরী হাতিয়ার, যার মাধ্যমে আপনি কম্পাইলারের কাছে জানিয়ে দেন—“এই ভ্যারিয়েবলটি আমার জানা মতো এই নির্দিষ্ট টাইপের মধ্যেই পড়ে।” এটি রানটাইমে কোনো কাস্টিং করে না, বরং কোডের পরীক্ষার সময় কম্পাইলারের সতর্কতা কিছুটা শিথিল করে, যাতে আপনি .length, .value কিংবা .permissions–এর মতো প্রপার্টি নিরাপদে অ্যাক্সেস করতে পারেন।

টাইপ অ্যার্শনের মূলতত্ত্ব

টাইপ অ্যার্শন মানে কখনই “বড় ঝুঁকি নিয়ে টাইপের মালিকানা” নয়; বরং সেটা একটা চুক্তি যে—বিশ্বস্ত হওয়ার পরে আপনি কম্পাইলারকে বলতে চান, “দেখো, এই ভ্যালু আসলে আমি জানতেই পারি, এটা ঐ টাইপেরই!” এর ফলে TypeScript আপনাকে অতিরিক্ত টাইপ-চেকের জটকে আটকে রাখে না, তবে ভুল ব্যবহার এড়াতে আপনার নিজের পরীক্ষা-নিরীক্ষা চালিয়ে নিতে বাধ্য করে।

“Angle-Bracket” vs “as” সিনট্যাক্স

// Angle-Bracket সিনট্যাক্স (JSX ফাইলে এড়িয়ে চলুন)
let someVal: any = "Hello";
let len1: number = (<string>someVal).length;

// as-সিনট্যাক্স (React/JSX–এ নিরাপদ)
let anotherVal: any = { x: 5, y: 15 };
let coords = anotherVal as { x: number; y: number };
console.log(coords.x + coords.y); // 20

দুটি সিনট্যাক্সই সমান কার্যকর, তবে React–এর JSX ফাইলে <string> ইন্টারপ্রেটেশন গন্ডগোল তৈরি করতে পারে—সেক্ষেত্রে as-সিনট্যাক্স সর্বদা নিরাপদ।

কবে এবং কেন ব্যবহার করবেন

DOM অপারেশন:

  const el = document.getElementById("email");
  // TS জানে এটা HTMLElement|null, কিন্তু আমরা নিশ্চিত it's HTMLInputElement
  const input = el as HTMLInputElement;
  console.log(input.value);

এখানে as HTMLInputElement–এ .value নিরাপদে এক্সেস করা যায়।

ইউনিয়ন টাইপ থেকে নির্দিষ্ট টাইপ:

  type A = { kind: "a"; a: number };
  type B = { kind: "b"; b: string };
  function handle(x: A | B) {
    if (x.kind === "a") {
      console.log((x as A).a);  // বুঝিয়ে দেয় x.a নিরাপদ
    } else {
      console.log((x as B).b);
    }
  }

এপিআই রেসপন্স ভ্যালিডেশন:

  async function fetchUser() {
    const res = await fetch("/api/user");
    const data = (await res.json()) as { id: number; name: string };
    // নিশ্চিত যে data.id আর data.name ব্যবহার করা যাবে
    return data;
  }

উন্নত ব্যবহার ও সতর্কতা

নন-নাল অ্যাসার্শন: যদি আপনি নিশ্চিত কোনও ভ্যারিয়েবল null নয়:

  const maybeEl = document.querySelector(".btn");
  const button = maybeEl as HTMLButtonElement; // দূর্বল—null হলে সমস্যা
  button.click();

এর বদলে:

  const btn = document.querySelector(".btn");
  if (btn instanceof HTMLButtonElement) {
    btn.click();
  }

কমপ্লেক্স স্ট্রাকচার: বড় অবজেক্টে সব সময় ডিক্লেয়ারড ইন্টারফেস ব্যবহার করুন:

  interface User { id: number; name: string; }
  const raw: any = await fetchUserData();
  const user = raw as User; // পরিষ্কার, maintainable

অতিরিক্ত টিপস

লিন্টিং: noImplicitAny ও strictNullChecks চালু রাখুন – অ্যার্শন কম প্রয়োজন হবে।
ইউটিলিটি টাইপ: Partial<T>, Required<T>–এর মত টেমপ্লেট ব্যবহার করে নিজস্ব কাস্টম টাইপ বনান।
টেস্টিং: অ্যার্শনের চার সীমানায় ইউনিট–ইন্টিগ্রেশন টেস্ট চালান, যেন মোস্টুরিটি বজায় থাকে।

টাইপ অ্যার্শন মানে “আমি কম্পাইলারকে একটু ছাড় দিচ্ছি,”—কিন্তু তা অবশ্যই আপনার নিজের দায়িত্ব ও সচেতনতা নিয়ে ব্যবহার করতে হবে। এই হাতিয়ারটি সঠিক প্রেক্ষাপটে ব্যবহার করলে কোড হবে ক্লিন, নিরাপদ ও প্রয়োগে দৃঢ়; অন্যথায় তা রানটাইম এ্যাররের দারুণ উত্স হতে পারে।

React.memo: Optimizing Performance in React Applications

Md Nazmus Sakib — Mon, 28 Apr 2025 09:15:09 +0000

Modern web applications often manage complex user interfaces with React, where frequent state updates can trigger many component re-renders. Each re-render consumes browser resources and can degrade the user experience, especially in large applications. In React, a change in a parent component’s state will by default re-render all its children, even if those children are unaffected by the change. Such excessive re-rendering can waste CPU time and memory, slowing down the app and making the UI less responsive. Performance optimization is therefore essential: by minimizing unnecessary re-renders, developers keep React apps fast and efficient. Techniques like memoization are key to this, and React provides a built-in way to do so.

Understanding React.memo

React.memo is a built-in higher-order component (HOC) designed to memoize a functional component. In effect, it returns a special version of the component that React will only re-render when its props change. By default, React.memo performs a shallow comparison of the old and new props. If the props are identical (according to Object.is on each prop), React skips re-rendering that component. Official documentation explains that wrapping a component in memo creates “a new, memoized component” that usually is not re-rendered when its parent re-renders as long as its props have not changed (memo – React). In practice, React.memo lets developers tell React: “This component produces the same output given the same props, so you don’t need to update it unless its props actually change”. This memorization can significantly boost performance by caching the last rendered result and reusing it on repeated renders with the same inputs.

When and Why to Use React.memo

React.memo is most valuable for pure components whose output is determined solely by props and does not depend on changing state or context. It is particularly useful when:

Stable Props: A component receives props that change infrequently, even though its parent might update often.
Expensive Rendering: A component does heavy rendering or complex calculations. Skipping its update can save noticeable time.
Unrelated Parent Updates: A parent component’s state or props change but the child’s relevant props stay the same. Memo can prevent unnecessary child updates.

For example, consider a <TodoList> component that renders a list of tasks. If the parent component updates some unrelated state (like a counter or theme), without memo every <TodoList> render still occurs. Wrapping <TodoList> with React.memo ensures it only re-renders when the list of tasks actually changes. In other words, “a memoized component will not re-render when the same props are passed to it”. This behavior reduces wasted work and keeps the UI snappier. In fact, React documentation emphasizes that memoization is a performance optimization, not a guarantee – it skips renders when props are equal, which “can improve performance” by avoiding needless work.

Example: Preventing Unnecessary Re-renders

To illustrate, imagine a simplified to-do app. We have a parent component with a counter and a task list. The task list is passed as a prop to a child component. Without optimization, clicking the counter will re-render the entire tree, including the task list. Using React.memo on the child prevents this. A TypeScript example:

import React, { useState } from 'react';

interface TasksProps {
  tasks: string[];
}

const TaskList: React.FC<TasksProps> = ({ tasks }) => {
  console.log('TaskList rendering');
  return (
    <ul>
      {tasks.map(task => (
        <li key={task}>{task}</li>
      ))}
    </ul>
  );
};

// Wrap the component with React.memo to memoize it
const MemoizedTaskList = React.memo(TaskList);
export default MemoizedTaskList;

// ----- Parent Component (for context) -----
function App() {
  const [count, setCount] = useState(0);
  const tasks = ['Buy groceries', 'Read a book']; // Static list

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
      {/* TaskList will only re-render if `tasks` changes */}
      <MemoizedTaskList tasks={tasks} />
    </div>
  );
}

In this example, clicking the Count button updates the parent’s state, but because TaskList is wrapped in React.memo, it will not re-render unless the tasks prop changes. The console log inside TaskList will only run when a new task is added or removed. This mirrors common scenarios (such as a static sidebar menu or an expensive chart component) where unrelated updates should not cause expensive child updates.

Benefits of React.memo

Reduced Re-renders: By skipping updates for unchanged props, React.memo cuts down on unnecessary work. This leads to faster UI updates and less CPU use.
Improved Performance: Especially for components with heavy rendering logic (e.g. large lists, complex UI elements), memoization can noticeably boost throughput. For instance, dashboard widgets that only depend on specific data can stay still while other parts update.
Cleaner Code: Using React.memo encourages writing pure components whose output depends only on props, aligning with React best practices.
Customization: Advanced users can supply a custom comparison function as a second argument to React.memo. This allows fine-grained control (for example, performing a deeper prop comparison) when needed.

Considerations and Cautions

Shallow Comparison: By default, React.memo does only a shallow comparison of props (similar to Object.is). If you pass an object, array, or function as a prop, remember that creating a new object or array on every render will defeat the memo. React will see a new reference and re-render the memoized component. For example, avoid inline object literals or define callbacks with useCallback so props stay referentially stable.
Performance Overhead: Memoization itself has a (small) cost. React must do the prop comparisons on each render. If a component is very cheap to render or its props change almost every time, using React.memo can actually worsen performance. It’s best reserved for cases where unnecessary re-renders are known to be wasteful. Measure with React DevTools profiler to be sure.
State and Context: React.memo only checks props. If a memoized component has its own state or consumes context, changes in that state or context will still trigger re-renders. Memoization does not block updates from internal state changes or context updates.
Custom Comparison Pitfalls: If you do provide a custom equality function, be careful to compare all props properly. Failing to do so (or performing expensive deep comparisons) can introduce bugs or negate the performance benefits. As the React docs warn, deep checks can even freeze the app if not handled carefully.

React.memo is a powerful tool for optimizing React applications when used judiciously. It allows developers to skip re-rendering components whose props have not changed, saving time and resources.

In practice, React.memo shines in scenarios with static or rarely-changing child components, such as fixed lists, charts, or UI fragments that depend on stable data. However, it should be applied thoughtfully: avoid wrapping every component blindly. Use it when profiling shows unnecessary updates, and watch out for its shallow comparison model and potential overhead. When used carefully, React.memo helps ensure that React apps remain responsive and efficient, rerendering only what truly needs updating.

Comparison Between Fetch and Axios: Usage, Differences, and Real-World Applications

Md Nazmus Sakib — Thu, 03 Apr 2025 14:49:07 +0000

In modern web development, fetching data from APIs is an essential task. Two widely used methods for making HTTP requests in JavaScript and TypeScript are fetch and axios. While both serve the same fundamental purpose, they differ in functionality, ease of use, and performance. This article explores their key differences, usage, and practical applications to help developers choose the right tool based on their requirements.

Key Differences

Feature	`fetch`	`axios`
Default Behaviour	Supports only `GET` requests by default; additional configuration is required for `POST`, `PUT`, and `DELETE` requests.	Supports `GET`, `POST`, `PUT`, `DELETE` requests without extra configuration.
Response Handling	Requires explicit conversion to JSON using `.json()`.	Automatically converts responses to JSON.
Error Handling	Only fails on network errors; HTTP errors (e.g., 404, 500) must be handled manually.	Automatically detects and handles HTTP errors.
Configuration	Headers and request body must be manually configured.	Provides default configurations with extensive customisation options.
Request Cancellation	No built-in cancellation support; requires `AbortController`.	Supports request cancellation with built-in `cancelToken`.
Timeout Handling	No built-in timeout support.	Allows setting request timeouts.
Browser Support	Supported by most modern browsers.	Similar browser support, but better compatibility with older versions.

Real-World Applications

When to Use fetch

Lightweight applications where minimal overhead is required.
Simple GET requests without additional configurations.
Modern browser-based applications that do not require extensive request handling.

When to Use axios

Applications requiring advanced error handling and automatic JSON parsing.
Complex API interactions involving request cancellations and timeouts.
Server-side rendering (SSR) and Node.js environments where browser-native fetch is not available.

Practical Examples in TypeScript

1. Fetch API Implementation

async function getDataWithFetch(url: string): Promise<void> {
    try {
        const response = await fetch(url);

        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const data = await response.json();
        console.log("Fetched Data:", data);
    } catch (error) {
        console.error("Fetch Error:", error);
    }
}

// API Call
getDataWithFetch("https://jsonplaceholder.typicode.com/posts/1");

Explanation:

The fetch function is used to make an HTTP request.
The .json() method is required to parse the response into JSON format.
HTTP status codes are manually checked to determine if an error has occurred.

2. Axios API Implementation

import axios from 'axios';

async function getDataWithAxios(url: string): Promise<void> {
    try {
        const response = await axios.get(url);
        console.log("Axios Data:", response.data);
    } catch (error) {
        console.error("Axios Error:", error);
    }
}

// API Call
getDataWithAxios("https://jsonplaceholder.typicode.com/posts/1");

Explanation:

axios automatically handles JSON parsing, eliminating the need for .json().
It provides built-in error handling for HTTP status codes.
The code is more concise and easier to maintain.

In summary, fetch is a lightweight and browser-native option suitable for simple API requests, whereas axios provides a more feature-rich solution with automatic error handling, response parsing, and request cancellation capabilities. Selecting between them depends on the complexity of the application and the developer's specific requirements.

Both tools have their advantages, and understanding their differences ensures the most efficient choice for web development projects. 🚀

TanStack Query: আধুনিক ওয়েব অ্যাপে ডাটা ফেচিংয়ের নতুন দিগন্ত

Md Nazmus Sakib — Wed, 02 Apr 2025 13:21:18 +0000

TanStack Query (আগে React Query নামে পরিচিত) হল একটি শক্তিশালী লাইব্রেরি, যা মূলত React, Vue এবং SolidJS-এর জন্য ডাটা ফেচিং, ক্যাশিং, সিঙ্ক্রোনাইজেশন এবং আপডেট ম্যানেজ করতে ব্যবহৃত হয়। এটি আধুনিক ওয়েব অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে এবং ডেভেলপারদের জন্য ডাটা-ম্যানেজমেন্ট সহজ করে তোলে।

TanStack Query কেন গুরুত্বপূর্ণ?

ওয়েব অ্যাপে API কল করা একটি সাধারণ কাজ হলেও, সঠিকভাবে হ্যান্ডেল না করলে পারফরম্যান্স সমস্যা, অতিরিক্ত রি-রেন্ডারিং, অপ্রয়োজনীয় API কল ইত্যাদির কারণে অ্যাপ ধীরগতির হয়ে যেতে পারে। TanStack Query এই সমস্যাগুলো সমাধান করতে পারে নিচের সুবিধাগুলোর মাধ্যমে:

অটোমেটেড ক্যাশিং: একবার ফেচ করা ডাটা ক্যাশে রেখে বারবার একই অনুরোধ পাঠানো থেকে বিরত রাখে।
ক্লেভার রিফেচিং: যখনই প্রয়োজন, ডাটা অটোমেটিক্যালি রিফ্রেশ হয়।
ব্যাকগ্রাউন্ড সিঙ্ক: ডাটা ব্যাকগ্রাউন্ডে আপডেট হতে পারে, ব্যবহারকারীর ইন্টারঅ্যাকশন ব্যাহত না করেই।
সার্ভার স্টেট ম্যানেজমেন্ট: Redux বা Context API ছাড়াই সহজেই সার্ভার স্টেট ম্যানেজ করা যায়।
অপ্টিমিস্টিক আপডেট: ইউজার ইন্টারফেসে তাৎক্ষণিক পরিবর্তন দেখিয়ে পরবর্তীতে API রেসপন্স অনুযায়ী তা এডজাস্ট করা হয়।

বাস্তব জীবনের উদাহরণ

১. ই-কমার্স ওয়েবসাইট:

ধরো, একটি ই-কমার্স ওয়েবসাইটে পণ্য তালিকা দেখানোর জন্য একটি API কল করতে হবে। যদি ব্যবহারকারী বারবার একই পেজে যায়, তাহলে প্রতিবার নতুন করে API রিকোয়েস্ট পাঠানোর দরকার নেই। TanStack Query ক্যাশিং ব্যবহার করে দ্রুত একই ডাটা রেন্ডার করতে পারে, ফলে লোডিং টাইম কমে যায় এবং ইউজার এক্সপেরিয়েন্স ভালো হয়।

২. সোশ্যাল মিডিয়া নিউজফিড:

সোশ্যাল মিডিয়া প্ল্যাটফর্মে, TanStack Query ব্যাকগ্রাউন্ড ফেচিং ব্যবহার করে নতুন পোস্ট স্বয়ংক্রিয়ভাবে ফেচ করতে পারে, যাতে ইউজার রিফ্রেশ বাটন ক্লিক না করেও নতুন কনটেন্ট পেতে পারে।

৩. লাইভ স্টক মার্কেট অ্যাপ:

স্টক মার্কেটের রিয়েল-টাইম আপডেট দেখাতে হলে প্রতিটি টিকারের ডাটা দ্রুত আপডেট করতে হবে। TanStack Query নির্দিষ্ট সময় পর পর ডাটা রিফেচ করে নতুন তথ্য দেখাতে পারে, ফলে ব্যবহারকারী সর্বশেষ আপডেট পেতে পারে।

TanStack Query কিভাবে কাজ করে?

TanStack Query ব্যবহার করতে গেলে সাধারণত তিনটি মূল হুক ব্যবহৃত হয়:

useQuery – ডাটা ফেচ করা এবং ক্যাশ ম্যানেজ করার জন্য।
useMutation – নতুন ডাটা যুক্ত করা বা আপডেট করার জন্য।
QueryClientProvider – পুরো অ্যাপে TanStack Query ব্যবহারের জন্য একটি কনটেক্সট প্রদান করে।

একটি সহজ উদাহরণ দেখা যাক, যেখানে API থেকে ডাটা ফেচ করা হচ্ছে:

import { useQuery } from '@tanstack/react-query'

const fetchPosts = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  return res.json()
}

const Posts = () => {
  const { data, isLoading, error } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  })

  if (isLoading) return <p>Loading...</p>
  if (error) return <p>Error fetching posts</p>

  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

এখানে useQuery হুকটি API থেকে ডাটা ফেচ করছে, ক্যাশিং করছে এবং লোডিং ও এরর স্টেট ম্যানেজ করছে।

TanStack Query ডাটা ফেচিং ও স্টেট ম্যানেজমেন্টকে সহজ করে তুলেছে, যা আধুনিক ওয়েব অ্যাপগুলোর পারফরম্যান্স উন্নত করতে গুরুত্বপূর্ণ ভূমিকা রাখে। যদি তুমি React, Vue বা SolidJS-এ কাজ করো এবং ডাটা ফেচিং-সংক্রান্ত সমস্যায় পড়ো, তাহলে TanStack Query একটি দারুণ সমাধান হতে পারে।

এই প্রযুক্তির সঠিক ব্যবহার করলে ডাটা-ম্যানেজমেন্ট সহজ হবে, অ্যাপের স্পিড বাড়বে এবং ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত হবে।

Mastering TypeScript Data Types: A Complete Guide

Md Nazmus Sakib — Sat, 22 Mar 2025 14:47:00 +0000

TypeScript Data Types

TypeScript introduces a powerful type system on top of JavaScript, allowing developers to write safer and more predictable code. Understanding data types is crucial for leveraging TypeScript's full potential.

1. Primitive Types

String (`string`)

Used for textual data.

let username: string = "John Doe";
let greeting: string = `Hello, ${username}`;

Number (`number`)

Represents all numbers, including integers and floating-point values.

let age: number = 25;
let price: number = 99.99;

Boolean (`boolean`)

Represents true/false values.

let isLoggedIn: boolean = true;

Null (`null`) & Undefined (`undefined`)

Both represent the absence of a value.

let emptyValue: null = null;
let notAssigned: undefined = undefined;

2. Complex Data Types

Array (`array`)

Used to store multiple values of a specific type.

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["Apple", "Banana", "Mango"];

Tuple (`tuple`)

An array with a fixed number of elements with different types.

let person: [string, number] = ["Alice", 30];

Enum (`enum`)

Defines a set of named constants.

enum Color {
  Red,
  Green,
  Blue,
}
let favoriteColor: Color = Color.Green;

Object (`object`)

Defines structured data with properties.

let user: { name: string; age: number } = { name: "John", age: 25 };

3. Special Types

Any (`any`)

Allows assigning any type but removes type safety.

let randomValue: any = "Hello";
randomValue = 42;

Unknown (`unknown`)

Similar to any, but requires type checking before use.

let data: unknown = "Some data";
if (typeof data === "string") {
  console.log(data.toUpperCase());
}

Void (`void`)

Used for functions that do not return a value.

function logMessage(message: string): void {
  console.log(message);
}

Never (`never`)

Used for functions that never return (e.g., errors or infinite loops).

function throwError(message: string): never {
  throw new Error(message);
}

Mastering React Debugging: 15 Essential Steps Every Developer Should Know

Md Nazmus Sakib — Tue, 18 Mar 2025 19:48:18 +0000

Bug Finding for React Developer

Overview

Bug finding in React development is an essential skill for creating robust and efficient applications. This guide outlines a systematic, step-by-step approach to identifying, isolating, and resolving issues within React applications. Following these steps, developers will enhance their debugging skills and ensure their applications are error-free and perform optimally.

Step 1: Check the Console for Errors

Before diving into the code, always begin with inspecting the browser’s console for any error messages. React will typically display informative messages in the console that can direct you to the issue. It could be an issue related to:

Incorrectly used props or states
Uncaught JavaScript errors
Warnings related to missing or invalid keys in lists

By reading these messages, you can narrow down where the problem might lie, whether it's with component rendering, data fetching, or user interactions.

Step 2: Replicate the Issue Consistently

Once an error message is spotted, make sure you can consistently replicate the issue. Try to identify specific actions or conditions under which the bug appears:

Does the bug appear on a specific route or component?
Is it triggered by a user interaction, such as a button click or form submission?
Does it happen after a certain timeout or API response?

By understanding exactly how to replicate the issue, you are better equipped to trace the cause.

Step 3: Examine the Component Tree with React DevTools

React DevTools is a powerful debugging tool that provides an in-depth view of your component hierarchy. It allows you to:

Inspect the props and state of individual components
Track component re-renders and performance
Check for unnecessary re-renders that might be causing performance issues

By inspecting the component tree, you can pinpoint which components are not receiving the correct props or state and whether they are re-rendering unnecessarily.

Step 4: Check for Missing or Incorrect Props

Props are a core feature in React for passing data to components. When bugs appear related to the UI not rendering as expected, check if:

The parent component is passing the correct props to the child component.
The child component is correctly receiving and using the props.
There are missing props that should be provided.

Ensure the types and values of props are consistent and match the expected structure.

Step 5: Verify the State and State Updates

State management issues are common culprits for bugs. In React, improper state initialization or incorrect state updates often lead to:

UI not reflecting the latest data
Performance issues due to unnecessary re-renders

Verify that state is being initialized correctly, updated in response to user actions, and is in sync with the component's UI. Make sure state updates use setState (for class components) or the state setter function (useState) in functional components.

Step 6: Ensure Proper Usage of Hooks

For functional components, React hooks like useState, useEffect, and useContext are pivotal in managing state and side effects. Ensure:

useState is being used properly for state updates.
useEffect is being correctly used for side effects (e.g., data fetching, subscriptions).
Hooks follow the rules of hooks, such as being called at the top level of the component and not inside loops or conditions.

Incorrect hook usage can lead to issues like infinite loops, unexpected behavior, or improper re-renders.

Step 7: Investigate Asynchronous Operations

Many React applications rely on asynchronous operations such as fetching data from APIs. Issues can arise when asynchronous calls are:

Not handled properly with async/await or promises.
Missing error handling or fallback states (e.g., loading indicators or error messages).
Triggered in an incorrect lifecycle method, resulting in race conditions.

Ensure that your asynchronous code is executed correctly, and that UI states are updated accordingly when data is fetched or errors occur.

Step 8: Check Component Lifecycle Methods

In class components, lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount play a crucial role in managing the component’s behavior. When debugging:

Ensure that state updates or side effects are correctly triggered within lifecycle methods.
Double-check for memory leaks caused by improper cleanup in componentWillUnmount.

In functional components, use the useEffect hook to manage side effects, ensuring that effects are properly cleaned up when the component unmounts.

Step 9: Look for Unnecessary Re-Renders

Unnecessary re-renders can drastically affect performance. React re-renders components whenever state or props change, but this can sometimes happen too frequently:

Use React.memo or PureComponent to prevent unnecessary re-renders for stateless components.
Ensure that you are not causing re-renders in an inefficient way, such as passing inline functions as props, which causes a new function instance on every render.

Track and optimize components that are re-rendering unnecessarily, which can improve performance.

Step 10: Investigate Conditional Rendering

React’s conditional rendering can cause issues if not managed correctly. Common mistakes include:

Conditional rendering without fallback content or loading states.
Rendering components in loops or conditions that may result in incorrect UI or layout shifts.

Ensure that all conditionally rendered elements or components are handled in a structured way to avoid rendering bugs.

Step 11: Ensure Proper Key Usage in Lists

When rendering lists in React, it is essential to provide a unique key prop for each list item. React uses the key to identify which items have changed, been added, or removed:

Ensure that the key is a unique, stable identifier (such as a unique id from your data).
Avoid using indices as keys, as it can lead to issues with reordering or dynamically changing data.

Incorrect or missing keys can cause rendering issues and make React inefficient at managing the DOM.

Step 12: Check for Global State Conflicts

If you're using global state management solutions like Redux or React Context, ensure that:

The global state is properly initialized.
State updates are correctly propagated across components.
Components are subscribing to the global state and using it as expected.

Incorrect management of global state can lead to inconsistent or stale data being rendered in components.

Step 13: Examine Styles and Layout Issues

Sometimes, bugs may arise not from logic but from incorrect CSS or layout issues:

Ensure that CSS classes are applied correctly.
Check for layout shifts or elements being misplaced due to missing or conflicting styles.
Use browser developer tools to inspect the elements and their computed styles.

Ensure your layout behaves responsively across different screen sizes and that styles don’t conflict with JavaScript-rendered elements.

Step 14: Verify Test Coverage

Unit and integration tests are crucial in identifying bugs early. If tests are not already written, add tests to cover components and features that are causing bugs:

Write tests to verify the expected behavior of state and props updates.
Use testing libraries like Jest and React Testing Library to simulate user interactions and component rendering.

Test coverage helps prevent regression and ensures that new changes don't break existing functionality.

Step 15: Perform Regression Testing

Finally, after fixing a bug, always perform regression testing to ensure that other parts of the application are not affected. This includes:

Running the full test suite to verify that previously fixed bugs remain resolved.
Manually testing critical workflows to ensure no new issues have been introduced.

Regression testing ensures that the application remains stable and that previously identified bugs are no longer present.

JavaScript Interview Questions and Answers for the Job Market in Bangladesh

Md Nazmus Sakib — Sat, 08 Feb 2025 16:44:12 +0000

This repository contains 85 JavaScript interview questions and answers tailored for the job market in Bangladesh. These questions are designed to help you prepare for technical interviews and improve your understanding of JavaScript concepts. The questions range from basic to advanced topics, ensuring comprehensive preparation.

Basic JavaScript Questions
Intermediate JavaScript Questions
Advanced JavaScript Questions
DOM Manipulation Questions
Asynchronous JavaScript Questions
ES6+ Features Questions
JavaScript Coding Challenges

Basic JavaScript Questions

What is JavaScript?
- JavaScript is a high-level, interpreted programming language used to make web pages interactive. It is a core technology of the web alongside HTML and CSS.
What are the data types in JavaScript?
- JavaScript has 7 primitive data types: string, number, boolean, null, undefined, symbol, and bigint. It also has one non-primitive data type: object.
What is the difference between let, const, and var?
- var is function-scoped and can be redeclared and updated.
- let is block-scoped and can be updated but not redeclared.
- const is block-scoped and cannot be updated or redeclared.
What is the difference between == and ===?
- == checks for equality after type coercion.
- === checks for strict equality without type coercion.
What is NaN in JavaScript?
- NaN stands for "Not-a-Number" and is a value that represents an invalid number.
What is the use of typeof operator?
- The typeof operator is used to determine the type of a variable or expression.
What is the difference between null and undefined?
- null is an intentional absence of any value, while undefined means a variable has been declared but not assigned a value.
What is hoisting in JavaScript?
- Hoisting is a mechanism where variable and function declarations are moved to the top of their scope during the compilation phase.
What is the scope in JavaScript?
- Scope refers to the accessibility or visibility of variables, functions, and objects in some particular part of your code during runtime.
What is the difference between function declaration and function expression?
- A function declaration is hoisted, while a function expression is not.

Intermediate JavaScript Questions

What is a closure in JavaScript?
- A closure is a function that has access to its outer function's scope, even after the outer function has returned.
What is the this keyword in JavaScript?
- The this keyword refers to the object that the function is a property of. Its value depends on how the function is called.
What is event delegation?
- Event delegation is a technique where you add a single event listener to a parent element to handle events for all its child elements.
What is the difference between null and undefined?
- null is an intentional absence of any value, while undefined means a variable has been declared but not assigned a value.
What is hoisting in JavaScript?
- Hoisting is a mechanism where variable and function declarations are moved to the top of their scope during the compilation phase.
What is the difference between call, apply, and bind?
- call and apply are used to invoke a function with a specific this value and arguments.
- bind creates a new function with a specific this value but does not invoke it immediately.
What are promises in JavaScript?
- Promises are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value.
What is async/await in JavaScript?
- async/await is syntactic sugar for working with promises, making asynchronous code look and behave like synchronous code.
What is the event loop in JavaScript?
- The event loop is a mechanism that allows JavaScript to perform non-blocking I/O operations by offloading operations to the system kernel.
What is the difference between setTimeout and setInterval?
- setTimeout executes a function once after a specified delay, while setInterval executes a function repeatedly at specified intervals.

Advanced JavaScript Questions

What is the prototype chain in JavaScript?
- Every object in JavaScript has a prototype, and the prototype chain allows objects to inherit properties and methods from their prototypes.
What is the difference between call, apply, and bind?
- call and apply are used to invoke a function with a specific this value and arguments.
- bind creates a new function with a specific this value but does not invoke it immediately.
What are promises in JavaScript?
- Promises are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value.
What is async/await in JavaScript?
- async/await is syntactic sugar for working with promises, making asynchronous code look and behave like synchronous code.
What is the event loop in JavaScript?
- The event loop is a mechanism that allows JavaScript to perform non-blocking I/O operations by offloading operations to the system kernel.
What is a generator function in JavaScript?
- A generator function is a special type of function that can be paused and resumed, allowing you to produce a sequence of values over time.
What is the difference between Map and Object in JavaScript?
- Map allows keys of any type, maintains insertion order, and has a size property, while Object only allows string or symbol keys and does not guarantee order.
What is the difference between WeakMap and Map?
- WeakMap allows garbage collection of its keys if there are no other references to them, while Map does not.
What is the difference between WeakSet and Set?
- WeakSet allows garbage collection of its values if there are no other references to them, while Set does not.
What is the purpose of Symbol in JavaScript?
- Symbol is a primitive data type used to create unique identifiers for object properties.

DOM Manipulation Questions

What is the DOM?
- The DOM (Document Object Model) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree of objects.
How do you select an element by its ID?
- Use document.getElementById('elementId').
How do you add a class to an element?
- Use element.classList.add('className').
What is the difference between innerHTML and textContent?
- innerHTML returns the HTML content of an element, while textContent returns only the text content.
How do you create a new element and append it to the DOM?
- Use document.createElement('tagName') and parentElement.appendChild(newElement).
What is the difference between appendChild and insertBefore?
- appendChild adds a node as the last child of a parent element, while insertBefore adds a node before a specified reference node.
How do you remove an element from the DOM?
- Use parentElement.removeChild(childElement).
What is the difference between querySelector and getElementById?
- querySelector can select any element using a CSS selector, while getElementById only selects elements by their ID.
How do you handle events in JavaScript?
- Use addEventListener to attach an event handler to an element.
What is event bubbling and event capturing?
- Event bubbling is the propagation of an event from the target element up to the root, while event capturing is the propagation from the root down to the target element.

Asynchronous JavaScript Questions

What is a callback function?
- A callback function is a function passed as an argument to another function and is executed after some operation is completed.
What is the difference between synchronous and asynchronous code?
- Synchronous code executes line by line, blocking further execution until the current operation is complete. Asynchronous code allows other operations to run while waiting for the current operation to complete.
What is the purpose of setTimeout?
- setTimeout is used to execute a function after a specified delay (in milliseconds).
What is a race condition in JavaScript?
- A race condition occurs when the output of a program depends on the timing of uncontrollable events, such as the order of asynchronous operations.
What is the difference between Promise.all and Promise.race?
- Promise.all waits for all promises to resolve, while Promise.race resolves or rejects as soon as one of the promises resolves or rejects.
What is the purpose of async/await?
- async/await simplifies working with promises by allowing you to write asynchronous code in a synchronous style.
What is a microtask in JavaScript?
- A microtask is a task that is executed after the current task and before the next task in the event loop. Examples include Promise callbacks.
What is the difference between setImmediate and setTimeout?
- setImmediate executes a function immediately after the current event loop cycle, while setTimeout executes a function after a specified delay.
What is the purpose of process.nextTick in Node.js?
- process.nextTick schedules a callback to be executed immediately after the current operation completes, before any I/O events.
What is the difference between Promise.resolve and Promise.reject?
- Promise.resolve creates a resolved promise, while Promise.reject creates a rejected promise.

ES6+ Features Questions

What are arrow functions?
- Arrow functions are a shorter syntax for writing functions in JavaScript. They do not have their own this and are always anonymous.
What are template literals?
- Template literals are string literals that allow embedded expressions, using backticks (`) and ${} syntax.
What is destructuring in JavaScript?
- Destructuring is a syntax that allows you to unpack values from arrays or properties from objects into distinct variables.
What are default parameters?
- Default parameters allow you to set default values for function parameters if no value or undefined is passed.
What are JavaScript modules?
- JavaScript modules are reusable pieces of code that can be exported from one program and imported into another.
What is the difference between let and const?
- let allows reassignment, while const does not.
What is the spread operator in JavaScript?
- The spread operator (...) allows an iterable to be expanded in places where multiple arguments or elements are expected.
What is the rest parameter in JavaScript?
- The rest parameter (...) allows you to represent an indefinite number of arguments as an array.
What is the purpose of Symbol in JavaScript?
- Symbol is a primitive data type used to create unique identifiers for object properties.
What is the difference between Map and Object in JavaScript?
- Map allows keys of any type, maintains insertion order, and has a size property, while Object only allows string or symbol keys and does not guarantee order.

JavaScript Coding Challenges

Write a function to reverse a string.

function reverseString(str) {
    return str.split('').reverse().join('');
}

Write a function to check if a string is a palindrome.

function isPalindrome(str) {
    return str === str.split('').reverse().join('');
}

Write a function to find the largest number in an array.

function findLargestNumber(arr) {
    return Math.max(...arr);
}

Write a function to remove duplicates from an array.

function removeDuplicates(arr) {
    return [...new Set(arr)];
}

Write a function to flatten a nested array.

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

Write a function to find the factorial of a number.

function factorial(n) {
    if (n === 0 || n === 1) return 1;
    return n * factorial(n - 1);
}

Write a function to check if a number is prime.

function isPrime(n) {
    if (n <= 1) return false;
    for (let i = 2; i <= Math.sqrt(n); i++) {
        if (n % i === 0) return false;
    }
    return true;
}

Write a function to find the Fibonacci sequence up to a given number.

function fibonacci(n) {
    const sequence = [0, 1];
    for (let i = 2; i <= n; i++) {
        sequence.push(sequence[i - 1] + sequence[i - 2]);
    }
    return sequence;
}

Write a function to sort an array of numbers in ascending order.

function sortArray(arr) {
    return arr.sort((a, b) => a - b);
}

Write a function to find the sum of all elements in an array.

function sumArray(arr) {
    return arr.reduce((sum, num) => sum + num, 0);
}

Write a function to find the average of all elements in an array.

function averageArray(arr) {
    return arr.reduce((sum, num) => sum + num, 0) / arr.length;
}

Write a function to find the second largest number in an array.

function secondLargest(arr) {
    const sortedArr = arr.sort((a, b) => b - a);
    return sortedArr[1];
}

Write a function to count the number of vowels in a string.

function countVowels(str) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    return str.split('').filter(char => vowels.includes(char)).length;
}

Write a function to capitalize the first letter of each word in a string.

function capitalizeWords(str) {
    return str.split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');
}

Write a function to find the longest word in a string.

function longestWord(str) {
    return str.split(' ').reduce((longest, word) => word.length > longest.length ? word : longest, '');
}

Write a function to check if two strings are anagrams.

function areAnagrams(str1, str2) {
    return str1.split('').sort().join('') === str2.split('').sort().join('');
}

Write a function to find the intersection of two arrays.

function intersection(arr1, arr2) {
    return arr1.filter(value => arr2.includes(value));
}

Write a function to find the union of two arrays.

function union(arr1, arr2) {
    return [...new Set([...arr1, ...arr2])];
}

Write a function to find the difference between two arrays.

function difference(arr1, arr2) {
    return arr1.filter(value => !arr2.includes(value));
}

Write a function to find the index of a specific element in an array.

function findIndex(arr, element) {
    return arr.indexOf(element);
}

Write a function to remove falsy values from an array.

function removeFalsy(arr) {
    return arr.filter(Boolean);
}

Write a function to check if an array is sorted.

function isSorted(arr) {
    return arr.every((value, index, array) => index === 0 || value >= array[index - 1]);
}

Write a function to rotate an array to the right by a given number of steps.

function rotateArray(arr, steps) {
    for (let i = 0; i < steps; i++) {
        arr.unshift(arr.pop());
    }
    return arr;
}

Write a function to find the first non-repeating character in a string.

function firstNonRepeatingChar(str) {
    const charCount = {};
    for (const char of str) {
        charCount[char] = (charCount[char] || 0) + 1;
    }
    for (const char of str) {
        if (charCount[char] === 1) return char;
    }
    return null;
}

Write a function to find the most frequent element in an array.


javascript
    function mostFrequent(arr) {
        const frequencyMap = {};
        let maxCount = 0;
        let mostFrequentElement = null;
        for (const num of arr) {
            frequencyMap[num] = (frequencyMap[num] || 0) + 1;
            if (frequencyMap[num] > maxCount) {
                maxCount = frequencyMap[num];
                most

Comprehensive Guide to HTTP Status Codes: Handling Data Fetching and Processing Errors

Md Nazmus Sakib — Sat, 25 Jan 2025 06:13:29 +0000

HTTP status codes are grouped into various categories, such as Informational (1xx), Successful (2xx), Redirection (3xx), Client Errors (4xx), and Server Errors (5xx). Below is a breakdown of status codes that are commonly encountered during data fetching or processing errors.

1xx: Informational

1xx status codes indicate that a request has been received and the process is continuing. However, these are rarely associated with errors.

Code	Message	Description
100	Continue	The server has received the request headers, and the client can proceed to send the body.
101	Switching Protocols	The server is switching protocols as requested by the client, e.g., to WebSockets.

2xx: Successful

2xx codes signify that the request was successfully received, understood, and accepted.

Code	Message	Description
200	OK	The request was successful, and the server returned the requested data.
201	Created	A new resource was successfully created as a result of the request.
204	No Content	The request was successfully processed, but no content is returned.

3xx: Redirection

3xx codes indicate that the client must take additional action to complete the request, such as following a redirection.

Code	Message	Description
301	Moved Permanently	The requested resource has been permanently moved to a new URI.
302	Found	The resource is temporarily located at a different URI.
303	See Other	The client should retrieve the resource using a different URI.
304	Not Modified	The resource has not been modified; use the cached version.

4xx: Client Errors

4xx codes indicate that there was an error with the client's request.

Code	Message	Description
400	Bad Request	The server could not understand the request due to malformed syntax.
401	Unauthorized	The client must authenticate to access the resource.
403	Forbidden	The server is refusing to process the request, even with valid credentials.
404	Not Found	The requested resource could not be found on the server.
405	Method Not Allowed	The request method is not supported for the requested resource.
408	Request Timeout	The server timed out waiting for the client's request.
409	Conflict	The request could not be processed due to a conflict in the request.
413	Payload Too Large	The request payload is larger than the server is willing to process.
414	URI Too Long	The request URI is too long for the server to handle.
429	Too Many Requests	The client has sent too many requests in a given period.

5xx: Server Errors

5xx codes indicate that the server encountered an error while processing the request.

Code	Message	Description
500	Internal Server Error	A generic error occurred on the server.
501	Not Implemented	The server does not support the functionality required to fulfill the request.
502	Bad Gateway	The server received an invalid response from an upstream server.
503	Service Unavailable	The server is currently unable to handle the request due to overload or maintenance.
504	Gateway Timeout	The server acting as a gateway timed out while waiting for a response.
507	Insufficient Storage	The server is unable to store the representation needed to complete the request.
511	Network Authentication Required	The client must authenticate to gain network access.

Summary of Relevant Codes

Here is a quick summary of key codes relevant to data fetching and processing:

Code	Meaning	Possible Cause
400	Bad Request	Malformed request or invalid input.
401	Unauthorized	Missing or invalid authentication.
403	Forbidden	Access denied despite valid authentication.
404	Not Found	The requested resource does not exist.
408	Request Timeout	The client took too long to send a request.
500	Internal Server Error	An unexpected error occurred on the server.
502	Bad Gateway	Invalid response from an upstream server.
503	Service Unavailable	The server is overloaded or down for maintenance.
504	Gateway Timeout	Backend service timed out.
507	Insufficient Storage	Not enough storage on the server.
511	Network Authentication Required	Client must authenticate for network access.

Master Number Conversions with Ease: From Binary to Hexadecimal & More!

Md Nazmus Sakib — Thu, 19 Dec 2024 13:34:19 +0000

Number systems are an essential part of computer science and mathematics. Understanding how to convert between these systems is crucial for solving problems in digital systems, programming, and networking.

This guide will walk you through the rules, methods, and examples for number conversions, including:

Binary to Decimal
Decimal to Binary
Binary to Octal
Octal to Binary
Binary to Hexadecimal
Hexadecimal to Binary
Decimal to Octal
Octal to Decimal
Decimal to Hexadecimal
Hexadecimal to Decimal
Octal to Hexadecimal
Hexadecimal to Octal

We'll include images to help visualize the processes.

1. Binary to Decimal

Conversion Rule:

Write down the binary number.
Multiply each binary digit by 2 raised to the power of its position, starting from 0 on the right.
Sum all the results to get the decimal value.

Example:

Binary: 1011

Calculation:
[
(1 \times 2^3) + (0 \times 2^2) + (1 \times 2^1) + (1 \times 2^0) = 8 + 0 + 2 + 1 = 11
]
Decimal: 11

2. Decimal to Binary

Conversion Rule:

Divide the decimal number by 2.
Record the remainder.
Continue dividing the quotient by 2 until the quotient is 0.
Write the remainders in reverse order.

Example:

Decimal: 13

Calculation:

13 \div 2 = 6 remainder 1
6 \div 2 = 3 remainder 0
3 \div 2 = 1 remainder 1
1 \div 2 = 0 remainder 1

Binary: 1101

3. Binary to Octal

Conversion Rule:

Group binary digits into sets of three, starting from the right. Add leading zeros if necessary.
Convert each group into its octal equivalent.

Example:

Binary: 101101

Group: 000 101 101
Octal: 5 5

Result: 55

4. Octal to Binary

Conversion Rule:

Convert each octal digit into its 3-bit binary equivalent.

Example:

Octal: 25

Conversion:

2 = 010
5 = 101

Binary: 010101

5. Binary to Hexadecimal

Conversion Rule:

Group binary digits into sets of four, starting from the right. Add leading zeros if necessary.
Convert each group into its hexadecimal equivalent.

Example:

Binary: 11010111

Group: 1101 0111
Hexadecimal:

1101 = D
0111 = 7

Result: D7

6. Hexadecimal to Binary

Conversion Rule:

Convert each hexadecimal digit into its 4-bit binary equivalent.

Example:

Hexadecimal: A3

Conversion:

A = 1010
3 = 0011

Binary: 10100011

7. Decimal to Octal

Conversion Rule:

Divide the decimal number by 8.
Record the remainder.
Continue dividing the quotient by 8 until the quotient is 0.
Write the remainders in reverse order.

Example:

Decimal: 65

Calculation:

65 \div 8 = 8 remainder 1
8 \div 8 = 1 remainder 0
1 \div 8 = 0 remainder 1

Octal: 101

8. Octal to Decimal

Conversion Rule:

Multiply each digit by 8 raised to the power of its position, starting from 0 on the right.
Sum all the results.

Example:

Octal: 45

Calculation:
[
(4 \times 8^1) + (5 \times 8^0) = 32 + 5 = 37
]
Decimal: 37

9. Decimal to Hexadecimal

Conversion Rule:

Divide the decimal number by 16.
Record the remainder.
Continue dividing the quotient by 16 until the quotient is 0.
Write the remainders in reverse order.

Example:

Decimal: 255

Calculation:

255 \div 16 = 15 remainder 15 (F)
15 \div 16 = 0 remainder 15 (F)

Hexadecimal: FF

10. Hexadecimal to Decimal

Conversion Rule:

Multiply each digit by 16 raised to the power of its position, starting from 0 on the right.
Sum all the results.

Example:

Hexadecimal: 1A

Calculation:
[
(1 \times 16^1) + (A \times 16^0) = 16 + 10 = 26
]
Decimal: 26

11. Octal to Hexadecimal

Conversion Rule:

Convert the octal number to binary.
Group binary digits into sets of four.
Convert each group into its hexadecimal equivalent.

Example:

Octal: 17

Binary: 001 111
Hexadecimal: F

12. Hexadecimal to Octal

Conversion Rule:

Convert the hexadecimal number to binary.
Group binary digits into sets of three.
Convert each group into its octal equivalent.

Example:

Hexadecimal: 2F

Binary: 0010 1111
Group: 010 111
Octal: 27

At last

Number conversions are vital for various applications in computing and digital systems. Understanding these methods ensures that you can navigate between binary, decimal, octal, and hexadecimal systems with ease.

For further visualization, reference images and charts will be useful for practice. Consistently practicing these conversions will solidify your skills.

From Frontend to Backend: Build Scalable Pagination for Web Applications

Md Nazmus Sakib — Tue, 17 Dec 2024 20:05:12 +0000

Pagination is an essential feature in any application that handles large datasets. It improves performance, enhances user experience, and ensures smooth navigation across pages. This guide provides a step-by-step implementation of pagination for a React frontend (with Tailwind CSS and Vite) and a Node.js/Express.js backend with Next.js API routes and MongoDB.

Why Pagination is Important?

Performance Optimization: Reduces data load on both the client and server.
Improved User Experience: Allows users to view data in manageable chunks.
Scalability: Makes the app efficient even when datasets grow over time.
Better Resource Management: Reduces memory usage on the frontend and backend.

Tech Stack Overview

Frontend: React.js, Tailwind CSS, Vite (for a fast development experience).
Backend: Node.js, Express.js, Next.js API routes.
Database: MongoDB (NoSQL database).
Tools: Axios for HTTP requests.

Step-by-Step Implementation

Backend: Building Pagination API with Node.js and MongoDB

1. Set Up Express.js Server

Ensure you have Node.js installed, then set up a new Express.js server.

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

2. Create Server and MongoDB Connection

Set up a simple server with MongoDB.

server.js

const express = require('express');
const mongoose = require('mongoose');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

// MongoDB Connection
mongoose.connect(process.env.MONGO_URI)
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.error(err));

app.use(express.json());

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Add your MongoDB URI in a .env file:

MONGO_URI=mongodb://localhost:27017/pagination_demo

3. Create a Sample Model

Define a sample data schema for storing records.

models/User.js

const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
  name: String,
  email: String,
  createdAt: { type: Date, default: Date.now }
});

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

4. Create Pagination Route

Add a route to return paginated results.

routes/users.js

const express = require('express');
const router = express.Router();
const User = require('../models/User');

// GET Paginated Data
router.get('/users', async (req, res) => {
  const page = parseInt(req.query.page) || 1; // Default to page 1
  const limit = parseInt(req.query.limit) || 10; // Default 10 items per page

  try {
    const startIndex = (page - 1) * limit;
    const total = await User.countDocuments();

    const users = await User.find().skip(startIndex).limit(limit);

    res.status(200).json({
      totalPages: Math.ceil(total / limit),
      currentPage: page,
      data: users,
    });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

module.exports = router;

5. Add the Route to Server

In server.js, include the route:

const usersRoute = require('./routes/users');
app.use('/api', usersRoute);

6. Test the API

Run the server:

node server.js

Test with tools like Postman or the browser:

GET http://localhost:5000/api/users?page=1&limit=10

⚛️ Frontend: Implement Pagination with React, Tailwind CSS, and Vite

1. Set Up React with Vite

npm create vite@latest frontend
cd frontend
npm install
npm install axios react-router-dom

2. Fetch Paginated Data

Create a React component to fetch paginated data from the backend API.

components/UserList.jsx

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  const fetchUsers = async (page) => {
    const { data } = await axios.get(
      `http://localhost:5000/api/users?page=${page}&limit=10`
    );
    setUsers(data.data);
    setTotalPages(data.totalPages);
    setCurrentPage(page);
  };

  useEffect(() => {
    fetchUsers(1);
  }, []);

  const handlePageChange = (page) => fetchUsers(page);

  return (
    <div className="p-5">
      <h1 className="text-2xl font-bold mb-4">Paginated User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user._id} className="border p-2 mb-2">
            {user.name} - {user.email}
          </li>
        ))}
      </ul>

      {/* Pagination Buttons */}
      <div className="flex gap-2 mt-4">
        {[...Array(totalPages).keys()].map((_, index) => (
          <button
            key={index}
            onClick={() => handlePageChange(index + 1)}
            className={`px-4 py-2 border rounded ${
              currentPage === index + 1 ? 'bg-blue-500 text-white' : ''
            }`}
          >
            {index + 1}
          </button>
        ))}
      </div>
    </div>
  );
};

export default UserList;

3. Add Tailwind CSS

Install Tailwind CSS:

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

Configure tailwind.config.js:

module.exports = {
  content: ["./index.html", "./src/**/*.{js,jsx}",],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind directives to index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Use the UserList Component

Integrate the component in App.jsx:

import React from 'react';
import UserList from './components/UserList';

function App() {
  return (
    <div>
      <UserList />
    </div>
  );
}

export default App;

Example Output

The app fetches paginated data from the server and displays it with buttons to navigate pages.

Key Takeaways

The backend calculates skip and limit to fetch specific records.
The frontend uses state to manage pagination UI and fetches new data when pages change.
Tailwind CSS makes styling pagination buttons fast and clean.

Final Notes

This implementation gives you a clean and scalable way to handle pagination for large datasets in a MERN stack application.

Happy coding!

DEV Community: Md Nazmus Sakib

গিটহাব লাইসেন্স: কোনটি কবে ব্যবহারযোগ্য?

ক্যারিয়ার ভাবনা || সিরিজ: ০১ || পর্ব: ০৩

MIT লাইসেন্স

Apache 2.0 লাইসেন্স

GPL (General Public License)

Creative Commons (CC) লাইসেন্স

🔍 কোন লাইসেন্স কবে ব্যবহার করবেন?

PostgreSQL Tutorial & Real World Guide

Table of Contents

PostgreSQL Home

PostgreSQL Intro

PostgreSQL Install

PostgreSQL Get Started

PostgreSQL pgAdmin 4

DBeaver: Universal DB Client

Database Operations

PostgreSQL CREATE TABLE

PostgreSQL INSERT INTO

PostgreSQL Fetch Data

PostgreSQL ADD COLUMN

PostgreSQL UPDATE

PostgreSQL ALTER COLUMN

PostgreSQL DROP COLUMN

PostgreSQL DELETE

PostgreSQL DROP TABLE

Create Demo Database

PostgreSQL Syntax & Operators

Syntax

Operators

PostgreSQL SELECT & Clauses

PostgreSQL SELECT

SELECT DISTINCT

WHERE

ORDER BY

LIMIT

MIN and MAX

COUNT

SUM

AVG

LIKE

IN

BETWEEN

AS (Alias)

PostgreSQL Joins

INNER JOIN

LEFT JOIN

RIGHT JOIN

FULL JOIN

CROSS JOIN

UNION

GROUP BY

HAVING

EXISTS

ANY

ALL

CASE

Prisma Integration with PostgreSQL

How Prisma Works

Install & Set Up

Example Prisma Schema

Migration

Query Examples

Real World Use Cases

Resources

টাইপ অ্যাসার্শন: TypeScript-এ টাইপ নিরাপত্তার গোপন হাতিয়ার

টাইপ অ্যার্শনের মূলতত্ত্ব

“Angle-Bracket” vs “as” সিনট্যাক্স

কবে এবং কেন ব্যবহার করবেন

উন্নত ব্যবহার ও সতর্কতা

অতিরিক্ত টিপস

React.memo: Optimizing Performance in React Applications

Understanding React.memo

When and Why to Use React.memo

Example: Preventing Unnecessary Re-renders

Benefits of React.memo

Considerations and Cautions

Comparison Between Fetch and Axios: Usage, Differences, and Real-World Applications

Key Differences

Real-World Applications

String (`string`)

Number (`number`)

Boolean (`boolean`)

Null (`null`) & Undefined (`undefined`)

Array (`array`)

Tuple (`tuple`)

Enum (`enum`)

Object (`object`)

Any (`any`)

Unknown (`unknown`)

Void (`void`)

Never (`never`)