Machine Coding Challenges
The other half of a frontend interview: not “what does this algorithm return” but “build this component.” 15 hand-written briefs — an autocomplete, an infinite scroll, a star rating — each with a real in-browser IDE and a test suite that renders your component and checks it, live.
Build an autocomplete
A text input that filters a fixed list as you type, and fills itself in when you pick a suggestion — the component behind every search box.
Build infinite scroll
A list that loads more of itself as you approach the bottom, with a cap so it does not load forever — the pattern behind every feed.
Build a star rating
Five clickable stars that commit a rating, with a hover preview before you commit — small, but the accessible-labelling and state-management bugs hide in the details.
Build a debounced search input
A search box that only fires once you stop typing — the single most-asked "implement this" question, turned into a real UI.
Build a modal dialog
Open, close by three different routes, and don't close by accident — the small interaction contract every modal in production actually has to get right.
Build collapsible nested comments
A recursive comment thread where collapsing a reply hides everything nested under it — Reddit and Hacker News both live or die on this one component.
Build a toast notification system
Notifications that stack, dismiss themselves, and can be dismissed early — the queue-management problem that looks like a styling task until you actually build it.
Build accessible tabs
Switching panels is the easy 90% — the arrow-key navigation the ARIA tabs pattern actually requires is the part that gets skipped.
Build pagination with ellipsis
Ten pages, but you can't just print ten buttons — the windowing logic behind every real pagination control, not just the click handlers.
Build an accordion
Three expandable panels, only one open at a time — small, but the "close the others" state logic is exactly where a naive implementation breaks.
Build a tag input
Type a word, press Enter, it becomes a chip — and pressing Backspace on an empty input removes the last one. The keyboard-driven list-editing pattern behind every email/skills field.
Build a carousel
Auto-advancing slides, manual controls, and the one thing almost every real carousel gets wrong: it keeps advancing while you're still reading it.
Build an OTP input
Four boxes that behave like one field — typing moves focus forward, Backspace on an empty box moves it back. The verification-code UI nearly every signup flow needs.
Build a countdown timer
Start, pause, resume, reset — the deceptively easy timer that most implementations get subtly wrong the moment you pause and resume it.
Build tic-tac-toe
The classic logic-over-styling interview problem — placing marks is trivial, detecting a win across eight possible lines and locking the board afterward is the actual test.