Top 50 Full Stack Developer Interview Questions 2025

Top 50 Full Stack Developer Interview Questions 2025

Front-End Questions( HTML & CSS )

1. What are the new features introduced in HTML5?

HTML5 introduced several new features that improved web development, making it more efficient and interactive. One of the biggest changes is the introduction of semantic elements like <header>, <article>, <section>, and <footer>, which help in structuring content properly. These elements make web pages more readable and accessible. Additionally, HTML5 supports native audio and video through the <audio> and <video> tags, eliminating the need for third-party plugins like Flash.

Another major improvement is the introduction of the Canvas API, which allows me to draw graphics directly on a web page using JavaScript. The new localStorage and sessionStorage APIs provide a way to store data in the browser, reducing the reliance on cookies. HTML5 also supports offline web applications through service workers and the cache API, enabling apps to function even without an internet connection. These enhancements make modern web applications more efficient, interactive, and user-friendly.

2. Explain the difference between semantic and non-semantic HTML elements.

Semantic HTML elements have meaningful names that describe their purpose in a web page. Examples include <header>, <nav>, <main>, and <footer>. These elements help both browsers and developers understand the content structure, improving SEO and accessibility. For instance, a <section> tag clearly defines a specific part of a webpage, making it easier for search engines to index the content properly.

On the other hand, non-semantic elements like <div> and <span> do not provide any information about their content. While they are useful for styling and layout purposes, they don’t contribute to the structural clarity of a page. Using semantic elements over non-semantic ones is a best practice because it enhances both the usability and maintainability of a website.

3. How does flexbox differ from CSS grid, and when would you use each?

Both Flexbox and CSS Grid are layout systems in CSS, but they serve different purposes. Flexbox is best for one-dimensional layouts, where I need to align items in a row or a column. It allows me to distribute space between items dynamically and align them with properties like justify-content and align-items. It works well for navigation bars, aligning buttons, or centering elements within a container.

CSS Grid, on the other hand, is designed for two-dimensional layouts, handling both rows and columns simultaneously. It allows me to create complex layouts with properties like grid-template-rows and grid-template-columns. For instance, when designing a dashboard layout with multiple sections, CSS Grid is a better choice because it provides better control over both dimensions.

Here’s an example of Flexbox vs CSS Grid usage:

/* Flexbox example */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* CSS Grid example */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Code explanation:

In the Flexbox example, display: flex; makes the container a flex container, justify-content: space-between; distributes items evenly, and align-items: center; aligns items vertically. In the CSS Grid example, display: grid; makes the container a grid, grid-template-columns: repeat(3, 1fr); creates three equal columns, and gap: 10px; adds space between them. I use Flexbox for component alignment and CSS Grid for building full-page layouts.

4. What is the difference between relative, absolute, and fixed positioning in CSS?

CSS provides different positioning methods that allow me to control element placement. The relative positioning keeps an element in its normal document flow but allows shifting it using top, right, bottom, and left. For example, if I set an element to position: relative; top: 20px;, it moves 20px down from its original position without affecting other elements.

The absolute positioning, however, removes an element from the normal flow and places it relative to the nearest positioned ancestor (i.e., an element with relative, absolute, or fixed positioning). If no such ancestor exists, it positions itself relative to the viewport. This is useful when placing elements inside a container without affecting surrounding elements.

The fixed positioning behaves like absolute, but the element remains fixed relative to the viewport. This means that even when I scroll the page, the element stays in the same position. Fixed positioning is commonly used for sticky navigation bars or floating buttons.

Here’s a simple example:

.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: black;
  color: white;
}

Code explanation:

In this CSS snippet, position: fixed; makes the element stay fixed on the screen, top: 0; ensures it stays at the top, width: 100%; makes it span the full width, background-color: black; gives it a black background, and color: white; sets the text color to white. This ensures the header remains visible even when scrolling.

5. How do you ensure cross-browser compatibility in CSS?

Ensuring cross-browser compatibility is essential to make sure that a website looks and functions correctly across different browsers. One approach I use is to rely on CSS resets or normalization stylesheets like normalize.css. These help remove inconsistencies in default styling between browsers, making styles more predictable.

Another key technique is using vendor prefixes for newer CSS properties that may not be supported everywhere. For example, some animations and gradients require prefixes like -webkit-, -moz-, or -o- to work correctly:

.example {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Code explanation:

In this CSS snippet, -webkit-border-radius: 10px; ensures support for WebKit browsers (Chrome, Safari), -moz-border-radius: 10px; supports Mozilla-based browsers (Firefox), and border-radius: 10px; applies the effect to modern browsers. This ensures that rounded corners work consistently across different browsers.

Other best practices include:

1. Testing in multiple browsers (Chrome, Firefox, Safari, Edge).
2. Using CSS feature queries (@supports) to provide fallbacks for unsupported properties.
3. Avoiding browser-specific hacks and instead using progressive enhancement to ensure a baseline experience for all users.
4. Keeping styles simple and modular to reduce inconsistencies.

6. What is the difference between rem, em, px, and % in CSS?

CSS provides multiple units of measurement for defining sizes, and choosing the right one is important for creating scalable and responsive designs. The px unit represents absolute pixels and does not change based on the parent element or viewport size. This makes it useful for fixed-size elements, such as buttons and icons, but limits flexibility in responsive designs. The em and rem units, on the other hand, are relative units. The em unit is relative to the font-size of the parent element, meaning it scales based on the hierarchy. If a parent has font-size: 20px;, an element with font-size: 2em; will be 40px.

The rem unit is relative to the root element (<html>), making it more predictable than em. It ensures consistent scaling across an entire web page, making it preferable for global typography settings. The % unit is relative to the parent container’s size, making it ideal for fluid layouts where elements adjust dynamically.

For example:

.container {
  width: 50%; /* Takes 50% of the parent container */
}
.text {
  font-size: 1.5rem; /* 1.5 times the root font size */
}

Code explanation:

Here, width: 50%; ensures flexibility, while 1.5rem keeps font sizing consistent across different sections of the website. Choosing the right unit depends on the design needs—rem for global consistency, em for relative scaling, px for fixed sizes, and % for fluid layouts.

7. Explain lazy loading and how it improves performance in web pages.

Lazy loading is a performance optimization technique where images, videos, and iframes load only when they are needed, rather than all at once. This reduces initial page load time, bandwidth usage, and memory consumption, making websites faster and more efficient. Without lazy loading, all assets load simultaneously, even if they are not immediately visible to the user. This leads to higher data consumption, slower rendering, and a poor user experience, especially on slow networks or mobile devices.

For example, instead of loading all images immediately, I can use the loading="lazy" attribute to defer their loading until they enter the viewport:

<img src="image.jpg" alt="Example Image" loading="lazy">

Code explanation:

In this example, the image loads only when the user scrolls near it, preventing unnecessary resource consumption. This technique is especially useful for long web pages, e-commerce sites, and blogs, as it ensures that only visible content is prioritized, enhancing user experience and reducing server load. By implementing lazy loading, I can make a web page load faster, improve SEO rankings, and conserve bandwidth, making it an essential practice for performance optimization.

8. What are CSS pseudo-classes and pseudo-elements?

CSS pseudo-classes and pseudo-elements are special selectors that allow me to apply styles to elements based on their state or a specific part of the element. A pseudo-class selects elements dynamically based on conditions like hover, focus, or position. For example, :hover applies styles when an element is hovered, :focus when an input field is selected, and :nth-child(n) targets specific children of a parent element. These classes help in interactive UI design, allowing me to style elements without JavaScript.

A pseudo-element allows styling a specific part of an element, such as ::before and ::after, which add extra content without modifying the HTML structure. Another example is ::first-letter, which styles the first letter of a paragraph.

Consider this example:

button:hover {
  background-color: blue;
  color: white;
}
p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

Code explanation:

Here, :hover changes the button’s color when hovered, while ::first-letter makes the first letter of a paragraph larger and bold, enhancing readability. These features allow dynamic and decorative styling without adding extra HTML elements, making them useful for modern UI/UX designs.

9. How does z-index work in CSS?

The z-index property controls the stacking order of elements on a web page. Elements with a higher z-index value appear in front of elements with lower values. By default, elements are stacked based on HTML structure, but z-index allows me to change their layering. It is commonly used for overlapping UI elements, such as modals, dropdown menus, tooltips, and sticky headers.

The z-index property only works on elements with position: relative;, absolute;, or fixed;. If no positioning is set, z-index has no effect.

Here’s an example:

.box1 {
  position: absolute;
  z-index: 2; /* This element appears on top */
}
.box2 {
  position: absolute;
  z-index: 1; /* This element appears below */
}

Code explanation:

In this case, .box1 appears above .box2 because it has a higher z-index value. If two elements have the same z-index, the one that appears later in the HTML is on top. Understanding z-index is crucial when working with complex UI layouts, ensuring that elements like modals and tooltips appear correctly over other content.

10. What are media queries, and how do they help in responsive design?

Media queries are a key feature of responsive design, allowing styles to adapt based on the device screen size, resolution, or orientation. This ensures a consistent user experience across different devices like desktops, tablets, and mobile phones. Without media queries, websites may look distorted on smaller screens, requiring users to zoom in or scroll horizontally, which affects usability.

A media query consists of a condition (such as screen width) and styles that apply when that condition is met.

For example:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Code explanation: Here, when the screen width is 768px or smaller, the .container changes to a column layout instead of a row. This technique is essential for making web pages mobile-friendly, improving usability, and ensuring that elements scale properly across different screen sizes. By using media queries effectively, I can create adaptive layouts that improve accessibility and user engagement, making my website look great on any device.

Front-End Questions ( JavaScript & React.js )

11. What is the difference between let, const, and var in JavaScript?

In JavaScript, var, let, and const are used for declaring variables, but they have key differences in scope, hoisting, and mutability. The var keyword has function scope, meaning it is only accessible within the function where it is declared. However, if used outside a function, it becomes globally scoped. This can lead to unexpected behavior because var variables can be re-declared and updated anywhere within the same scope. On the other hand, let has block scope, meaning it is restricted to the block {} where it is defined. This prevents issues caused by accidental re-declaration and makes the code more predictable.

The const keyword is similar to let in block scope, but it does not allow re-assignment after declaration. This makes const ideal for constants or values that should not change, such as configuration settings.

For example:

function testScope() {
  if (true) {
    var a = 10; 
    let b = 20; 
    const c = 30;
  }
  console.log(a); // 10 (Accessible due to function scope)
  console.log(b); // Error (b is block-scoped)
  console.log(c); // Error (c is block-scoped)
}
testScope();

Code Explanation:

In this example, var a is accessible outside the if block because var has function scope, whereas let b and const c cannot be accessed outside the block due to block scoping. The console.log(a) works fine, but attempting to access b or c results in an error. This illustrates why let and const are safer choices compared to var. The use of const ensures that variables remain unchanged, reducing accidental overwrites and improving code maintainability.

12. Explain event delegation and how it improves performance.

Event delegation is a technique where instead of adding event listeners to multiple child elements, I add a single event listener to a parent element. This works because of event bubbling, where an event propagates from the target element up to its ancestors. By handling events at the parent level, I reduce the number of event listeners, which improves performance and memory efficiency.

For example, in a dynamically generated list, adding listeners to each <li> element can be costly. Instead, I attach a single listener to the parent <ul> and detect which child was clicked:

document.getElementById("list").addEventListener("click", function(event) {
  if (event.target && event.target.matches("li")) {
    console.log("Clicked:", event.target.textContent);
  }
});

Code Explanation:

Here, instead of assigning an event listener to each <li>, I attach a single listener to the parent <ul>. When a click event occurs, event bubbling ensures that the event reaches the <ul>. The event.target property allows me to check if the clicked element is an <li>, preventing unwanted triggers. This method significantly improves efficiency, especially in scenarios where elements are dynamically added or removed. Event delegation is widely used in cases like infinite scrolling, form validation, and interactive tables.

13. What is the difference between synchronous and asynchronous JavaScript?

JavaScript is single-threaded, meaning it executes one task at a time. Synchronous JavaScript executes code line by line, blocking execution until the current task completes. This means if one function takes too long, the entire application becomes unresponsive. For example, if a script fetches data synchronously from an API, the browser freezes until the response arrives, leading to a bad user experience.

Asynchronous JavaScript, on the other hand, allows tasks to execute without blocking the main thread. This is achieved using callbacks, promises, and async/await. When an asynchronous task (such as an API call) is initiated, JavaScript continues executing other code instead of waiting.

Here’s an example:

console.log("Start");
setTimeout(() => console.log("Fetching Data…"), 2000);
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(response => response.json())
.then(data => console.log("Data:", data))
.catch(error => console.log("Error:", error));
console.log("End")

Code Explanation:

When this code runs, "Start" and "End" are logged first because JavaScript does not wait for asynchronous operations. The setTimeout function executes after 2 seconds, and fetch retrieves data from an API without blocking execution. The .then() method handles the response, and .catch() handles errors. This shows how asynchronous programming improves responsiveness, making applications faster and smoother.

14. How does JavaScript handle memory management and garbage collection?

JavaScript automatically manages memory through a process called garbage collection. When I create variables, objects, or functions, JavaScript allocates memory. However, if I don’t free up unused objects, memory leaks occur, slowing down performance. JavaScript’s garbage collector identifies and removes unreachable objects, reclaiming memory automatically.

Garbage collection uses an algorithm called mark-and-sweep. When an object is no longer referenced, the garbage collector marks it for deletion and removes it from memory.

Consider this example:

function createUser() {
  let user = { name: "Alice", age: 25 };
  console.log(user.name);
}
createUser(); // After function execution, 'user' becomes unreachable and is garbage collected

Code Explanation:

In this example, the user object exists inside the function. Once the function finishes executing, user is no longer accessible, so the garbage collector removes it from memory. JavaScript automatically handles memory cleanup, but circular references (e.g., objects referring to each other) can sometimes prevent garbage collection, causing memory leaks. To prevent this, I should manually nullify unused references and avoid unnecessary object retention.

15. What is debouncing and throttling in JavaScript?

Debouncing and throttling are optimization techniques used to control the frequency of function execution, particularly in response to events like scrolling, resizing, or keypresses. These techniques prevent performance issues caused by executing expensive functions too frequently.

Debouncing delays the execution of a function until a specified time has passed since the last event. It ensures that a function runs only after a pause in activity.

For example:

function debounce(func, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}
const searchInput = document.getElementById("search");
searchInput.addEventListener("input", debounce(() => console.log("Searching..."), 500));

Code Explanation:

In this example, the debounce function ensures that the "Searching..." message appears only after the user stops typing for 500ms. Each time an input event occurs, the timer resets, preventing frequent function execution. This method reduces unnecessary API calls, improving performance and user experience.

Throttling, on the other hand, ensures a function executes at most once in a given time period, no matter how many times the event occurs. This is useful for scroll events, drag-and-drop interactions, and API polling. Both techniques enhance performance by limiting unnecessary computations, making my applications more efficient and responsive.

16. Explain the concept of closures with an example.

A closure in JavaScript is a function that remembers the variables from its outer scope even after the outer function has executed. This happens because JavaScript uses lexical scoping, meaning a function can access variables declared in its outer scope. Closures are commonly used in callback functions, data hiding, and maintaining state between function calls.

Here’s an example of a closure:

function outerFunction(outerValue) {
  return function innerFunction(innerValue) {
    console.log(`Outer: ${outerValue}, Inner: ${innerValue}`);
  };
}
const closureExample = outerFunction("Hello");
closureExample("World"); // Output: Outer: Hello, Inner: World

Code Explanation:

In this example, outerFunction returns innerFunction, which still has access to outerValue even after outerFunction has finished executing. When closureExample("World") is called, innerFunction still remembers the value of outerValue. This behavior is useful for creating private variables and encapsulation, making closures a powerful feature in JavaScript.

17. What is the difference between null and undefined?

Both null and undefined represent the absence of a value in JavaScript, but they have distinct meanings. Undefined means a variable has been declared but has not been assigned a value. It is also the default return value for functions that do not return anything. Null, on the other hand, is an explicit assignment to indicate the absence of any object or value.

Here’s an example to illustrate the difference:

let a;
let b = null;
console.log(a); // undefined
console.log(b); // null
console.log(typeof a); // undefined
console.log(typeof b); // object

Code Explanation:

In this example, a is declared but not assigned, so it remains undefined. Meanwhile, b is explicitly set to null, meaning it has no value but is intentionally empty. The typeof operator shows that undefined is its own type, while null is considered an object due to a historical bug in JavaScript. Understanding this distinction helps in debugging and handling missing values properly.

18. How does the virtual DOM work in React.js?

In React.js, the Virtual DOM (VDOM) is a lightweight copy of the actual DOM that helps improve performance by reducing direct manipulations. Instead of updating the real DOM immediately, React creates a virtual representation and makes changes there first. After that, it compares the new VDOM with the previous version using diffing and updates only the necessary parts of the real DOM using reconciliation.

This process significantly improves performance because updating the real DOM is slow. React ensures that only the changed elements are updated instead of re-rendering the entire UI. For example:

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Code Explanation:

Here, when I click the button, only the <p> element displaying the count gets updated. React’s Virtual DOM detects that only the count has changed and efficiently updates just that part in the actual DOM. This approach enhances performance by minimizing expensive DOM operations.

19. Explain React Hooks and name a few important hooks.

React Hooks allow me to use state and lifecycle features in functional components without writing a class. Before hooks, I had to use class components for state management and lifecycle methods. Hooks simplify code and improve readability.

Some commonly used hooks include:

useState – Manages state in functional components.
useEffect – Handles side effects like fetching data or updating the DOM.
useContext – Provides a way to share values between components without passing props manually.
useReducer – Manages complex state logic similar to Redux.
useRef – Keeps a reference to an element or value without re-rendering.

Here’s an example using useState:

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Code Explanation:

Here, I use useState to create a state variable count. Clicking the button updates the count without needing a class component. Hooks make state management easier and reduce boilerplate code, making React development more efficient.

20. What is Redux, and how does it help manage state in React applications?

Redux is a state management library that helps manage global state in large React applications. Instead of passing props down multiple levels, Redux provides a centralized store where all components can access state directly. This makes managing complex application state easier.

Redux works on three principles:

1. Single source of truth – The entire application state is stored in a single object.
2. State is read-only – Components cannot modify the state directly; they must dispatch actions.
3. Changes happen through reducers – A pure function (reducer) updates the state based on dispatched actions.

Here’s a simple Redux example:

const initialState = { count: 0 };
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    default:
      return state;
  }
}
const store = Redux.createStore(counterReducer);
store.dispatch({ type: "INCREMENT" });
console.log(store.getState()); // { count: 1 }

Code Explanation:

Here, I define an initial state and a reducer function to handle state updates. The Redux.createStore function creates a store that holds the application state. When I dispatch an action (INCREMENT), Redux updates the state immutably and returns a new state object. Redux is useful for managing large-scale applications where state needs to be shared across multiple components without excessive prop drilling.

21. What are controlled and uncontrolled components in React?

In React, a form component can be either controlled or uncontrolled based on how the form data is managed. A controlled component is one where the state of the input fields is fully controlled by React state. I use the useState hook or component state to update the input values and handle user interactions. Controlled components provide better validation, consistency, and controlled updates but require more code to manage state.

An uncontrolled component, on the other hand, manages its own state using the DOM itself. Instead of relying on React state, I use refs to access and manipulate the input values. These components are simpler and useful when I need minimal React involvement, such as integrating third-party libraries. However, they provide less control over the form’s behavior.

Example of a controlled component:

function ControlledInput() {
  const [value, setValue] = React.useState("");
  return (
    <input value={value} onChange={(e) => setValue(e.target.value)} />
  );
}

Example of an uncontrolled component:

function UncontrolledInput() {
  const inputRef = React.useRef();
  return (
    <input ref={inputRef} />
  );
}

Code Explanation:

In the controlled component, the value is managed using React state and updated with onChange. In the uncontrolled component, the input’s value is not stored in React state, and I access it using a ref. Controlled components provide better form validation, while uncontrolled ones offer simplicity when I don’t need React to manage every input change.

22. How do you optimize performance in a React application?

Optimizing a React application is essential to ensure smooth rendering and efficient updates. The key areas where I focus on optimization include reducing unnecessary re-renders, optimizing component updates, and handling large lists efficiently.

Here are some techniques I use:

Memoization (React.memo) – Prevents unnecessary re-renders by caching the rendered output of components.
Using useCallback and useMemo – Optimizes functions and computations that don’t need to be recreated on every render.
Lazy loading (React.lazy) – Loads components only when needed, improving initial load time.
Virtualization (react-window or react-virtualized) – Renders only the visible portion of large lists, reducing DOM updates.
Efficient reconciliation – Using keys for dynamic lists helps React identify and update only the necessary components.

Example using React.memo:

const MemoizedComponent = React.memo(({ name }) => {
  console.log("Rendering...");
  return <p>Hello, {name}</p>;
});

Code Explanation:

Here, React.memo ensures that MemoizedComponent only re-renders if the name prop changes. This helps improve performance by avoiding unnecessary function executions. Using memoization, lazy loading, and efficient state management, I can significantly optimize my React application.

23. What is Server-Side Rendering (SSR), and how does it improve SEO?

Server-Side Rendering (SSR) is a technique where a React application’s HTML is generated on the server before being sent to the client. Instead of loading a blank HTML file and waiting for JavaScript to execute, the server sends a fully rendered page, which improves performance and SEO.

One of the biggest advantages of SSR is better SEO optimization. Search engines like Google prefer fully rendered pages, and SSR ensures that crawlers can read the page’s content without relying on JavaScript execution. This improves indexing and search ranking. Additionally, SSR provides faster initial page loads, improving the user experience.

Example using Next.js SSR:

export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return { props: { data } };
}
function Page({ data }) {
  return <div>{data.title}</div>;
}
export default Page;

Code Explanation:

Here, getServerSideProps fetches data on the server before rendering the page. This ensures that when a user requests the page, they receive fully rendered content, improving SEO and performance. SSR is especially useful for dynamic pages that rely on external APIs.

24. How does React handle re-renders, and how can you prevent unnecessary re-renders?

React re-renders components whenever their state or props change. This means that even if a minor state update occurs, React checks the component and its children for changes. While React’s Virtual DOM optimizes rendering, unnecessary re-renders can slow down performance.

To prevent unnecessary re-renders, I follow these techniques:

Using React.memo – Prevents a component from re-rendering unless its props change.
Using useCallback for functions – Ensures functions are not re-created on every render.
Using useMemo for computed values – Avoids expensive calculations on every render.
Avoiding unnecessary state updates – Updating state only when needed reduces re-renders.
Using React Profiler – Helps identify performance bottlenecks in component re-renders.

Example using useCallback:

const Parent = () => {
  const handleClick = React.useCallback(() => {
    console.log("Button clicked");
  }, []);
  return <Child onClick={handleClick} />;
};
const Child = React.memo(({ onClick }) => (
  <button onClick={onClick}>Click me</button>
));

Code Explanation:

In this example, handleClick is memoized using useCallback, preventing it from being re-created on every render. The Child component is wrapped in React.memo, so it only re-renders if its props change. These techniques help optimize performance and reduce unnecessary updates.

25. Explain the concept of Context API in React and how it compares to Redux.

The Context API is a built-in feature in React that allows me to share state between components without prop drilling. Instead of passing props manually through multiple layers, I can create a context and allow any component to consume it directly. This is useful for theme management, authentication, and global state management in smaller applications.

Redux, on the other hand, is a state management library that provides a centralized store and follows a strict structure with actions, reducers, and middleware. While the Context API is simple and best for lightweight state sharing, Redux is better for complex state logic that requires time-travel debugging, middleware, and predictable state updates.

Example using Context API:

const ThemeContext = React.createContext();
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  );
}
function Child() {
  const theme = React.useContext(ThemeContext);
  return <p>Current Theme: {theme}</p>;
}

Code Explanation:

Here, ThemeContext is created and provides a theme value to its children. The Child component uses useContext to consume the theme value without passing it through props. While Context API works well for small applications, Redux is better for large-scale state management requiring more structure and middleware support.

Back-End Questions( Node.js & Express.js )

26. What is the difference between CommonJS and ES6 modules?

In Node.js, modules are used to organize and reuse code. CommonJS (CJS) is the older module system, which uses require to import modules and module.exports to export them. It is synchronous, meaning that modules load one after another, which can slow down performance in some cases. CommonJS is still widely used in Node.js applications but lacks modern features like tree shaking.

On the other hand, ES6 modules (ECMAScript Modules – ESM) use the import and export syntax. Unlike CommonJS, ES6 modules are asynchronous, meaning they can be loaded dynamically and optimize performance in modern JavaScript applications. ES6 modules are the standard for modern front-end and back-end JavaScript, but Node.js requires "type": "module" in package.json to use them.

Example of CommonJS:

// Exporting
module.exports = function greet() {
  console.log("Hello, World!");
};
// Importing
const greet = require("./greet");
greet();

Example of ES6 Module:

// Exporting
export function greet() {
  console.log("Hello, World!");
}
// Importing
import { greet } from "./greet.js";
greet();

Code Explanation:

The CommonJS approach uses require and module.exports, while ES6 modules use import and export. ES6 modules are better optimized for modern JavaScript, especially when working with tools like Webpack and Babel.

27. How does Node.js handle asynchronous operations?

Node.js is designed to handle asynchronous operations using its event-driven, non-blocking I/O model. Instead of waiting for a task like reading a file or making an API call to finish, Node.js moves on to the next task and uses callbacks, promises, or async/await to handle the result later. This makes Node.js highly scalable and efficient for I/O-intensive applications.

There are three main ways I handle asynchronous operations in Node.js:

Callbacks – The traditional way, but it can lead to callback hell.
Promises – Provide a cleaner way to handle async operations with .then() and .catch().
Async/Await – A modern and more readable approach for handling asynchronous code.

Example using Async/Await:

const fs = require("fs").promises;
async function readFile() {
  try {
    const data = await fs.readFile("example.txt", "utf-8");
    console.log(data);
  } catch (error) {
    console.error("Error reading file", error);
  }
}
readFile();

Code Explanation:

Here, I use async/await to read a file asynchronously. The function does not block execution, making it more efficient. Node.js handles multiple async operations concurrently, making it perfect for real-time applications like chat apps and streaming services.

28. What is middleware in Express.js, and how does it work?

In Express.js, middleware is a function that runs between the request and response cycle. It allows me to modify the request or response, handle authentication, validate data, or log requests before reaching the final route handler. Middleware is essential for organizing Express applications and improving code maintainability.

Middleware functions take three parameters: req, res, and next. The next function passes control to the next middleware in the chain.

There are three main types of middleware:

Application-level middleware – Runs for every request in the application.
Router-level middleware – Applied to specific routes.
Error-handling middleware – Catches and handles errors.

Example of a simple middleware:

const express = require("express");
const app = express();
function logger(req, res, next) {
  console.log(`${req.method} ${req.url}`);
  next();
}
app.use(logger);
app.get("/", (req, res) => {
  res.send("Hello, World!");
});
app.listen(3000);

Code Explanation:

Here, the logger middleware logs each request and calls next(), allowing Express to proceed to the next function. Middleware is powerful for adding security, logging, and request processing in Express applications.

29. How does JWT (JSON Web Token) work in authentication?

JSON Web Token (JWT) is a method for secure authentication between a client and server. Instead of storing session data on the server, JWTs allow authentication without maintaining session state. A JWT consists of three parts: Header, Payload, and Signature. The server generates a JWT, sends it to the client, and the client includes it in subsequent requests for authentication.

JWTs work in three main steps:

1. User logs in – The server verifies credentials and generates a JWT.
2. JWT is sent to the client – The client stores it (usually in local storage or cookies).
3. Client sends JWT in requests – The server verifies the token to authenticate the user.

Example of generating a JWT in Node.js:

const jwt = require("jsonwebtoken");
const token = jwt.sign({ userId: 123 }, "secretKey", { expiresIn: "1h" });
console.log(token);

Code Explanation:

Here, I generate a JWT using jsonwebtoken, encoding user data with a secret key. The token is valid for 1 hour, after which the user needs to log in again. JWTs are widely used in stateless authentication for APIs and microservices.

30. What is the difference between REST and GraphQL?

REST and GraphQL are two ways to design APIs, but they differ in how they handle data fetching and flexibility. REST follows a fixed endpoint structure (/users, /products) and uses HTTP methods (GET, POST, PUT, DELETE). It can lead to over-fetching (getting too much data) or under-fetching (not getting enough data), requiring multiple requests.

GraphQL, on the other hand, provides a single endpoint where clients can request only the data they need. It allows flexible queries, reducing over-fetching and under-fetching. GraphQL uses a schema and resolvers to fetch and return data efficiently.

Example of a GraphQL query:

query {
  user(id: 1) {
    name
    email
  }
}

Code Explanation:

With GraphQL, I specify exactly what data I need, reducing unnecessary data transfer. REST is still widely used, but GraphQL is better for complex applications needing customized data fetching.

31. How do you handle error handling in Express.js?

In Express.js, I handle errors using middleware functions. When an error occurs in a route handler, I can pass it to the next middleware using next(error), and Express will forward it to an error-handling middleware. This middleware captures the error, logs it, and sends a proper response to the client. Error-handling middleware is placed at the end of all routes to catch unhandled errors.

A typical error-handling middleware in Express looks like this:

app.use((err, req, res, next) => {
  console.error(err.message);
  res.status(500).json({ error: "Internal Server Error" });
});

This middleware ensures that any unhandled errors don’t crash the server and instead return a proper response. I also use try-catch blocks in async/await functions to catch and handle errors gracefully.

32. What are streams in Node.js, and how do they work?

In Node.js, streams are a powerful way to handle large data efficiently. Instead of loading an entire file or response into memory, streams process data chunk by chunk, reducing memory usage. Streams follow an event-driven approach, making them perfect for reading files, network requests, or any large dataset.

There are four types of streams in Node.js:

Readable Streams – Used for reading data (fs.createReadStream).
Writable Streams – Used for writing data (fs.createWriteStream).
Duplex Streams – Read and write simultaneously (e.g., sockets).
Transform Streams – Modify data while passing through (e.g., compression).

Example of reading a file using streams:

const fs = require("fs");
const readStream = fs.createReadStream("largeFile.txt", "utf8");
readStream.on("data", (chunk) => {
  console.log("Received chunk:", chunk);
});

This example reads a large file in small chunks, preventing memory overload. I use streams to optimize file handling, API responses, and real-time data processing.

33. How does caching improve backend performance?

Caching improves backend performance by storing frequently accessed data in memory, reducing the need for repeated database queries or API calls. Instead of fetching data from a slow database, I can cache the response and serve it instantly. This reduces server load, improves response times, and enhances scalability.

There are different types of caching:

In-memory caching (e.g., Redis, Node.js cache) – Stores data in RAM for fast access.
Database query caching – Saves results of expensive queries.
CDN caching – Speeds up static assets like images and CSS files.

Example of using Redis for caching:

const redis = require("redis");
const client = redis.createClient();
client.set("user:123", JSON.stringify({ name: "John", age: 30 }), "EX", 3600);

Here, I cache a user’s data in Redis for one hour. This avoids hitting the database repeatedly, making the backend faster and more efficient.

34. What are the benefits of using TypeScript with Node.js?

Using TypeScript with Node.js improves code quality, reduces runtime errors, and makes development more efficient. TypeScript provides static typing, which helps catch errors during development instead of at runtime. It also improves code maintainability by enforcing strict types, making it easier to understand large codebases.

Some key benefits of TypeScript with Node.js:

Static Typing – Reduces bugs by checking types at compile time.
Better Code Organization – Supports interfaces and classes for structured development.
Improved Developer Experience – Provides better autocompletion and error detection.
Compatibility with JavaScript – Works with existing JavaScript code seamlessly.

Example of TypeScript in Node.js:

function greet(name: string): string {
  return `Hello, ${name}`;
}
console.log(greet("Alice"));

Here, I define a function with a strict type for the parameter and return value, preventing accidental type mismatches. TypeScript is a great choice for building large-scale, maintainable Node.js applications.

35. What is the purpose of CORS (Cross-Origin Resource Sharing), and how do you configure it?

CORS (Cross-Origin Resource Sharing) is a security feature in web browsers that controls which domains can access resources from a different origin. By default, browsers block cross-origin requests to prevent security vulnerabilities like cross-site request forgery (CSRF). If my frontend is running on http://localhost:3000 and the backend on http://api.example.com, the browser will block requests unless CORS is enabled.

To enable CORS in an Express.js application, I use the cors middleware:

const cors = require("cors");
app.use(cors());

For more control, I can specify allowed origins:

app.use(cors({ origin: "http://localhost:3000" }));

This allows only requests from localhost:3000. CORS is essential for allowing secure API access between different domains while preventing malicious cross-origin requests.

Back-End Questions ( Databases (MongoDB & SQL) )

36. What is the difference between SQL and NoSQL databases?

SQL and NoSQL databases serve different purposes. SQL databases are relational, meaning they store data in structured tables with predefined schemas. They follow ACID properties (Atomicity, Consistency, Isolation, Durability) to ensure data integrity. Popular SQL databases include MySQL, PostgreSQL, and Microsoft SQL Server.

On the other hand, NoSQL databases are non-relational and handle unstructured or semi-structured data. They provide flexibility by using document, key-value, column-family, or graph-based storage. NoSQL databases, like MongoDB and Cassandra, are schema-less, making them better suited for scalable and distributed applications. Unlike SQL, they emphasize high availability and horizontal scaling over strict consistency.

37. How does indexing improve database performance?

Indexing improves database performance by allowing faster data retrieval. Without indexes, a database searches every record sequentially (full table scan), which slows down queries. An index is like a lookup table that helps find data efficiently. Instead of scanning the entire table, the database searches the index, which significantly speeds up query execution.

In SQL databases, indexes can be created on one or multiple columns to enhance search operations. For example, in MySQL, I create an index like this:

CREATE INDEX idx_username ON users (username);

In MongoDB, I use indexes with collections like this:

db.users.createIndex({ username: 1 });

The SQL statement creates an index on the “username” column of the “users” table, improving lookup speed. The MongoDB command does the same by creating an index on the “username” field within a collection. This improves query performance by reducing the number of scanned documents. However, indexing increases the storage space and slightly slows down write operations.

38. Explain ACID properties in relational databases.

ACID properties ensure data consistency and reliability in relational databases. These properties define how transactions are handled to prevent data corruption, especially in multi-user environments.

Atomicity ensures a transaction is all-or-nothing. If any part fails, the entire transaction is rolled back.
Consistency guarantees the database remains in a valid state before and after a transaction.
Isolation ensures that concurrent transactions do not interfere with each other.
Durability guarantees that once a transaction is committed, it is permanently saved, even after a system failure.

For example, in MySQL, I use transactions like this:

START TRANSACTION;
UPDATE accounts SET balance = balance - 100 WHERE id = 1;
UPDATE accounts SET balance = balance + 100 WHERE id = 2;
COMMIT;

The transaction starts with START TRANSACTION. The first query deducts 100 from account 1, and the second query adds 100 to account 2. If all queries succeed, the changes are saved using COMMIT. If any query fails, a ROLLBACK can revert the changes to maintain data integrity.

39. How does MongoDB handle relationships compared to SQL databases?

In SQL databases, relationships are handled using joins between tables. For example, a user and their orders are stored in separate tables, linked by a foreign key. SQL databases enforce data integrity using constraints like PRIMARY KEY and FOREIGN KEY.

In MongoDB, relationships are managed using embedding or referencing. Embedding stores related data in the same document, which improves read performance but can lead to data duplication. Referencing links documents using ObjectIds, similar to foreign keys in SQL. Example of referencing in MongoDB:

{
  _id: ObjectId("user123"),
  name: "John Doe",
  orders: [ObjectId("order789"), ObjectId("order456")]
}

The document represents a user with a unique _id, and their orders are referenced using ObjectIds instead of embedding full order details. This approach minimizes data duplication and improves database normalization, making it easier to update related data across collections. While MongoDB lacks traditional joins, its aggregation pipeline can efficiently query relational data.

40. What are database transactions, and how do they work in SQL and NoSQL databases?

A database transaction is a sequence of operations that must be executed together as a unit. If any part fails, the transaction is rolled back to maintain data integrity. SQL databases fully support transactions using ACID properties, ensuring data remains consistent.

In SQL, I use transaction blocks to perform multiple queries safely:

START TRANSACTION;
UPDATE accounts SET balance = balance - 500 WHERE id = 1;
UPDATE accounts SET balance = balance + 500 WHERE id = 2;
COMMIT;

If any step fails, I can use ROLLBACK; to undo changes.

In NoSQL databases like MongoDB, transactions work differently. By default, MongoDB operations are atomic only at the document level. However, MongoDB 4.0 introduced multi-document transactions:

const session = db.getMongo().startSession();
session.startTransaction();
try {
  db.accounts.updateOne({ _id: 1 }, { $inc: { balance: -500 } }, { session });
  db.accounts.updateOne({ _id: 2 }, { $inc: { balance: 500 } }, { session });
  session.commitTransaction();
} catch (e) {
  session.abortTransaction();
}
session.endSession();

Code explanation: The code starts a MongoDB session, enabling transactions across multiple collections. The startTransaction() method begins a transaction. The updateOne() calls modify balances within the session. If all operations succeed, commitTransaction() saves changes. If any query fails, abortTransaction() ensures data consistency by rolling back changes.

41. What is sharding in MongoDB, and when would you use it?

Sharding in MongoDB is a method of horizontal scaling where data is distributed across multiple servers. It helps handle large datasets and high query loads by breaking data into smaller, manageable parts called shards. MongoDB uses a shard key to determine how documents are distributed. Each shard stores a subset of data, and a mongos router directs queries to the correct shard.

I use sharding when a single database server cannot handle the workload due to increasing data size or query traffic. For example, if an e-commerce application has millions of product listings, sharding helps distribute them across multiple servers, improving read and write performance. Without sharding, a single server might struggle with performance bottlenecks, causing slow queries and system crashes.

Example of enabling sharding in MongoDB:

// Enable sharding for a database
sh.enableSharding("ecommerceDB");

// Create a shard key for a collection
db.products.createIndex({ category: "hashed" });

// Shard the collection using the shard key
sh.shardCollection("ecommerceDB.products", { category: "hashed" });

This code enables sharding for the ecommerceDB database and creates an index on the category field to use it as a shard key. The shardCollection command distributes data across multiple shards based on the hashed value of the category, improving query performance and load distribution.

42. Explain the difference between denormalization and normalization.

Normalization is the process of organizing a database to reduce data redundancy and improve data integrity. It involves breaking large tables into smaller, related tables and using foreign keys to link them. This approach avoids duplicate data, making updates and deletions more efficient. However, it can slow down read operations because queries may require JOIN operations to fetch related data.

Denormalization, on the other hand, combines tables to reduce JOIN operations, improving read performance at the cost of data redundancy. Instead of normalizing an e-commerce database with separate orders and customers tables, I might store customer details within the orders table to make data retrieval faster. I use denormalization when read performance is more critical than storage efficiency, such as in analytics or reporting systems where queries need to return results quickly.

Example of normalization vs denormalization:

-- Normalized structure
CREATE TABLE customers (
    id INT PRIMARY KEY,
    name VARCHAR(100),
    email VARCHAR(100)
);

CREATE TABLE orders (
    order_id INT PRIMARY KEY,
    customer_id INT,
    total_amount DECIMAL(10,2),
    FOREIGN KEY (customer_id) REFERENCES customers(id)
);

-- Denormalized structure
CREATE TABLE orders_denormalized (
    order_id INT PRIMARY KEY,
    customer_name VARCHAR(100),
    customer_email VARCHAR(100),
    total_amount DECIMAL(10,2)
);

The normalized structure splits customer and order data into separate tables using foreign keys, ensuring data integrity. The denormalized structure embeds customer details within the orders table, reducing the need for JOINs but increasing redundancy.

43. How do you perform a JOIN operation in SQL?

A JOIN operation in SQL combines rows from two or more tables based on a related column. The most common types are INNER JOIN, LEFT JOIN, RIGHT JOIN, and FULL JOIN. INNER JOIN returns only matching rows, while LEFT JOIN includes all rows from the left table and matching rows from the right table.

For example, if I have customers and orders tables, I can use an INNER JOIN to retrieve customers with orders:

SELECT customers.name, customers.email, orders.order_id, orders.amount
FROM customers
INNER JOIN orders ON customers.id = orders.customer_id
WHERE orders.amount > 100
ORDER BY orders.amount DESC;

This query retrieves customers who have placed orders over $100, ordering them by amount in descending order. The INNER JOIN ensures that only matching records from both tables appear in the results.

Example of LEFT JOIN to get all customers, even those without orders:

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

This query returns all customers, even those without orders, by including NULL values for unmatched records in the orders table.

44. What is optimistic vs pessimistic locking in databases?

Optimistic locking and pessimistic locking are two approaches to handling concurrent database transactions. Optimistic locking assumes that conflicts are rare, allowing multiple transactions to read the same data. Before updating, the system checks whether another transaction has modified the data. If a conflict exists, it prevents the update. This approach works well for high-performance systems where collisions are minimal.
Pessimistic locking, in contrast, locks the data for a transaction, preventing others from modifying it until the lock is released. This ensures data consistency but can reduce performance due to waiting time. I use optimistic locking in applications where multiple users work on the same data but conflicts are uncommon, such as an online shopping cart. Pessimistic locking is better suited for critical financial transactions where data integrity is more important than speed.

Example of optimistic locking using versioning:

UPDATE products
SET price = 50, version = version + 1
WHERE id = 1 AND version = 2;

This query updates the product price only if the version matches the expected value, preventing conflicts when multiple users try to update the same record simultaneously.

Example of pessimistic locking:

BEGIN TRANSACTION;
SELECT * FROM products WHERE id = 1 FOR UPDATE;
UPDATE products SET price = 50 WHERE id = 1;
COMMIT;

The FOR UPDATE statement locks the selected row, preventing other transactions from modifying it until the current transaction commits, ensuring consistency in high-risk operations.

45. What is the purpose of an ORM (Object-Relational Mapping) tool?

An ORM tool allows developers to interact with databases using object-oriented programming instead of writing raw SQL queries. It maps database tables to objects in the application, making database operations more intuitive and reducing the need for repetitive SQL code.
For example, instead of writing SQL queries, I can use an ORM like Sequelize in Node.js to fetch users with a simple query:

const users = await User.findAll({
    where: { age: { [Op.gt]: 25 } },
    attributes: ['name', 'email'],
    order: [['name', 'ASC']]
});

This query retrieves users older than 25, selecting only their name and email fields and sorting them alphabetically. The ORM abstracts SQL complexities, making database interactions easier.

Example of inserting a new user using Sequelize ORM:

const newUser = await User.create({
    name: "John Doe",
    email: "john@example.com",
    age: 30
});
console.log(`User ${newUser.name} created successfully`);

This code inserts a new user into the database without writing raw SQL. The ORM automatically maps the object properties to database columns, simplifying database operations and reducing the risk of SQL injection attacks.

RESTful APIs & Other Technologies

46. What are HTTP methods, and how do they map to CRUD operations?

HTTP methods define how clients interact with a server, and they align with CRUD operations: Create, Read, Update, and Delete. The POST method is used to create resources, GET retrieves data, PUT updates an entire resource, PATCH modifies part of a resource, and DELETE removes data. These methods enable structured communication between clients and servers in RESTful APIs.
For example, when working with a user management system, I use POST to create a new user, GET to fetch user details, PUT to update the entire profile, and DELETE to remove the user. Proper use of HTTP methods ensures a well-structured API that follows best practices.

Example of CRUD operations using Express.js:

app.post("/users", (req, res) => { /* Create User */ });
app.get("/users/:id", (req, res) => { /* Read User */ });
app.put("/users/:id", (req, res) => { /* Update User */ });
app.delete("/users/:id", (req, res) => { /* Delete User */ });

This Express.js snippet maps HTTP methods to CRUD operations. POST adds a new user, GET retrieves user details, PUT updates existing user data, and DELETE removes a user. Using these methods correctly ensures that API endpoints remain structured and maintainable.

47. What are WebSockets, and how do they differ from REST APIs?

WebSockets provide a bi-directional, real-time communication channel between a client and a server. Unlike REST APIs, which rely on individual request-response cycles, WebSockets maintain a persistent connection. This makes them ideal for chat applications, real-time notifications, and live dashboards where frequent updates are required.
While REST APIs use stateless communication, WebSockets establish a stateful connection, reducing latency and improving performance for dynamic applications. For example, in a stock trading app, I use WebSockets to stream live price updates, ensuring that users see real-time changes instantly.

Example of a simple WebSocket server using Node.js:

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', ws => {
    ws.on('message', message => console.log(`Received: ${message}`));
    ws.send('Welcome to WebSocket server');
});

This WebSocket server listens on port 8080, establishes a connection with clients, and allows bi-directional communication. When a client sends a message, the server logs it and responds with a welcome message. Unlike REST APIs, WebSockets enable continuous, low-latency interactions.

48. How do you implement authentication and authorization in a full-stack application?

Authentication verifies a user’s identity, while authorization controls what they can access. I commonly use JWT (JSON Web Token) authentication for full-stack applications, where a token is issued upon login and used for subsequent requests. For secure authentication, I store hashed passwords using bcrypt and validate user credentials before issuing a token.
Authorization ensures that users can only access allowed resources. For example, in an e-commerce app, an admin can manage products, while a regular user can only view them. Role-based access control (RBAC) is often implemented using middleware in frameworks like Express.js.

-Example of JWT authentication in Node.js:

const jwt = require('jsonwebtoken');
app.post('/login', (req, res) => {
    const user = { id: 1, username: req.body.username };
    const token = jwt.sign(user, 'secretKey', { expiresIn: '1h' });
    res.json({ token });
});

This snippet generates a JWT token for authenticated users. After a successful login, the server signs a JWT with the user’s details and a secret key, setting an expiration time. Clients use this token to authenticate future requests, ensuring secure and stateless authentication.

49. What is Docker, and how does it help in deploying applications?

Docker is a containerization tool that packages applications and their dependencies into lightweight, portable containers. Unlike traditional deployments, where I install software separately on different environments, Docker ensures consistency across development, testing, and production. It eliminates the “works on my machine” problem by encapsulating everything an application needs to run.
With Docker, I can define the entire environment in a Dockerfile, making it easy to deploy applications anywhere. For example, I use Docker to containerize a Node.js application and run it on any server without worrying about dependency issues.

Example of a simple Dockerfile for a Node.js app:

FROM node:18
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
CMD ["node", "server.js"]
EXPOSE 3000

This Dockerfile starts with a Node.js base image, sets up a working directory, copies dependencies, and runs the application. CMD specifies the command to start the server, while EXPOSE makes port 3000 available. This setup ensures seamless deployment across different environments.

50. How do you scale a full-stack application for high traffic and performance?

To handle high traffic, I use load balancing, caching, database optimization, and horizontal scaling. Load balancers distribute incoming requests across multiple servers, preventing overload. Caching with Redis or CDN reduces response time by serving frequently requested data without hitting the database.
For database scaling, I use read replicas for heavy read operations and sharding for large datasets. Backend performance is improved with asynchronous processing, message queues (e.g., RabbitMQ, Kafka), and microservices architecture. Frontend optimizations include lazy loading, code splitting, and minimizing HTTP requests.

Example of using Nginx as a load balancer:

server {
    listen 80;
    location / {
        proxy_pass http://backend_servers;
    }
}

This configuration forwards client requests to multiple backend servers, distributing traffic efficiently. Load balancing prevents a single server from being overwhelmed and ensures high availability and scalability of the application.