Full-Stack Web Development: Master Interview Guide (MERN Stack)

This comprehensive guide covers the core technical concepts, architectural patterns, and programming paradigms required for full-stack web development. It spans JavaScript fundamentals, ReactJS, Node.js, Express.js, and MongoDB, providing theoretical depth, real-world analogies, and production-ready code implementations.

1. JavaScript Core Foundations: Hoisting, Scope, and the Temporal Dead Zone

Hoisting is one of JavaScript's unique compilation behaviors. During the compile phase, before any code is executed, the JavaScript engine scans the code for variable and function declarations and allocates memory for them. Conceptually, these declarations are moved to the top of their enclosing scope.

Real-Life Analogy: Hoisting

Imagine a boy standing under a tree throwing a ball up into the branches. The tree represents the current execution scope, the boy is the JavaScript engine, and the ball is a variable or function declaration. When the code runs, JavaScript "throws" the declarations to the very top of the scope tree, making them visible early, even if their values (the actual fruits of the tree) remain where they were.

Types of Hoisting

1. Variable Hoisting (var)

When variables are declared using var, only the declaration is hoisted, not the initialization. If you access a var variable before its assignment, it returns undefined.

// Naive expectation: Throws a ReferenceError
// Actual execution: Prints "undefined" due to hoisting
console.log("Value of x:", x); 

var x = 10; // Declaration is hoisted; initialization remains on this line.

console.log("Value of x after initialization:", x); // Prints 10

2. Function Hoisting

Function declarations are fully hoisted. This means the entire function body is moved to the top of the scope, allowing you to invoke a function before its definition in the source code.

// Invoking the function before declaration
greet(); // Output: "Hi! I have been called."

function greet() {
    console.log("Hi! I have been called.");
}

3. Block-Scoped Hoisting (let and const) and the Temporal Dead Zone (TDZ)

Variables declared with let and const are hoisted, but they are not initialized with a default value of undefined. Instead, they enter the Temporal Dead Zone (TDZ) from the start of the block until the execution reaches the line where the variable is declared and initialized. Accessing them during this window throws a ReferenceError.

try {
    console.log(y); // Throws ReferenceError
} catch (error) {
    console.error(error.message); // "Cannot access 'y' before initialization"
}

let y = 20; // TDZ for 'y' ends here

Real-Life Analogy: The Temporal Dead Zone (TDZ)

Think of Zomato delivery drivers waiting in a dispatch room. They exist, they are registered in the system (hoisted), but until they are assigned a specific order (initialized), they cannot leave the room or perform any deliveries. That waiting room is the Temporal Dead Zone. If you try to call them to your house before they have been assigned an order, the system throws an error.

2. Client-Side Storage & Performance Optimization Strategies

Web applications rely on client-side storage mechanisms to manage state, track user sessions, and optimize performance.

Local Storage vs. Session Storage

Real-World Examples

• Local Storage (Amazon Cart): When you add items to your Amazon cart, they remain there even if you close the tab, restart your computer, and return days later.
• Session Storage (LinkedIn Job Application): If you are filling out a multi-step job application on LinkedIn and accidentally reload the tab, the form data is wiped out because it was tied to that specific active session.

// Local Storage Implementation
localStorage.setItem("username", "Arya");
const cachedUser = localStorage.getItem("username");
console.log(cachedUser); // Output: Arya (Persists across tab reloads and new windows)

// Session Storage Implementation
sessionStorage.setItem("session_token", "XYZ123");
const activeToken = sessionStorage.getItem("session_token");
console.log(activeToken); // Output: XYZ123 (Wiped out if opened in a new tab)

3. API Architectural Styles: SOAP, REST, and GraphQL

Modern web architectures rely on APIs to exchange data between clients and servers. The three primary paradigms are SOAP, REST, and GraphQL.

Over-Fetching vs. Under-Fetching in REST

In REST, endpoints return a fixed data structure.

• Over-fetching: The client requests /users/1 to get only a username, but the server returns the username, email, physical address, billing details, and registration history.
• Under-fetching: The client requests /posts/1, but to display the author's profile picture, it must make a secondary network request to /users/author-id.

GraphQL solves this by allowing the client to specify the exact shape of the response.

Code Comparison: SOAP vs. REST vs. GraphQL

SOAP Payload (XML-based, highly verbose)

<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:web="http://www.example.com/webservice">
   <soapenv:Header/>
   <soapenv:Body>
      <web:ConvertNumberToWord>
         <web:NumberToConvert>123</web:NumberToConvert>
      </web:ConvertNumberToWord>
   </soapenv:Body>
</soapenv:Envelope>

REST Request (JSON-based, fixed endpoint)

# Requesting a specific post
curl -X GET https://jsonplaceholder.typicode.com/posts/1

GraphQL Query (Client-defined fields)

query GetCountryDetails {
  country(code: "AD") {
    name
    native
    capital
    emoji
    currency
  }
}

4. The Document Object Model (DOM), CSS Box Model, and Event Flow

The Document Object Model (DOM)

The DOM is a programming interface for web documents. It represents the structure of an HTML or XML document as a hierarchical tree of nodes, allowing scripting languages like JavaScript to dynamically manipulate the content, structure, and style of a webpage.

The CSS Box Model

Every element on a webpage is represented as a rectangular box. The CSS Box Model defines how the sizing and spacing of these elements are calculated.

• Content: The actual text or image. Controlled by width and height.
• Padding: The transparent space surrounding the content, inside the border.
• Border: The line wrapping the padding and content.
• Margin: The transparent space outside the border that separates the element from its neighbors.

Event Flow: Bubbling vs. Capturing

When an event occurs on an element nested inside other elements, browsers run two phases of event propagation: Capturing and Bubbling.

Real-Life Analogy: Corporate Communication

Event Capturing (Top-Down): The CEO has a new strategic directive. They communicate it to the Manager, who then passes it down to the individual Employees.

Event Bubbling (Bottom-Up): An Employee has a complaint. They raise it to the Manager, who escalates it to the CEO.

<!-- HTML Structure for Event Flow Demonstration -->
<div id="box" style="padding: 50px; background: lightblue;">
  Box (Grandparent)
  <div id="parent" style="padding: 30px; background: lightcoral;">
    Parent
    <button id="child">Child Button</button>
  </div>
</div>

<script>
  const box = document.getElementById('box');
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  // Event Bubbling (Default: third argument is false)
  child.addEventListener('click', () => console.log('Child Clicked (Bubbling)'), false);
  parent.addEventListener('click', () => console.log('Parent Clicked (Bubbling)'), false);
  box.addEventListener('click', () => console.log('Box Clicked (Bubbling)'), false);

  // Event Capturing (Third argument set to true)
  // If clicked, the console logs will print from outer-to-inner: Box -> Parent -> Child
  child.addEventListener('click', () => console.log('Child Clicked (Capturing)'), true);
  parent.addEventListener('click', () => console.log('Parent Clicked (Capturing)'), true);
  box.addEventListener('click', () => console.log('Box Clicked (Capturing)'), true);
</script>

5. Advanced JavaScript: Data Types, "use strict", and Bot Mitigation

JavaScript Data Types

JavaScript is a dynamically typed language divided into Primitive and Non-Primitive types.

Note: Even if two symbols are initialized with the exact same description, they are guaranteed to be unique.

JAVASCRIPT

Copy

Symbol("id") === Symbol("id"); // Returns false

The "use strict" Directive

Adding "use strict" at the top of a JavaScript file or function enforces stricter parsing and error handling. It prevents silent errors by throwing runtime exceptions.

"use strict";

// Without strict mode, this implicitly creates a global variable.
// With strict mode, this throws: "ReferenceError: x is not defined"
try {
    x = 10; 
} catch (error) {
    console.error(error.message);
}

Preventing Bot Scraping on Public APIs

Publicly accessible APIs are vulnerable to automated scraping. To protect your endpoints, implement a multi-layered security strategy:

1. API Rate Limiting: Limit the number of requests an IP address can make within a specific window.
   • Analogy: A bouncer at a house party who only lets a certain number of guests enter per minute to prevent overcrowding.
2. CAPTCHA Integration: Verify that the client is a human.
   • Conceptually: Modern CAPTCHAs track micro-movements of the mouse. Human cursors move in organic, curved paths, whereas automated bots move in perfectly straight lines or jump instantly between coordinate axes.
3. Honey Pots: Create invisible HTML elements (e.g., opacity: 0 or display: none). Humans cannot see or interact with them, but automated scrapers parsing the DOM will interact with them, immediately flagging themselves as bots.
4. Obfuscating API Endpoints: Avoid predictable routes like /api/v1/get-all-users. Use dynamic, non-obvious routing structures.
5. Anomaly Detection: Monitor traffic patterns for sudden spikes in requests or unusual access frequencies.

6. React Core Mechanics: Virtual DOM, Hooks, and Component Lifecycle

React is a declarative, component-based UI library. Its performance relies on the Virtual DOM and efficient state synchronization.

The Virtual DOM

The Real DOM is slow to update because changes trigger layout recalculations and repainting. React solves this by maintaining a lightweight, in-memory copy of the Real DOM called the Virtual DOM.

Component Lifecycle

React components undergo three main phases: Mounting, Updating, and Unmounting.

Real-Life Analogy: Daily Routine

• Mounting: Waking up (Constructor), getting dressed (Render), and stepping out of the house to start your day (ComponentDidMount).
• Updating: Deciding if you need to change your jacket because it started raining (ShouldComponentUpdate), changing your clothes (Render), and checking yourself in the mirror (ComponentDidUpdate).
• Unmounting: Going to bed at the end of the day and shutting down your conscious mind (ComponentWillUnmount).

Core React Hooks Implementation

The following example demonstrates useState and useEffect to build a real-time clock timer.

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

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

    useEffect(() => {
        // Side-effect: Set up an interval timer
        const interval = setInterval(() => {
            setSeconds(prevSeconds => prevSeconds + 1);
        }, 1000);

        // Cleanup function: Executed on unmounting to prevent memory leaks
        return () => {
            clearInterval(interval);
        };
    }, []); // Empty dependency array means this runs once on mount

    return (
        <div>
            <h2>Elapsed Time: {seconds} seconds</h2>
        </div>
    );
}

7. React State Management: Context API, Form Handling, and Redux Architecture

As applications scale, passing state down through multiple layers of components (Props Drilling) becomes unmaintainable.

Props Drilling vs. Context API

Context API Implementation

import React, { createContext, useContext } from 'react';

// 1. Create the Context
const MessageContext = createContext(null);

// 2. Create the Provider Component
export function MessageProvider({ children }) {
    const globalMessage = "Hello from Global Context!";
    return (
        <MessageContext.Provider value={globalMessage}>
            {children}
        </MessageContext.Provider>
    );
}

// 3. Consume the Context in a deeply nested child
export function DisplayMessage() {
    const message = useContext(MessageContext);
    return <h1>{message}</h1>;
}

Handling Forms in React (Single vs. Multi-Input)

React forms can be managed using controlled components, where the form inputs are bound directly to the component's state.

import React, { useState } from 'react';

export function ControlledForm() {
    const [formData, setFormData] = useState({
        username: '',
        email: ''
    });

    const handleChange = (e) => {
        const { name, value } = e.target;
        // Dynamically update state based on input name attribute
        setFormData(prevData => ({
            ...prevData,
            [name]: value
        }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log("Form Submitted Successfully:", formData);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Username:
                <input 
                    type="text" 
                    name="username" 
                    value={formData.username} 
                    onChange={handleChange} 
                />
            </label>
            <label>
                Email:
                <input 
                    type="email" 
                    name="email" 
                    value={formData.email} 
                    onChange={handleChange} 
                />
            </label>
            <button type="submit">Submit</button>
        </form>
    );
}

Redux Architecture

Redux is a predictable state container designed for complex global state management.

Real-Life Analogy: The Centralized Warehouse

Imagine a busy kitchen with multiple chefs. If they all share a single set of knives and ingredients without coordination, tools get lost, and chaos ensues.

Redux acts as a Centralized Warehouse (Store). The warehouse is managed by a strict Warehouse Manager (Reducer). If a chef needs an ingredient, they cannot walk in and grab it. They must fill out a formal request slip (Action) and hand it to the manager. The manager processes the slip, updates the inventory, and hands the chef the requested item.

Complete Redux Implementation (Counter Example)

// 1. Actions (action.js)
export const increment = (value) => ({
    type: 'INCREMENT',
    payload: value
});

export const decrement = (value) => ({
    type: 'DECREMENT',
    payload: value
});

// 2. Reducer (reducer.js)
const initialState = { count: 0 };

export function counterReducer(state = initialState, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { ...state, count: state.count + action.payload };
        case 'DECREMENT':
            return { ...state, count: state.count - action.payload };
        default:
            return state;
    }
}

// 3. Store Configuration (store.js)
import { configureStore } from '@reduxjs/store'; // Conceptually using modern RTK
import { counterReducer } from './reducer';

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

8. Modern Rendering Paradigms: Client-Side vs. Server-Side Rendering

The choice of rendering paradigm directly impacts performance, SEO, and user experience.

Client-Side Rendering (CSR)

In CSR, the server sends a bare-bones HTML file along with a large JavaScript bundle. The browser downloads and executes the JavaScript, which builds the DOM and fetches data dynamically.

• Example: Highly interactive dashboards, social media feeds (e.g., Instagram's infinite scroll).

Server-Side Rendering (SSR)

In SSR, the server processes the request, fetches the required data, renders the complete HTML page with content, and sends it back to the browser. The browser displays the page immediately while downloading the JavaScript to make it interactive (Hydration).

• Example: News websites (e.g., Times of India), e-commerce product pages.

9. Node.js Runtime Architecture: Event Loop, Asynchrony, and Threading

Node.js is an asynchronous, event-driven JavaScript runtime built on Chrome's V8 engine. It uses a single-threaded event loop to handle high-throughput, non-blocking I/O operations.

Asynchronous vs. Non-Blocking

• Asynchronous: Refers to the timing of tasks. An asynchronous task runs independently in the background and notifies the main thread when it is complete.
  • Analogy: Standing in a long coffee shop queue. While waiting for your order, you read the news on your phone. You are performing other tasks concurrently.
• Non-Blocking: Refers to the execution behavior. The system does not pause or wait for an I/O operation to finish; it immediately moves to the next line of code.
  • Analogy: Calling a busy friend. They don't answer, so you hang up immediately and go jump on a trampoline instead of holding the phone to your ear waiting indefinitely.

The Event Loop

The Event Loop allows Node.js to perform non-blocking I/O operations despite JavaScript being single-threaded. It delegates heavy operations (like file system access or network requests) to the operating system kernel or the internal thread pool (Libuv).

Real-Life Analogy: The Chef and the Assistant

Imagine a single chef in a kitchen. The chef starts boiling water. Instead of standing there watching the pot (blocking), the chef tells their kitchen assistant (the Event Loop/Libuv) to watch the water.

While the water is heating, the chef chops vegetables. The assistant continuously checks the pot. Once the water boils, the assistant alerts the chef, who returns to add the pasta.

Node.js Threading Model: Worker Threads vs. Child Processes

• Worker Threads: Used for CPU-intensive tasks (e.g., image processing, cryptography). They run JavaScript code in parallel on separate threads, sharing memory space with the main thread.
  • Analogy: Hiring an assistant chef inside your own kitchen to chop vegetables while you cook.
• Child Processes: Used to run entirely independent operating system processes. They have their own dedicated memory space and communicate with the main process via Inter-Process Communication (IPC).
  • Analogy: Hiring a professional chef from a completely different restaurant to cook a specialized dish in their own kitchen and deliver it to yours.

10. Node.js Data Processing: Streams, Callbacks, and Event Loop Scheduling

Streams in Node.js

Streams are collections of data—like arrays or strings—but instead of loading all the data into memory at once, streams read and write data continuously, piece by piece (chunks). This is crucial when working with large files that exceed the available RAM.

There are four primary types of streams:

1. Readable: Streams from which data can be read (e.g., fs.createReadStream).
2. Writable: Streams to which data can be written (e.g., fs.createWriteStream).
3. Duplex: Streams that are both Readable and Writable (e.g., TCP sockets).
4. Transform: Duplex streams that can modify or transform the data as it is written and read.

Implementation: Uppercase Transform Stream

const fs = require('fs');
const { Transform } = require('stream');

// 1. Create a readable stream
const readableStream = fs.createReadStream('example.txt', { encoding: 'utf8' });

// 2. Create a transform stream to convert text to uppercase
const uppercaseTransform = new Transform({
    transform(chunk, encoding, callback) {
        const transformedData = chunk.toString().toUpperCase();
        callback(null, transformedData);
    }
});

// 3. Create a writable stream
const writableStream = fs.createWriteStream('result.txt');

// 4. Pipe the streams together
readableStream.pipe(uppercaseTransform).pipe(writableStream);

writableStream.on('finish', () => {
    console.log("Data processing completed successfully.");
});

Callback Hell and Modern Solutions

Callback Hell occurs when multiple asynchronous operations are nested inside one another, making the code unreadable and hard to maintain. This is also referred to as the Pyramid of Doom.

// Naive Approach: Callback Hell
getData(function(a) {
    getMoreData(a, function(b) {
        getEvenMoreData(b, function(c) {
            console.log(c);
        });
    });
});

Modern Solution: Promises and Async/Await

Promises flatten nested callbacks, making asynchronous code look and behave more like synchronous code.

// Clean Approach: Async/Await
async function processData() {
    try {
        const a = await getData();
        const b = await getMoreData(a);
        const c = await getEvenMoreData(b);
        console.log(c);
    } catch (error) {
        console.error("Error processing data:", error);
    }
}

Event Loop Scheduling: process.nextTick vs. setImmediate

console.log("Start");

setImmediate(() => {
    console.log("setImmediate Executed");
});

process.nextTick(() => {
    console.log("process.nextTick Executed");
});

console.log("End");

// Output Order:
// 1. Start
// 2. End
// 3. process.nextTick Executed
// 4. setImmediate Executed

11. Express.js Architecture: Routing, Middleware, Security (CORS), and Authentication

Express.js is a minimal, flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Routing and Modularization

Using express.Router allows you to split routes into separate files, keeping the codebase clean and modular.

// routes/about.js
const express = require('express');
const router = express.Router();

router.get('/achievements', (req, res) => {
    res.send("Our Achievements Page");
});

router.get('/team', (req, res) => {
    res.send("Our Team Page");
});

module.exports = router;

// server.js
const express = require('express');
const app = express();
const aboutRouter = require('./routes/about');

app.use('/about', aboutRouter);

app.listen(3000, () => console.log("Server running on port 3000"));

Request Parameters: req.params vs. req.query vs. req.body

URL: http://localhost:3000/users/123?sort=desc
Body: { "role": "admin" }

req.params: { id: "123" }
req.query:  { sort: "desc" }
req.body:   { role: "admin" }

Cross-Origin Resource Sharing (CORS)

CORS is a browser-enforced security mechanism. By default, browsers block web applications from making requests to a domain different from the one that served the application.

Real-Life Analogy: Cross-Origin Requests

Imagine you are sitting in Restaurant A. You look at the menu, but you really want a specific dessert that is only sold at Restaurant B across the street.

If you ask your waiter to go across the street and get it for you, they will refuse because of safety and policy rules. However, if Restaurant B issues a special permission slip (CORS header) saying "We allow customers from Restaurant A to order our desserts," the waiter can safely fetch it for you.

const express = require('express');
const cors = require('cors');
const app = express();

// Enable CORS for all routes
app.use(cors({
    origin: 'https://trusted-frontend.com', // Only allow requests from this origin
    methods: ['GET', 'POST']
}));

JWT Authentication & Authorization Middleware

The following example demonstrates how to implement JSON Web Token (JWT) verification in an Express application.

const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
const SECRET_KEY = "super_secret_key";

app.use(express.json());

// Middleware to authorize users based on JWT
function authenticateToken(req, res, next) {
    const authHeader = req.headers['authorization'];
    const token = authHeader && authHeader.split(' ')[1]; // Format: Bearer <TOKEN>

    if (!token) {
        return res.status(401).json({ error: "Access Denied: Token Missing" });
    }

    jwt.verify(token, SECRET_KEY, (err, user) => {
        if (err) {
            return res.status(403).json({ error: "Forbidden: Invalid Token" });
        }
        req.user = user; // Attach user payload to request object
        next(); // Move to the next middleware or route handler
    });
}

// Protected Route
app.get('/dashboard', authenticateToken, (req, res) => {
    res.json({ message: `Welcome to your dashboard, user ID: ${req.user.id}` });
});

12. MongoDB Database Architecture: Document Modeling, Replica Sets, Sharding, and Aggregation

MongoDB is a document-oriented NoSQL database designed for high scalability and flexibility.

MongoDB vs. Relational Databases

Replica Sets

A replica set is a group of MongoDB processes that maintain the same data set. It provides redundancy, high availability, and disaster recovery.

If the primary node goes offline, an election is triggered automatically, and one of the secondary nodes is promoted to primary.

Sharding

Sharding is the process of storing data records across multiple machines. As the size of the data increases, a single machine may not be sufficient to store the data or handle read and write throughput. Sharding solves this by distributing the database horizontally.

Real-Life Analogy: Sharding

Imagine you have a database containing 1 million user profiles. If you store them all on a single server, the server might crash under high traffic.

Instead, you split the database into 4 smaller servers (Shards). You use a Shard Key (e.g., country of residence) to distribute the profiles:

• Shard 1: User IDs 1 to 250,000
• Shard 2: User IDs 250,001 to 500,000
• Shard 3: User IDs 500,001 to 750,000
• Shard 4: User IDs 750,001 to 1,000,000

This distributes the read/write load evenly across the cluster.

Aggregation Pipeline

The aggregation pipeline is a framework for data aggregation modeled on the concept of data processing pipelines. Documents enter a multi-stage pipeline that transforms the documents into aggregated results.

// MongoDB Aggregation Example: Grouping fruits and calculating total quantity
const MongoClient = require('mongodb').MongoClient;

async function runAggregation() {
    const client = await MongoClient.connect('mongodb://localhost:27017');
    const db = client.db('store');
    const collection = db.collection('inventory');

    const pipeline = [
        // Stage 1: Filter documents
        { $match: { price: { $gt: 1.0 } } },
        // Stage 2: Group by item name and sum quantities
        { $group: { 
            _id: "$item", 
            totalQuantity: { $sum: "$quantity" } 
          } 
        }
    ];

    const results = await collection.aggregate(pipeline).toArray();
    console.log("Aggregation Results:", results);
    client.close();
}

Database Transactions in MongoDB

MongoDB supports multi-document ACID transactions, ensuring that a sequence of operations either all succeed or all fail.

const mongoose = require('mongoose');

async function performTransaction() {
    const session = await mongoose.startSession();
    session.startTransaction();

    try {
        // Operation 1: Deduct money from Account A
        await Account.updateOne(
            { userId: 'A' },
            { $inc: { balance: -100 } },
            { session }
        );

        // Operation 2: Add money to Account B
        await Account.updateOne(
            { userId: 'B' },
            { $inc: { balance: 100 } },
            { session }
        );

        // Commit the transaction
        await session.commitTransaction();
        console.log("Transaction committed successfully.");
    } catch (error) {
        // Abort the transaction if any operation fails
        await session.abortTransaction();
        console.error("Transaction aborted due to error:", error);
    } finally {
        session.endSession();
    }
}

Summary and Key Takeaways

• Hoisting & TDZ: JavaScript hoists declarations to the top of their scope. Variables declared with var are initialized as undefined, while let and const remain uninitialized in the Temporal Dead Zone (TDZ) until their declaration line is executed.
• Client-Side Storage: Use Local Storage for persistent, long-term data (e.g., shopping carts) and Session Storage for temporary, tab-specific data (e.g., multi-step forms).
• API Design: GraphQL eliminates over-fetching and under-fetching by allowing clients to request the exact fields they need through a single endpoint, unlike REST which uses multiple fixed-response endpoints.
• Event Flow: Event propagation consists of a top-down Capturing phase followed by a bottom-up Bubbling phase. Use addEventListener(..., true) to intercept events during the capturing phase.
• React Virtual DOM: React uses a lightweight Virtual DOM copy to calculate the minimum necessary updates (reconciliation), avoiding expensive direct updates to the Real DOM.
• React Lifecycle: Component lifecycles are divided into Mounting (creation), Updating (state/prop changes), and Unmounting (destruction). Use the cleanup function in useEffect to prevent memory leaks during unmounting.
• Redux Architecture: Redux provides a predictable, centralized global state container (Store) updated via pure functions (Reducers) in response to explicit events (Actions).
• Node.js Runtime: Node.js uses a single-threaded, non-blocking event loop to delegate heavy I/O tasks to Libuv, enabling high-concurrency performance.
• Streams: Streams process large data sets chunk-by-chunk, minimizing memory usage compared to buffering entire files into RAM.
• MongoDB Sharding & Replication: MongoDB scales horizontally using Sharding to distribute data across servers, and ensures high availability using Replica Sets to replicate data across primary and secondary nodes.