Top Machine Coding Questions for Frontend Interviews

Top Machine Coding Questions for Frontend Interviews

Here are the most asked machine coding questions in frontend interviews, with tips for each.

1. OTP Input Component

Build an OTP input with 4-6 boxes, auto-focus to the next box, backspace to go back, and paste support.

Key features: auto-focus, backspace navigation, numeric-only, paste support, submit when filled.

2. Progress Bar

Build a progress bar that fills based on a percentage, with animation.

Key features: animated fill, percentage display, customizable color, smooth transition.

3. Autocomplete Search Bar

Build a search bar with real-time suggestions, debounce, and keyboard navigation.

Key features: debounce, filter suggestions, keyboard navigation (up/down/enter), highlight matching text, click outside to close.

4. Pagination Component

Build a reusable pagination component with page numbers, next/prev, and ellipsis for many pages.

Key features: page numbers, next/prev buttons, ellipsis, current page highlight, page size selector.

5. Multi-Step Tab Form

Build a form with multiple tabs/steps, validation per step, and a final submit.

Key features: tab navigation, per-step validation, progress indicator, next/prev buttons, final submit.

6. File Explorer (Tree View)

Build a file explorer with expandable/collapsible folders, file icons, and nested structure.

Key features: recursive tree rendering, expand/collapse, file/folder icons, nested indentation.

7. Food Ordering App

Build a food ordering app with a menu, search, filters, cart, and checkout.

Key features: menu list, search, filters (veg/non-veg, price), cart (add/remove, quantity), total price, checkout.

8. Image Carousel

Build a carousel with next/prev, auto-play, dots, and swipe support.

Key features: next/prev, auto-play, dots indicator, infinite loop, swipe (touch).

9. Accordion

Build an accordion with expandable/collapsible sections, one open at a time.

Key features: expand/collapse, one open at a time (or multiple), smooth animation, accessible.

10. Modal/Dialog

Build a modal with open/close, overlay click, escape key, and focus trap.

Key features: open/close, overlay click to close, escape key, focus trap, scroll lock.

How to Practice

1. Pick one question.
2. Set a 90-minute timer.
3. Build from scratch.
4. Evaluate: functionality, code quality, edge cases, UI/UX.
5. Review with reference solutions.
6. Improve and redo.

The Takeaway

Top machine coding questions: OTP input, progress bar, autocomplete, pagination, tab form, file explorer, food ordering app, image carousel, accordion, and modal. Practice each in 90 minutes. Focus on functionality, code quality, edge cases, and UI/UX.