Question 1

Given a flat array of comments where each comment has an id and a parent_id (null if top-level), write a function that converts it into a nested tree structure.

Accepted Answer

Start by building a map of id → comment node. Do a single pass to assign each comment as a child of its parent using the map. Return all nodes whose parent_id is null as roots. This is O(n) time and space. Talk through the edge cases: cycles, orphaned comments, multiple roots. What interviewers look for: Whether you reach for the right data structure (hash map) immediately rather than a naive O(n²) nested loop approach. Interviewers also watch for clean code organization and whether you handle edge cases without being prompted.

Question 2

Implement a debounce function in JavaScript. Then explain how you'd modify it to also support a leading-edge option.

Accepted Answer

Core debounce: store a timer ID in closure scope, clear and reset it on each call, invoke the original function after the delay. Leading-edge variant: fire immediately if no timer is active, then suppress subsequent calls until the delay expires. Use a boolean flag or check timer existence. Demonstrate understanding of closures and setTimeout/clearTimeout mechanics. What interviewers look for: Closure fluency and understanding of JS event loop. The leading-edge extension reveals whether the candidate thinks beyond the happy path. This is a real utility function that mid-level engineers should be able to write from scratch.

Question 3

A React component re-renders excessively and causes UI jank. Walk me through how you would diagnose and fix the problem.

Accepted Answer

Start with React DevTools Profiler to identify which components re-render and why. Common culprits: new object/array literals created on every render passed as props, missing or incorrect dependency arrays in useEffect/useMemo/useCallback, context values that change reference too often. Fixes in order of reach: memoize expensive computations with useMemo, stabilize callback references with useCallback, split large contexts, consider moving state down or lifting it less aggressively. What interviewers look for: A systematic debugging process rather than jumping straight to 'add memo everywhere.' Interviewers want to see that you understand the React rendering model — that referential equality drives re-renders — not just the APIs.

Question 4

How does the browser's event loop work, and how does that affect the way you write async code in a web app?

Accepted Answer

Explain the call stack, task queue (macrotasks: setTimeout, I/O), and microtask queue (Promises, queueMicrotask). Microtasks drain completely before the next macrotask runs, which means chained Promises can starve rendering. Relate this to real patterns: why you might use setTimeout(fn, 0) to yield to the browser, why long synchronous tasks cause jank, and how async/await is syntactic sugar over Promises and therefore microtask-based. What interviewers look for: Genuine conceptual understanding, not recitation of a blog post. A strong candidate can predict the execution order of a short code snippet and tie the theory back to practical performance decisions.

Question 5

Design the database schema for a simple task management app with users, projects, and tasks. Tasks can be assigned to multiple users and belong to one project.

Accepted Answer

Users table, Projects table, Tasks table (with project_id FK), and a task_assignments join table for the many-to-many user–task relationship. Add indexes on FK columns. Discuss nullable vs. not-null constraints, soft deletes with deleted_at, and whether you'd store task status as an enum or a separate statuses table. Briefly mention migration strategy. What interviewers look for: Basic normalization instincts and FK discipline. The signal is whether the candidate immediately reaches for a join table for many-to-many vs. trying to store arrays in a column, and whether they think about indexes without being asked.

Question 6

You have an API endpoint that fetches a user's dashboard data — it requires 5 separate database queries. The endpoint is slow. What are your options?

Accepted Answer

First, measure: are the queries slow individually or is it the round-trip count? Options in roughly increasing complexity: (1) combine queries where possible (JOINs, CTEs), (2) run independent queries in parallel rather than sequentially (Promise.all or equivalent), (3) add targeted indexes, (4) cache the result (Redis, in-memory) with appropriate TTL, (5) materialize the data with a background job. Discuss tradeoffs of caching (stale data) and over-fetching vs. under-fetching. What interviewers look for: Methodical thinking and knowledge that 'make queries parallel' is often the easiest win. Interviewers penalize candidates who jump to caching before exhausting simpler fixes. They want to see that you measure before optimizing.

Question 7

Explain how you would implement authentication in a REST API — what mechanism you'd use, where tokens live, and how you'd handle token expiration.

Accepted Answer

Use JWT or opaque tokens issued on login. JWTs: stateless, include expiry (exp claim), sign with a secret or private key. Store access tokens in memory or a short-lived HttpOnly cookie; avoid localStorage for sensitive tokens (XSS risk). Issue refresh tokens with a longer TTL stored HttpOnly. On expiry, the client uses the refresh token to get a new access token silently. Discuss refresh token rotation to prevent replay after theft and where to invalidate (token denylist or short TTL acceptance). What interviewers look for: Security awareness beyond 'just use JWT.' The interviewer is checking whether you know the tradeoffs between stateless JWTs and the need for revocation, and whether you understand the XSS/CSRF threat model around token storage.

Question 8

Design a URL shortener (like bit.ly). Focus on the core components: shortening, redirection, and basic analytics. You don't need to handle planet-scale traffic.

Accepted Answer

Encode a unique ID to a short alphanumeric string (base62 of an auto-increment ID or a random 6–8 char key with collision checking). Store mapping in a relational DB or key-value store. Redirect endpoint does a DB lookup and returns 301 (cacheable, bad for analytics) or 302 (non-cacheable, better for click counting). Analytics: log redirect events asynchronously (write to a queue, don't block the redirect). Add a cache layer (Redis) in front of reads since the read/write ratio is very high. What interviewers look for: Whether you can scope a design appropriately for the level — not every answer needs Kafka and consistent hashing. Key signals: understanding 301 vs. 302 tradeoffs, async analytics to avoid slowing redirects, and cache placement reasoning.

Question 9

A third-party payment webhook is hitting your endpoint and you need to process it reliably. How do you design the handler?

Accepted Answer

Immediately return 200 to the webhook sender to acknowledge receipt — do not process inline. Persist the raw payload to a queue or DB table (idempotency key = webhook event ID). A worker processes the event asynchronously. Handle retries from the sender with idempotency: check if event ID was already processed before acting. Validate the webhook signature (HMAC). Alert on dead-letter queue items. What interviewers look for: Understanding that webhook reliability requires decoupling receipt from processing. Idempotency is the key concept — mid-level engineers who haven't thought about this will try to process synchronously and fail on retries.

Question 10

Tell me about a time you disagreed with a technical decision made by a senior engineer or tech lead. What did you do?

Accepted Answer

Use STAR. Pick a real example where you had a legitimate technical concern (not a preference). Describe how you raised it: privately first, then in a design review, with evidence or a proof-of-concept. Show that you can advocate clearly without being combative, and that you can commit to the final decision even if it wasn't yours. The outcome matters less than the process. What interviewers look for: Maturity and ability to influence without authority. At mid-level you're expected to have opinions and to voice them professionally. Red flags: never disagreed with anyone, or disagreed and went rogue anyway.

Question 11

Describe a bug you introduced to production. How did you handle it?

Accepted Answer

Be specific and honest — vague answers read as evasion. Describe what the bug was, how it was discovered, your immediate mitigation steps, how you communicated to stakeholders, and what you changed afterward (test coverage, process, monitoring). The retrospective and prevention steps are the most important part of the answer. What interviewers look for: Ownership and a learning orientation. Every mid-level engineer has shipped a bug; the question is whether you own it cleanly, communicate well under pressure, and close the loop with systemic improvements rather than just fixing the one instance.

Question 12

How do you approach picking up an unfamiliar codebase or technology quickly?

Accepted Answer

Describe a concrete method: read the entry points and data flow before touching individual files, run the tests to understand expected behavior, make a small self-contained change to validate your mental model, read recent git history to understand what's currently in flux. For unfamiliar technology, describe how you go from docs → minimal working example → applying to real problem, and how you know when to ask for help vs. keep digging. What interviewers look for: Self-sufficiency and intellectual humility. Mid-level engineers need to ramp without extensive hand-holding. Interviewers want evidence of a repeatable method, not 'I just Google things.' Bonus if you mention reading tests as documentation.

Mid-Level Full-Stack Engineer Interview Questions

What to expect

12 questions, with how to answer them

1. Given a flat array of comments where each comment has an id and a parent_id (null if top-level), write a function that converts it into a nested tree structure.

2. Implement a debounce function in JavaScript. Then explain how you'd modify it to also support a leading-edge option.

3. A React component re-renders excessively and causes UI jank. Walk me through how you would diagnose and fix the problem.

4. How does the browser's event loop work, and how does that affect the way you write async code in a web app?

5. Design the database schema for a simple task management app with users, projects, and tasks. Tasks can be assigned to multiple users and belong to one project.

6. You have an API endpoint that fetches a user's dashboard data — it requires 5 separate database queries. The endpoint is slow. What are your options?

7. Explain how you would implement authentication in a REST API — what mechanism you'd use, where tokens live, and how you'd handle token expiration.

8. Design a URL shortener (like bit.ly). Focus on the core components: shortening, redirection, and basic analytics. You don't need to handle planet-scale traffic.

9. A third-party payment webhook is hitting your endpoint and you need to process it reliably. How do you design the handler?

10. Tell me about a time you disagreed with a technical decision made by a senior engineer or tech lead. What did you do?

11. Describe a bug you introduced to production. How did you handle it?

12. How do you approach picking up an unfamiliar codebase or technology quickly?

Study tips