Forem: Ashik Rahman

Different types of Authentication when we use that.

Ashik Rahman — Tue, 04 Mar 2025 19:14:24 +0000

Authentication ensures that only authorized users can access a system or resource. The type of authentication used depends on the security requirements, user experience, and application type. Below are different types of authentication and their best use cases.

1. Password-Based Authentication

How it Works:

Users provide a username and password.
The server verifies credentials against stored values.

When to Use:

✅ Simple login-based applications (e.g., email, social media).

✅ When user identity needs to be verified without external services.

🔴 Issues:

Weak passwords can be guessed or stolen.
Users often reuse passwords.

Enhancement: Always use hashing (e.g., bcrypt) to store passwords securely.

2. Multi-Factor Authentication (MFA)

How it Works:

Requires two or more authentication factors:
1. Something You Know (Password, PIN)
2. Something You Have (OTP, Authenticator App, Smart Card)
3. Something You Are (Fingerprint, Face ID)

When to Use:

✅ Banking applications and financial services.

✅ Protecting sensitive user data (e.g., enterprise logins).

🔴 Issues:

Adds extra steps, which may impact user experience.

3. Token-Based Authentication (JWT, OAuth, API Keys)

How it Works:

A token is issued after successful login and sent with each request for authentication.
The server verifies the token without needing to store session data.

Types:

🔹 JWT (JSON Web Token)

Self-contained token with user info.
Used for single sign-on (SSO) and APIs.
Example: Authorization: Bearer your_jwt_token

🔹 OAuth 2.0

Used for third-party authentication (e.g., Google, Facebook).
Instead of passwords, an access token is granted.
Example: "Login with Google" feature.

🔹 API Keys

Used to authenticate API requests.
Example: Authorization: API-Key your_api_key

When to Use:

✅ Securing REST APIs and microservices.

✅ When session management is complex.

✅ OAuth for third-party authentication (Google, GitHub login).

🔴 Issues:

API keys can be leaked if not handled properly.
JWT tokens should be short-lived to reduce security risks.

4. Session-Based Authentication (Cookies + Sessions)

How it Works:

User logs in → Server creates a session → A session ID is stored in cookies.
Every request includes the session ID for authentication.

When to Use:

✅ Traditional web applications (e.g., e-commerce, forums).

✅ When users frequently interact with a web app.

🔴 Issues:

Requires server-side session storage.
Can be vulnerable to session hijacking (Use HTTPS & HttpOnly cookies).

5. Biometric Authentication

How it Works:

Uses physical traits (fingerprint, retina, face recognition) to authenticate users.

When to Use:

✅ Mobile devices (Face ID, Fingerprint authentication).

✅ High-security applications (banking, enterprise logins).

🔴 Issues:

Privacy concerns.
Hardware dependency (needs a fingerprint scanner, face recognition camera).

6. Certificate-Based Authentication (TLS, mTLS)

How it Works:

Users authenticate using digital certificates instead of passwords.
Often used in SSL/TLS encryption.

When to Use:

✅ Enterprise security and secure API communication.

✅ Mutual TLS (mTLS) for securing connections in banking or IoT.

🔴 Issues:

Complex implementation and management of certificates.

7. Single Sign-On (SSO)

How it Works:

Users log in once and gain access to multiple systems without re-entering credentials.
Uses OAuth 2.0, SAML, OpenID Connect.

When to Use:

✅ Enterprises managing multiple applications (Google Workspace, Microsoft 365).

✅ Websites that integrate third-party logins (e.g., "Login with Google").

🔴 Issues:

A single compromised SSO account can expose multiple systems.

Choosing the Right Authentication Method

Authentication Type	Best For	Pros	Cons
Password-Based	Basic login apps	Easy to implement	Weak passwords, security risks
MFA	High-security apps (banking, corporate)	Strong security	Adds extra steps
JWT (Token-Based)	APIs, mobile apps, SPAs	No session storage needed	Token leakage risk
OAuth 2.0	Third-party logins (Google, Facebook)	Secure & widely used	Requires external service
Session-Based	Web apps (E-commerce, forums)	Works well for web apps	Needs server storage
Biometric	Smartphones, high-security systems	No need to remember passwords	Hardware-dependent
Certificate-Based (TLS, mTLS)	Secure API and enterprise connections	Strong security	Complex setup
SSO	Organizations with multiple apps	One login for multiple systems	If compromised, all apps are exposed

Next js 15

Ashik Rahman — Wed, 12 Feb 2025 18:16:39 +0000

Next.js 15 introduced several improvements, such as React 19 support, improved caching, Turbopack for faster builds, server actions, and enhanced form handling. Below are practical examples demonstrating these new features.

1. Using `router.refresh()` for Cache Refreshing

In Next.js 15, you can manually refresh data when needed using router.refresh().

Example: Manually Refreshing Cached Data

"use client";

import { useRouter } from "next/navigation";

export default function RefreshExample() {
    const router = useRouter();

    return (
        <div>
            <button onClick={() => router.refresh()}>
                Refresh Data
            </button>
        </div>
    );
}

🔹 Benefit: Ensures that cached data updates when necessary without a full page reload.

2. Server Actions with `use server`

Next.js 15 improves server actions, allowing secure form handling without API routes.

Example: Using a Server Action for Form Submission

"use client";

import { useState } from "react";

export default function FormExample() {
    const [message, setMessage] = useState("");

    async function submitForm(formData: FormData) {
        "use server";  // Marks this function as a server action

        const name = formData.get("name");
        return `Hello, ${name}!`;
    }

    return (
        <form action={async (formData) => {
            const response = await submitForm(formData);
            setMessage(response);
        }}>
            <input type="text" name="name" placeholder="Enter your name" required />
            <button type="submit">Submit</button>
            <p>{message}</p>
        </form>
    );
}

🔹 Benefit: Eliminates the need for an API route, improving performance.

3. Using `next.config.ts` for Type-Safe Configuration

Next.js 15 now supports TypeScript configuration in next.config.ts.

Example: TypeScript-based Next.js Configuration

import { NextConfig } from "next";

const nextConfig: NextConfig = {
    reactStrictMode: true,
    experimental: {
        serverActions: true, // Enabling Server Actions
    },
};

export default nextConfig;

🔹 Benefit: Better type safety when configuring Next.js applications.

4. Faster Development with Turbopack

Turbopack significantly speeds up local development.

How to Enable Turbopack in Development Mode

Run the following command:

next dev --turbo

🔹 Benefit: Reduces build times and speeds up hot module replacement (HMR).

5. Using React 19's New Features in Next.js 15

Next.js 15 fully supports React 19, including use hook for async/await.

Example: Using `use` for Async Data Fetching

import { use } from "react";

async function fetchData() {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    return res.json();
}

export default function Page() {
    const data = use(fetchData());

    return (
        <div>
            <h1>{data.title}</h1>
            <p>{data.body}</p>
        </div>
    );
}

🔹 Benefit: Simplifies fetching and using async data in components.

Improvment

Next.js 15 brings performance optimizations, server actions, improved caching, and better developer experience.

What are Higher Order Functions in Javascript

Ashik Rahman — Wed, 12 Feb 2025 17:49:08 +0000

What is a Higher-Order Function?

A Higher-Order Function (HOF) is a function that either:

Takes one or more functions as arguments
Returns a function as its result

JavaScript allows functions to be treated as first-class citizens, meaning they can be assigned to variables, passed as arguments, and returned from other functions.

1. Higher-Order Functions That Take Functions as Arguments

These functions take another function as an argument and use it to process data.

Example 1: Function as an Argument

function operateOnNumbers(a, b, operation) {
    return operation(a, b);
}

function add(x, y) {
    return x + y;
}

function multiply(x, y) {
    return x * y;
}

console.log(operateOnNumbers(5, 3, add)); // Output: 8
console.log(operateOnNumbers(5, 3, multiply)); // Output: 15

Here, operateOnNumbers is a higher-order function because it takes another function (add or multiply) as a parameter.

2. Higher-Order Functions That Return Functions

These functions return another function, which can be used later.

Example 2: Function Returning Another Function

function greetingGenerator(greeting) {
    return function(name) {
        return `${greeting}, ${name}!`;
    };
}

const sayHello = greetingGenerator("Hello");
const sayGoodMorning = greetingGenerator("Good Morning");

console.log(sayHello("Ashik")); // Output: Hello, Ashik!
console.log(sayGoodMorning("Arafat")); // Output: Good Morning, Arafat!

Here, greetingGenerator is a higher-order function because it returns another function.

3. Common Built-in Higher-Order Functions in JavaScript

JavaScript has several built-in higher-order functions like map(), filter(), and reduce().

Example 3: `map()`

The map() function transforms each element of an array and returns a new array.

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

const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); 
// Output: [1, 4, 9, 16, 25]

Here, map() is a higher-order function that takes a callback function and applies it to each array element.

Example 4: `filter()`

The filter() function filters out elements that don’t meet a condition.

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

const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); 
// Output: [2, 4]

Here, filter() is a higher-order function that filters elements based on the condition inside the callback function.

Example 5: `reduce()`

The reduce() function accumulates values to produce a single result.

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

const sum = numbers.reduce((accumulator, num) => accumulator + num, 0);
console.log(sum);
// Output: 15

Here, reduce() is a higher-order function that sums up all elements in the array.

4. Practical Use Cases of Higher-Order Functions

Scenario 1: Creating a Custom Logger

You can use a higher-order function to create a reusable logging function.

function createLogger(prefix) {
    return function(message) {
        console.log(`[${prefix}] ${message}`);
    };
}

const infoLogger = createLogger("INFO");
const errorLogger = createLogger("ERROR");

infoLogger("This is an informational message."); 
// Output: [INFO] This is an informational message.

errorLogger("Something went wrong!"); 
// Output: [ERROR] Something went wrong!

Scenario 2: Function Composition

Higher-order functions allow you to compose multiple functions together.

function multiplyByTwo(num) {
    return num * 2;
}

function subtractThree(num) {
    return num - 3;
}

function compose(func1, func2) {
    return function(value) {
        return func2(func1(value));
    };
}

const doubleThenSubtract = compose(multiplyByTwo, subtractThree);

console.log(doubleThenSubtract(5)); // Output: 7  (5 * 2 - 3)

5. Why Use Higher-Order Functions?

Code Reusability – Reduces duplication and keeps code DRY (Don’t Repeat Yourself).
Better Readability – Helps write clean and declarative code.
Encapsulation – Functions encapsulate behaviors and can be reused efficiently.
Functional Programming – HOFs make JavaScript more functional and predictable.

Sample of API Documentation for Inventory Management System

Ashik Rahman — Mon, 10 Feb 2025 15:32:49 +0000

1. Authentication

Register User

Endpoint: POST /api/auth/register

Description: Registers a new user.
Request Body:

  {
    "name": "John Doe",
    "email": "john@example.com",
    "password": "password123"
  }

Response:

  {
    "message": "User registered successfully",
    "user": { "id": "123", "name": "John Doe", "email": "john@example.com" }
  }

User Login

Endpoint: POST /api/auth/login

Description: Logs in a user.
Request Body:

  {
    "email": "john@example.com",
    "password": "password123"
  }

Response:

  {
    "token": "jwt-token-here"
  }

2. Products

Get All Products

Endpoint: GET /api/products

Description: Fetch all available products.
Response:

  [
    {
      "id": "1",
      "name": "Laptop",
      "description": "Gaming Laptop",
      "price": 1200,
      "stock": 10,
      "category": "Electronics"
    }
  ]

Add New Product

Endpoint: POST /api/products

Description: Adds a new product (Admin Only).
Request Body:

  {
    "name": "Laptop",
    "description": "Gaming Laptop",
    "price": 1200,
    "stock": 10,
    "category": "Electronics"
  }

Response:

  {
    "message": "Product added successfully",
    "product": { "id": "1", "name": "Laptop" }
  }

3. Orders

Place an Order

Endpoint: POST /api/orders

Description: Places a new order.
Request Body:

  {
    "userId": "123",
    "products": [
      { "productId": "1", "quantity": 2 }
    ],
    "totalPrice": 2400
  }

Response:

  {
    "message": "Order placed successfully",
    "orderId": "456"
  }

Get User Orders

Endpoint: GET /api/orders/{userId}

Description: Fetches all orders placed by a user.
Response:

  [
    {
      "id": "456",
      "userId": "123",
      "products": [
        { "productId": "1", "quantity": 2 }
      ],
      "totalPrice": 2400,
      "status": "pending"
    }
  ]

4. Payments

Process Payment

Endpoint: POST /api/payments

Description: Processes a payment for an order.
Request Body:

  {
    "orderId": "456",
    "amount": 2400,
    "method": "bKash"
  }

Response:

  {
    "message": "Payment successful",
    "paymentId": "789"
  }

Documenting project requirements and designing a database

Ashik Rahman — Mon, 10 Feb 2025 15:25:59 +0000

Documenting project requirements and designing a database properly are crucial steps for a developer to ensure smooth development, scalability, and maintainability. Below is a structured approach to handling both:

1. Project Requirement Documentation

A. Define Project Scope

Briefly explain the purpose of the project.
Identify key objectives and goals.
Specify the target users and their needs.

B. Identify Stakeholders

List all involved parties (e.g., client, users, developers, admins).
Define their roles and responsibilities.

C. Functional Requirements

List the core functionalities in simple, clear terms.
Example:
- User Authentication (Sign up, Login, Forgot Password)
- Product Management (Add, Edit, Delete, View)
- Payment Processing (bKash, Stripe, PayPal)

D. Non-Functional Requirements

Performance: Expected response time, concurrency handling.
Security: Authentication, Authorization, Data encryption.
Scalability: Should the system handle increasing users/data?
Availability: Should it be accessible 24/7?

E. User Roles & Permissions

Role	Permissions
SuperAdmin	Full access to all features
Admin	Manage users, products, orders
User/Student	Can place orders, view products

F. API Endpoints (If Backend is Involved)

Method	Endpoint	Description
POST	/api/auth/register	Register new user
POST	/api/auth/login	User login
GET	/api/products	Get all products
POST	/api/order	Place a new order

G. Tech Stack Decision

Frontend: React.js, Next.js, Vue.js
Backend: Node.js, Express.js, Django
Database: MongoDB, PostgreSQL, MySQL
Hosting: Vercel, AWS, DigitalOcean

2. Database Design

A. Identify Entities

Entities are the main objects in the system. Examples:

Users
Products
Orders
Payments

B. Define Relationships

One-to-Many: A user can have multiple orders.
Many-to-Many: Products can belong to multiple categories.

C. Create Database Schema

For MongoDB (Mongoose Schema Example):

const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
  name: String,
  email: { type: String, unique: true },
  password: String,
  role: { type: String, enum: ['student', 'admin', 'superAdmin'], default: 'student' }
}, { timestamps: true });

const ProductSchema = new mongoose.Schema({
  name: String,
  description: String,
  price: Number,
  stock: Number,
  category: String
}, { timestamps: true });

const OrderSchema = new mongoose.Schema({
  userId: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
  products: [{ productId: mongoose.Schema.Types.ObjectId, quantity: Number }],
  totalPrice: Number,
  status: { type: String, enum: ['pending', 'shipped', 'delivered'], default: 'pending' }
}, { timestamps: true });

module.exports = {
  User: mongoose.model('User', UserSchema),
  Product: mongoose.model('Product', ProductSchema),
  Order: mongoose.model('Order', OrderSchema)
};

For SQL (PostgreSQL Example):

CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100),
    email VARCHAR(100) UNIQUE,
    password TEXT,
    role VARCHAR(20) CHECK (role IN ('student', 'admin', 'superAdmin'))
);

CREATE TABLE products (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100),
    description TEXT,
    price DECIMAL(10,2),
    stock INT,
    category VARCHAR(50)
);

CREATE TABLE orders (
    id SERIAL PRIMARY KEY,
    user_id INT REFERENCES users(id),
    total_price DECIMAL(10,2),
    status VARCHAR(20) CHECK (status IN ('pending', 'shipped', 'delivered'))
);

CREATE TABLE order_items (
    id SERIAL PRIMARY KEY,
    order_id INT REFERENCES orders(id),
    product_id INT REFERENCES products(id),
    quantity INT
);

D. Consider Indexing & Optimization

Index fields like email and productId for faster queries.
Use caching (Redis) for frequently accessed data.
Implement pagination for large datasets.

Final Steps

Create ERD (Entity Relationship Diagram) – Visual representation of tables/collections.
Define API Contracts – Use Swagger/Postman to document endpoints.
Review & Validate – Ensure the design aligns with project requirements.
Set Up Dev Environment – Initialize database, seed sample data.

Immutability in State Management (React & Redux)

Ashik Rahman — Sun, 09 Feb 2025 12:42:16 +0000

Immutability plays a crucial role in managing state efficiently, especially in libraries like React and Redux. It helps track state changes, optimize rendering, and prevent unintended mutations.

1. Immutability in React (`useState`)

React’s state should be treated as immutable to ensure proper re-renders.

Example (Mutating State - Wrong Approach)

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    count++;  // ❌ Directly modifying state (WILL NOT trigger re-render)
    setCount(count);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Why is this wrong?

Directly modifying count does not create a new reference.
React doesn't detect a change and does not re-render.

Correct Approach (Immutable Update)

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);  // ✅ Creates a new value, triggering a re-render
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

✅ Here, React re-renders because setCount returns a new value.

2. Immutability in Redux (Reducers & State Updates)

Redux enforces immutability to track changes properly.

Wrong Approach (Mutating Redux State)

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  if (action.type === "INCREMENT") {
    state.count++; // ❌ Directly modifying state (BAD PRACTICE)
    return state;
  }
  return state;
}

❌ Why is this bad?

Redux relies on detecting new state objects.
Direct mutation does not create a new object, so Redux doesn’t detect the change.

Correct Approach (Immutable Redux Update)

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  if (action.type === "INCREMENT") {
    return { ...state, count: state.count + 1 }; // ✅ Creating a new state object
  }
  return state;
}

✅ Now, Redux detects the change and updates the UI.

3. Immutability in Arrays (React & Redux)

Wrong Approach (Mutating an Array in State)

const [todos, setTodos] = useState(["Learn React"]);

const addTodo = () => {
  todos.push("Learn Redux"); // ❌ Directly modifying array
  setTodos(todos); // ❌ State doesn't change reference, React won't re-render
};

Correct Approach (Immutable Update with Spread Operator)

const [todos, setTodos] = useState(["Learn React"]);

const addTodo = () => {
  setTodos([...todos, "Learn Redux"]); // ✅ Creates a new array
};

✅ Now React detects the state change and re-renders.

4. Using Immer.js for Immutability

Instead of manually handling immutability, you can use Immer.js, which lets you write code as if it's mutable but keeps it immutable.

Example with Immer.js

import produce from "immer";

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  return produce(state, (draft) => {
    if (action.type === "INCREMENT") {
      draft.count++; // ✅ Looks like mutation, but it's immutable
    }
  });
}

✅ Immer handles immutability automatically while keeping the code simple.

Key Takeaways

✅ React state updates should be immutable (use setState with new objects or arrays).

✅ Redux state should never be mutated (always return a new object in reducers).

✅ Use spread operator (...) for objects & arrays to ensure immutability.

✅ Immer.js simplifies immutability in Redux and complex state updates.

Javascript Mutability and Immutability

Ashik Rahman — Sun, 09 Feb 2025 12:31:19 +0000

Mutability vs. Immutability in JavaScript

mutability and immutability refer to whether a value or data structure can be modified after it is created.

1. Mutable Data (Can Be Changed)

Definition: Mutable data can be changed in place without creating a new copy.
Examples: Objects and arrays are mutable.

Example of Mutable Data

let person = { name: "Ashik", age: 25 };

// Modifying the object (mutation)
person.age = 26;
console.log(person); // { name: "Ashik", age: 26 }

✅ The person object is modified directly.

2. Immutable Data (Cannot Be Changed)

Definition: Immutable data cannot be modified once created. Instead, any change creates a new copy.
Examples: Primitive types (strings, numbers, booleans) and immutable patterns in objects/arrays.

Example of Immutable Data (Primitives)

let name = "Ashik";
let newName = name.toUpperCase();

console.log(name);     // "Ashik" (unchanged)
console.log(newName);  // "ASHIK" (new string created)

✅ Strings are immutable, so .toUpperCase() returns a new string instead of modifying name.

3. Making Objects Immutable (Using Spread Operator)

To prevent modifying objects or arrays, you can create new copies instead of changing the original.

Immutable Object Update

let user = { name: "Ashik", age: 25 };

// Creating a new object (immutability)
let updatedUser = { ...user, age: 26 };

console.log(user);         // { name: "Ashik", age: 25 } (original unchanged)
console.log(updatedUser);  // { name: "Ashik", age: 26 } (new object)

Immutable Array Update

let numbers = [1, 2, 3];

// Creating a new array instead of modifying
let newNumbers = [...numbers, 4];

console.log(numbers);     // [1, 2, 3] (unchanged)
console.log(newNumbers);  // [1, 2, 3, 4] (new array)

4. Why Use Immutability?

✅ Predictability – Prevents unexpected side effects

✅ Performance Optimization – Helps in React’s state management (React uses immutability in useState)

✅ Debugging Ease – Makes debugging easier as data doesn't change unexpectedly

Difference between Reducer vs Redux

Ashik Rahman — Sat, 08 Feb 2025 16:57:44 +0000

Both useReducer and Redux are used for state management in React, but they serve different purposes and have different scopes. Let's break it down:

1. `useReducer` (React Hook)

Scope: Manages local component state.
Usage: Used when state logic is complex and involves multiple actions.
Data Flow: State is managed locally within a component.
Setup: Lightweight and does not require external dependencies.
Best For: Component-level state management.

Example of `useReducer`

import React, { useReducer } from "react";

// Initial state
const initialState = { count: 0 };

// Reducer function
function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </div>
  );
};

export default Counter;

Key Takeaway: useReducer is ideal for managing complex state logic within a single component or a small component tree.

2. Redux (Global State Management)

Scope: Manages global application state.
Usage: Used when multiple components across the application need to access and update the same state.
Data Flow: Uses a centralized store to manage state globally.
Setup: Requires external dependencies (redux, react-redux).
Best For: Large applications with complex state management needs.

Example of Redux

1. Install Dependencies

npm install @reduxjs/toolkit react-redux

2. Create Redux Slice (`counterSlice.js`)

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
    decrement: (state) => {
      state.count -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

3. Configure Redux Store (`store.js`)

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

4. Provide Redux Store to App (`index.js`)

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

5. Use Redux in Components (`Counter.js`)

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { increment, decrement } from "./counterSlice";

const Counter = () => {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
};

export default Counter;

Key Takeaway: Redux is more powerful and suited for managing application-wide state, making it ideal for large-scale applications.

📌 Differences

Feature	`useReducer` (React Hook)	Redux (Global State)
Scope	Local component state	Global application state
Best For	Small-scale state management	Large-scale, complex apps
Setup	No external dependencies	Requires `redux` & `react-redux`
Performance	Lightweight	Can be optimized with middleware like `RTK Query`
State Sharing	Limited to component tree	Shared across multiple components

When to Use What?

✔ Use useReducer when:

You need complex state logic inside a single component.
The state is not required across multiple components.

✔ Use Redux when:

You need a global state that multiple components depend on.
You want a predictable, centralized state management system.

test

Ashik Rahman — Fri, 03 Jan 2025 08:26:57 +0000

HEllo Test

Test

Forem: Ashik Rahman

Different types of Authentication when we use that.

1. Password-Based Authentication

How it Works:

When to Use:

2. Multi-Factor Authentication (MFA)

How it Works:

When to Use:

3. Token-Based Authentication (JWT, OAuth, API Keys)

How it Works:

Types:

When to Use:

4. Session-Based Authentication (Cookies + Sessions)

How it Works:

When to Use:

5. Biometric Authentication

How it Works:

When to Use:

6. Certificate-Based Authentication (TLS, mTLS)

How it Works:

When to Use:

7. Single Sign-On (SSO)

How it Works:

When to Use:

Choosing the Right Authentication Method

Next js 15

1. Using router.refresh() for Cache Refreshing

Example: Manually Refreshing Cached Data

2. Server Actions with use server

Example: Using a Server Action for Form Submission

3. Using next.config.ts for Type-Safe Configuration

Example: TypeScript-based Next.js Configuration

4. Faster Development with Turbopack

How to Enable Turbopack in Development Mode

5. Using React 19's New Features in Next.js 15

Example: Using use for Async Data Fetching

*Improvment *

What are Higher Order Functions in Javascript

What is a Higher-Order Function?

1. Higher-Order Functions That Take Functions as Arguments

Example 1: Function as an Argument

2. Higher-Order Functions That Return Functions

Example 2: Function Returning Another Function

3. Common Built-in Higher-Order Functions in JavaScript

Example 3: map()

Example 4: filter()

Example 5: reduce()

4. Practical Use Cases of Higher-Order Functions

Scenario 1: Creating a Custom Logger

Scenario 2: Function Composition

5. Why Use Higher-Order Functions?

Sample of API Documentation for Inventory Management System

1. Authentication

Register User

User Login

2. Products

Get All Products

Add New Product

3. Orders

Place an Order

Get User Orders

4. Payments

Process Payment

Documenting project requirements and designing a database

1. Project Requirement Documentation

A. Define Project Scope

B. Identify Stakeholders

C. Functional Requirements

D. Non-Functional Requirements

E. User Roles & Permissions

F. API Endpoints (If Backend is Involved)

G. Tech Stack Decision

2. Database Design

A. Identify Entities

B. Define Relationships

C. Create Database Schema

D. Consider Indexing & Optimization

Final Steps

Immutability in State Management (React & Redux)

1. Immutability in React (useState)

1. Using `router.refresh()` for Cache Refreshing

2. Server Actions with `use server`

3. Using `next.config.ts` for Type-Safe Configuration

Example: Using `use` for Async Data Fetching

Improvment

Example 3: `map()`

Example 4: `filter()`

Example 5: `reduce()`

1. Immutability in React (`useState`)

1. `useReducer` (React Hook)

Example of `useReducer`

2. Create Redux Slice (`counterSlice.js`)

3. Configure Redux Store (`store.js`)

4. Provide Redux Store to App (`index.js`)

5. Use Redux in Components (`Counter.js`)