Frontend machine coding rounds: the 5 patterns I would practice first (with code)

Machine coding rounds at Indian product companies are a different skill from DSA rounds. You get 45 to 90 minutes, a blank editor, and a spec like "build a star rating" or "implement debounce". Nobody wants the cleverest answer. They want working code, clean structure, and edge cases you thought of before they asked.

After looking at a lot of these problems, I noticed the same few patterns come up again and again. If you only have a weekend, practice these five first. For each one I'll show a solution that works, what the interviewer is really checking, and the mistake I see most.

1. Debounce

Delay a function until the caller has stopped calling it for wait ms.

function debounce(fn, wait) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), wait);
  };
}

What they check: the timer lives in a closure, not a global; this and arguments are passed through; a new call resets the clock.

Common mistake: using an arrow function as the returned wrapper and then losing this, or forgetting clearTimeout so every call still fires.

Follow-ups to be ready for: a cancel() method, and a leading option that fires on the first call instead of the last.

2. Throttle

Run at most once every limit ms, no matter how often it's called.

function throttle(fn, limit) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= limit) {
      last = now;
      fn.apply(this, args);
    }
  };
}

This is the simple "leading edge" version. Interviewers often follow up with "what if the last call gets dropped?" That is the trailing-edge version, which keeps one pending call and fires it when the window ends. Say out loud which one you are building before you write it.

Debounce vs throttle in one line: debounce waits for silence (search box), throttle caps the rate (scroll handler).

3. Flatten an array

Collapse [1, [2, [3, [4]], 5]] into [1, 2, 3, 4, 5].

function flatten(value) {
  const out = [];
  for (const item of value) {
    if (Array.isArray(item)) out.push(...flatten(item));
    else out.push(item);
  }
  return out;
}

What they check: you detect arrays with Array.isArray, you don't mutate the input, and you handle arbitrary depth and empty arrays.

Follow-up: "do it without recursion". An explicit stack works:

function flattenIterative(value) {
  const stack = [...value];
  const out = [];
  while (stack.length) {
    const item = stack.pop();
    if (Array.isArray(item)) stack.push(...item);
    else out.push(item);
  }
  return out.reverse();
}

Also know that arr.flat(Infinity) exists. Mentioning it, then writing your own anyway, is the right move.

4. Deep clone

JSON.parse(JSON.stringify(x)) is the answer everyone gives first, and it is the one interviewers push back on: it drops undefined, functions and symbols, turns Date into a string, and throws on circular references.

function deepClone(value, seen = new WeakMap()) {
  if (value === null || typeof value !== "object") return value;
  if (seen.has(value)) return seen.get(value);

  if (value instanceof Date) return new Date(value);
  if (value instanceof RegExp) return new RegExp(value.source, value.flags);

  const copy = Array.isArray(value) ? [] : {};
  seen.set(value, copy);

  for (const key of Reflect.ownKeys(value)) {
    copy[key] = deepClone(value[key], seen);
  }
  return copy;
}

What they check: the WeakMap is what handles circular references. Dates and regexes are the cases people forget. If you have time, mention Map, Set and structuredClone, and what each one does not cover.

5. Image carousel (React)

The first UI problem most people get. It looks trivial, and it is where state mistakes show up.

import { useState } from "react";

export default function Carousel({ images }) {
  const [index, setIndex] = useState(0);
  const last = images.length - 1;

  const prev = () => setIndex((i) => (i === 0 ? last : i - 1));
  const next = () => setIndex((i) => (i === last ? 0 : i + 1));

  return (
    <div>
      <img src={images[index]} alt={`Slide ${index + 1} of ${images.length}`} />
      <button onClick={prev} aria-label="Previous slide">Prev</button>
      <button onClick={next} aria-label="Next slide">Next</button>
      <p role="status">{index + 1} / {images.length}</p>
    </div>
  );
}

What they check: one piece of state (the index), wrap-around at both ends, functional state updates, and accessible labels. Add dots and autoplay only after the basics work and you have said you will.

The mistake that costs the round: spending 30 minutes on CSS transitions before the logic is done. Get it working, then make it pretty.

How I'd actually practice

• Pick one problem, set a timer for 20 minutes, and write the solution without hints.
• Then compare with a clean solution and note what you missed. Edge cases are usually the gap, not the main logic.
• Talk while you code. In the real round, narrating your approach is half the score.
• Repeat the same problem a week later without looking. That is when it sticks.

Where to practice these

I built Coding Activist partly because I wanted a place to run these in the browser with tests that grade the result instantly. To be clear about what is free and what isn't:

• Free to solve: Image Carousel, Debounce, Throttle, Deep Clone and Flatten Array. That is the five above, 5 of 94 problems.
• Paid: the rest of the machine coding set (React components, hooks, DOM widgets, async utilities) is part of the paid course. If you only want the free ones, the five above are a solid start and you do not need to pay for anything to follow this article.

If you would rather not use my site at all, everything in this post works in any editor, and the solutions above are yours to use.

What was the machine coding problem you got asked that you did not see coming? I'd like to hear it in the comments.

Comments

[Launch Gate]

The leading/trailing distinction is a good thing to state before coding. For the carousel exercise, I'd add two fixtures beyond wrap-around: an empty images array and a prop update that shrinks the array while index points at the old last slide. What should the component render then? The current index-only state makes that contract easy to overlook. Testing the same component before and after a list change would check more than mounting it once with a fixed list.