Advanced Machine Coding Questions for Frontend Interviews
Beyond the basics: star rating, nested comments, tic-tac-toe, calculator, and more advanced questions.
Advanced Machine Coding Questions for Frontend Interviews
Beyond the common questions (OTP, autocomplete, pagination), here are advanced machine coding questions that test deeper skills.
1. Star Rating Component
Build a 5-star rating with hover preview, click to select, and half-star support.
Key features: hover preview, click to lock, half-star precision, reset, keyboard accessible.
2. Nested Comments (Reddit-style)
Build a threaded comments system with reply, vote, and collapse.
Key features: recursive rendering, reply, upvote/downvote, collapse/expand, indentation.
3. Tic-Tac-Toe Game
Build a tic-tac-toe with two players, win detection, and reset.
Key features: 3x3 grid, click to place, win/draw detection, reset, score tracking.
4. Stopwatch
Build a stopwatch with start, stop, reset, and laps.
Key features: start/stop/reset, lap times, elapsed time, time formatting.
5. Calculator
Build a calculator with basic operations.
Key features: display, number pad, operations, clear, decimal, keyboard support.
6. Password Strength Meter
Build a password input with a strength indicator.
Key features: input, strength calculation (length, special chars, numbers, uppercase), visual bar.
7. Drag and Drop List
Build a reorderable list using the Drag and Drop API.
Key features: dragstart, dragover, drop, reorder, visual feedback.
8. Tooltip Component
Build a tooltip with positioning (top, bottom, left, right).
Key features: hover to show, positioning, delay, ARIA accessible.
9. Breadcrumb Component
Build breadcrumbs with dynamic trail and navigation.
Key features: dynamic trail, click to navigate, separators, overflow handling.
10. Infinite Scroll
Build a list with infinite scroll loading.
Key features: IntersectionObserver, load more on scroll, loading indicator, end detection.
How to Practice These
- Start after mastering the common questions.
- These test additional skills: recursion (nested comments), game logic (tic-tac-toe), algorithms, and the Drag and Drop API.
- Practice each in 90 minutes.
The Takeaway
Advanced machine coding questions: star rating, nested comments, tic-tac-toe, stopwatch, calculator, password strength, drag and drop, tooltip, breadcrumb, and infinite scroll. Practice after mastering the common questions. They test recursion, game logic, APIs, and algorithms.
Star rating, nested comments (Reddit-style), tic-tac-toe, stopwatch, calculator, password strength meter, drag and drop list, tooltip, breadcrumb, and infinite scroll. These test recursion, game logic, APIs, and algorithms.
Create 5 star icons. On hover, highlight up to the hovered star. On click, lock the rating. Support half-stars with a clip or two separate icons. Add keyboard support (arrow keys to change, enter to select). Reset on mouse leave if not clicked.
Use a tree data structure. Write a recursive render function. Each comment has reply, vote, and collapse handlers. Indent nested comments by depth. Handle reply (add a child), vote (update score), and collapse (toggle children).
Use the HTML Drag and Drop API: dragstart (store the dragged item index), dragover (prevent default to allow drop), drop (reorder the array). Update the data and re-render. Add visual feedback (highlight the drop target).
Use IntersectionObserver to detect when a sentinel element at the bottom is visible. When visible, load more data and append. Show a loading indicator. Stop when there is no more data. Clean up the observer when done.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.