Forem: Rayan Hossain

JavaScript Module System Explained (with Examples)

Rayan Hossain — Tue, 13 Jan 2026 09:08:13 +0000

As JavaScript applications grow, putting everything into one file quickly becomes unmanageable.
That’s where the JavaScript module system comes in.

Modules allow us to split code into reusable files, control visibility, and load only what we need. Modern JavaScript uses ES Modules (ESM), which are now the standard for both browsers and Node.js.

Topics Covered

import and export
Named exports & imports
Default exports & imports
Aliasing
Namespace imports
Combined imports
Dynamic imports
Multiple dynamic imports using Promise.all

What Is a JavaScript Module?

A JavaScript module is simply a file that:

Has its own scope
Can export variables, functions, or classes
Can import values from other modules

To enable modules in the browser:

<script type="module" src="main.js"></script>

Named Export

Named exports allow you to export multiple values from a single file.

`math.js`

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Named Import

When importing named exports, the names must match exactly.

`main.js`

import { add, subtract } from "./math.js";

console.log(add(5, 3));      // 8
console.log(subtract(5, 3)); // 2

Default Export

A module can have only one default export.
This is useful when a file exposes one main feature.

`logger.js`

export default function log(message) {
  console.log("Log:", message);
}

Default Import

You can import a default export using any variable name.

`main.js`

import logger from "./logger.js";

logger("Hello Dev.to!");

Aliasing (Renaming Imports)

Aliasing helps avoid naming conflicts or improve readability.

`math.js`

export const multiply = (a, b) => a * b;

`main.js`

import { multiply as mul } from "./math.js";

console.log(mul(4, 5)); // 20

Namespace Import (`* as`)

If a module exports many values, you can import everything as an object.

`math.js`

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

`main.js`

import * as MathUtils from "./math.js";

console.log(MathUtils.add(10, 5));      // 15
console.log(MathUtils.subtract(10, 5)); // 5

Combined Import (Default + Named)

You can combine default and named imports in a single statement.

`user.js`

export default function getUser() {
  return { name: "Rayan", role: "Developer" };
}

export const isAdmin = false;

`main.js`

import getUser, { isAdmin } from "./user.js";

console.log(getUser());
console.log(isAdmin);

Dynamic Import (`import()`)

Dynamic imports load modules at runtime instead of at page load.

Common use cases:

Code splitting
Lazy loading
Performance optimization

`math.js`

export const add = (a, b) => a + b;

`main.js`

async function loadMath() {
  const math = await import("./math.js");
  console.log(math.add(2, 3)); // 5
}

loadMath();

⚠️ import() always returns a Promise.

Multiple Dynamic Imports Using `Promise.all`

To load multiple modules in parallel, use Promise.all.

`math.js`

export const add = (a, b) => a + b;

`string.js`

export const upper = (text) => text.toUpperCase();

`main.js`

async function loadModules() {
  const [math, string] = await Promise.all([
    import("./math.js"),
    import("./string.js")
  ]);

  console.log(math.add(3, 4));         // 7
  console.log(string.upper("hello")); // HELLO
}

loadModules();

Key Rules to Remember

One file can have multiple named exports
One file can have only one default export
Named imports must match export names
Default imports can be renamed freely
Dynamic imports always return a Promise

Final Thoughts

The JavaScript module system is the foundation of modern development.
Frameworks like React, Vue, and Node.js rely heavily on it.

Once you master import and export, your code becomes:

Easier to maintain
More scalable
Better organized

Happy coding 🚀

React Container & Presenter Pattern in React (Beginner Guide with Real Example)

Rayan Hossain — Mon, 15 Dec 2025 06:05:01 +0000

If you are new to React, you may often feel confused when your components start getting too big, hard to read, and difficult to maintain. One common reason is that UI code and business logic are mixed.

The Container & Presenter Pattern (also known as Smart and Dumb Components) is a simple yet powerful approach to solving this problem.

This article explains the pattern in easy language, with clear examples, specifically for beginner coders.

What Problem Does This Pattern Solve?

Imagine a React component that:

Fetches data from an API
Manages loading and error states
Contains business logic
Renders UI

When all of this lives in one component, it becomes:

Hard to understand
Hard to reuse
Hard to test

The Container & Presenter Pattern solves this by splitting responsibilities.

Core Idea (Simple Explanation)

Separate how things work from how things look

Container Component → Handles logic and data
Presenter Component → Handles UI only

Think like this:

Container = Brain 🧠
Presenter = Face 🎨

What Is a Container Component?

A Container (Smart Component):

Fetches data
Manages state
Uses hooks (useState, useEffect, Redux, RTK Query, etc.)
Passes data to presenter via props

It does NOT focus on UI design.

What Is a Presenter Component?

A Presenter (Dumb / UI Component):

Receives data via props
Only renders JSX
No API calls
No business logic
Easy to reuse and test

It does NOT manage state or side effects.

Beginner Example: User Profile

Let’s see a real example.

Step 1: Presenter Component (UI Only)

// UserProfileView.jsx

const UserProfileView = ({ user, loading }) => {
  if (loading) {
    return <p>Loading user data...</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
};

export default UserProfileView;

📌 Notice:

No state
No API calls
Only UI

Step 2: Container Component (Logic Only)

// UserProfileContainer.jsx

import { useEffect, useState } from "react";
import UserProfileView from "./UserProfileView";

const UserProfileContainer = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users/1")
      .then((res) => res.json())
      .then((data) => {
        setUser(data);
        setLoading(false);
      });
  }, []);

  return (
    <UserProfileView
      user={user}
      loading={loading}
    />
  );
};

export default UserProfileContainer;

📌 Notice:

All logic is here
UI is delegated to the presenter

Step 3: Use the Container

// App.jsx

import UserProfileContainer from "./UserProfileContainer";

function App() {
  return <UserProfileContainer />;
}

export default App;

Why Is This Pattern Good for Beginners?

✅ Clear separation of responsibility

You immediately know where logic lives and where UI lives.

✅ Easy to read

Smaller files, focused purpose.

✅ Easy to reuse UI

Same presenter can be used with different containers.

✅ Easy to test

You can test presenter components using mock props.

Common Beginner Mistakes

❌ Putting API calls inside presenter components
❌ Using useState/useEffect in presenter components
❌ Overusing the pattern for very small components

Modern Alternative: Custom Hooks

In modern React, many developers move container logic into custom hooks.

const useUser = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users/1")
      .then((res) => res.json())
      .then(setUser);
  }, []);

  return { user };
};

This still follows the same principle: logic separated from UI.

When Should You Use This Pattern?

Use it when:

Components are getting large
Business logic is complex
UI needs to be reused
You are building scalable apps

Avoid it when:

Component is very small
Logic is trivial

Learning Inspiration & Reference

This article is inspired by learning resources such as:

YouTube video reference: https://youtu.be/1UHbhikwg-s

(Used only for learning inspiration and conceptual understanding.)

Final Thoughts

The Container & Presenter Pattern is not about writing more code — it’s about writing cleaner and smarter code.

For beginners, mastering this pattern early will help you:

Write scalable React apps
Understand separation of concerns
Think like a professional developer

Happy Coding 🚀

The Complete Guide to React Hooks (2025)

Rayan Hossain — Thu, 02 Oct 2025 07:10:45 +0000

React Hooks have transformed how developers write React applications. From managing state to handling side effects, and even advanced concurrent features in React 18+, Hooks allow developers to write cleaner, reusable, and maintainable code.

This guide covers all React Hooks — beginner, additional, and advanced — with updated examples for 2025, including React and Next.js scenarios. By the end, you'll understand Hooks deeply and be able to implement them in production-ready projects.

📑 Table of Contents

What Are React Hooks?
Why Beginners Should Learn Hooks
Core Hooks
- useState
- useEffect
- useContext
Additional Hooks
- useRef
- useMemo
- useCallback
- useReducer
Advanced Hooks
- useLayoutEffect
- useImperativeHandle
- useId
- useTransition & useDeferredValue
- useSyncExternalStore
- useInsertionEffect
- useEvent (Experimental)
- Next.js Specific Hooks
Custom Hooks
Common Patterns & Mistakes
Quick Reference Cheatsheet
Conclusion

What Are React Hooks?

React Hooks are functions that let you "hook into" React state and lifecycle features from functional components.

Before Hooks, developers relied heavily on class components for state and lifecycle logic. Hooks allow you to write cleaner, functional components with the same capabilities.

Why Beginners Should Learn Hooks

🚀 Less Boilerplate: No need for classes, constructors, or binding.
🧹 Cleaner Code: Logic is easier to split and reuse.
🔄 Better Reusability: Custom Hooks enable code reuse.
🌍 Industry Standard: Hooks are now the norm in React 18+ apps.

Core Hooks

useState

useState lets you add state to functional components.

import { useState } from "react";

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

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

Use cases: counters, toggles, form inputs, UI states.

useEffect

useEffect handles side effects in functional components. Think API calls, subscriptions, or DOM updates.

import { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(interval);
  }, []);

  return <p>Timer: {seconds}s</p>;
}

Best practices: always clean up side effects to prevent memory leaks.

useContext

useContext provides global state without prop drilling.

import { createContext, useContext } from "react";

const UserContext = createContext();

function App() {
  return (
    <UserContext.Provider value={{ name: "Rayan" }}>
      <Dashboard />
    </UserContext.Provider>
  );
}

function Dashboard() {
  const user = useContext(UserContext);
  return <h1>Welcome, {user.name}</h1>;
}

Use cases: themes, authentication, language settings.

Additional Hooks

useRef

Access DOM elements or store mutable values without causing re-renders.

import { useRef } from "react";

function FocusInput() {
  const inputRef = useRef();

  return (
    <>
      <input ref={inputRef} placeholder="Focus me" />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </>
  );
}

useMemo

Memoizes expensive calculations.

import { useState, useMemo } from "react";

function Factorial({ number }) {
  const factorial = useMemo(() => {
    console.log("Calculating...");
    const calc = (n) => (n <= 0 ? 1 : n * calc(n - 1));
    return calc(number);
  }, [number]);

  return <p>Factorial: {factorial}</p>;
}

useCallback

Memoizes functions to avoid unnecessary re-renders.

import { useState, useCallback } from "react";
import React from "react";

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

  const increment = useCallback(() => setCount((c) => c + 1), []);

  return <Child onClick={increment} />;
}

const Child = React.memo(({ onClick }) => (
  <button onClick={onClick}>Increment</button>
));

useReducer

For complex state logic.

import { useReducer } from "react";

const initialState = { count: 0 };

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

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

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

Advanced Hooks

useLayoutEffect

Runs synchronously after DOM updates.

import { useRef, useLayoutEffect } from "react";

function Box() {
  const ref = useRef();

  useLayoutEffect(() => {
    ref.current.style.backgroundColor = "yellow";
  }, []);

  return <div ref={ref}>Box</div>;
}

useImperativeHandle

Expose custom methods to parent components.

import { useImperativeHandle, useRef, forwardRef } from "react";

const Input = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
  }));

  return <input ref={inputRef} />;
});

function Parent() {
  const ref = useRef();
  return (
    <>
      <Input ref={ref} />
      <button onClick={() => ref.current.focus()}>Focus</button>
    </>
  );
}

useId

Generate unique IDs (SSR-friendly).

import { useId } from "react";

function Form() {
  const id = useId();

  return (
    <>
      <label htmlFor={id}>Email:</label>
      <input id={id} type="email" />
    </>
  );
}

useTransition & useDeferredValue

Concurrent features in React 18+.

import { useState, useTransition } from "react";

function Search() {
  const [query, setQuery] = useState("");
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    startTransition(() => setQuery(e.target.value));
  };

  return (
    <>
      <input onChange={handleChange} placeholder="Search..." />
      {isPending && <p>Loading...</p>}
      <p>Results: {query}</p>
    </>
  );
}

useSyncExternalStore

Subscribe to external stores safely.

import { useSyncExternalStore } from "react";

const store = {
  state: 0,
  listeners: [],
  increment() {
    this.state += 1;
    this.listeners.forEach((l) => l());
  },
  subscribe(listener) {
    this.listeners.push(listener);
    return () => {
      this.listeners = this.listeners.filter(l => l !== listener);
    };
  },
  getSnapshot() {
    return this.state;
  }
};

function Counter() {
  const state = useSyncExternalStore(
    store.subscribe.bind(store),
    store.getSnapshot.bind(store)
  );

  return (
    <>
      <p>Count: {state}</p>
      <button onClick={() => store.increment()}>+</button>
    </>
  );
}

useInsertionEffect

Inject CSS before layout effects (advanced use, CSS-in-JS).

import { useInsertionEffect } from "react";

function StyledComponent() {
  useInsertionEffect(() => {
    const style = document.createElement("style");
    style.textContent = `p { color: red; }`;
    document.head.appendChild(style);
    return () => document.head.removeChild(style);
  }, []);

  return <p>Styled text</p>;
}

useEvent (Experimental)

Note: useEvent is still experimental and not available in stable React releases as of 2025. The concept is designed for optimized event handlers.

// Experimental - not yet in stable React
import { useEvent } from "react";

function Button() {
  const handleClick = useEvent(() => console.log("Clicked!"));
  return <button onClick={handleClick}>Click Me</button>;
}

Next.js Specific Hooks

useServerInsertedHTML

Insert HTML during server rendering.

import { useServerInsertedHTML } from "next/navigation";

export default function FontStyles() {
  useServerInsertedHTML(() => (
    <style>{`body { font-family: Arial; }`}</style>
  ));

  return null;
}

useOptimistic

For optimistic UI updates in Next.js 13+.

import { useOptimistic } from "react";

function Likes() {
  const [likes, addLike] = useOptimistic(0, (state, delta) => state + delta);

  return (
    <button onClick={() => addLike(1)}>Likes: {likes}</button>
  );
}

Custom Hooks

Custom hooks let you reuse logic.

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData);
  }, [url]);

  return data;
}

function Posts() {
  const posts = useFetch("https://jsonplaceholder.typicode.com/posts");
  return posts ? <p>{posts.length} posts loaded</p> : <p>Loading...</p>;
}

Common Patterns & Mistakes

Always cleanup side effects (useEffect, useLayoutEffect)
Avoid unnecessary re-renders by memoizing functions (useCallback)
Do not call hooks conditionally - they must be called at the top level
Use custom hooks to reuse logic instead of duplicating code
Combine useReducer and context for global state management

Quick Reference Cheatsheet

Hook	Purpose	Basic Syntax
`useState`	Component state	`const [state, setState] = useState(initial)`
`useEffect`	Side effects	`useEffect(() => {}, [deps])`
`useContext`	Global state	`const value = useContext(MyContext)`
`useRef`	DOM or mutable value	`const ref = useRef()`
`useMemo`	Memoize value	`const memo = useMemo(() => compute(), [deps])`
`useCallback`	Memoize function	`const fn = useCallback(() => {}, [deps])`
`useReducer`	Complex state	`[state, dispatch] = useReducer(reducer, init)`
`useLayoutEffect`	Synchronous effect	`useLayoutEffect(() => {}, [deps])`
`useImperativeHandle`	Expose methods	`useImperativeHandle(ref, () => ({}))`
`useId`	Unique ID	`const id = useId()`
`useTransition`	Concurrent update	`[isPending, startTransition] = useTransition()`
`useDeferredValue`	Defer value	`const deferred = useDeferredValue(value)`
`useSyncExternalStore`	External store	`useSyncExternalStore(subscribe, getSnapshot)`
`useInsertionEffect`	CSS insertion	`useInsertionEffect(() => {}, [])`
`useEvent`	Event handler (Experimental)	`const handler = useEvent(() => {})`
`useServerInsertedHTML`	SSR HTML (Next.js)	`useServerInsertedHTML(() => <style>{}</style>)`
`useOptimistic`	Optimistic UI (Next.js)	`[state, mutate] = useOptimistic(initial, reducer)`

Conclusion

React Hooks are the modern standard for building React apps. From state management to advanced concurrent features, understanding Hooks will make your code cleaner, faster, and maintainable.

By mastering core, additional, and advanced Hooks, and combining them with custom Hooks, you can confidently build complex React and Next.js applications in 2025.

MongoDB Aggregation Roadmap – A 7-Day Study Plan

Rayan Hossain — Fri, 26 Sep 2025 03:38:57 +0000

MongoDB’s Aggregation Framework is more than just querying data — it’s about analyzing, transforming, and connecting collections to unlock powerful insights.

This 7-day study guide is designed to take you from beginner to confident user, with daily lessons, examples, practice problems, and projects.

Day 1 – $match & $project

Examples:

Find all Bangladeshi users:

db.users.aggregate([
  { $match: { country: "Bangladesh" } }
]);

Show only name & email:

db.users.aggregate([
  { $project: { 
    _id: 0, 
    fullName: { $concat: ["$firstName", " ", "$lastName"] }, 
    email: 1 
  }}
]);

Find users younger than 25:

db.users.aggregate([
  { $match: { age: { $lt: 25 } } }
]);

Practice Questions:

Find all users from the USA.
Show only firstName and age of all users.
Find products cheaper than 100.
Show only name and category for products.

Day 2 – $sort, $limit, $skip

Examples:

Sort products by price descending:

db.products.aggregate([
  { $sort: { price: -1 } }
]);

Get 2 youngest users:

db.users.aggregate([
  { $sort: { age: 1 } }, 
  { $limit: 2 }
]);

Skip first order, show next 2:

db.orders.aggregate([
  { $skip: 1 }, 
  { $limit: 2 }
]);

Practice Questions:

Get the top 2 most expensive products.
Get the oldest 1 user.
Sort orders by createdAt newest first.
Show 2nd and 3rd most expensive products.

Day 3 – $group

Examples:

Total orders by status:

db.orders.aggregate([
  { $group: { _id: "$status", total: { $sum: 1 } } }
]);

Average price per category:

db.products.aggregate([
  { $group: { _id: "$category", avgPrice: { $avg: "$price" } } }
]);

Total revenue:

db.orders.aggregate([
  { $group: { _id: null, totalRevenue: { $sum: "$amount" } } }
]);

Practice Questions:

Count users per country.
Find min & max product price.
Count how many reviews each product has.
Find the average age of all users.

Day 4 – $addFields & $unwind

Examples:

Add fullName field:

db.users.aggregate([
  { $addFields: { 
    fullName: { $concat: ["$firstName", " ", "$lastName"] } 
  }}
]);

Unwind product tags:

db.products.aggregate([
  { $unwind: "$tags" }
]);

Count number of tags per product:

db.products.aggregate([
  { $project: { name: 1, tagCount: { $size: "$tags" } } }
]);

Practice Questions:

Add a field isAdult = true if age >= 18.
Unwind orders by productId.
Count how many tags contain the word "tech".
Add field priceWithTax = price * 1.15.

Day 5 – $lookup

Examples:

Join users with orders:

db.users.aggregate([
  { $lookup: { 
    from: "orders", 
    localField: "_id", 
    foreignField: "userId", 
    as: "userOrders" 
  }}
]);

Join products with reviews:

db.products.aggregate([
  { $lookup: { 
    from: "reviews", 
    localField: "_id", 
    foreignField: "productId", 
    as: "productReviews" 
  }}
]);

Users with their orders and products:

db.orders.aggregate([
  { $lookup: { 
    from: "users", 
    localField: "userId", 
    foreignField: "_id", 
    as: "user" 
  }},
  { $lookup: { 
    from: "products", 
    localField: "productId", 
    foreignField: "_id", 
    as: "product" 
  }}
]);

Practice Questions:

Join orders with products to show product details.
Join reviews with users to show reviewer info.
Join users → orders → products (nested join).
Find users with at least 1 shipped order.

Day 6 – $lookup with Pipelines

Examples:

Only shipped orders per user:

db.users.aggregate([
  {
    $lookup: {
      from: "orders",
      let: { uid: "$_id" },
      pipeline: [
        { $match: { 
          $expr: { 
            $and: [
              { $eq: ["$userId", "$$uid"] }, 
              { $eq: ["$status", "shipped"] }
            ] 
          }
        }}
      ],
      as: "shippedOrders"
    }
  }
]);

Latest order per user:

db.users.aggregate([
  {
    $lookup: {
      from: "orders",
      let: { uid: "$_id" },
      pipeline: [
        { $match: { $expr: { $eq: ["$userId", "$$uid"] } } },
        { $sort: { createdAt: -1 } },
        { $limit: 1 }
      ],
      as: "latestOrder"
    }
  }
]);

Practice Questions:

Get only reviews with a rating >= 4 for each product.
For each user, get only pending orders.
For each product, get the latest review.
For each user, get orders in the last 7 days.

Day 7 – Real Projects

Mini Project 1 – E-commerce Dashboard

Create queries to find:

Total revenue
Top 2 categories by sales
Average order value
Number of shipped vs pending orders

Mini Project 2 – User Analytics

Create queries to find:

Active users per country
Users with more than 1 order
Users with average order amount > 100

Mini Project 3 – Product Insights

Create queries to find:

Products with the highest average rating
Top 2 most reviewed products
Products with tags "tech" and "home"

Tips for Success

Practice Daily: Try to write 2-3 aggregation queries each day
Start Simple: Begin with basic $match and $project, then build complexity
Use MongoDB Compass: Visual query builder helps understand pipeline stages
Test with Sample Data: Use MongoDB sample datasets or create your own test data
Read Documentation: MongoDB's aggregation documentation is excellent
Debug Step by Step: Add one stage at a time to see intermediate results

Common Operators Reference

Stage	Purpose	Example
`$match`	Filter documents	`{ $match: { age: { $gte: 18 } } }`
`$project`	Select/transform fields	`{ $project: { name: 1, _id: 0 } }`
`$group`	Group by field(s)	`{ $group: { _id: "$category", count: { $sum: 1 } } }`
`$sort`	Sort results	`{ $sort: { createdAt: -1 } }`
`$limit`	Limit results	`{ $limit: 10 }`
`$skip`	Skip documents	`{ $skip: 5 }`
`$lookup`	Join collections	`{ $lookup: { from: "orders", ... } }`
`$unwind`	Deconstruct arrays	`{ $unwind: "$tags" }`
`$addFields`	Add new fields	`{ $addFields: { total: { $add: ["$price", "$tax"] } } }`

Sample Data for Practice

📁 users.json

[
  { "_id": 1, "firstName": "Rayan", "lastName": "Hossain", "email": "rayan@example.com", "age": 24, "country": "Bangladesh" },
  { "_id": 2, "firstName": "Sanjida", "lastName": "Juie", "email": "juie@example.com", "age": 27, "country": "Bangladesh" },
  { "_id": 3, "firstName": "John", "lastName": "Doe", "email": "john@example.com", "age": 30, "country": "USA" },
  { "_id": 4, "firstName": "Alice", "lastName": "Smith", "email": "alice@example.com", "age": 22, "country": "USA" },
  { "_id": 5, "firstName": "David", "lastName": "Khan", "email": "david@example.com", "age": 35, "country": "India" },
  { "_id": 6, "firstName": "Sophia", "lastName": "Rahman", "email": "sophia@example.com", "age": 19, "country": "Bangladesh" },
  { "_id": 7, "firstName": "Michael", "lastName": "Lee", "email": "michael@example.com", "age": 40, "country": "USA" },
  { "_id": 8, "firstName": "Sara", "lastName": "Ahmed", "email": "sara@example.com", "age": 28, "country": "Bangladesh" }
]

📁 products.json

[
  { "_id": 101, "name": "Laptop Pro", "category": "tech", "price": 1200, "tags": ["tech", "office"] },
  { "_id": 102, "name": "Smartphone X", "category": "tech", "price": 800, "tags": ["tech", "mobile"] },
  { "_id": 103, "name": "Coffee Maker", "category": "home", "price": 90, "tags": ["home", "kitchen"] },
  { "_id": 104, "name": "Gaming Chair", "category": "furniture", "price": 250, "tags": ["tech", "home"] },
  { "_id": 105, "name": "Headphones", "category": "tech", "price": 150, "tags": ["tech", "music"] },
  { "_id": 106, "name": "Table Lamp", "category": "home", "price": 40, "tags": ["home", "decor"] },
  { "_id": 107, "name": "Backpack", "category": "fashion", "price": 60, "tags": ["fashion", "travel"] },
  { "_id": 108, "name": "Shoes", "category": "fashion", "price": 70, "tags": ["fashion", "casual"] }
]

📁 orders.json

[
  { "_id": 201, "userId": 1, "productId": 101, "amount": 1200, "status": "shipped", "createdAt": ISODate("2025-09-20T10:00:00Z") },
  { "_id": 202, "userId": 2, "productId": 103, "amount": 90, "status": "pending", "createdAt": ISODate("2025-09-21T14:30:00Z") },
  { "_id": 203, "userId": 3, "productId": 102, "amount": 800, "status": "shipped", "createdAt": ISODate("2025-09-19T09:15:00Z") },
  { "_id": 204, "userId": 4, "productId": 105, "amount": 150, "status": "shipped", "createdAt": ISODate("2025-09-18T18:20:00Z") },
  { "_id": 205, "userId": 5, "productId": 104, "amount": 250, "status": "pending", "createdAt": ISODate("2025-09-17T11:45:00Z") },
  { "_id": 206, "userId": 6, "productId": 106, "amount": 40, "status": "shipped", "createdAt": ISODate("2025-09-22T07:10:00Z") },
  { "_id": 207, "userId": 7, "productId": 107, "amount": 60, "status": "shipped", "createdAt": ISODate("2025-09-16T20:55:00Z") },
  { "_id": 208, "userId": 8, "productId": 108, "amount": 70, "status": "shipped", "createdAt": ISODate("2025-09-15T13:40:00Z") }
]

📁 reviews.json

[
  { "_id": 301, "productId": 101, "userId": 1, "rating": 5, "comment": "Excellent laptop!", "createdAt": ISODate("2025-09-21T09:00:00Z") },
  { "_id": 302, "productId": 101, "userId": 3, "rating": 4, "comment": "Very good performance.", "createdAt": ISODate("2025-09-20T12:30:00Z") },
  { "_id": 303, "productId": 102, "userId": 4, "rating": 3, "comment": "Battery life could be better.", "createdAt": ISODate("2025-09-19T15:45:00Z") },
  { "_id": 304, "productId": 103, "userId": 2, "rating": 5, "comment": "Makes great coffee!", "createdAt": ISODate("2025-09-18T10:15:00Z") },
  { "_id": 305, "productId": 104, "userId": 5, "rating": 4, "comment": "Comfortable chair.", "createdAt": ISODate("2025-09-17T11:50:00Z") },
  { "_id": 306, "productId": 105, "userId": 6, "rating": 2, "comment": "Sound quality not good.", "createdAt": ISODate("2025-09-16T09:20:00Z") },
  { "_id": 307, "productId": 106, "userId": 7, "rating": 4, "comment": "Nice design.", "createdAt": ISODate("2025-09-15T18:10:00Z") },
  { "_id": 308, "productId": 107, "userId": 8, "rating": 5, "comment": "Perfect travel backpack.", "createdAt": ISODate("2025-09-14T16:00:00Z") }
]

How to Import Sample Data

Using MongoDB Shell:

mongoimport --db ecommerce --collection users --file users.json --jsonArray
mongoimport --db ecommerce --collection products --file products.json --jsonArray
mongoimport --db ecommerce --collection orders --file orders.json --jsonArray
mongoimport --db ecommerce --collection reviews --file reviews.json --jsonArray

Using MongoDB Compass:

Create a new database called testdb
Create collections: users, products, orders
Import JSON files into respective collections

Verify Data Import:

// Check if data is imported correctly
db.users.countDocuments()    // Should return 4
db.products.countDocuments() // Should return 4
db.orders.countDocuments()   // Should return 4

Happy Learning! 🚀

How to Structure a Scalable MERN Project for Teams

Rayan Hossain — Sat, 20 Sep 2025 09:42:56 +0000

Introduction

When building MERN (MongoDB, Express.js, React, Node.js) applications with a team, proper project structure becomes critical for long-term success. A well-organized codebase reduces onboarding time, prevents bugs, enhances collaboration, and facilitates scaling more easily.

Why folder structure and conventions matter in large applications:

Developer velocity: New team members can quickly understand and contribute to the codebase
Maintainability: Clear separation of concerns makes debugging and refactoring easier
Scalability: Organized structure supports adding new features without creating technical debt
Code quality: Consistent patterns reduce the likelihood of bugs and anti-patterns

Common mistakes that hurt team productivity:

Mixing frontend and backend logic in the same directories
Creating deeply nested folder hierarchies that are hard to navigate
Inconsistent naming conventions across the project
Storing configuration and environment variables inconsistently
Lack of shared utilities leading to code duplication

Let's dive into building a structure that avoids these pitfalls and scales with your team.

1. Basic MERN Folder Setup

Start with a clean separation between client, server, and shared code:

my-mern-app/
├── client/                 # React frontend
├── server/                 # Express backend
├── shared/                 # Shared utilities, types, constants
├── .gitignore
├── package.json           # Root package.json for scripts
└── README.md

Benefits of this structure:

Clear boundaries: Frontend and backend teams can work independently
Shared code reuse: Common utilities and types live in one place
Deployment flexibility: Can deploy client and server separately
Monorepo management: Easy to manage dependencies and scripts from the root

Root package.json example:

{
  "name": "my-mern-app",
  "private": true,
  "scripts": {
    "dev": "concurrently \"npm run server:dev\" \"npm run client:dev\"",
    "server:dev": "cd server && npm run dev",
    "client:dev": "cd client && npm start",
    "install:all": "npm install && cd client && npm install && cd ../server && npm install"
  },
  "devDependencies": {
    "concurrently": "^8.2.0"
  }
}

2. Client-side Structure (React + State Management)

Organize your React application for scalability and maintainability:

client/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/         # Reusable UI components
│   │   ├── ui/            # Basic UI elements (Button, Input, Modal)
│   │   ├── forms/         # Form components
│   │   └── layout/        # Layout components (Header, Sidebar)
│   ├── pages/             # Page components
│   │   ├── auth/          # Authentication pages
│   │   ├── dashboard/     # Dashboard pages
│   │   └── settings/      # Settings pages
│   ├── hooks/             # Custom React hooks
│   ├── services/          # API calls and external services
│   │   ├── api.js         # API client configuration
│   │   ├── auth.js        # Authentication services
│   │   └── users.js       # User-related API calls
│   ├── store/             # State management (RTK Query/Context)
│   │   ├── slices/        # Redux slices or context providers
│   │   └── index.js       # Store configuration
│   ├── utils/             # Client-specific utilities
│   ├── styles/            # Global styles and themes
│   ├── App.js
│   └── index.js
├── package.json
└── .env.example

Key organization principles:

Components by type, then by feature: Start with component types, group related features together
Co-location: Keep related files close (component + styles + tests)
Services layer: Separate API logic from component logic
Custom hooks: Extract reusable stateful logic

Example service file structure:

// services/api.js
import axios from 'axios';

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
});

// Add request/response interceptors for auth, error handling
export default api;

// services/users.js
import api from './api';

export const userService = {
  getProfile: () => api.get('/api/users/profile'),
  updateProfile: (data) => api.put('/api/users/profile', data),
  getUsers: (params) => api.get('/api/users', { params }),
};

3. Server-side Structure (Express Routes, Controllers, Services)

Structure your backend following the separation of concerns principle:

server/
├── src/
│   ├── controllers/       # Request handlers
│   │   ├── auth.controller.js
│   │   ├── user.controller.js
│   │   └── index.js       # Export all controllers
│   ├── services/          # Business logic layer
│   │   ├── auth.service.js
│   │   ├── user.service.js
│   │   └── email.service.js
│   ├── models/            # Database models
│   │   ├── User.js
│   │   ├── Post.js
│   │   └── index.js       # Export all models
│   ├── routes/            # Route definitions
│   │   ├── auth.routes.js
│   │   ├── user.routes.js
│   │   └── index.js       # Combine all routes
│   ├── middleware/        # Custom middleware
│   │   ├── auth.middleware.js
│   │   ├── error.middleware.js
│   │   └── validation.middleware.js
│   ├── config/            # Configuration files
│   │   ├── database.js
│   │   ├── passport.js
│   │   └── index.js
│   ├── utils/             # Server utilities
│   │   ├── logger.js
│   │   ├── validators.js
│   │   └── helpers.js
│   └── app.js             # Express app setup
├── tests/                 # Test files
├── package.json
└── .env.example

Controller-Service pattern example:

// controllers/user.controller.js
const userService = require('../services/user.service');

const getProfile = async (req, res, next) => {
  try {
    const user = await userService.getProfile(req.user.id);
    res.json({ data: user });
  } catch (error) {
    next(error);
  }
};

// services/user.service.js
const User = require('../models/User');

const getProfile = async (userId) => {
  const user = await User.findById(userId).select('-password');
  if (!user) {
    throw new Error('User not found');
  }
  return user;
};

Benefits of this structure:

Single responsibility: Each layer has a clear purpose
Testability: Services can be tested independently
Reusability: Services can be used by multiple controllers
Maintainability: Changes to business logic stay in the service layer

4. Database Layer (MongoDB Models & Schema Organization)

Organize your MongoDB schemas and models for consistency and reusability:

server/src/models/
├── User.js
├── Post.js
├── Comment.js
├── schemas/               # Reusable schema definitions
│   ├── address.schema.js
│   ├── timestamp.schema.js
│   └── index.js
├── plugins/               # Mongoose plugins
│   ├── timestamps.plugin.js
│   └── softDelete.plugin.js
└── index.js               # Export all models

Example schema organization:

// schemas/timestamp.schema.js
const timestampSchema = {
  createdAt: { type: Date, default: Date.now },
  updatedAt: { type: Date, default: Date.now }
};

// plugins/timestamps.plugin.js
const timestampsPlugin = function(schema) {
  schema.pre('save', function(next) {
    this.updatedAt = Date.now();
    next();
  });
};

// models/User.js
const mongoose = require('mongoose');
const { timestampSchema } = require('./schemas');
const timestampsPlugin = require('./plugins/timestamps.plugin');

const userSchema = new mongoose.Schema({
  email: { type: String, required: true, unique: true },
  name: { type: String, required: true },
  role: { type: String, enum: ['user', 'admin'], default: 'user' },
  ...timestampSchema
});

userSchema.plugin(timestampsPlugin);

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

5. Environment Variables & Config Management

Create a robust configuration system that works across all environments:

# .env.example (root level)
NODE_ENV=development

# Database
MONGODB_URI=mongodb://localhost:27017/myapp
MONGODB_TEST_URI=mongodb://localhost:27017/myapp-test

# Server
PORT=5000
JWT_SECRET=your-super-secret-jwt-key
JWT_EXPIRES_IN=7d

# Client
REACT_APP_API_URL=http://localhost:5000
REACT_APP_ENVIRONMENT=development

# External Services
SENDGRID_API_KEY=your-sendgrid-key
AWS_ACCESS_KEY_ID=your-aws-access-key
AWS_SECRET_ACCESS_KEY=your-aws-secret-key

Server configuration management:

// server/src/config/index.js
require('dotenv').config();

const config = {
  env: process.env.NODE_ENV || 'development',
  port: process.env.PORT || 5000,
  database: {
    uri: process.env.NODE_ENV === 'test' 
      ? process.env.MONGODB_TEST_URI 
      : process.env.MONGODB_URI,
  },
  jwt: {
    secret: process.env.JWT_SECRET,
    expiresIn: process.env.JWT_EXPIRES_IN || '7d',
  },
  email: {
    apiKey: process.env.SENDGRID_API_KEY,
  },
};

// Validate required environment variables
const requiredEnvVars = ['MONGODB_URI', 'JWT_SECRET'];
requiredEnvVars.forEach((envVar) => {
  if (!process.env[envVar]) {
    throw new Error(`Environment variable ${envVar} is required`);
  }
});

module.exports = config;

6. Using the `shared/` Folder for Types, Utils, and Constants

The shared folder prevents code duplication and ensures consistency:

shared/
├── types/                 # TypeScript types/interfaces
│   ├── user.types.js      # User-related types
│   ├── api.types.js       # API response types
│   └── index.js
├── utils/                 # Shared utilities
│   ├── validation.js      # Common validation functions
│   ├── formatters.js      # Data formatting utilities
│   └── constants.js       # App-wide constants
├── schemas/               # Validation schemas (Joi, Yup, etc.)
│   ├── user.schema.js
│   └── auth.schema.js
└── package.json           # Shared dependencies

Example shared utilities:

// shared/utils/validation.js
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const isValidEmail = (email) => emailRegex.test(email);

const isStrongPassword = (password) => {
  // At least 8 characters, 1 uppercase, 1 lowercase, 1 number
  const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{8,}$/;
  return strongPasswordRegex.test(password);
};

module.exports = { isValidEmail, isStrongPassword };

// shared/utils/constants.js
const USER_ROLES = {
  ADMIN: 'admin',
  USER: 'user',
  MODERATOR: 'moderator'
};

const API_ENDPOINTS = {
  AUTH: {
    LOGIN: '/api/auth/login',
    REGISTER: '/api/auth/register',
    LOGOUT: '/api/auth/logout'
  },
  USERS: {
    PROFILE: '/api/users/profile',
    LIST: '/api/users'
  }
};

module.exports = { USER_ROLES, API_ENDPOINTS };

Using shared code in client and server:

// In client (React component)
import { isValidEmail, USER_ROLES } from '../../shared/utils';

// In server (Express controller)
const { isValidEmail, USER_ROLES } = require('../../../shared/utils');

7. Versioning & Git Workflow for Teams

Establish clear git practices and versioning strategies:

Branch naming conventions:

main                    # Production branch
develop                # Development branch
feature/user-auth      # Feature branches
bugfix/login-error     # Bug fix branches
hotfix/security-patch  # Hot fixes for production

Commit message format:

type(scope): description

feat(auth): add JWT token refresh mechanism
fix(user): resolve profile update validation error
docs(readme): update installation instructions
refactor(api): simplify error handling middleware

Package.json versioning scripts:

{
  "scripts": {
    "version:patch": "npm version patch --no-git-tag-version",
    "version:minor": "npm version minor --no-git-tag-version", 
    "version:major": "npm version major --no-git-tag-version",
    "release": "npm run build && npm run test && git add . && git commit -m 'chore: release' && npm version patch"
  }
}

Pre-commit hooks with Husky:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "npm run test"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": ["eslint --fix", "prettier --write"],
    "*.{json,css,md}": ["prettier --write"]
  }
}

Environment-based deployment structure:

environments/
├── development/
│   ├── .env.development
│   └── docker-compose.yml
├── staging/
│   ├── .env.staging
│   └── docker-compose.yml
└── production/
    ├── .env.production
    └── docker-compose.yml

Conclusion

A well-structured MERN project is the foundation for successful team collaboration and long-term maintainability. The structure we've outlined here provides:

Clear separation of concerns between frontend, backend, and shared code
Scalable organization that grows with your team and feature set
Consistent patterns that reduce cognitive load and improve developer experience
Robust configuration management across different environments
Team-friendly workflows with clear git practices and automated quality checks

Remember, the best project structure is one that your team actually follows consistently. Begin with these patterns and adapt them according to your specific needs and team preferences.

What's your favorite MERN project structure? Have you found patterns that work particularly well for your team? Drop your preferred folder organization and any tips you've learned in the comments below. Let's learn from each other's experiences and build better apps together!

Stop Re-Rendering! 7 Practical Ways to Optimize React Performance

Rayan Hossain — Wed, 17 Sep 2025 09:16:11 +0000

Introduction

Performance is one of the most crucial aspects of building modern web applications. In React, a common bottleneck is unnecessary re-renders, which can slow down apps, increase memory usage, and hurt user experience.

The good news? With a few smart techniques, you can significantly optimize React performance and make your applications run smoothly.

In this article, we’ll go over 7 practical tips to stop unnecessary re-rendering in React.

Why Performance Matters in React

Faster load times improve user experience
Optimized apps reduce memory usage
Better performance means higher SEO rankings
Smooth interactions = happier users

Unnecessary re-renders are one of the most common culprits behind poor performance. Let’s fix that.

1️⃣ Use `React.memo` for Pure Functional Components

If your component always renders the same output given the same props, you can wrap it with React.memo.

import React from "react";

const Button = ({ onClick, label }) => {
  console.log("Rendered:", label);
  return <button onClick={onClick}>{label}</button>;
};

export default React.memo(Button);

✅ Great for pure functional components that receive the same props frequently.
⚠️ Avoid overusing it, as unnecessary memoization can add overhead.

2️⃣ Optimize Props with useCallback & useMemo

Functions and objects in JavaScript are reference types. Passing new references as props causes re-renders.

useCallback → Memoize functions
useMemo → Memoize values

import React, { useState, useCallback, useMemo } from "react";

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

  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  const expensiveValue = useMemo(() => {
    return count * 2;
  }, [count]);

  return (
    <div>
      <button onClick={handleClick}>Increase</button>
      <p>Expensive Value: {expensiveValue}</p>
    </div>
  );
}

✅ Use useCallback for event handlers
✅ Use useMemo for expensive calculations
✅ Prevents unnecessary re-renders in children.
✅ Great for performance-heavy calculations.

3️⃣ Split Code with React.lazy & Suspense

Large bundles increase initial load time. Code-splitting with React.lazy helps load components only when needed.

import React, { Suspense, lazy } from "react";

const Dashboard = lazy(() => import("./Dashboard"));

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Dashboard />
    </Suspense>
  );
}

✅ Improves initial page load speed
✅ Users only download what they need
✅ Improves Core Web Vitals for SEO.

4️⃣ Virtualize Long Lists with react-window / react-virtualized

Rendering thousands of DOM elements at once is costly. Use list virtualization to render only what’s visible.

import { FixedSizeList as List } from "react-window";

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

function App() {
  return (
    <List height={400} itemCount={1000} itemSize={35} width={300}>
      {Row}
    </List>
  );
}

✅ Efficiently handles large datasets
✅ Reduces memory usage and re-renders

5️⃣ Avoid Anonymous Functions in JSX

Defining functions inside JSX causes a new function instance on every render, which may trigger re-renders.

❌ Bad Practice:

<button onClick={() => setCount(count + 1)}>Click</button>

✅ Good:

const handleClick = () => setCount(count + 1);

<button onClick={handleClick}>Click</button>

✅ Avoids new references on each render.
✅ Works great with React.memo.

6️⃣ Key Usage Best Practices in Lists

Incorrect key props can cause React to re-render unnecessarily.

✅ Always use unique and stable keys:

{users.map(user => (
  <UserCard key={user.id} user={user} />
))}

❌ Avoid using array indexes as keys (except for static lists).

7️⃣ Performance Profiling with React DevTools

Before optimizing blindly, use the React DevTools Profiler to measure performance.

Steps:

Install React DevTools extension

Switch to the Profiler tab

Record interactions to see which components re-render unnecessarily

✅ Helps you focus only on real bottlenecks

🎯 Conclusion

Optimizing React performance doesn’t mean prematurely adding complexity. Instead, focus on preventing unnecessary re-renders and loading only what’s required.

✅ Quick Recap of 7 Tips:

Use React.memo

Optimize with useCallback & useMemo

Split code with React.lazy & Suspense

Virtualize long lists

Avoid anonymous functions in JSX

Use proper keys in lists

Profile with React DevTools

👉 Remember: Always profile before optimizing—don’t fix what isn’t broken.

With these techniques, your React apps will feel faster, smoother, and more professional. 🚀

The Ultimate CSS Selectors Cheat Sheet 2025

Rayan Hossain — Thu, 11 Sep 2025 08:54:42 +0000

A complete guide to CSS selectors with examples — from basics to advanced pseudo-classes and pseudo-elements.

CSS selectors are the building blocks of styling. They let you target specific elements on your page and apply styles in powerful ways.

In this article, we’ll go through every CSS selector with examples — from the basics you already know to the advanced ones that will make your CSS sharper and cleaner.

🔹 1. Basic Selectors

These are the most common selectors you'll use every day.

Selector	Description	Example
`*`	Universal selector – selects all elements	`* { margin: 0; }`
`element`	Type selector – selects all `<p>` elements	`p { color: blue; }`
`.class`	Class selector	`.btn { background: green; }`
`#id`	ID selector	`#header { height: 80px; }`

🔹 2. Grouping & Combinators

Selectors can be combined to target elements more precisely.

Selector	Description	Example
`A, B`	Groups multiple selectors	`h1, h2 { font-weight: bold; }`
`A B`	Descendant – selects `B` inside `A`	`div p { color: red; }`
`A > B`	Child – selects direct children	`ul > li { list-style: none; }`
`A + B`	Adjacent sibling – selects next sibling	`h1 + p { font-size: 14px; }`
`A ~ B`	General sibling – selects all siblings	`h1 ~ p { color: gray; }`

🔹 3. Attribute Selectors

Target elements based on attributes (super handy for forms & links).

Selector	Description	Example
`[attr]`	Elements with attribute	`[title] { color: green; }`
`[attr="value"]`	Exact match	`input[type="text"] { border: 1px solid; }`
`[attr~="value"]`	Contains word	`[class~="active"] { color: red; }`
`[attr\|="value"]`	Starts with value (or `value-`)	`[lang\|="en"] { font-style: italic; }`
`[attr^="value"]`	Starts with value	`a[href^="https"] { color: blue; }`
`[attr$="value"]`	Ends with value	`img[src$=".png"] { border: 1px solid; }`
`[attr*="value"]`	Contains value	`a[href*="login"] { color: red; }`

🔹 4. Pseudo-classes

These selectors apply styles based on state or position.

Selector	Description	Example
`:hover`	On hover	`button:hover { background: orange; }`
`:focus`	On focus	`input:focus { border: 2px solid blue; }`
`:active`	On active click	`a:active { color: red; }`
`:visited`	Visited link	`a:visited { color: purple; }`
`:first-child`	First child of parent	`p:first-child { font-weight: bold; }`
`:last-child`	Last child of parent	`p:last-child { color: gray; }`
`:nth-child(n)`	Matches based on position	`li:nth-child(2) { color: red; }`
`:only-child`	When element is only child	`p:only-child { font-size: 20px; }`
`:not(selector)`	Excludes selector	`div:not(.active) { opacity: 0.5; }`
`:checked`	Checked inputs	`input:checked { accent-color: red; }`
`:disabled`	Disabled inputs	`input:disabled { opacity: 0.5; }`
`:required`	Required inputs	`input:required { border-color: red; }`

🔹 5. Pseudo-elements

Pseudo-elements let you style parts of an element.

Selector	Description	Example
`::before`	Inserts content before element	`p::before { content: "👉 "; }`
`::after`	Inserts content after element	`p::after { content: " ✅"; }`
`::first-letter`	Styles first letter	`p::first-letter { font-size: 200%; }`
`::first-line`	Styles first line	`p::first-line { color: red; }`
`::selection`	Styles selected text	`::selection { background: yellow; }`
`::placeholder`	Styles input placeholder	`input::placeholder { color: gray; }`
`::marker`	Styles list markers	`li::marker { color: red; }`

🔹 6. Advanced & UI States

These are less common but very powerful.

Selector	Description	Example
`:root`	Root element (`<html>`)	`:root { --main-color: blue; }`
`:target`	Active anchor target	`#section:target { background: yellow; }`
`:in-range`	Input value in range	`input:in-range { border-color: green; }`
`:out-of-range`	Input value out of range	`input:out-of-range { border-color: red; }`
`:read-only`	Read-only inputs	`input:read-only { background: lightgray; }`
`:read-write`	Editable inputs	`input:read-write { background: white; }`
`:fullscreen`	Fullscreen mode	`:fullscreen { background: black; }`

🖥 Example in Action


html
<!DOCTYPE html>
<html>
<head>
  <style>
    p:first-child { color: blue; }
    ul > li { font-weight: bold; }
    a[href^="https"] { color: green; }
    button:hover { background: orange; }
    p::after { content: " ✅"; }
  </style>
</head>
<body>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <ul>
    <li>List item</li>
  </ul>
  <a href="https://example.com">Secure Link</a>
  <button>Click Me</button>
</body>
</html>

Next.js Rendering Strategies: CSR vs SSR vs SSG vs ISR (Complete Guide) 2025

Rayan Hossain — Fri, 05 Sep 2025 09:24:54 +0000

Understanding how Next.js renders your pages is crucial for building fast, scalable, and SEO-friendly web applications. In this article, we’ll explore Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR) — their differences, pros/cons, and when to use them.

🔍 Overview

Next.js offers four main rendering strategies:

CSR (Client-Side Rendering): Rendering happens in the browser.
SSR (Server-Side Rendering): HTML is rendered on each request.
SSG (Static Site Generation): HTML is generated at build time.
ISR (Incremental Static Regeneration): Pages are pre-built but can be revalidated after deployment.

Key Concepts

Hydration: Turning static HTML into an interactive React app.
FCP (First Contentful Paint): When first content appears.
TTI (Time To Interactive): When page is fully usable.
SEO: How search engines crawl and index your content.

⚡ Client-Side Rendering (CSR)

How it Works

Minimal HTML is served.
Browser downloads JavaScript.
JavaScript fetches data and renders UI.

✅ Pros & ❌ Cons

✅ Great for interactivity
✅ Light on the server
❌ Poor SEO (blank HTML initially)
❌ Slower first load

Example

"use client"
import { useState, useEffect } from 'react';

export default function CSRExample() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json()).then(setPosts);
  }, []);

  return (
    <div>
      <h1>Posts (CSR)</h1>
      {posts.map(p => <p key={p.id}>{p.title}</p>)}
    </div>
  );
}

👉 Best For: Dashboards, private content, real-time apps.

🌐 Server-Side Rendering (SSR)

How it Works

Request comes in.
Server fetches data.
HTML is generated and sent.
Browser hydrates the page.

✅ Pros & ❌ Cons

✅ Fresh data every request
✅ Great SEO
❌ Slower response time
❌ Higher server load

Example

export async function callApi() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();
  return posts
}

export default async function SSRExample() {
  const posts = await callApi()
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

👉 Best For: E-commerce, news, personalized content.

🚀 Static Site Generation (SSG)

How it Works

At build time, Next.js generates HTML.
Pages are cached on CDN.
Super-fast delivery.

✅ Pros & ❌ Cons

✅ Fastest load times
✅ Great SEO
✅ Very scalable
❌ Stale content until rebuild

Example

import { notFound } from "next/navigation";

async function getPost(id) {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`,
  );
  if (!res.ok) {
    return null;
  }
  return res.json();
}

export async function generateStaticParams() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();

  return posts.map((post) => ({
    id: post.id.toString(),
  }));
}

export default async function PostPage({ params }) {
  const post = await getPost(params.id);

  if (!post) {
    notFound();
  }

  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </main>
  );
}

👉 Best For: Blogs, docs, marketing pages.

🔄 Incremental Static Regeneration (ISR)

How it Works

Pages are generated at build time (like SSG).
Pages are revalidated in the background.
Next visitors get the fresh content.

✅ Pros & ❌ Cons

✅ Speed of SSG + freshness of SSR
✅ No full rebuilds needed
❌ Temporary stale content

Example

export const revalidate = 60

import { notFound } from "next/navigation";

async function getPost(id) {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`,
  );
  if (!res.ok) {
    return null;
  }
  return res.json();
}

export async function generateStaticParams() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();

  return posts.map((post) => ({
    id: post.id.toString(),
  }));
}

export default async function PostPage({ params }) {
  const post = await getPost(params.id);

  if (!post) {
    notFound();
  }

  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </main>
  );
}

👉 Best For: E-commerce catalogs, news sites, frequently updated blogs.

📊 Comparison Chart

Feature	CSR	SSR	SSG	ISR
Initial Load	Slow	Medium	Fastest	Fast
SEO	Poor	Excellent	Excellent	Excellent
Freshness	High	High	Low	Medium
Server Load	Low	High	Very Low	Low
Best For	Apps	Dynamic pages	Blogs, docs	Hybrid needs

💡 When to Use What

CSR: Dashboards, authenticated apps, real-time updates.
SSR: SEO + fresh content, e-commerce, user-specific pages.
SSG: Marketing sites, blogs, documentation.
ISR: Large sites, e-commerce catalogs, news portals.

🎯 Exercises for You

Pick a blog and implement SSG with dynamic routes.
Create a dashboard with CSR (fetch on client).
Build a news site homepage with ISR.
Compare performance using Lighthouse.

📌 Final Thoughts

Each rendering strategy in Next.js serves different needs:

CSR = Flexibility
SSR = Real-time + SEO
SSG = Performance
ISR = Balance between speed and freshness

By mixing them wisely, you can build fast, SEO-friendly, and scalable apps.

🔗 Additional Resources

How the Internet Works: OSI Model, DNS, TCP vs. UDP, and Essential Concepts for Beginners

Rayan Hossain — Wed, 15 Jan 2025 07:15:22 +0000

The internet has become an integral part of our lives, but how does it actually work? For beginners, understanding the fundamentals—like the OSI Model, DNS, and protocols such as TCP and UDP—can be a game-changer. In this article, we’ll explain these topics in simple terms with practical examples and diagrams to help you get started.

How the Internet Works (Simplified)

At its core, the internet is a global network that connects billions of devices, allowing them to communicate. Here’s a simple overview:

Devices like computers and smartphones connect to the internet via networks (e.g., Wi-Fi or mobile data).
Data is broken into small packets and sent across the internet using protocols like IP (Internet Protocol).
These packets travel through devices like routers and servers before reaching their destination.
Once all packets arrive, they are reassembled to display a webpage, send an email, or perform other tasks.

The internet uses layers of protocols to manage these processes, which is best explained through the OSI Model.

Understanding the OSI Model

The OSI (Open Systems Interconnection) Model is a framework that describes how data travels between devices. It has 7 layers, each with a specific role:

Physical Layer: Deals with physical connections like cables or Wi-Fi signals.
Data Link Layer: Ensures data transfer between devices on the same network.
Network Layer: Routes data packets between different networks (e.g., IP addresses).
Transport Layer: Ensures data is delivered accurately (e.g., TCP, UDP).
Session Layer: Manages communication sessions between devices.
Presentation Layer: Converts data into formats that applications can understand (e.g., encryption).
Application Layer: Interfaces directly with user applications (e.g., web browsers).

Visualizing the OSI Model

TCP and UDP: Protocols at the Transport Layer

The Transport Layer (Layer 4) is responsible for transferring data between devices. Two primary protocols operate here:

TCP (Transmission Control Protocol)

Reliable: Ensures all data packets are delivered in the correct order.
Connection-Oriented: Establishes a connection before sending data.
Use Cases: Web browsing, emails, file transfers.

Example: When you load a webpage, TCP ensures all the data arrives so the page displays correctly.

UDP (User Datagram Protocol)

Unreliable: Faster but doesn’t guarantee all packets will arrive.
Connectionless: Sends data without establishing a connection.
Use Cases: Online gaming, video streaming, DNS queries.

Key Differences Between TCP and UDP:

What is DNS (Domain Name System)?

DNS (Domain Name System) acts like the internet’s phonebook. It translates human-readable domain names (e.g., google.com) into IP addresses (e.g., 172.217.12.206) that computers use to communicate.

How DNS Works

You type a URL into your browser (e.g., www.google.com).
The browser queries a DNS resolver to find the corresponding IP address.
The DNS resolver checks its cache or contacts other DNS servers.
The IP address is returned, and the browser loads the webpage.

DNS Root Servers

There are 13 DNS root servers, labeled A through M, which are managed by different organizations worldwide. These servers are critical for directing queries to the appropriate TLD (Top-Level Domain) servers.

DNS Root Server Map

The 13 root servers are distributed globally to ensure reliability and speed. Each root server has multiple instances (using Anycast) for redundancy and efficiency.

Common TLDs and Their Purpose

.com: Commercial websites.
.org: Non-profit organizations.
.edu: Educational institutions.
.gov: Government websites.
.net: Network-related sites.
Country Code TLDs (ccTLDs): Examples include .uk (United Kingdom), .bd (Bangladesh), .in (India).

How TLDs Work

A DNS resolver queries a root server to find the TLD server (e.g., for .com).
The TLD server directs the query to the authoritative server for the domain (e.g., google.com).
The authoritative server provides the IP address, allowing the user to access the website.

Common DNS Records Beginners Should Know

A Record: Links a domain to an IPv4 address.
AAAA Record: Links a domain to an IPv6 address.
CNAME: Redirects one domain to another.
MX: Directs email to mail servers.
TXT: Stores text, often for verification purposes.

Additional Key Concepts

CDNs (Content Delivery Networks)

CDNs store copies of website content on servers worldwide, speeding up load times by serving content from servers closest to users.

DNS Security

DNS Spoofing: Hackers redirect users to malicious websites.
DNSSEC: A protocol that secures DNS queries by verifying their authenticity.

Conclusion

Understanding how the internet works—from the OSI Model to DNS and protocols like TCP and UDP—is crucial for beginners. These concepts form the foundation of web development and networking, helping you troubleshoot and build better systems.

If you’re new to these topics, start exploring practical tools like ping, traceroute, and nslookup. Got questions? Share them in the comments below—we’re here to help you learn!

Mastering Git and GitHub: A Guide for New Team Members

Rayan Hossain — Thu, 09 Jan 2025 08:11:30 +0000

In the fast-paced world of software development, version control is a cornerstone of efficient collaboration. At [Your Company Name], we use Git and GitHub extensively to manage code and streamline teamwork. This guide provides an overview of these essential tools, ensuring you hit the ground running.

Introduction to Git and GitHub

What is Git?

Git is a version control system that tracks changes in your codebase, allowing multiple developers to collaborate efficiently. It enables you to:

Keep a history of changes.
Roll back to previous versions if needed.
Work on different features simultaneously using branches.

What is GitHub?

GitHub is a cloud-based platform for hosting Git repositories. It provides tools for:

Collaborative coding.
Code reviews and pull requests.
Issue tracking and project management.

Setting Up Git

Step 1: Install Git

Download Git for your operating system.

Step 2: Configure Git

Run these commands to set your name and email (used for commits):

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Step 3: Verify Configuration

git config --list

Cloning a Repository

To start working on a project, clone the repository to your local machine:

git clone https://github.com/your-company/repository-name.git

Replace repository-name with the actual repository URL.

Basic Git Commands

1. Check Repository Status

git status

2. Add Changes to Staging Area

git add <file-name>  # Add a specific file
git add .             # Add all changes

3. Commit Changes

git commit -m "Brief message describing the change"

4. View Commit History

git log

5. Push Changes to Remote Repository

git push origin <branch-name>

6. Pull Latest Changes

git pull origin <branch-name>

Branching and Merging

Step 1: Create a New Branch

git checkout -b feature/branch-name

Step 2: Switch to an Existing Branch

git checkout branch-name

Step 3: Merge Branches

First, switch to the branch you want to merge into (e.g., main):

git checkout main
git merge feature/branch-name

Working with Remote Repositories

Adding a Remote

git remote add origin https://github.com/your-company/repository-name.git

Viewing Remotes

git remote -v

Removing a Remote

git remote remove origin

Resolving Merge Conflicts

Identify the files with conflicts using git status.
Open the conflicting files and resolve the conflicts.
Mark the conflicts as resolved:

   git add <file-name>

Commit the resolved changes:

   git commit -m "Resolved merge conflicts"

Writing Effective Commit Messages

Format: Use the format [Type]: Description.
Types:
- feat: New feature
- fix: Bug fix
- docs: Documentation update
- style: Code style changes
- refactor: Code restructuring
- test: Adding or updating tests

Example:

feat: add user authentication module

Best Practices for Git and GitHub

Branch Naming: Use descriptive names like feature/login-page or bugfix/header-issue.
Small Commits: Commit small, logical changes frequently.
Pull Before Push: Always pull the latest changes before pushing your work.
Code Reviews: Create pull requests and request reviews before merging to main.
Backup Work: Push your work regularly to avoid data loss.

Additional Resources

Using Git and GitHub effectively is key to our success at [Your Company Name]. If you have any questions, don't hesitate to reach out to your mentor or team lead. Welcome aboard, and happy coding!

State Management in React 2025: Exploring Modern Solutions

Rayan Hossain — Thu, 09 Jan 2025 03:24:57 +0000

Managing state is a critical aspect of building scalable and performant React applications. Over the years, state management solutions have evolved significantly, providing developers with powerful tools to handle both local and global state efficiently. In 2025, the React ecosystem offers a plethora of options, from classic libraries like Redux to modern approaches like Zustand and Jotai. This article explores the current state of state management, compares popular tools, and provides practical guidance on choosing the right solution for your project.

Why State Management Matters

State management is essential for:

Maintaining App Consistency: Ensures data flow and UI updates are synchronized.
Scalability: Makes complex apps easier to manage.
Collaboration: Simplifies teamwork by standardizing data handling.

Without proper state management, applications can become unmaintainable, leading to bugs, poor performance, and a negative user experience.

Choosing the Right Solution

When selecting a state management solution, consider the following:

Application Size: For small apps, Context API or Zustand may suffice. For larger apps, consider Redux or Jotai.
State Type: Use React Query for server state and Redux or Zustand for local/global state.
Performance Needs: Evaluate the performance trade-offs, especially with frequent state updates.
Developer Experience: Choose a tool that aligns with your team’s expertise and project requirements.

Conclusion

State management in React has come a long way, offering developers a wide range of tools to tackle both simple and complex scenarios. As of 2025, solutions like Redux, Zustand, Jotai, and React Query each have their place, depending on the needs of your project. By understanding the strengths and limitations of each, you can make informed decisions and build scalable, maintainable applications.

Are you using any of these state management solutions? Share your experiences and tips in the comments below!

React Server Components: Revolutionizing Modern Web Development

Rayan Hossain — Wed, 08 Jan 2025 03:34:17 +0000

As the web development landscape evolves, the demand for faster, more efficient, and scalable solutions continues to grow. React Server Components (RSC) have emerged as a game-changing feature, designed to address these needs by optimizing how we build and deliver modern web applications. Let’s explore what React Server Components are, why they matter, and how you can start using them.

What Are React Server Components?

React Server Components (RSC) are a new type of React component that runs on the server rather than the client. Unlike traditional React components, which rely on client-side rendering, RSC allows developers to offload logic and rendering to the server, reducing the amount of JavaScript sent to the browser. This approach improves performance and user experience.

Key Features of RSC:

Server-First Rendering: Components are rendered on the server, reducing the need for hydration.
Efficient Data Fetching: Fetch data directly on the server without additional client-side API calls.
Less Client-Side JavaScript: Minimize JavaScript payloads, leading to faster page loads.
Seamless Integration: Works alongside traditional client components, enabling hybrid rendering.

Benefits of React Server Components

1. Improved Performance

By shifting rendering to the server, RSC reduces the amount of JavaScript that needs to be downloaded and executed in the browser. This results in faster load times and improved performance, especially on low-powered devices.

2. Simplified Data Fetching

With RSC, you can fetch data directly on the server as part of the component’s rendering process. This eliminates the need for complex client-side state management or additional API calls.

3. SEO-Friendly Applications

Server-rendered components ensure that search engines can easily index your content, enhancing the discoverability of your web application.

4. Reduced Bundle Size

Since RSC doesn’t require client-side JavaScript for certain components, it significantly reduces the overall bundle size, leading to faster page loads.

How Do React Server Components Work?

RSC leverages the server’s processing power to handle rendering, enabling a more efficient workflow. Here’s a simplified overview:

Component Rendering: The server renders React components and sends the result as serialized HTML and JSON to the client.
Hybrid Components: You can use both server and client components in the same application. For instance, use RSC for static content and client components for interactive elements.
Streaming: React supports streaming responses, allowing content to progressively load in the browser while rendering continues on the server.

Real-World Example: Building with React Server Components

Let’s walk through a simple implementation of React Server Components.

Setting Up Your Project

To start using RSC, you need a React setup that supports server rendering. Tools like Next.js or frameworks integrating React 18+ are ideal.

Example Code

1. Server Component:

// components/ProductList.server.js
import fetch from 'node-fetch';

export default async function ProductList() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name} - ${product.price}</li>
      ))}
    </ul>
  );
}

2. Client Component:

// components/ProductDetail.client.js
import { useState } from 'react';

export default function ProductDetail({ product }) {
  const [details, setDetails] = useState(null);

  async function fetchDetails() {
    const res = await fetch(`/api/product/${product.id}`);
    const data = await res.json();
    setDetails(data);
  }

  return (
    <div>
      <h2>{product.name}</h2>
      <button onClick={fetchDetails}>View Details</button>
      {details && <p>{details.description}</p>}
    </div>
  );
}

3. Combining Components:

// pages/index.js
import ProductList from '../components/ProductList.server';
import ProductDetail from '../components/ProductDetail.client';

export default function Home() {
  return (
    <div>
      <h1>Product Store</h1>
      <ProductList />
    </div>
  );
}

Challenges and Considerations

Server Dependency: RSC relies on server resources, making it less suitable for static hosting environments.
Learning Curve: Developers need to adapt to a new paradigm of separating client and server components.
Tooling and Framework Support: Ensure your framework supports RSC for seamless implementation.

The Future of React Server Components

React Server Components represent a significant step forward in web development, bridging the gap between server-side rendering and client-side interactivity. As frameworks like Next.js continue to enhance their RSC support, we can expect even more powerful and scalable web applications in the future.

Conclusion

React Server Components are revolutionizing modern web development by offering a hybrid approach to rendering, reducing client-side JavaScript, and improving performance. While they come with their own set of challenges, their benefits make them an exciting addition to any developer’s toolkit. If you’re building dynamic, scalable applications, RSC is a technology you should explore.

Are you using React Server Components in your projects? Share your thoughts and experiences in the comments below!

Forem: Rayan Hossain

JavaScript Module System Explained (with Examples)

Topics Covered

What Is a JavaScript Module?

Named Export

math.js

Named Import

main.js

Default Export

logger.js

Default Import

main.js

Aliasing (Renaming Imports)

math.js

main.js

Namespace Import (* as)

math.js

main.js

Combined Import (Default + Named)

user.js

main.js

Dynamic Import (import())

math.js

main.js

Multiple Dynamic Imports Using Promise.all

math.js

string.js

main.js

Key Rules to Remember

Final Thoughts

React Container & Presenter Pattern in React (Beginner Guide with Real Example)

What Problem Does This Pattern Solve?

Core Idea (Simple Explanation)

What Is a Container Component?

What Is a Presenter Component?

Beginner Example: User Profile

Step 1: Presenter Component (UI Only)

Step 2: Container Component (Logic Only)

Step 3: Use the Container

Why Is This Pattern Good for Beginners?

✅ Clear separation of responsibility

✅ Easy to read

✅ Easy to reuse UI

✅ Easy to test

Common Beginner Mistakes

Modern Alternative: Custom Hooks

When Should You Use This Pattern?

Learning Inspiration & Reference

Final Thoughts

The Complete Guide to React Hooks (2025)

📑 Table of Contents

What Are React Hooks?

Why Beginners Should Learn Hooks

Core Hooks

useState

useEffect

useContext

Additional Hooks

useRef

useMemo

useCallback

useReducer

Advanced Hooks

useLayoutEffect

useImperativeHandle

useId

useTransition & useDeferredValue

useSyncExternalStore

useInsertionEffect

useEvent (Experimental)

Next.js Specific Hooks

useServerInsertedHTML

useOptimistic

Custom Hooks

Common Patterns & Mistakes

Quick Reference Cheatsheet

Conclusion

MongoDB Aggregation Roadmap – A 7-Day Study Plan

Day 1 – $match & $project

Examples:

`math.js`

`main.js`

`logger.js`

`main.js`

`math.js`

`main.js`

Namespace Import (`* as`)

`math.js`

`main.js`

`user.js`

`main.js`

Dynamic Import (`import()`)

`math.js`

`main.js`

Multiple Dynamic Imports Using `Promise.all`

`math.js`

`string.js`

`main.js`

6. Using the `shared/` Folder for Types, Utils, and Constants

1️⃣ Use `React.memo` for Pure Functional Components