Coding rounds

Polyfills, DOM tasks, machine coding, and frontend design prompts

Each prompt below is structured for interview practice: scope, hints, outline, and evaluation checklist.

javascript

Implement debounce

1-3y

Build a debounce utility for search input so the API is not called on every key press.

Requirements

Return a function that delays execution until the user stops triggering it.
Preserve the latest arguments.
Preserve the calling context.
Support re-triggering before the timer finishes.

Hints

Keep a timer reference in a closure.
Clear the previous timer before creating a new one.
Use apply or call if you want to preserve this.

Solution outline

Store timer id outside the returned function.
Clear the old timer on each call.
Start a new timer and invoke the original function with latest args.

function debounce<T extends (...args: any[]) => void>(fn: T, delay: number) {
  let timer: ReturnType<typeof setTimeout> | undefined;
  return function debounced(this: ThisParameterType<T>, ...args: Parameters<T>) {
    // TODO
  };
}

javascript

Polyfill Promise.all

3-6y

Implement Promise.all behavior for an interview round focused on asynchronous JavaScript fundamentals.

Requirements

Resolve only when all promises resolve.
Preserve result order by input index.
Reject immediately on the first rejection.
Handle non-promise values too.

Hints

Count resolved items.
Wrap each item with Promise.resolve.
Pre-size the result array to preserve order.

Solution outline

Create a new Promise wrapper.
Handle the empty input case.
Resolve each item and store result by index.
Reject on the first failure.

machine-coding

Build accessible tabs

1-3y

Create an interview-ready tabs component with keyboard support and a clean state boundary.

Requirements

One active tab at a time.
Keyboard navigation with arrow keys.
Accessible roles and labels.
Keep state easy to follow.

Hints

Use button elements for triggers.
Track active tab id in one place.
Map ids to panel and tab relationships.

Solution outline

Model the active id in parent state.
Render a tablist with buttons and associated panels.
Handle focus movement separately from rendering.

machine-coding

Build autocomplete with debounced search

3-6y

Implement an autocomplete widget with request cancellation, keyboard support, and stable loading states.

Requirements

Debounce API calls.
Cancel outdated requests.
Support arrow keys and enter.
Show loading, empty, and error states.

Hints

Separate input state from async state.
AbortController helps with stale requests.
Keep highlighted index independent from network state.

Solution outline

Model query, status, results, and highlighted item.
Debounce query changes before requests.
Abort stale requests when query changes.
Use semantic list or combobox behavior.

frontend

Design or implement infinite scroll feed

3-6y

Explain and optionally code a feed that loads more items while keeping UI smooth and predictable.

Requirements

Fetch next page only when needed.
Prevent duplicate requests.
Show loading and end states.
Consider virtualization for large feeds.

Hints

IntersectionObserver is often cleaner than scroll listeners.
Separate page cursor from visible items.
Think about retry and end-of-list behavior.

Solution outline

Track items, cursor, status, and hasMore.
Observe a sentinel near the bottom.
Fetch next page when visible and guard duplicate calls.

machine-coding

Kanban board or task manager

3-6y

Build a board with columns, task movement, and a clean state model under interview time pressure.

Requirements

Support adding and moving tasks.
Maintain stable ids and a clear state shape.
Prefer clarity over over-engineering.
Mention what you would add with more time.

Hints

Model columns and task ids separately.
Avoid deeply nested updates if possible.
A reducer can make movement logic easier to reason about.

Solution outline

Normalize the state enough for clean updates.
Separate move logic from rendering.
Deliver the happy path first, then add polish or persistence.

machine-coding

Build a file explorer

3-6y

Implement a nested file explorer with expand and collapse behavior, clear state ownership, and scalable rendering.

Requirements

Render nested folders and files from tree data.
Allow expand and collapse for folders.
Keep state predictable as the tree grows.
Explain what you would add for keyboard support and search if time remains.

Hints

Model expanded folder ids instead of mutating the input tree.
Recursion is often the cleanest rendering approach.
Keep the node row and tree container separate if it improves clarity.

Solution outline

Define the tree shape and the expanded-id state.
Render one node row at a time and recurse through children.
Toggle expansion from a stable parent-owned state model.

dsa

Flatten or render nested comments

3-6y

Solve a frontend-style DSA problem where comments can have deeply nested replies and the UI needs either a flat list or recursive rendering.

Requirements

Traverse nested comment data correctly.
Return either a flat list or a rendered tree depending on the interviewer's ask.
Explain the traversal order and time complexity.
Handle missing or empty children safely.

Hints

Ask whether depth metadata is needed in the output.
DFS is often the simplest first solution.
Say the base case out loud before coding.

Solution outline

Describe the node shape and the output shape.
Implement traversal with a base case for empty children.
Record each node in the required order and discuss complexity.