Vibe coder or product engineer technical fundamentals interview questions

As asked

Your Next.js API is getting CORS errors from a browser making a POST request with a JSON body. Walk me through what CORS is, what a preflight request does, and how you fix this correctly on the server.

Sample answer outline

CORS is the browser's enforcement of the same-origin policy for cross-origin requests. A preflight OPTIONS request is sent by the browser before a cross-origin request that meets certain conditions: non-simple method like PUT or DELETE, or custom headers like Content-Type: application/json. The server must respond to the OPTIONS request with the correct Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers headers before the browser will send the actual request. The fix is to handle OPTIONS in your route handler and set those headers, or use a CORS middleware. A strong answer notes that CORS is enforced by the browser, not the server, and that server-to-server calls are not affected.

Expect these follow-ups

• Why is Access-Control-Allow-Origin: * insufficient for requests that include cookies or Authorization headers?

As asked

Explain what happens under the hood when you write await fetch(url) in a JavaScript function. Where does execution go, what is the event loop doing, and when does it come back to continue after the await?

Sample answer outline

async/await is syntactic sugar over Promises. When you hit await, the function suspends and returns control to the call stack, allowing the event loop to process other callbacks. The pending network request is handled outside the JS thread by the browser's networking layer. When the response arrives, a microtask is queued. The event loop processes all microtasks before moving to the next macrotask (setTimeout, I/O). The async function resumes from the microtask queue with the resolved value. A strong answer notes that this means await does not block the thread, multiple awaits in a loop run sequentially rather than in parallel, and you should use Promise.all for concurrent awaits.

Expect these follow-ups

• What is the difference between a microtask queue and a macrotask queue in the event loop?

As asked

Walk me through how Cache-Control, ETag, and Vary HTTP headers work together. If I set Cache-Control: max-age=3600 and also return an ETag, what happens when the cache expires?

Sample answer outline

Cache-Control max-age tells the browser or CDN to serve the cached response for 3600 seconds without revalidation. When max-age expires, the browser sends a conditional GET with If-None-Match set to the stored ETag. The server checks if the content changed: if not, it returns 304 Not Modified with no body, saving bandwidth. The Vary header tells caches to store separate responses keyed by the listed request headers, for example Vary: Accept-Encoding means a gzip and a brotli response are cached separately. A strong answer also covers stale-while-revalidate, no-store versus no-cache, and how CDNs like Cloudflare use Cache-Control's s-maxage for CDN TTL separate from the browser TTL.

Expect these follow-ups

• What is the difference between no-cache and no-store in Cache-Control?

As asked

Explain why React hooks must be called at the top level, never inside conditionals or loops, and never outside a React function. What breaks if you violate these rules?

Sample answer outline

React tracks hook state by call order: on each render it assigns state to hooks in the order they are called. If you call a hook inside a conditional, the order can change between renders, causing React to assign the wrong state to the wrong hook. There is no hook identifier in the API, only position. This is why the eslint-plugin-react-hooks rule exists and why the React team chose this design over one with explicit keys. A strong answer also notes that this is a deliberate tradeoff for a simpler API without a registry, and that the custom hooks pattern lets you encapsulate conditional logic inside a hook while the hook itself is always called at the top level.

Expect these follow-ups

• How do you conditionally use a hook without violating the rules?

As asked

Explain Cross-Site Request Forgery, give a concrete attack example against a Next.js API route that uses cookies for auth, and walk me through how you protect against it.

Sample answer outline

CSRF exploits the browser's automatic sending of cookies on cross-origin requests. An attacker hosts a page that makes a POST to your API, and the browser attaches the victim's session cookie automatically. The classic defences are CSRF tokens (a secret value in the form that an attacker page cannot read because of same-origin policy on XHR/fetch) and the SameSite cookie attribute. Setting SameSite=Lax or Strict on session cookies prevents them from being sent in cross-site POST requests, which is now the default in modern browsers. A strong answer notes that Next.js Server Actions and the App Router have CSRF protection via the Origin header check, and that you should explicitly set SameSite=Lax on cookies set by your API routes.

Expect these follow-ups

• What is the difference between SameSite=Lax and SameSite=Strict, and which one would you use for a product with OAuth login redirects?

As asked

Explain what the virtual DOM is, why React introduced it, and what the performance tradeoff is compared to direct DOM manipulation. When is the virtual DOM actually slower than direct DOM updates?

Sample answer outline

The virtual DOM is an in-memory representation of the real DOM. React diffs the current and previous virtual DOM trees to compute the minimal set of real DOM mutations needed, batching them into a single flush. This abstraction lets you write declarative code without manually tracking which DOM nodes to update. The overhead is the diff computation itself, which makes React slower than hand-optimised direct DOM manipulation for very fine-grained updates, like a canvas or a highly interactive data table where you would use a library that bypasses React or uses refs to touch the DOM directly. A strong answer also notes that modern browsers are fast at DOM mutations and the bigger win from React is developer ergonomics and predictable rendering, not raw DOM performance.

Expect these follow-ups

• How does React 18's concurrent rendering reduce the impact of expensive re-renders on user interaction responsiveness?

As asked

Walk me through the steps from when a user types an HTTPS URL to when the first byte of the HTML response arrives, focusing on the TLS handshake and what each step costs in terms of round trips.

Sample answer outline

DNS resolution (1 RTT), TCP three-way handshake (1 RTT), TLS 1.3 handshake (1 RTT with the ClientHello and ServerHello exchanged in one round trip, down from 2 RTTs in TLS 1.2), then the HTTP request and response. Total for a cold connection: 3 to 4 RTTs before the first byte. Connection reuse with HTTP/2 and ALPN eliminates the handshake on subsequent requests to the same origin. A strong answer mentions OCSP stapling for certificate validation, session resumption with TLS session tickets to skip the handshake on reconnect, and that this is why CDN PoP proximity matters: halving the RTT halves the handshake cost.

Expect these follow-ups

• How does HTTP/3 and QUIC change this picture?

As asked

Explain what origin shielding is in the context of a CDN like Cloudflare or CloudFront, why you would enable it, and what problem it solves that regular CDN caching does not.

Sample answer outline

Origin shielding adds a single intermediate caching layer between the CDN's distributed edge nodes and your origin server. Without it, when a cache miss happens across 200 edge PoPs globally, up to 200 simultaneous requests can hit your origin simultaneously if the cache expires at the same time. With origin shielding, cache misses from all edge nodes go to a single shield PoP which then makes one request to origin. This dramatically reduces origin load and prevents thundering herd on cache expiry or purges. It is most valuable when your origin is a database-backed server with limited connection pool capacity, and less important for static assets where the origin is S3.

Expect these follow-ups

• How does Cloudflare's Tiered Cache differ from traditional CDN origin shielding?