ESC

Type to search the knowledge base.

Interview

Machine coding

Timed UI builds scored on structure, accessibility, edge cases, and product sense — not only visual polish.

Todo App

beginner

Machine-coding brief for a production-minded todo list — requirements, architecture, state, a11y, and extensions.

45–60 min

Autocomplete Search Box

intermediate

Machine-coding brief for a typeahead search input — debounce, race-safe fetch, keyboard nav, a11y, and caching.

45–60 min

Infinite Scroll Feed

intermediate

Machine-coding brief for a cursor-paginated feed — IntersectionObserver, race safety, empty/error states, and a11y.

45–60 min

Image Carousel

intermediate

Machine-coding brief for an image carousel — slides, controls, keyboard, autoplay pause, a11y, and reduced motion.

45–60 min

Accessible Modal Dialog

intermediate

Machine-coding brief for a modal dialog — focus trap, Escape, scroll lock, restore focus, and ARIA dialog pattern.

45–60 min

Custom Dropdown Select

intermediate

Machine-coding brief for a custom select — listbox pattern, keyboard typeahead, focus, and form-friendly API.

45–60 min

Multi Select Chips Input

intermediate

Machine-coding brief for multi-select chips — tags input, keyboard remove, suggestions, a11y listbox, and controlled values.

45–60 min

Nested Comments Thread

intermediate

Machine-coding brief for nested comments — tree model, reply UX, collapse, pagination of roots, and a11y.

45–60 min

File Explorer Tree View

intermediate

Machine-coding brief for a file tree — expand/collapse, selection, keyboard tree pattern, lazy children, and icons.

45–60 min

Kanban Board

intermediate

Machine-coding brief for a kanban board — columns, cards, cross-column drag, state model, and keyboard moves.

45–60 min

Drag and Drop List Reorder

intermediate

Machine-coding brief for list reorder — pointer drag, keyboard move, optimistic order, and accessible announcements.

45–60 min

Lite Spreadsheet Grid

advanced

Machine-coding brief for a mini spreadsheet — cell model, selection, edit mode, keyboard nav, and formula hook points.

45–60 min

Calendar Month View

intermediate

Machine-coding brief for a month calendar grid — date math, selection, keyboard nav, a11y, and localization hooks.

45–60 min

Chat Message UI

intermediate

Machine-coding brief for a chat message list — bubbles, grouping, scroll anchoring, composer, and a11y.

45–60 min

Emoji Picker Panel

intermediate

Machine-coding brief for an emoji picker — grid, search, categories, keyboard, virtualization notes, and insert callback.

45–60 min

Color Picker Widget

intermediate

Machine-coding brief for a color picker — hex/RGB state, saturation canvas, hue slider, a11y, and controlled value.

45–60 min

Rich Text Toolbar

intermediate

Machine-coding brief for a rich-text toolbar — contentEditable or execCommand baseline, active states, and a11y.

45–60 min

Split Markdown Editor

intermediate

Machine-coding brief for split markdown edit/preview — sync scroll optional, sanitize HTML, debounce render.

45–60 min

Code Editor Line Numbers

intermediate

Machine-coding brief for a mini code editor — synced line numbers, scroll lock, tabs, caret-friendly textarea.

45–60 min

Shopping Cart Drawer

intermediate

Machine-coding brief for a cart drawer — line items, qty updates, totals, focus trap, and accessible dialog pattern.

45–60 min

OTP Input Boxes

intermediate

Machine-coding brief for OTP/PIN inputs — multi-box entry, paste, backspace, a11y one-field semantics, and autofill.

45–60 min

Product Filters Sidebar

intermediate

Machine-coding brief for product filters — URL-synced facets, multi-select, clear-all, and derived result counts.

45–60 min

Pagination Component

intermediate

Machine-coding brief for pagination — page math, truncated ranges, controlled page, a11y navigation, and edge cases.

45–60 min

Sortable Data Table

intermediate

Machine-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

intermediate

Machine-coding brief for online/offline UI — navigator.onLine, events, banners, queue hooks, and a11y live regions.

45–60 min

Virtualized Data Table

advanced

Machine-coding brief for a virtualized table — windowing math, sticky header, row height, scroll performance.

45–60 min

Multi Step Wizard

intermediate

Machine-coding brief for a multi-step wizard — step state, validation gates, linear/non-linear nav, and a11y.

45–60 min

Tabs Component

intermediate

Machine-coding brief for accessible tabs — tablist pattern, keyboard arrows, panels, and controlled state.

45–60 min

Accordion FAQ

intermediate

Machine-coding brief for an accessible accordion FAQ — single/multi expand, keyboard, ARIA, and clean state.

45–60 min

Toast Notification System

intermediate

Machine-coding brief for toasts — queue, auto-dismiss, a11y live regions, stacking, and imperative API.

45–60 min

Smart Tooltip Positioning

intermediate

Machine-coding brief for smart tooltips — flip/shift positioning, delay, hover/focus, and accessible naming.

45–60 min

Polling Metrics Dashboard

intermediate

Machine-coding brief for a metrics dashboard — polling, abort/stale safety, visibility pause, cards, and error UX.

45–60 min

Star Rating Input

intermediate

Machine-coding brief for star rating — hover preview, keyboard, half stars optional, and radiogroup a11y pattern.

45–60 min

Typeahead Mentions

intermediate

Machine-coding brief for @mentions typeahead — caret detection, portal list, insert token, keyboard, and a11y.

45–60 min

Image Cropper Lite

intermediate

Machine-coding brief for a lite image cropper — crop box, drag/resize, aspect lock, canvas export, and state.

45–60 min

Video Player Controls

intermediate

Machine-coding brief for custom video controls — play/seek/volume, keyboard, Media Session hooks, and a11y.

45–60 min

Tic-Tac-Toe Board

intermediate

Machine-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

intermediate

Spawn 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

advanced

Tree 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

beginner

CSS 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

intermediate

Two 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

intermediate

Flex 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

intermediate

Thumbnail 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

intermediate

Drag 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

beginner

Machine-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

intermediate

Flip 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

intermediate

Stack 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

advanced

Filter 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

intermediate

dragover 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)