Frontend Machine Coding Questions (React UI Interview Guide for Modern Roles)
This hub helps you prepare for frontend machine coding questions. It explains what interviewers evaluate, outlines a reliable 60-minute strategy, and provides a curated set of React/UI challenges to practice first.
What Are Frontend Machine Coding Questions?
A machine coding round is a timed implementation round where you build a working UI feature from scratch. It tests practical product engineering: component design, state flow, user interactions, and reliability of behavior. The goal is to translate a prompt into a clean, testable architecture while shipping a visible result.
Interviewers care about how you clarify requirements, choose data structures, split components, and manage trade-offs. A stable simplified version with good communication often scores higher than an over-engineered approach that runs out of time.
Machine Coding Evaluation Rubric
Interviewers grade your component implementation across these 5 core areas.
| Criteria | What is Tested | "Strong Hire" Signal |
|---|---|---|
| State Design | Is state minimal? Are derived values calculated on the fly instead of synced in state? | Zero redundant state variables. Uses `useMemo` correctly for expensive derivations. |
| Component Boundaries | Are components too massive, or over-abstracted too early? | Clean prop interfaces. Logic separated from presentation components. |
| Edge Cases | Empty states, loading spinners, network errors, and malicious inputs. | Proactively handles rapid double-clicks (debouncing) and API failures. |
| Accessibility (A11y) | Keyboard navigation (Tab/Enter/Esc), focus traps, and ARIA labels. | Semantic HTML (`<button>`, `<form>`). UI is fully usable without a mouse. |
| CSS/Styling | Responsive behavior, flexbox/grid mastery, avoiding inline styles. | Uses CSS modules or Tailwind cleanly without deeply nested overrides. |
Embedded Mini Case: The File Explorer
Prompt: "Build a nested file explorer component that takes a JSON tree of files and folders. Folders should be expandable and collapsable."
1. The Naive Approach (Junior)
Hardcodes rendering, struggles with deep nesting, duplicates state for every single folder level, and forgets keyboard accessibility.
2. The Structured Approach (Mid-Level)
Uses recursive components (`<FolderNode />`) to render infinite depth. Manages local `isOpen` state elegantly. Uses proper `<ul>` and `<li>` tags.
3. The Production Approach (Senior)
Normalizes the JSON data into a flat map for O(1) lookups instead of deep recursion. Supports keyboard navigation (Enter to open, arrows to navigate). Handles asynchronous loading of child nodes.
Common Prompt Types
Most machine coding prompts fall into repeatable patterns. If you recognize the pattern, you can structure your solution faster.
A Reliable 60-Minute Strategy
- Clarify scope: define core flows, out-of-scope items, and acceptance criteria.
- Sketch architecture: component tree + state model + key event handlers.
- Ship baseline: working UI with correct behavior for the happy path.
- Add edge cases: loading/errors, empty states, disabled states, input validation.
- Polish + narrate: a11y, perf improvements, test strategy, and what you’d do next in production.
In the last 5 minutes, summarize trade-offs and production hardening (tests, monitoring, API boundaries, and performance budgets). That wrap-up often separates mid from senior.
Curated Frontend Machine Coding Questions
Start with these. They cover the highest-frequency UI patterns and demonstrate strong signal when implemented cleanly.
- File Explorer Tree
- File Explorer Tree II
- File Explorer Tree III
- Nested Checkbox Tree
- Autocomplete I
- Typeahead Autocomplete II
- Star Rating
- Todo List
- Todo List II
- Todo List III
- Data Table - Sorting
- Data Table - Pagination
- Data Table - Global Search
- Data Table - Inline Editing
- Data Table - Virtual Scrolling
- Stopwatch
- Timer
- Tabs
- Tabs with Animations
- Advanced Tabs
- Progress Bar
- Progress Bar II - Sequential Queue
- Progress Bar III - Max 3 Parallel
- Progress Bar IV - Start/Pause/Reset
- Progress Bar V - Priority Scheduler
- WhatsApp Chat Interface
- WhatsApp Chat Advanced
- WhatsApp Chat III with Rich Layout
Want the full list? Browse all React machine coding problems.
Structured Learning Paths (Explore)
Prefer a guided roadmap instead of random practice? Use structured learning paths designed around real frontend interview tracks.
Deep dive into closures, async patterns, promises, and polyfills with daily structured drills.
Component patterns, state modeling, performance tuning, and UI architecture.
Full-stack frontend prep covering JavaScript, algorithms, React, and system design.
How to Use This Hub
Pair this with Frontend Algorithm Interview Questions and Frontend System Design Interview Questions for complete interview coverage. Want more tracks? Explore more paths
Frequently Asked Questions
What is a machine coding round in frontend interviews?
A machine coding round is a timed exercise (usually 60-90 minutes) where you build a working UI feature from scratch. It tests your ability to design components, manage state, handle edge cases, and write clean, maintainable React or vanilla JavaScript code.
Should I use a framework like React or just vanilla JavaScript?
Most modern frontend interviews allow you to use React, as it reflects everyday work. However, some companies explicitly ask for vanilla JavaScript to test your fundamental understanding of the DOM and event delegation. Always clarify the constraints before starting.
What are the most common machine coding problems?
Common problems include building a Todo List, a nested File Explorer, a Star Rating component, Autocomplete/Typeahead, and complex Data Tables with sorting and pagination.
How is a machine coding round evaluated?
Interviewers look for a working solution first. Then they evaluate your component architecture, state management, handling of edge cases (like loading and error states), accessibility basics, and code cleanliness.