16 · Interview prep
Machine coding
Build a working UI under time pressure — the SDE-2 sweet spot.
"Build this component in 45 minutes." Clean code, correct edge cases, accessibility, and a clear component API — that's what's scored. Start with the ⭐ flagships, then drill the categories.
⏱️ How to nail a machine-coding round
- Clarify the spec + edge cases first (empty, loading, error, long text, keyboard).
- Sketch the component API (props/events) before coding.
- Build incrementally — get a working skeleton, then layer features.
- Handle a11y & keyboard — it's a differentiator, not optional.
- Talk while you type; leave time to test.
📖 Practice platforms: GreatFrontEnd ⭐ · BFE.dev · Frontend Interview Handbook · JS Interview by Sadanand
⭐ Flagship solutions (fully worked)
| Component | Difficulty | Time | Tags |
|---|---|---|---|
| Autocomplete component | 🟡 | 45m | #input #async #a11y |
| Nested Comments (tree) | 🟡 | 45m | #recursion #tree |
| Kanban board (drag & drop) | 🔴 | 1h | #dnd #state |
| Star Rating widget | 🟢 | 30m | #input #a11y |
| Data Grid (sortable, virtualized) | 🔴 | 1h | #large-data #virtualization |
| Accessible Modal / Dialog | 🟡 | 45m | #overlay #focus #a11y |
| Command Palette (⌘K) | 🔴 | 1h | #search #keyboard #a11y |
⌨️ Inputs & Forms
| Component | Difficulty | Time | Resource |
|---|---|---|---|
| Autocomplete / Typeahead | 🟡 | 45m | Flagship ⭐ |
| Star Rating | 🟢 | 30m | Flagship ⭐ |
| Date Picker | 🔴 | 1h | ARIA APG |
| Date Range Picker | 🔴 | 1h | ARIA APG |
| Time Picker | 🟡 | 45m | GreatFrontEnd |
| Multi-select / Tags input | 🟡 | 45m | GreatFrontEnd |
| Combobox / Select with search | 🟡 | 45m | ARIA combobox |
| OTP / PIN input | 🟢 | 30m | BFE.dev |
| Password strength meter | 🟢 | 30m | BFE.dev |
| Form with validation | 🟡 | 45m | Constraint validation |
| Dynamic form (add/remove fields) | 🟡 | 45m | State |
| Range / Dual slider | 🟡 | 45m | ARIA slider |
| Color picker | 🟡 | 45m | BFE.dev |
| Toggle / Switch | 🟢 | 20m | ARIA switch |
| Emoji / Mention picker | 🟡 | 45m | Autocomplete flagship |
| Rich contenteditable input | 🔴 | 1h | contenteditable |
| Input mask (phone/card) | 🟡 | 45m | BFE.dev |
📋 Lists & Data
| Component | Difficulty | Time | Resource |
|---|---|---|---|
| Infinite Scroll list | 🟡 | 45m | System design flagship |
| Virtualized List | 🔴 | 1h | React flagship ⭐ |
| Pagination | 🟢 | 30m | GreatFrontEnd |
| Sortable / filterable Data Grid | 🔴 | 1h | Flagship ⭐ |
| Editable spreadsheet grid | 🔴 | 1.5h | GreatFrontEnd |
| Nested Comments (tree) | 🟡 | 45m | Flagship ⭐ |
| Nested Checkboxes (tri-state) | 🟡 | 45m | BFE.dev |
| File Explorer / Tree View | 🟡 | 45m | Recursion pattern |
| Transfer list (dual list box) | 🟡 | 45m | GreatFrontEnd |
| Sortable table (multi-column) | 🟡 | 45m | ARIA table |
| Filterable product list | 🟡 | 45m | Pattern |
| Todo list (CRUD + filters) | 🟢 | 30m | GreatFrontEnd |
| Grouped / sectioned list | 🟢 | 30m | react.dev |
| Masonry / Pinterest grid | 🔴 | 1h | Virtualization |
🪟 Overlays & Feedback
| Component | Difficulty | Time | Resource |
|---|---|---|---|
| Modal / Dialog | 🟡 | 45m | Flagship ⭐ |
| Toast / Snackbar system | 🟡 | 45m | GreatFrontEnd |
| Tooltip | 🟡 | 45m | ARIA tooltip |
| Popover / Dropdown menu | 🟡 | 45m | ARIA menu |
| Context menu (right-click) | 🟡 | 45m | BFE.dev |
| Accordion | 🟢 | 30m | ARIA accordion |
| Command palette (⌘K) | 🔴 | 1h | Flagship ⭐ |
| Progress bar / Spinner | 🟢 | 20m | ARIA progressbar |
| Skeleton loader | 🟢 | 20m | web.dev |
| Confirmation dialog (promise-based) | 🟡 | 45m | Patterns |
| Notification center / inbox | 🟡 | 45m | Real-time |
🧭 Navigation & Layout
| Component | Difficulty | Time | Resource |
|---|---|---|---|
| Tabs | 🟢 | 30m | ARIA tabs |
| Carousel / Image slider | 🟡 | 45m | System design flagship |
| Breadcrumbs | 🟢 | 20m | ARIA breadcrumb |
| Stepper / Wizard | 🟡 | 45m | GreatFrontEnd |
| Kanban board (drag & drop) | 🔴 | 1h | Flagship ⭐ |
| Drag & Drop reorderable list | 🟡 | 45m | HTML DnD |
| Sidebar / collapsible nav | 🟢 | 30m | ARIA |
| Mega menu | 🟡 | 45m | ARIA menu |
| Sticky header on scroll | 🟢 | 30m | IntersectionObserver |
| Scroll-spy nav | 🟡 | 45m | IntersectionObserver |
| Split pane (resizable) | 🟡 | 45m | Pointer events |
| Bottom sheet (mobile) | 🟡 | 45m | Pointer events |
🎨 Editors, Canvas & Media
| Component | Difficulty | Time | Resource |
|---|---|---|---|
| Markdown editor + preview | 🟡 | 45m | BFE.dev |
| Rich text editor (contenteditable) | 🔴 | 1h | contenteditable |
| Image viewer / lightbox | 🟡 | 45m | Carousel flagship |
| Image crop / zoom | 🔴 | 1h | Canvas API |
| JSON viewer / tree | 🟡 | 45m | Recursion pattern |
| Whiteboard / drawing (canvas) | 🔴 | 1.5h | Canvas API |
| Spreadsheet (editable grid) | 🔴 | 1.5h | GreatFrontEnd |
| Video player controls | 🔴 | 1h | MDN media |
| Audio waveform player | 🔴 | 1h | Web Audio |
| Gantt chart | 🔴 | 1.5h | SVG |
🕹️ Games & Interactive
| Component | Difficulty | Time | Resource |
|---|---|---|---|
| Tic-Tac-Toe | 🟢 | 30m | react.dev tutorial |
| Whack-a-mole | 🟢 | 30m | BFE.dev |
| Memory / matching game | 🟡 | 45m | GreatFrontEnd |
| Snake | 🟡 | 45m | BFE.dev |
| Connect Four | 🟡 | 45m | BFE.dev |
| Minesweeper | 🔴 | 1h | BFE.dev |
| Sudoku | 🔴 | 1h | BFE.dev |
| 2048 | 🔴 | 1h | GreatFrontEnd |
| Wordle | 🟡 | 45m | GreatFrontEnd |
| Countdown timer / Stopwatch | 🟢 | 30m | GreatFrontEnd |
| Pomodoro timer | 🟢 | 30m | BFE.dev |
| Traffic light | 🟢 | 20m | state machine |
| Analog clock | 🟢 | 30m | BFE.dev |
🧮 JS Utilities (implement these)
| Utility | Difficulty | Time | Resource |
|---|---|---|---|
debounce / throttle |
🟡 | 30m | JS flagship ⭐ |
Promise.all / allSettled / race / any |
🟡 | 45m | JS flagship ⭐ |
Array.prototype.map/filter/reduce polyfills |
🟡 | 30m | JS section |
Function.prototype.call/apply/bind polyfill |
🟡 | 30m | MDN bind |
deepClone |
🟡 | 30m | structuredClone |
deepEqual |
🟡 | 30m | BFE.dev |
| Event Emitter / pub-sub | 🟡 | 30m | Patterns flagship ⭐ |
curry / pipe / compose |
🟡 | 30m | BFE.dev |
retry with backoff |
🟡 | 30m | Networking |
memoize |
🟡 | 30m | BFE.dev |
| Promise pool / concurrency limiter | 🔴 | 45m | BFE.dev |
flatten nested array |
🟢 | 20m | MDN flat |
getIn / setIn (lodash get) |
🟢 | 20m | BFE.dev |
classNames (clsx) |
🟢 | 20m | BFE.dev |
| LRU cache | 🔴 | 45m | BFE.dev |
Virtual DOM diff / createElement |
🔴 | 1h | Build your own |
useState/useEffect (mini React) |
🔴 | 1h | Build your own |
🧰 More UI components
| Component | Difficulty | Time | Resource |
|---|---|---|---|
| Segmented control | 🟢 | 30m | ARIA radio |
| Chips / tag list | 🟢 | 30m | GreatFrontEnd |
| Avatar group (with overflow) | 🟢 | 30m | BFE.dev |
| Progress steps / timeline | 🟡 | 45m | GreatFrontEnd |
| Notification badge | 🟢 | 20m | Notification flagship |
| Copy-to-clipboard button | 🟢 | 20m | Clipboard API |
| Read more / truncate text | 🟢 | 30m | BFE.dev |
| Segmented progress (stories) | 🟡 | 45m | GreatFrontEnd |
| Cookie-consent banner | 🟢 | 30m | Security |
| Onboarding tour / coach-marks | 🟡 | 45m | BFE.dev |
| Theme (dark mode) toggle | 🟢 | 30m | CSS theming |
| Virtual keyboard | 🟡 | 45m | BFE.dev |
| Emoji picker | 🟡 | 45m | Autocomplete flagship |
| Multi-step checkout | 🔴 | 1h | State |
| Comment box with @mentions | 🟡 | 45m | Autocomplete flagship |
🔁 Async & data components
| Component | Difficulty | Time | Resource |
|---|---|---|---|
| Debounced search box | 🟡 | 30m | Autocomplete flagship |
| Infinite scroll (IntersectionObserver) | 🟡 | 45m | News Feed flagship |
| Paginated table with API | 🟡 | 45m | Data Grid flagship |
| Poll for updates (with backoff) | 🟡 | 45m | Networking |
| Retry-on-error wrapper | 🟡 | 30m | Patterns |
| Optimistic like button | 🟡 | 30m | Patterns |
| File upload with progress | 🔴 | 1h | Patterns |
| Image lazy-loader | 🟡 | 30m | Performance |
| Autosave / draft form | 🟡 | 45m | debounce flagship |
| Live search results dropdown | 🟡 | 45m | Autocomplete flagship |
Related: 15-system-design · 11-accessibility · 14-testing
This list grows with the community — add a component or turn one into a full flagship.