Top 50 Full Stack Developer Interview Questions & Answers for Freshers (2026)

Top 50 Full Stack Developer Interview Questions & Answers for Freshers (2026)

You have spent months learning HTML, CSS, JavaScript, React, Node.js, and databases. You have built projects. Your resume is ready. And now you have your first full stack developer interview scheduled.

The panic sets in. What will they ask? How deep will they go? Will they make me code on a whiteboard?

I have helped hundreds of freshers prepare for and clear their first developer interviews at companies across India — from Lucknow startups to Bangalore product companies. After watching students succeed and fail in real interviews, I know exactly which questions come up again and again, and more importantly, what interviewers actually want to hear.

This is not a generic list copied from the internet. Every question here has been asked in real fresher-level full stack interviews at Indian companies in 2025-2026. I have organized them by topic and round, so you can prepare systematically instead of randomly.

How Full Stack Developer Interviews Are Structured for Freshers

Before jumping into questions, understand the typical interview structure. Most companies follow this pattern for fresher roles:

Round	What They Test	Duration
Round 1: Online Assessment	Basic coding + MCQs on HTML/CSS/JS	60-90 minutes
Round 2: Technical Interview 1	Frontend fundamentals + problem solving	45-60 minutes
Round 3: Technical Interview 2	Backend, databases, and system design basics	45-60 minutes
Round 4: Practical/Live Coding	Build a small feature or debug code	30-60 minutes
Round 5: HR/Culture Fit	Behavioral questions + salary discussion	20-30 minutes

Not every company runs all five rounds. Startups might combine rounds 2 and 3 into one. Service companies often skip the practical round. But this is the general framework you should prepare for.

Important: Companies hiring freshers do NOT expect you to know everything. They are evaluating your fundamentals, your ability to think logically, and your willingness to learn. A candidate who says "I do not know this, but here is how I would approach figuring it out" will always score higher than someone who bluffs.

---

Section 1: HTML & CSS Questions (Asked in Almost Every Interview)

These seem basic, but they eliminate more freshers than you would expect. Interviewers use these to check if you actually understand what you have been writing, or if you just copy-pasted from tutorials.

Q1. What is the difference between div and span?

Answer: div is a block-level element — it takes up the full width available and starts on a new line. span is an inline element — it only takes up as much width as its content and does not break the line.

When to use each: Use div for layout sections (headers, cards, containers). Use span for styling a small piece of text within a paragraph, like highlighting a word.

<!-- div takes full width -->
<div>This is a block element</div>

<!-- span stays inline -->
<p>This is <span style="color: red;">highlighted</span> text</p>

What interviewers are really checking: Whether you understand the CSS box model and how elements flow on a page.

Q2. What is the CSS Box Model? Explain each part.

Answer: Every HTML element is a rectangular box with four layers:

1. Content — The actual text, image, or child elements
2. Padding — Space between the content and the border (inside the element)
3. Border — The visible boundary around the element
4. Margin — Space outside the border (between this element and others)

.box {
  width: 200px;        /* content width */
  padding: 20px;       /* space inside */
  border: 2px solid;   /* visible border */
  margin: 10px;        /* space outside */
  /* Total width = 200 + 20*2 + 2*2 + 10*2 = 264px */
}

Pro tip: Mention box-sizing: border-box — it makes width include padding and border, which is how most modern CSS frameworks work. This shows the interviewer you have real coding experience, not just textbook knowledge.

Q3. What is Flexbox? How is it different from Grid?

Answer: Both are CSS layout systems, but they solve different problems.

Flexbox is one-dimensional — it arranges items in a single row or column. Best for navigation bars, card rows, or centering content.

Grid is two-dimensional — it arranges items in both rows and columns simultaneously. Best for page layouts, dashboards, or any design that needs a structured grid.

/* Flexbox - items in a row */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Grid - items in rows AND columns */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: 60px 1fr;
  gap: 16px;
}

Interview tip: If they ask "which one should you use?", the correct answer is "it depends on the layout requirement." Use Flexbox for components, Grid for page-level layouts. Using both together is common and shows maturity.

Q4. What is the difference between position: relative, absolute, fixed, and sticky?

Answer:

Position	Behavior
relative	Stays in normal flow but can be offset with top/left/right/bottom. Creates a positioning context for absolute children.
absolute	Removed from normal flow. Positioned relative to nearest positioned ancestor (or the viewport if none exists).
fixed	Removed from normal flow. Positioned relative to the viewport. Stays in place when scrolling.
sticky	Behaves like relative until the element reaches a scroll threshold, then behaves like fixed.

Real-world example: A sticky header that stays at the top when you scroll down — that is position: sticky; top: 0;. A modal overlay uses position: fixed to cover the entire screen regardless of scroll position.

Q5. What is semantic HTML? Why does it matter?

Answer: Semantic HTML means using elements that describe their content's meaning, not just its appearance.

<!-- Non-semantic (bad) -->
<div class="header">
  <div class="nav">...</div>
</div>

<!-- Semantic (good) -->
<header>
  <nav>...</nav>
</header>

Why it matters:

• Accessibility: Screen readers use semantic tags to help visually impaired users navigate. An <nav> tells a screen reader "this is the navigation menu."
• SEO: Search engines understand semantic HTML better, which can improve rankings.
• Code readability: <article> is more meaningful than <div class="article"> when reading code.

---

Section 2: JavaScript Questions (The Most Important Section)

JavaScript questions make or break fresher interviews. This is where interviewers separate candidates who truly understand the language from those who only watched tutorials.

Q6. What is the difference between var, let, and const?

Answer:

Feature	var	let	const
Scope	Function-scoped	Block-scoped	Block-scoped
Hoisting	Hoisted (initialized as undefined)	Hoisted (but in temporal dead zone)	Hoisted (but in temporal dead zone)
Reassignment	Yes	Yes	No
Redeclaration	Yes	No	No

// var is function-scoped - leaks out of blocks
if (true) {
  var x = 10;
}
console.log(x); // 10 - accessible outside the block

// let is block-scoped - stays inside the block
if (true) {
  let y = 10;
}
console.log(y); // ReferenceError

// const cannot be reassigned
const z = 10;
z = 20; // TypeError

What to say in the interview: "In modern JavaScript, I use const by default and only switch to let when I need to reassign a value. I avoid var entirely because block scoping is more predictable."

Q7. Explain closures with an example.

Answer: A closure is when a function remembers and can access variables from its outer scope, even after the outer function has finished executing.

function createCounter() {
  let count = 0; // This variable is "closed over"

  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

The inner function still has access to count even though createCounter() has already returned. The variable count is not destroyed — it lives on in the closure.

Real-world use case: Closures are used in React hooks (useState uses closures internally), event handlers, and module patterns where you want to keep some data private.

Q8. What is the difference between == and ===?

Answer: == (loose equality) converts types before comparing. === (strict equality) compares both value and type without conversion.

console.log(5 == "5");    // true - string "5" is converted to number
console.log(5 === "5");   // false - different types
console.log(null == undefined);  // true - special case
console.log(null === undefined); // false

Always use === in production code. Type coercion with == leads to subtle bugs. The only acceptable use of == is checking for null or undefined simultaneously: if (value == null).

Q9. What are Promises? How do async/await work?

Answer: A Promise represents a value that might not be available yet but will be resolved (or rejected) in the future.

// Creating a Promise
function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: "Rahul" });
      } else {
        reject(new Error("Invalid ID"));
      }
    }, 1000);
  });
}

// Using .then/.catch
fetchUser(1)
  .then(user => console.log(user))
  .catch(error => console.error(error));

// Using async/await (cleaner syntax for the same thing)
async function getUser() {
  try {
    const user = await fetchUser(1);
    console.log(user);
  } catch (error) {
    console.error(error);
  }
}

Key point: async/await is syntactic sugar over Promises. It makes asynchronous code look synchronous, which is easier to read and debug. Under the hood, it is still using Promises.

Q10. What is the event loop in JavaScript?

Answer: JavaScript is single-threaded — it can only do one thing at a time. The event loop is the mechanism that allows JavaScript to handle asynchronous operations without blocking.

Here is the simplified flow:

1. Call Stack — Executes synchronous code, one function at a time
2. Web APIs — Browser handles async tasks (setTimeout, fetch, DOM events) in the background
3. Callback Queue — When an async task completes, its callback is placed in the queue
4. Event Loop — Continuously checks: "Is the call stack empty? If yes, take the next callback from the queue and push it to the stack."

console.log("1");           // Runs immediately (call stack)

setTimeout(() => {
  console.log("2");         // Goes to Web API, then callback queue
}, 0);

console.log("3");           // Runs immediately (call stack)

// Output: 1, 3, 2
// Even with 0ms timeout, "2" prints last because
// the event loop waits for the call stack to be empty

Why this matters: Understanding the event loop explains why setTimeout(fn, 0) does not run immediately, why you cannot block the main thread with heavy computation, and how Node.js handles thousands of concurrent requests with a single thread.

Q11. What is the difference between map(), filter(), and reduce()?

Answer: All three are array methods that return a new array (except reduce, which returns any value).

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

// map - transforms each element
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

// filter - keeps elements that pass a test
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4]

// reduce - accumulates into a single value
const sum = numbers.reduce((total, n) => total + n, 0);
// 15

Real interview follow-up: "Can you implement map using reduce?" This is a common follow-up that tests deeper understanding:

function customMap(arr, fn) {
  return arr.reduce((result, item, index) => {
    result.push(fn(item, index));
    return result;
  }, []);
}

Q12. What is this keyword in JavaScript?

Answer: this refers to the object that is calling the function. Its value depends on how the function is called, not where it is defined.

const user = {
  name: "Priya",
  greet() {
    console.log(this.name); // "Priya" - this = user object
  }
};

user.greet(); // "Priya"

const greetFn = user.greet;
greetFn(); // undefined - this = window (or undefined in strict mode)

Arrow functions do not have their own this — they inherit this from their enclosing scope. This is why arrow functions are used in React event handlers:

// In a React component
handleClick = () => {
  // Arrow function inherits 'this' from the class instance
  this.setState({ clicked: true });
};

Q13. What is event delegation?

Answer: Event delegation is a pattern where you attach a single event listener to a parent element instead of individual listeners to each child. It works because events bubble up through the DOM.

// Instead of adding click listeners to 100 list items:
document.querySelector("ul").addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log("Clicked:", event.target.textContent);
  }
});

Why it matters:

• Performance — One listener instead of hundreds
• Dynamic elements — Works for elements added after the listener was attached
• Memory — Fewer event listeners means less memory usage

This is how React's event system works internally — it uses event delegation at the root level.

---

Section 3: React Questions (Most Asked Frontend Framework)

If you are applying for full stack roles in 2026, you will almost certainly be asked about React. These questions come up repeatedly in interviews.

Q14. What is the Virtual DOM? Why does React use it?

Answer: The Virtual DOM is a lightweight JavaScript object that is a copy of the real DOM. When state changes, React:

1. Creates a new Virtual DOM tree
2. Compares it with the previous one (this is called "diffing")
3. Calculates the minimum set of changes needed
4. Updates only those specific parts of the real DOM

Why? Direct DOM manipulation is slow. By batching and minimizing real DOM updates, React makes UI updates significantly faster.

Interview follow-up: "Is the Virtual DOM always faster than direct DOM manipulation?" The honest answer is no — for very simple updates, direct DOM manipulation can be faster. The Virtual DOM's advantage shows up in complex UIs with frequent updates, where manually tracking what needs to change would be error-prone and slow.

Q15. What is the difference between state and props?

Answer:

Feature	State	Props
Owned by	The component itself	The parent component
Mutable?	Yes (via setState/useState)	No (read-only)
Purpose	Internal data that changes over time	Data passed from parent to child
Triggers re-render?	Yes, when updated	Yes, when parent passes new values

// Props - passed from parent
function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

// State - managed internally
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Key principle: Data flows down (parent to child via props). Events flow up (child to parent via callback functions).

Q16. Explain React hooks — useState, useEffect, useContext.

Answer:

useState — Adds state to functional components.

const [value, setValue] = useState(initialValue);

useEffect — Runs side effects (API calls, subscriptions, DOM manipulation) after render.

useEffect(() => {
  // Runs after every render
  fetchData();
}, []); // Empty array = runs only once (on mount)

useEffect(() => {
  // Runs when 'userId' changes
  fetchUser(userId);
}, [userId]); // Dependency array

useEffect(() => {
  const timer = setInterval(tick, 1000);
  return () => clearInterval(timer); // Cleanup function
}, []);

useContext — Accesses shared data without passing props through every level.

const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext); // "dark"
  return <button className={theme}>Click</button>;
}

Q17. What is the difference between controlled and uncontrolled components?

Answer:

Controlled — Form data is handled by React state. Every keystroke updates state, and the input value comes from state.

function ControlledForm() {
  const [email, setEmail] = useState("");
  return <input value={email} onChange={e => setEmail(e.target.value)} />;
}

Uncontrolled — Form data is handled by the DOM itself. You read values using refs when needed.

function UncontrolledForm() {
  const inputRef = useRef();
  const handleSubmit = () => console.log(inputRef.current.value);
  return <input ref={inputRef} />;
}

When to use which: Controlled components are preferred in most cases because they give you full control over form behavior (validation, formatting, conditional disabling). Uncontrolled components are useful for simple forms or when integrating with non-React libraries.

Q18. What is useCallback and useMemo? When should you use them?

Answer: Both are performance optimization hooks.

useMemo — Memoizes a computed value. Recalculates only when dependencies change.

const expensiveResult = useMemo(() => {
  return heavyCalculation(data);
}, [data]);

useCallback — Memoizes a function reference. Returns the same function instance unless dependencies change.

const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

When to use: Do NOT use them everywhere — they add overhead. Use them when:

• A child component wrapped in React.memo receives the function/value as a prop
• The computation is genuinely expensive (not a simple calculation)
• You are seeing actual performance issues in profiling

What interviewers want to hear: That you understand premature optimization is bad and these hooks have a cost. Using them everywhere is a red flag, not a sign of good practice.

Q19. How does React Router work?

Answer: React Router enables client-side navigation — changing the URL and rendering different components without a full page reload.

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:id" element={<UserProfile />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

Key concepts:

• BrowserRouter uses the HTML5 History API for clean URLs
• useParams() extracts dynamic route parameters (:id)
• useNavigate() programmatically navigates to routes
• <Link> prevents full page reload (unlike <a> tags)

---

Section 4: Node.js & Backend Questions

Q20. What is Node.js? How is it different from browser JavaScript?

Answer: Node.js is a JavaScript runtime built on Chrome's V8 engine that allows JavaScript to run outside the browser — primarily on servers.

Feature	Browser JS	Node.js
DOM access	Yes	No
File system access	No	Yes (fs module)
Window/Document	Available	Not available
Global object	window	global / globalThis
Modules	ES modules, script tags	CommonJS + ES modules
Use case	Frontend UI	Backend APIs, scripts, tools

Why Node.js is popular for full stack: You use the same language (JavaScript) on both frontend and backend, which reduces context switching and allows code sharing.

Q21. What is Express.js? Write a basic REST API.

Answer: Express is a minimal web framework for Node.js that makes it easy to build APIs and web applications.

const express = require("express");
const app = express();

app.use(express.json()); // Parse JSON request bodies

// GET - Fetch all users
app.get("/api/users", (req, res) => {
  res.json([
    { id: 1, name: "Amit" },
    { id: 2, name: "Sneha" }
  ]);
});

// GET - Fetch single user
app.get("/api/users/:id", (req, res) => {
  const userId = parseInt(req.params.id);
  // Find user logic here
  res.json({ id: userId, name: "Amit" });
});

// POST - Create user
app.post("/api/users", (req, res) => {
  const { name, email } = req.body;
  // Save to database logic here
  res.status(201).json({ id: 3, name, email });
});

// PUT - Update user
app.put("/api/users/:id", (req, res) => {
  const { name } = req.body;
  res.json({ id: req.params.id, name });
});

// DELETE - Remove user
app.delete("/api/users/:id", (req, res) => {
  res.status(204).send();
});

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

Q22. What is middleware in Express? Give examples.

Answer: Middleware is a function that runs between receiving a request and sending a response. It has access to the request object, response object, and the next() function to pass control to the next middleware.

// Custom logging middleware
function logger(req, res, next) {
  console.log(`${req.method} ${req.url} at ${new Date().toISOString()}`);
  next(); // Pass control to the next middleware
}

// Authentication middleware
function authenticate(req, res, next) {
  const token = req.headers.authorization;
  if (!token) {
    return res.status(401).json({ error: "No token provided" });
  }
  // Verify token logic here
  req.user = decodedUser;
  next();
}

// Apply middleware
app.use(logger); // Runs on every request
app.use("/api/protected", authenticate); // Runs only on /api/protected routes

Common built-in/third-party middleware: express.json() (parse JSON), cors() (enable cross-origin requests), helmet() (security headers), morgan() (HTTP logging).

Q23. What is the difference between REST API and GraphQL?

Answer:

Feature	REST	GraphQL
Endpoints	Multiple (one per resource)	Single endpoint
Data fetching	Fixed response structure	Client specifies exactly what data it needs
Over-fetching	Common (you get all fields)	No (you request only needed fields)
Under-fetching	Common (multiple requests needed)	No (get related data in one query)
Caching	Easy (HTTP caching)	More complex
Learning curve	Lower	Higher

When to use REST: Most applications, especially when your data model maps cleanly to resources and you want simplicity.

When to use GraphQL: When frontends need flexible data fetching, when you have many related resources, or when different clients (web, mobile) need different data shapes from the same API.

Fresher tip: Most Indian companies still use REST APIs. Know REST thoroughly and have basic awareness of GraphQL.

Q24. What is JWT authentication? How does it work?

Answer: JWT (JSON Web Token) is a token-based authentication mechanism that allows stateless authentication.

Flow:

1. User sends login credentials (email + password)
2. Server verifies credentials and creates a JWT containing user info
3. Server sends JWT back to the client
4. Client stores JWT (usually in localStorage or httpOnly cookie)
5. Client sends JWT in the Authorization header with every subsequent request
6. Server verifies the JWT and processes the request

const jwt = require("jsonwebtoken");

// Login - Create token
app.post("/api/login", async (req, res) => {
  const { email, password } = req.body;
  const user = await User.findOne({ email });

  if (!user || !await bcrypt.compare(password, user.password)) {
    return res.status(401).json({ error: "Invalid credentials" });
  }

  const token = jwt.sign(
    { userId: user._id, email: user.email },
    process.env.JWT_SECRET,
    { expiresIn: "24h" }
  );

  res.json({ token });
});

// Protected route - Verify token
function authMiddleware(req, res, next) {
  const token = req.headers.authorization?.split(" ")[1];

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (error) {
    res.status(401).json({ error: "Invalid token" });
  }
}

JWT structure: Header (algorithm) + Payload (user data) + Signature (verification). The three parts are Base64-encoded and separated by dots.

Q25. What is CORS? Why does it happen and how do you fix it?

Answer: CORS (Cross-Origin Resource Sharing) is a browser security feature that blocks requests from one origin (domain) to another unless the server explicitly allows it.

When it happens: Your React app runs on localhost:3000 and your API runs on localhost:5000. The browser blocks the request because the origins (ports) are different.

How to fix in Express:

const cors = require("cors");

// Allow all origins (development only)
app.use(cors());

// Allow specific origin (production)
app.use(cors({
  origin: "https://yourfrontend.com",
  methods: ["GET", "POST", "PUT", "DELETE"],
  credentials: true
}));

What interviewers want to hear: That CORS is a browser-level security feature (not a server error), that it exists to prevent malicious websites from making requests to your API on behalf of users, and that the fix involves server-side headers, not frontend hacks.

---

Section 5: Database Questions (MongoDB & SQL)

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

Answer:

Feature	SQL (MySQL, PostgreSQL)	NoSQL (MongoDB)
Data model	Tables with rows and columns	Documents (JSON-like), key-value, graph
Schema	Fixed schema (defined upfront)	Flexible schema (can vary per document)
Relationships	JOINs across tables	Embedded documents or references
Scaling	Vertical (bigger server)	Horizontal (more servers)
Best for	Complex relationships, transactions	Rapid development, flexible data, scale
Query language	SQL	Database-specific (MongoDB uses MQL)

When to use SQL: Banking, e-commerce, ERP systems — anywhere data integrity and complex relationships are critical.

When to use MongoDB: Prototyping, content management, real-time analytics, applications where the data structure evolves frequently.

Q27. Write basic MongoDB CRUD operations with Mongoose.

Answer:

const mongoose = require("mongoose");

// Define schema and model
const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  age: Number,
  createdAt: { type: Date, default: Date.now }
});

const User = mongoose.model("User", userSchema);

// CREATE
const newUser = await User.create({
  name: "Rahul",
  email: "[email protected]",
  age: 22
});

// READ
const allUsers = await User.find();
const oneUser = await User.findById("65abc123...");
const filtered = await User.find({ age: { $gte: 21 } });

// UPDATE
await User.findByIdAndUpdate("65abc123...", { name: "Rahul Kumar" });

// DELETE
await User.findByIdAndDelete("65abc123...");

Q28. What are indexes in databases? Why are they important?

Answer: An index is a data structure that speeds up data retrieval — similar to an index in a book that helps you find a topic without reading every page.

// MongoDB - Create an index on the email field
userSchema.index({ email: 1 }); // 1 = ascending

// Without index: MongoDB scans every document (slow on large collections)
// With index: MongoDB uses the index to jump directly to matching documents

Trade-offs:

• Indexes speed up reads but slow down writes (because the index must be updated on every insert/update)
• Indexes use additional storage space
• You should index fields that are frequently queried, sorted, or used in filters

Pro answer: "I would index fields that appear in find() queries, sort() operations, and fields used in $lookup (joins). But I would avoid over-indexing because each index adds write overhead."

Q29. What is the difference between findOne() and find() in MongoDB?

Answer:

• find() returns a cursor (which resolves to an array of all matching documents)
• findOne() returns the first matching document (or null)

// Returns array of all users named Rahul
const users = await User.find({ name: "Rahul" });

// Returns only the first matching user
const user = await User.findOne({ name: "Rahul" });

When to use each: Use findOne() when you expect a single result (finding by email, username, or ID). Use find() when you need multiple results (listing all users, filtering by criteria).

---

Section 6: Git & Version Control Questions

Q30. What is Git? What is the difference between Git and GitHub?

Answer:

• Git is a version control system — software that tracks changes to your code over time. It runs locally on your computer.
• GitHub is a cloud platform that hosts Git repositories online, enabling collaboration, code review, and project management.

Analogy: Git is like a diary where you record your daily activities. GitHub is like a cloud backup service where you store your diary and share it with friends.

Q31. What is the difference between git merge and git rebase?

Answer: Both integrate changes from one branch into another, but they do it differently.

Merge creates a new "merge commit" that combines both branches. The history shows two parallel branches joining.

Rebase moves your commits to the tip of the target branch, creating a linear history as if you wrote your changes after everything on the target branch.

# Merge - preserves branch history
git checkout main
git merge feature

# Rebase - creates linear history
git checkout feature
git rebase main

When to use merge: On shared branches (main, develop) or when you want to preserve the history of when branches were created and merged.

When to use rebase: On local/personal branches before merging, to keep a clean, linear commit history.

Q32. How do you resolve a merge conflict?

Answer: Merge conflicts happen when two branches modify the same line in a file.

<<<<<<< HEAD
const greeting = "Hello, World!";
=======
const greeting = "Hi, World!";
>>>>>>> feature-branch

Steps to resolve:

1. Open the conflicted file
2. Decide which change to keep (or combine both)
3. Remove the conflict markers (<<<<<<<, =======, >>>>>>>)
4. Stage the resolved file with git add
5. Complete the merge with git commit

Interview tip: Mention that you use VS Code's built-in merge conflict resolver or Git tools to visualize and resolve conflicts — it shows practical experience.

---

Section 7: System Design Basics (Asked at Better Companies)

Freshers are not expected to design Netflix. But basic system design questions test whether you can think beyond individual functions and understand how pieces fit together.

Q33. How would you design a URL shortener (like bit.ly)?

Answer:

Core requirements:

• Input: long URL → Output: short URL
• Redirecting short URL takes user to original URL
• Each short URL is unique

High-level approach:

User → POST /shorten { url: "https://very-long-url.com/..." }
     ← { shortUrl: "https://short.ly/abc123" }

User → GET /abc123
     ← 301 Redirect to https://very-long-url.com/...

Database schema:

{
  shortCode: "abc123",     // Unique identifier
  originalUrl: "https://...",
  createdAt: Date,
  clicks: 0               // Optional analytics
}

Key decisions:

• Generating short codes: Use a counter + Base62 encoding, or generate random strings and check for collisions
• Database: Index on shortCode for fast lookups
• Caching: Use Redis to cache frequently accessed URLs
• Scaling: Read-heavy system (many more redirects than creates), so optimize for reads

Q34. Explain the request-response cycle when a user types a URL in the browser.

Answer:

1. DNS Resolution: Browser asks DNS server to convert domain name (google.com) to IP address (142.250.190.78)
2. TCP Connection: Browser establishes a TCP connection with the server (3-way handshake)
3. TLS Handshake: If HTTPS, a secure connection is established
4. HTTP Request: Browser sends GET request with headers (User-Agent, Accept, Cookies)
5. Server Processing: Server receives request, runs application logic, queries database if needed
6. HTTP Response: Server sends back status code (200 OK), headers, and body (HTML)
7. Rendering: Browser parses HTML, requests CSS/JS/images, builds DOM tree, applies styles, and paints the page

Follow-up points: Mention browser caching (304 Not Modified), CDNs (serve static files from geographically closer servers), and connection keep-alive (reusing TCP connections for multiple requests).

---

Section 8: Coding Challenges (Live Coding Round)

These are actual coding problems asked in fresher full stack interviews. Practice writing these without any IDE help.

Q35. Reverse a string without using built-in reverse methods.

function reverseString(str) {
  let reversed = "";
  for (let i = str.length - 1; i >= 0; i--) {
    reversed += str[i];
  }
  return reversed;
}

console.log(reverseString("hello")); // "olleh"

Q36. Check if a string is a palindrome.

function isPalindrome(str) {
  const cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, "");
  let left = 0;
  let right = cleaned.length - 1;

  while (left < right) {
    if (cleaned[left] !== cleaned[right]) return false;
    left++;
    right--;
  }
  return true;
}

console.log(isPalindrome("A man, a plan, a canal: Panama")); // true

Q37. Find the largest and second largest number in an array.

function findTwoLargest(arr) {
  let largest = -Infinity;
  let second = -Infinity;

  for (const num of arr) {
    if (num > largest) {
      second = largest;
      largest = num;
    } else if (num > second && num !== largest) {
      second = num;
    }
  }

  return { largest, second };
}

console.log(findTwoLargest([12, 35, 1, 10, 34, 1]));
// { largest: 35, second: 34 }

Q38. Remove duplicates from an array.

// Method 1: Using Set (cleanest)
const unique = [...new Set([1, 2, 2, 3, 3, 4])]; // [1, 2, 3, 4]

// Method 2: Using filter (shows logic)
function removeDuplicates(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

// Method 3: Using reduce
function removeDuplicatesReduce(arr) {
  return arr.reduce((acc, item) => {
    if (!acc.includes(item)) acc.push(item);
    return acc;
  }, []);
}

In interviews: Show the Set method first (because it is the best practice), then show a manual approach to prove you understand the logic.

Q39. Write a function to flatten a nested array.

// Manual approach (interviewers prefer this)
function flatten(arr) {
  const result = [];

  function helper(items) {
    for (const item of items) {
      if (Array.isArray(item)) {
        helper(item);
      } else {
        result.push(item);
      }
    }
  }

  helper(arr);
  return result;
}

console.log(flatten([1, [2, [3, [4]], 5]])); // [1, 2, 3, 4, 5]

// Built-in method (mention after showing manual approach)
[1, [2, [3, [4]], 5]].flat(Infinity); // [1, 2, 3, 4, 5]

Q40. Implement debounce function.

function debounce(fn, delay) {
  let timeoutId;

  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// Usage: Search input that only fires API call after user stops typing
const searchInput = document.getElementById("search");
const debouncedSearch = debounce((query) => {
  fetch(`/api/search?q=${query}`);
}, 300);

searchInput.addEventListener("input", (e) => {
  debouncedSearch(e.target.value);
});

Why this question is asked: It tests closures, setTimeout, and real-world frontend optimization knowledge all in one question.

---

Section 9: HR & Behavioral Questions

Technical skills get you to the final round. These questions determine whether you get the offer. Freshers often underprepare for this section.

Q41. Tell me about yourself.

Framework: Present → Past → Future (keep it under 90 seconds)

Example answer: "I am a B.Tech Computer Science final year student from [College Name] in Lucknow. During my college years, I developed a strong interest in web development and completed a 6-month full stack training where I built three production-ready projects using React, Node.js, and MongoDB. My most recent project is an e-commerce platform with user authentication, payment integration, and an admin dashboard. I am now looking for a full-time role where I can apply these skills and continue growing as a developer."

What NOT to say: Do not start from childhood. Do not list every technology you have ever heard of. Do not say "I am a hard worker" without backing it up.

Q42. Why do you want to work here?

What they are really asking: "Did you research our company, or are you just mass-applying everywhere?"

How to answer: Mention something specific about the company — their product, tech stack, recent news, or culture. Connect it to your goals.

Example: "I saw that your team recently migrated from a monolithic architecture to microservices, and that is exactly the kind of technical challenge I want to learn from early in my career. I have built monolithic applications in my training, and understanding how to design systems at scale is my next learning goal."

Q43. Describe a challenging project you worked on.

Use the STAR format:

• Situation: What was the project and why was it challenging?
• Task: What was your specific responsibility?
• Action: What did you do to overcome the challenge?
• Result: What was the outcome?

Example: "During my 6-month training, I was building an e-commerce application and ran into a problem where the product listing page was loading slowly — it had over 500 products with images. I researched the issue and implemented pagination on the backend, lazy loading for images on the frontend, and added Redis caching for frequently accessed product categories. The page load time dropped from 4.2 seconds to under 1 second."

Q44. Where do you see yourself in 3-5 years?

Good answer: "In 3 years, I want to be a strong mid-level full stack developer who can independently design and build features end-to-end. In 5 years, I would like to start leading small teams and mentoring junior developers, while also deepening my expertise in system design and cloud architecture."

What NOT to say: "I want to start my own company" (sounds like you will leave), "I want your job" (sounds arrogant), or "I have not thought about it" (sounds directionless).

Q45. What is your expected salary?

For freshers in India (2026):

• Research the company's salary range on Glassdoor, AmbitionBox, or LinkedIn
• Give a range, not a fixed number: "Based on my research and the role requirements, I am looking at a range of X to Y LPA"
• If asked first, deflect politely: "I would love to understand the complete role and responsibilities first. What is the budgeted range for this position?"

---

Section 10: Bonus Questions That Impress Interviewers

These questions are not asked as often, but having good answers to them can set you apart from other freshers.

Q46. What is the difference between localStorage, sessionStorage, and cookies?

Feature	localStorage	sessionStorage	Cookies
Capacity	~5-10 MB	~5-10 MB	~4 KB
Expires	Never (until manually cleared)	When tab/window closes	Configurable expiry date
Sent to server	No	No	Yes (with every HTTP request)
Access	Same origin	Same origin, same tab	Same origin (configurable)

Use cases: localStorage for user preferences and theme settings. sessionStorage for temporary form data. Cookies for authentication tokens (with httpOnly and secure flags).

Q47. What are Web Sockets? How are they different from HTTP?

HTTP is request-response: the client asks, the server answers, connection done.

WebSockets maintain a persistent, bidirectional connection. Both client and server can send messages at any time without the other asking first.

Use cases: Chat applications, live notifications, real-time dashboards, multiplayer games, stock tickers.

// Client-side WebSocket
const socket = new WebSocket("ws://localhost:3000");

socket.onopen = () => {
  socket.send(JSON.stringify({ type: "join", room: "general" }));
};

socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log("Received:", data);
};

Q48. What is the difference between SSR, CSR, and SSG?

Approach	Full Form	How It Works	Best For
CSR	Client-Side Rendering	Browser downloads empty HTML + JS, React renders the page	Dashboards, admin panels, SPAs
SSR	Server-Side Rendering	Server generates full HTML for each request	SEO-critical pages, dynamic content
SSG	Static Site Generation	HTML is generated at build time, served as static files	Blogs, documentation, landing pages

Framework context: Create React App uses CSR. Next.js supports all three (SSR with getServerSideProps, SSG with getStaticProps, and CSR with client components).

Q49. What is Docker? Why is it useful? (Basic awareness)

Answer: Docker packages your application and all its dependencies (Node.js version, npm packages, system libraries) into a container — a lightweight, portable unit that runs the same way on every machine.

Why it matters:

• "It works on my machine" problem disappears
• Easy to deploy the same code to development, staging, and production
• Each service can run in its own container with its own dependencies

Fresher level: You do not need to be a Docker expert, but knowing what it is and why it exists shows awareness of modern development practices.

Q50. What would you do if you got stuck on a bug for hours?

What they want to hear (a systematic approach):

1. Read the error message carefully — 80% of bugs are solved by actually reading the error
2. Add console.log / debugger to isolate where the problem occurs
3. Check browser DevTools — Network tab for API issues, Console for errors, Elements for CSS
4. Google the exact error message — Stack Overflow and GitHub issues usually have answers
5. Rubber duck debugging — Explain the problem out loud to find gaps in your understanding
6. Ask for help with context — Share what you have tried, not just "it does not work"

Example answer: "First, I read the error message and stack trace carefully. Then I isolate the issue using console.log or the debugger. If it is an API issue, I check the Network tab. If I am still stuck after 30-45 minutes, I search for the exact error message online. If that does not help, I ask a colleague or mentor — but I always share what I have already tried so they can help efficiently."

---

How to Prepare: A 2-Week Interview Plan

If your interview is coming up, here is a focused preparation schedule:

Week 1: Fundamentals

Day	Focus Area	What to Do
Day 1-2	HTML, CSS, JavaScript basics	Review Q1-Q13 from this guide. Build a small component from scratch.
Day 3-4	React	Review Q14-Q19. Build a mini project (todo app, weather app) without any tutorial.
Day 5-6	Node.js & Express	Review Q20-Q25. Build a REST API with CRUD operations.
Day 7	Databases	Review Q26-Q29. Practice MongoDB queries in a local database.

Week 2: Practice & Polish

Day	Focus Area	What to Do
Day 8-9	Coding challenges	Solve Q35-Q40 without looking at answers. Time yourself.
Day 10	System design basics	Review Q33-Q34. Draw diagrams on paper.
Day 11	Git & tools	Review Q30-Q32. Practice branching, merging, and resolving conflicts.
Day 12	HR questions	Practice Q41-Q45 out loud. Record yourself and listen back.
Day 13	Mock interview	Ask a friend or mentor to interview you. Or use Pramp (free online mock interviews).
Day 14	Review weak areas	Revisit any topic where you felt unsure during the mock interview.

---

Common Mistakes That Get Freshers Rejected

After watching hundreds of fresher interviews, these are the patterns that lead to rejection:

1. Memorizing answers without understanding — Interviewers can tell within 30 seconds if you are reciting vs. explaining. Understand the "why" behind every answer.

2. Saying "I know it but cannot explain it" — If you cannot explain it, you do not know it well enough. Practice explaining concepts out loud.

3. Lying about skills on your resume — If your resume says "proficient in Docker and Kubernetes" but you cannot explain what a container is, your credibility for the entire interview is destroyed.

4. Not having a live project to show — Every answer becomes 10x more credible when you can say "I used this in my e-commerce project — here, let me show you."

5. Ignoring the HR round — Students spend 100 hours on technical prep and 0 hours on behavioral questions. The HR round is not a formality — it is a filter.

6. Not asking questions at the end — When the interviewer asks "Do you have any questions for us?", never say no. Ask about the team, the tech stack, the onboarding process, or what a typical day looks like.

---

Your Next Step

Knowing the questions is important. But building real projects is what separates candidates who clear interviews from those who do not. Every answer in this guide becomes more powerful when you can back it up with "I used this in my project."

At CodingClave Training Hub in Lucknow, our full stack development programs are designed around exactly this — building real, deployable projects while learning the fundamentals that interviews test. Our students do not just learn React and Node.js in theory. They build complete applications, push code to GitHub, deploy to live servers, and practice mock interviews with industry-level questions.

Programs that prepare you for these interviews:

• 6-Month Full Stack Internship with Job Assistance — Complete training with live projects and placement support
• MERN Stack Course with Live Project — React, Node.js, Express, MongoDB with a deployable project
• 45-Day Industrial Training — Intensive project-based training for B.Tech/BCA students

---

Frequently Asked Questions

How many questions are asked in a full stack developer interview for freshers?

A typical fresher interview includes 8-15 technical questions spread across 2-3 rounds, plus 4-5 HR questions. The focus is more on understanding fundamentals than knowing advanced topics. Most interviews last 2-3 hours total across all rounds.

What programming languages should I know for a full stack developer interview?

JavaScript is non-negotiable — it is used on both frontend (React) and backend (Node.js). Beyond that, know HTML and CSS thoroughly. SQL or MongoDB query language for databases. Git for version control. Familiarity with TypeScript is a bonus but not required for fresher roles in 2026.

Is DSA asked in full stack developer interviews?

Basic DSA is asked — array manipulation, string operations, searching, and sorting. You will NOT be asked to implement complex algorithms like dynamic programming or graph traversal in most full stack interviews. Focus on the coding challenges in Section 8 of this guide, which represent the actual difficulty level.

How do I prepare for full stack developer interviews if I am from a non-CS background?

Focus on building 2-3 solid projects first. Then study the questions in this guide section by section. The interviewer cares about what you can build and explain, not your degree. Many successful full stack developers in India come from non-CS backgrounds — what matters is demonstrable skill.

What is the average salary for a fresher full stack developer in India in 2026?

Fresher full stack developers in India earn between 3.0-7.0 LPA depending on the company type and city. Startups and product companies in metro cities pay 5.0-8.0+ LPA, while service companies and Tier-2 city roles typically offer 3.0-5.0 LPA. Your project portfolio and interview performance determine where you fall in this range.

Should I learn MERN stack or MEAN stack for interviews?

MERN stack (MongoDB, Express, React, Node.js) is more in demand in 2026. React has a significantly larger job market than Angular in India, especially at startups and mid-size companies. Learn MERN first, and pick up Angular later if a specific job requires it.