Full Stack Developer Interview Questions & Preparation Guide
What You'll Learn in This Masterclass
Full Stack Web Architecture Layer Breakdown
| Layer | Core Technologies | Key Interview Concepts | High-Yield Question |
|---|---|---|---|
| Frontend UI | React, Next.js, TypeScript, Tailwind | Reconciliation, Server Components, Hydration, State management | How does React Fiber enable asynchronous rendering and interruptible work? |
| API / Gateway | Node.js, Express, Fastify, Go, Python | Event Loop, Middleware pipeline, Rate limiting, CORS | Explain the difference between process.nextTick() and setImmediate() in Node.js. |
| Security / Auth | JWT, OAuth 2.0, OpenID Connect | Access vs Refresh tokens, HttpOnly cookies, SameSite flags | Where should you store JWTs on the client to prevent both XSS and CSRF? |
| Data / Persistence | PostgreSQL, MongoDB, Redis, Prisma | ACID, Connection pooling, N+1 query problem, ORMs | How do you detect and fix the N+1 query problem in relational ORMs? |
| DevOps / Infra | Docker, GitHub Actions, AWS, Vercel | Multi-stage builds, Blue-Green deployments, Monitoring | How do multi-stage Docker builds reduce container image size and improve security? |
Visual Architecture & Process Diagrams
Complete request path from client browser through CDN, API Gateway, application server, cache, database, and background job queue.
1. JavaScript Engine & Event Loop Mechanics
JavaScript is single-threaded and non-blocking, operating via a continuous Event Loop. The execution sequence dictates how asynchronous code is resolved:
- 1Call Stack: Executes synchronous functions in LIFO order.
- 2Microtask Queue: Highest priority asynchronous queue. Includes
Promise.then(),async/await,queueMicrotask(), andMutationObserver. All microtasks are drained completely before the browser repaints or moves to macrotasks. - 3Macrotask Queue (Task Queue): Lower priority queue. Includes
setTimeout(),setInterval(),setImmediate(), and I/O callbacks. One macrotask is processed per loop iteration.
2. React Internals: Reconciliation, Virtual DOM & Server Components
React Fiber & Reconciliation
React Fiber is a complete rewrite of React’s core reconciliation algorithm. Unlike the old synchronous stack reconciler (which blocked the main thread until the entire DOM tree was recalculated), Fiber represents work as a linked list of "fiber nodes". It allows React to pause work, assign priority levels, reuse previously completed work, or abort renders if a higher-priority user interaction (like typing in an input) occurs.
React Server Components (RSC) vs Client Components
- Server Components: Execute exclusively on the server at request time or build time. They zero out client bundle size because their dependencies are never sent to the browser, and they can query databases directly without exposing API keys.
- Client Components (`"use client"`): Pre-rendered on the server into HTML and hydrated on the client to enable user interactivity (event listeners,
useState,useEffect).
3. Web Security (OWASP Top 10) & Modern Authentication
Cross-Site Scripting (XSS) vs. Cross-Site Request Forgery (CSRF)
- XSS: An attacker injects malicious JavaScript into a trusted website (e.g., via unescaped user comments). Mitigate with strict input sanitization, React automatic JSX escaping, and Content Security Policy (CSP) headers.
- CSRF: An attacker tricks an authenticated user's browser into sending unauthorized HTTP requests to another site where the user is logged in (exploiting automatic browser cookie transmission). Mitigate with SameSite cookies (
SameSite=StrictorLax) and Anti-CSRF synchronization tokens.
Best-Practice JWT Token Storage
- Vulnerable: Storing access tokens in
localStorageexposes them to complete theft via XSS. - Industry Standard: Store short-lived access tokens (15-minute expiry) in in-memory application state. Store long-lived refresh tokens (7-day expiry) in an HttpOnly, Secure, SameSite=Strict cookie, inaccessible to JavaScript.
High-Frequency Interview Questions & Frameworks
What is the exact difference between client-side rendering (CSR), server-side rendering (SSR), and incremental static regeneration (ISR)? When would you choose each?
How do you identify and resolve the N+1 query problem when using relational ORMs like Prisma, TypeORM, or Hibernate?
WHERE IN (...) queries (DataLoader pattern).SELECT * FROM users LIMIT 100), and then for each user, executes a separate query to fetch their posts (SELECT * FROM posts WHERE user_id = ?), resulting in 1 + 100 = 101 database round-trips. This degrades API latency from 20ms to 500ms+. We resolve this by using Eager Loading in the ORM (e.g., Prisma include: { posts: true } or TypeORM relations: ["posts"]), which compiles into a single SQL JOIN or two optimized queries: one for users and one batch query: SELECT * FROM posts WHERE user_id IN (1, 2, ..., 100). In GraphQL, we resolve this using the DataLoader pattern, which batches and memoizes key lookups across a single event loop tick.Costly Mistakes to Avoid
- ✕Storing sensitive JWT tokens or API secrets in client-side localStorage.
- ✕Mutating React state directly instead of using pure updater functions.
- ✕Failing to handle async race conditions in frontend data-fetching hooks (missing AbortController cleanup).
- ✕Writing unindexed database queries that trigger full table scans under production scale.
- ✕Overusing useEffect for derived state calculations that can be computed synchronously during render.
Key Takeaways
- •Full stack engineering is about connecting the dots: from browser microtasks to database connection pools.
- •Virtual DOM diffing is fast, but preventing unnecessary component re-renders is faster.
- •Security is not an afterthought: sanitize inputs, use HttpOnly cookies, and enforce Content Security Policies.
- •The N+1 query problem is the single most common backend performance bottleneck in modern web apps.
Final Interview Checklist
- Be able to predict output orders for mixed synchronous, microtask (Promise), and macrotask (setTimeout) code.
- Understand React Fiber reconciliation, memoization (useMemo, useCallback), and component lifecycle.
- Know how to design secure REST APIs with correct HTTP status codes (200, 201, 204, 400, 401, 403, 404, 409, 429).
- Be able to explain the difference between OAuth 2.0 (Authorization) and OpenID Connect (Authentication).
- Understand CORS preflight requests (OPTIONS method) and required headers.
- Know how to optimize Core Web Vitals (Largest Contentful Paint LCP, Interaction to Next Paint INP, Cumulative Layout Shift CLS).
Frequently Asked Questions (FAQs)
What is the difference between undefined and null in JavaScript?
undefined means a variable has been declared but has not yet been assigned a value (it is also the default return value of functions without an explicit return). null is an intentional assignment value representing the deliberate absence of an object value.
What is CORS and how do you resolve CORS errors?
Cross-Origin Resource Sharing (CORS) is a browser security mechanism that restricts HTTP requests made from scripts to a different domain, port, or protocol. To resolve it, the server must return appropriate response headers: Access-Control-Allow-Origin, Access-Control-Allow-Methods, and handle preflight OPTIONS requests.
What is the purpose of the key prop in React lists?
The key prop gives elements a stable identity across renders. React uses keys during the reconciliation phase to determine which items in a list have changed, been added, or been removed. Using array indices as keys can cause subtle UI bugs and performance degradation when list items are reordered or filtered.
What is the difference between PUT and PATCH in REST APIs?
PUT is idempotent and replaces the entire target resource with the uploaded request payload. PATCH applies partial modifications to a resource without requiring the client to transmit the full entity.
How does connection pooling improve database performance?
Establishing a new TCP/TLS database connection is expensive (authentication, SSL handshake, memory allocation). A connection pool maintains a cache of open database connections that can be borrowed, used, and returned by concurrent API requests, preventing connection exhaustion and reducing query overhead.
What is WebAssembly (Wasm) and when should it be used?
WebAssembly is a low-level binary instruction format running at near-native speed in web browsers alongside JavaScript. It is used for CPU-intensive browser tasks: video/audio editing, CAD rendering, gaming engines, and cryptography.
What is debouncing vs throttling in JavaScript?
Debouncing delays executing a function until a specified time has elapsed since the last invocation (ideal for search autocomplete inputs). Throttling limits the execution of a function to at most once every X milliseconds (ideal for scroll listeners and window resizing).
What is the difference between SQL Injection and NoSQL Injection?
SQL Injection exploits unparameterized SQL strings by inserting SQL control syntax (OR 1=1). NoSQL Injection exploits document query parsers (e.g. passing objects like {"$gt": ""} in MongoDB JSON bodies). Both are prevented by using parameterized queries and strict input schema validation (e.g. Zod).