Interview
Machine coding
Timed UI builds scored on structure, accessibility, edge cases, and product sense — not only visual polish.
Todo App
beginnerMachine-coding brief for a production-minded todo list — requirements, architecture, state, a11y, and extensions.
45–60 min
Autocomplete Search Box
intermediateMachine-coding brief for a typeahead search input — debounce, race-safe fetch, keyboard nav, a11y, and caching.
45–60 min
Infinite Scroll Feed
intermediateMachine-coding brief for a cursor-paginated feed — IntersectionObserver, race safety, empty/error states, and a11y.
45–60 min
Image Carousel
intermediateMachine-coding brief for an image carousel — slides, controls, keyboard, autoplay pause, a11y, and reduced motion.
45–60 min
Accessible Modal Dialog
intermediateMachine-coding brief for a modal dialog — focus trap, Escape, scroll lock, restore focus, and ARIA dialog pattern.
45–60 min
Custom Dropdown Select
intermediateMachine-coding brief for a custom select — listbox pattern, keyboard typeahead, focus, and form-friendly API.
45–60 min
Multi Select Chips Input
intermediateMachine-coding brief for multi-select chips — tags input, keyboard remove, suggestions, a11y listbox, and controlled values.
45–60 min
Nested Comments Thread
intermediateMachine-coding brief for nested comments — tree model, reply UX, collapse, pagination of roots, and a11y.
45–60 min
File Explorer Tree View
intermediateMachine-coding brief for a file tree — expand/collapse, selection, keyboard tree pattern, lazy children, and icons.
45–60 min
Kanban Board
intermediateMachine-coding brief for a kanban board — columns, cards, cross-column drag, state model, and keyboard moves.
45–60 min
Drag and Drop List Reorder
intermediateMachine-coding brief for list reorder — pointer drag, keyboard move, optimistic order, and accessible announcements.
45–60 min
Lite Spreadsheet Grid
advancedMachine-coding brief for a mini spreadsheet — cell model, selection, edit mode, keyboard nav, and formula hook points.
45–60 min
Calendar Month View
intermediateMachine-coding brief for a month calendar grid — date math, selection, keyboard nav, a11y, and localization hooks.
45–60 min
Chat Message UI
intermediateMachine-coding brief for a chat message list — bubbles, grouping, scroll anchoring, composer, and a11y.
45–60 min
Emoji Picker Panel
intermediateMachine-coding brief for an emoji picker — grid, search, categories, keyboard, virtualization notes, and insert callback.
45–60 min
Color Picker Widget
intermediateMachine-coding brief for a color picker — hex/RGB state, saturation canvas, hue slider, a11y, and controlled value.
45–60 min
Rich Text Toolbar
intermediateMachine-coding brief for a rich-text toolbar — contentEditable or execCommand baseline, active states, and a11y.
45–60 min
Split Markdown Editor
intermediateMachine-coding brief for split markdown edit/preview — sync scroll optional, sanitize HTML, debounce render.
45–60 min
Code Editor Line Numbers
intermediateMachine-coding brief for a mini code editor — synced line numbers, scroll lock, tabs, caret-friendly textarea.
45–60 min
Shopping Cart Drawer
intermediateMachine-coding brief for a cart drawer — line items, qty updates, totals, focus trap, and accessible dialog pattern.
45–60 min
OTP Input Boxes
intermediateMachine-coding brief for OTP/PIN inputs — multi-box entry, paste, backspace, a11y one-field semantics, and autofill.
45–60 min
Product Filters Sidebar
intermediateMachine-coding brief for product filters — URL-synced facets, multi-select, clear-all, and derived result counts.
45–60 min
Pagination Component
intermediateMachine-coding brief for pagination — page math, truncated ranges, controlled page, a11y navigation, and edge cases.
45–60 min
Sortable Data Table
intermediateMachine-coding brief for a sortable data table — column sort state, a11y sort signals, stable sort, and client vs server.
45–60 min
Offline Status Indicator
intermediateMachine-coding brief for online/offline UI — navigator.onLine, events, banners, queue hooks, and a11y live regions.
45–60 min
Virtualized Data Table
advancedMachine-coding brief for a virtualized table — windowing math, sticky header, row height, scroll performance.
45–60 min
Multi Step Wizard
intermediateMachine-coding brief for a multi-step wizard — step state, validation gates, linear/non-linear nav, and a11y.
45–60 min
Tabs Component
intermediateMachine-coding brief for accessible tabs — tablist pattern, keyboard arrows, panels, and controlled state.
45–60 min
Accordion FAQ
intermediateMachine-coding brief for an accessible accordion FAQ — single/multi expand, keyboard, ARIA, and clean state.
45–60 min
Toast Notification System
intermediateMachine-coding brief for toasts — queue, auto-dismiss, a11y live regions, stacking, and imperative API.
45–60 min
Smart Tooltip Positioning
intermediateMachine-coding brief for smart tooltips — flip/shift positioning, delay, hover/focus, and accessible naming.
45–60 min
Polling Metrics Dashboard
intermediateMachine-coding brief for a metrics dashboard — polling, abort/stale safety, visibility pause, cards, and error UX.
45–60 min
Star Rating Input
intermediateMachine-coding brief for star rating — hover preview, keyboard, half stars optional, and radiogroup a11y pattern.
45–60 min
Typeahead Mentions
intermediateMachine-coding brief for @mentions typeahead — caret detection, portal list, insert token, keyboard, and a11y.
45–60 min
Image Cropper Lite
intermediateMachine-coding brief for a lite image cropper — crop box, drag/resize, aspect lock, canvas export, and state.
45–60 min
Video Player Controls
intermediateMachine-coding brief for custom video controls — play/seek/volume, keyboard, Media Session hooks, and a11y.
45–60 min
Tic-Tac-Toe Board
intermediateMachine-coding a tic-tac-toe grid of size N: turns, win lines, draw, reset, and keyboard. Interviewers care about the winner function more than CSS.
45-60 min
Queueable Progress Bars
intermediateSpawn progress bars that fill over a duration and queue so only N run at once. Timers, cancellation, and the bar that must not jump when dequeued.
45-60 min
Nested Checkboxes
advancedTree checkboxes with parent-child sync: check all descendants, indeterminate parents, and a data model that does not store UI-only flags twice.
60 min
Analog Clock
beginnerCSS rotate hands from Date, tick every second, and keep 12-hour geometry honest. rAF vs setInterval, and reduced-motion for a clock that still tells time.
30-45 min
Transfer List
intermediateTwo lists with move selected, move all, and optional reorder. Selection model, disabled empty actions, and keyboard between panes.
45-60 min
Twelve-Column Grid Component
intermediateFlex or grid 12-column layout with span and a single breakpoint. Spacing from a multiplier, and why 4+8 must wrap as 12+12 on small screens.
45 min
Lightbox Image Gallery
intermediateThumbnail grid that opens a dialog with prev/next, Escape, focus trap, and preload. Do not invent a carousel from scratch if a dialog plus index is enough.
45-60 min
Resizable Split Panes
intermediateDrag a splitter to resize two panes, with min widths, keyboard nudges, and pointer capture so the drag does not stall on iframes.
45-60 min
Stopwatch Timer
beginnerMachine-code a stopwatch: elapsed from startedAt, pause stores the accumulated time, never increment a counter on an interval tick.
30-45 min
Memory Match Game
intermediateFlip two cards, match or unflip, lock the board while the timer runs, and shuffle a pair list without mutating the original deck.
45-60 min
Image Comparison Slider
intermediateStack two images and drive a clip with a range input. Keyboard, reduced motion, and a divider that does not steal the picture.
45 min
Command Palette
advancedFilter a command list in a dialog, arrow keys, Enter to run, Escape to close, and a focus trap so Tab never leaks to the page.
60 min
File Dropzone Upload
intermediatedragover must preventDefault or the drop never fires. Keep a hidden file input as the keyboard path, and reject by type and size before upload.
45-60 min
More problems (coming soon)
- Kanban Board
- Image Carousel
- Infinite Scroll
- Nested Comments
- File Explorer
- Spreadsheet
- Calendar
- Chat App
- Code Editor
- Shopping Cart
- Autocomplete
- Drag and Drop