It 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 interview. This approach includes
- A high-level clarification of expected features
- Non-functional requirements, if any, like Responsive design, Accessibility considerations
- Edge cases, if any
- Application Scaling - expected number of records to render, Static or Dynamic text
- Initial state & Error conditions
20+ Frontend Machine Coding Interview Questions: Most Asked
Here are the top 20+ most asked and most common frontend machine coding questions to prepare for your next interview.
Directly jump to the machine coding question
- Todo Application
- News Feed / Infinite Scrolling
- Pagination Implementation
- Tree / Folder Navigation / Checkbox Folder Selection
- Comment View / Multi-level comments
- Auto-Complete Search / Type-Ahead Search
- Star Rating
- Image Carousel
- Accordion (Static or Dynamic)
- Toast Notification
- Menu bar / Nav bar Responsive
- Tab Component (Static or Dynamic)
- Context Menu
- Modal Component
- Theme Toggle Switch
- Tick-tac-toe Game
- OTP Input
- Countdown Widget
- Multi-Step Form
- 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
Best 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
Asked in Companies
Best 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
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
Best 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
Best 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
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
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
Best 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
Best 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
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
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
Important concepts
- CSS position properties to show the Modal on top of the screen, ARIA roles
- For Overay implementation - CSS position & display properties
Companies
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
Important concepts
- CSS custom properties
- Local storage
Best 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
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
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
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
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
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
Best 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 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
