20+ Frontend Machine Coding Round Interview Questions

Machine Coding Round Interview is one of the most common interview round in frontend interviews to test your hands-on frontend skills. This evaluation happens by giving a real life frontend problem statement to code and execute.

This guide consists of more than 20 Machine Coding Round questions that includes the required functionalities that an Interviewer is looking for while evaluating the machine coding solutions. It will help you to understand the right approach for a machine coding round interview. This approach includes

1. A high-level clarification of expected features - Functional requirements
2. Non-functional requirements, if any, like Responsive design, Accessibility considerations
3. Edge cases, if any 
4. Application Scaling - expected number of records to render, Static or Dynamic text
5. Initial state & Error conditions

20+ Frontend Machine Coding Round Interview Questions: Most Asked

Here are the top 20+ most asked and most common frontend machine coding round questions to prepare for your next interview.

Let's Directly jump to the machine coding questions

1. Todo Application
2. News Feed / Infinite Scrolling
3. Pagination Implementation
4. Tree / Folder Navigation / Checkbox Folder Selection
5. Comment View / Multi-level comments
6. Auto-Complete Search / Type-Ahead Search
7. Star Rating
8. Image Carousel
9. Accordion (Static or Dynamic)
10. Toast Notification
11. Menu bar / Nav bar Responsive
12. Tab Component (Static or Dynamic)
13. Context Menu
14. Modal Component
15. Theme Toggle Switch
16. Tick-tac-toe Game
17. OTP Input
18. Countdown Widget
19. Multi-Step Form
20. Kanban Board

 

1. ToDo Application

Most asked feature requirements

• Add, edit, and delete tasks from the to-do list.
• Complete/incomplete toggling - Direct click on the task or through a checkbox for completion
• Persist todo tasks locally in the browser using localStorage.
• Different filter by status to show all, active, and done todos
• Bulk actions on the tasks - mark all done, clear completed

Advanced requirements

• Real-time collaboration using WebSockets - Where multiple members updating the same todo list.
• Offline support using PWA service workers.

Important concepts

• State management e.g. Redux or component state management using useReducer()
• CRUD operation using fetch API, if there is any requirement to fetch or update todos using APIs 
• Local storage strategies like localStorage or in-memory storage

Asked in Companies

• Infosys, IBM, Wipro, Capgemini

Best Resources

• Todo machine coding question resources

2. News Feed / Infinite Scrolling

Most asked feature requirements

• Display a list of News/Feed with metadata like media, comments, description, user info etc.
• Fetch the News feed in pages on the initial load - How to manage the number of items rendered as per the different devices
• Infinite scroll with loading spinner at the end while loading new content.
• Handle API calls and error handling.

Advanced requirements

• Virtualization for performance ( library like react-window or react-virtualised generally implements the virtualisation)
• Infinite scroll using Intersection Observer when the API supports the paginated content.
• Caching the fetched data from the API using Redux or In-memory.
• Pre-fetch the next page, even before reaching the end.

Important concepts

• Intersection Observer API
• Scroll event handling
• API pagination strategies

Asked in Companies

• LinkedIn, Google, BrowserStack

Best Resources

• News feed machine coding question resources

3. Pagination Implementation

Most asked feature requirements

• Implementation of pagination options like prev, next, and direct go to page
• Setting up the Pagination config like "number of records per page"
• Disable prev/next as needed at the beginning and end, respectively.

Advanced requirements

• Jump to last/first pagination options.
• Infinite scrolling + pagination
• Dynamic calculation of pagination based on the remote content using APIs

Important concepts

• static vs remote data-driven pagination
• URL sync with pagination, SSR support

Asked in Companies

• Google, Shopify, Booking.com, Agoda, GoDaddy

Best Resources

• Pagination machine coding resources

4. Tree / Folder Navigation / Checkbox Folder Selection

Most asked feature requirements

• Static data in JSON format - Nested tree view with expand/collapse options when there are child components
• Checkbox selection (parents reflect children)
• Dynamic icons on expand/collapse actions.

Advanced requirements

• Lazy loading children while loading dynamic data using APIs
• Keyboard & accessibility nav (ARIA roles)
• Virtualisation - In cases where a large amount of data needs to be rendered, such as 1,000 children on the click of the expand option.

Important concepts

• Recursive rendering of the child/parent component based on the options
• Controlled check state propagation to reflect changes in the child in case there is a change in the parent.
• Accessibility roles for trees - like aria-role="treeitem"

Asked in Companies

• Atlassian, MakeMyTrip

Best Resources

• Tree/folder/checkbox folder selection machine coding resources

5. Comment View / Multi-level comments

Most asked feature requirements

• Nested comments (threaded view)
• Implementation of Add, edit, and reply functionality, reply can be done at each level
• Collapse/expand comment threads

Advanced requirements

• Pagination per comment thread
• Restrict comment replies to only authenticated users
• Virtualization is used in cases of a very large amount of comments, such as those on YouTube.

Important concepts

• Recursion, virtualization
• State normalization - Rather than storing comments in a JSON like format, storing a flat list is a better approach.

Companies

• MindTree, Flipkart

Best Resources

• Comment view frontend machine coding question resources

6. Auto-Complete Search / Type-Ahead Search

Most asked feature requirements

• Input suggestions data from the remote API
• Debounce user input - so that the API call happens only when the user waits after entering the initial text
• Keyboard navigation & selection
• Auto-complete config - Number of elements to show in the suggestions, then the scroll should be applied.
• Template-based suggestion list - the user can provide any template to configure the search results as per requirements

Advanced requirements

• Accessible ARIA, highlight typed matches
• Cache suggestions
• Error/loading states

Important concepts

• Debounce vs throttle, when to use which one.
• Keyboard event handling, focus management
• ARIA combobox, listbox

Companies

• Amazon, Google, Airbnb, MakeMyTrip, Oracle, Nvidia

Best Resources

• Auto-complete search/ type ahead search, Frontend Machine coding resources

7. Star Rating

Most asked feature requirements

• Implement selection of Stars on hover and click out of 5 stars
• Half stars support - Where you need to support a rating like 3.5/5, where you need to select 3 and half stars
• Reset capability to the initial state

Advanced requirements

• Accessibility (focus, ARIA roles) considerations
• Start rating submissions through APIs
• Read-only support

Important concepts

• Hover/click event management
• Controlled vs uncontrolled components

Asked in Companies

• Amazon, Booking.com, Cleartrip, Flipkart, Razorpay

Best Resources

• Prepare for Star Rating component resources

8. Image Carousel

Most asked feature requirements

• Implementation of Navigation of images via prev/next buttons
• Dynamic images from API calls.
• Circular cycling - Start from the first image when reach to the end.
• Ensuring one image in the DOM at a time

Advanced requirements

• Auto-advance image with pause on hover
• Smooth animations/transitions
• Responsive & lazy loading of images

Important concepts

• State + timers using setInterval
• DOM virtualization for performance
• Responsive layouts via CSS

Asked in Companies

• Microsoft, Agoda

Best Resources

• Image carousel Machine coding resources

9. Accordion (Static or Dynamic)

Most asked feature requirements

• Expand/collapse single or multiple panels
• Change the expand/collapse icons with Smooth animation
• Only the single panel opens - The others should automatically close.

Advanced requirements

• Keyboard navigation (ARIA support)
• Controlled the accordion via props
• Disabled one of the accordions in the list.
• customize accordions based on the expand and collapse functionality

Important concepts

• Managing the multiple states
• CSS transitions
• Accessibility roles & keyboard navigation

Asked in Companies

• Atlassian, Microsoft, Zendesk

Best Resources

• Accordion Machine Coding Resources

10. Toast Notification

Most asked feature requirements

• Show timed notifications
• Support various types (success, error)
• Auto-dismiss with click to close

Advanced requirements

• Queueing multiple toasts
• Animation, position customisation

Important concepts

• Portals (render outside main flow)
• Timers and cleanup

Asked in Companies

• Twilio, Flipkart

11. Menu bar / Nav bar Responsive

Most asked feature requirements

• Hamburger Menu toggle on mobile vs laptop/desktop using CSS media queries.
• Support nested menus using JSON-based input.
• Highlight the active link on click

Advanced requirements

• Keyboard navigation support.
• Dynamic sticky behaviour on scroll

Important concepts

• CSS media queries to support the responsiveness of the menu.
• keyboard navigation & ARIA roles

12. Tab Component (Static or Dynamic)

Most asked feature requirements

• Click to switch content panels
• Dynamic tab creation support - where the Tab data comes from APIs
  • Support data loading icon when data comes from APIs
• Disable the tab based on the property
• Set up the config based on the selection of the tab.

Advanced requirements

• Keyboard support for switching tabs
• Lazy load tab content

Important concepts

• Controlled/uncontrolled component states
• ARIA tablist, tabpanel roles to support accessibility

Companies

• Atlassian, Adobe, Microsoft

13. Context Menu

Most asked feature requirements

• Implementation of the show menu on right-click, on the same mouse pointer position
• Render custom items based on the click area.
• Dynamic loading options from the APIs, rather than locally

Advanced requirements

• Submenus supports
• Dismiss context menu on outside click

Important concepts

• Custom event handling
• Positioning near the cursor, using the BOM properties clientX, clientY properties
• Click-away handlers, based on the event origin.

14. Modal Component

Most asked feature requirements

• Implement a Modal on click on a button with a close icon
• Modal should have an overlay, and close via Escape/overlay click

Advanced requirements

• Stacking multiple modals, and those can be closed one at a time from top to bottom.

Important concepts

• CSS position properties to show the Modal on top of the screen, ARIA roles
• For Overay implementation - CSS position & display properties 

Companies

• Razorpay, Oracle, Flipkart

15. Theme Toggle Switch

Most asked feature requirements

• Implement a switch/checkbox/button to toggle between Light/dark.
• Persist preference using browser storage.

Advanced requirements

• Auto-detect using meta tags

  <meta name="theme-color" content="cornflowerblue" />

Important concepts

• CSS custom properties
• Local storage

Best Resources

• Dark & Light theme machine coding resources

16. Tic-Tac-Toe Game

Most asked feature requirements

• Implement 3×3 grid, win/draw detection every time after a turn
• Reset button to reset the game
• Show different colors for each player.

Advanced requirements

• Move history - Where you can undo the move

Important concepts

• Event delegation - required to detect which cell got clicked.
• Event handling to analyse the logic to predict win/lose after each move.

Companies

• Microsoft

17. OTP Input

Most asked feature requirements

• Implement 4 or 6-digit inputs based on the prop
• Auto-focus next once the entry has been made in the existing input
• Paste support - Clipboard number automatically spreads across the inputs

Advanced requirements

• Masked values - how to mask values, and change focus
• Validation & timer

Important concepts

• Controlled inputs and event delegation for validation.
• Clipboard events to support paste

18. Countdown Widget

Most asked feature requirements

• Implement a countdown from the given initial timer value
• Show Minutes and seconds in format - mm:ss
• Pause/resume/reset buttons to handle timer functions

Advanced requirements

• Callback at completion - when it reaches zero

Important concepts

• setInterval, cleanup useEffect
• Time formatting

19. Multi-Step Form

Most asked feature requirements

• Step-by-step navigation with Form validation at each step.
• Data persistence using Redux or in state using useReduce() hook
• Show progress of the form using the stepper component.

Advanced requirements

• Manage dependencies, where the next form values depend on the previous form value.
• Dynamic steps, save progress

Important concepts

• Form state management
• Validation - react or JavaScript-based validations
• Context for shared state across forms

Best Resources

• Multi-form machine coding resources

20. Kanban Board

Most asked feature requirements

• Implement a kanban board where columns as statuses and each column contains task cards
• Add/edit/remove cards from the column
• Move cards between columns

Advanced requirements

• Persist board state in browser local storage.
• Offline support

Important concepts

• Drag & Drop support using react-dnd only if asked or the HTML5 drag API
• Nested state, performance
• Virtualization for large boards where the number of cards can be a big number, like 1000

Companies

• Atlassian, Trello, Amazon, Google

Best Resources

• Kanban Machine coding resources

What Next

All of these machine coding questions are the most asked machine coding questions in Frontend Interviews, which will help you to understand the features and functionality requirements, so that you can prepare better for the patterns required to code the frontend machine coding questions.

Check out the Frontend Machine Coding Round Interview Cheat Sheet to learn more and revise all the important patterns to ace the machine coding round.

References

✅ Checkout best curated resources for Frontend Machine Coding Round Interview Questions

✅ 30 Most Asked Frontend Machine Coding Interview Questions [GitHub]

✅ Best Cheat Sheet to prepare for Machine Coding Round Interview