RoadmapDay 73 / 80
Interview PrepMonth 4 · Week 15

Day 73: Mock Interview 2: Machine Coding & Live Coding Round

Rehearse building one Week 12-style component end to end, live, under time pressure, with correct incremental scoping.

Mark this day complete

Study

Concepts

Scope incrementally — never attempt the full feature at once

A machine coding round rewards a working, simple version delivered early over an ambitious, incomplete version delivered never — start by stating out loud how you will scope the build ("I'll get basic rendering working first, then add keyboard nav, then debouncing, then accessibility, checking in with you at each stage"), and actually checkpoint at each stage rather than going heads-down for 40 minutes. This mirrors how Days 56-60's examples were structured: a correct minimal version first, with clearly-separated extensions.

Talk while you type — narrate what you are about to write and why, especially at decision points ("I'm using a ref here instead of state because this value doesn't need to trigger a re-render") — a silent 45 minutes of typing gives the interviewer almost no signal about your reasoning, even if the final code is correct.

See It

Visualizations

Visualization

Incremental build order for a machine coding round

Clarify requirements + scope out loud

~3 min

Basic working version

core render + state, no polish

Core interaction logic

the thing the prompt is actually testing

Edge cases + polish

empty state, loading, a11y — only if time remains

Build It

Code Examples

A fresh mock prompt (not in Week 12) — attempt this cold, timed to 40 min

text
Prompt: "Build a rating widget: 5 clickable stars, supports hover
preview (stars fill up to the hovered one), click to set a rating,
and an optional readOnly mode. No library — plain React."

Suggested scoping checkpoints:
  1. (8 min)  Render 5 stars from a hard-coded rating value.
  2. (10 min) Click sets the rating via state; filled stars reflect it.
  3. (10 min) Hover preview: filled-up-to-hover, reverting on mouseleave.
  4. (7 min)  readOnly prop disables click/hover entirely.
  5. (5 min)  Keyboard support (Arrow keys change rating) + aria-label per star.

-> Narrate your plan before writing any code. Checkpoint after each numbered step.

Remember

Key Takeaways

  • State your scoping plan out loud before writing code — this alone signals strong engineering process.
  • Ship a basic working version first, then layer in interaction logic, then edge cases — never attempt everything at once.
  • Narrate reasoning continuously while typing — silence gives the interviewer no signal even with correct final code.
  • Explicitly ask before spending time on polish ("should I add keyboard support, or is time better spent elsewhere?") — this demonstrates prioritization.
  • If you run out of time, describe what you would do next rather than leaving it unaddressed — a clear plan for the remainder still shows competence.

Do It

Practice

  1. 1Attempt the rating widget prompt above cold, timed to 40 minutes, narrating out loud the whole time.
  2. 2Review your own solution against the 5-step scoping checkpoints and note which step you actually finished by.
  3. 3Pick one Week 12 component (autocomplete, virtualized list, kanban, form engine, or infinite canvas) and rebuild it from memory without looking at your notes, timed to 45 minutes.