Hard frontend interview questions
110 questions at hard difficulty. Build the muscle for real frontend interviews with a runnable editor and explained solutions.
110 questions
- HARD
Accordion III
PREMIUMBuild a fully accessible accordion with keyboard navigation per the ARIA authoring practices guide.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Async Event Emitter
PREMIUMBuild an emitter whose emit awaits async listeners, with once, off, and serial or parallel dispatch.
40 minJavaScript - HARD
async parallel / series
PREMIUMImplement Node-style async runners — run error-first tasks in parallel or in series and collect their results.
40 minJavaScript - HARD
Async Read-Write Lock
Implement a read-write lock that allows many concurrent readers or one exclusive writer without starving writers.
40 minJavaScript - HARD
Auth Code Input
PREMIUMBuild a six-cell auth code input that handles typing, paste, backspace, and arrow-key navigation across fields.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Autocomplete III
PREMIUMBuild a production autocomplete with async fetch, debounce, keyboard navigation, caching, and match highlighting.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Backbone Model
PREMIUMImplement a Backbone-style Model class that stores attributes and emits change events per key.
40 minJavaScript - HARD
Binary Search Tree
PREMIUMBuild a binary search tree with insert, search, and delete operations preserving the BST invariant.
40 minAlgorithms - HARD
Binary Tree Maximum Total Path
PREMIUMImplement a function that returns the maximum sum of node values along any path in a binary tree.
40 minAlgorithms - HARD
Binary Tree Serialization and Deserialization
PREMIUMImplement functions that convert a binary tree to a string and reconstruct the same tree back from that string.
40 minAlgorithms - HARD
Calendar Scheduler
PREMIUMBuild a week-view scheduler where events render in time slots and can be added by clicking a slot.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
classNames II
PREMIUMExtend the classNames utility to dedupe class names and resolve function arguments lazily.
40 minJavaScript - HARD
Cooperative Scheduler
Run a queue of tasks in time slices, yielding control between them so the main thread stays responsive.
40 minJavaScript - HARD
Curry III
PREMIUMImplement a curry helper that turns a variadic function into one that can be called repeatedly with any number of arguments.
40 minJavaScript - HARD
Data Selection
PREMIUMImplement a function that filters an array of row objects by a flexible field-and-condition specification.
40 minJavaScript - HARD
Data Table III
PREMIUMBuild a generic, reusable data table that supports column-driven sorting and pagination for any dataset.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Data Table IV
PREMIUMBuild a generalized data table component that supports pagination, column sorting, and per-column filtering.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Data Table V
PREMIUMBuild a data table with sortable columns, pagination, and row selection over a dataset.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
DataLoader
PREMIUMBatch and cache load(key) calls made in one tick into a single batch function call, preserving order.
40 minJavaScript - HARD
Deep Clone II
PREMIUMImplement a deep clone that copies nested values and correctly handles circular references using a visited map.
40 minJavaScript - HARD
Deep Equal
PREMIUMImplement a function that determines whether two values are structurally equal across nested objects and arrays.
40 minJavaScript - HARD
Dijkstra's Algorithm
PREMIUMImplement Dijkstra's algorithm to compute shortest paths from a source vertex in a weighted graph.
40 minAlgorithms - HARD
Drag & Drop Sortable
PREMIUMReorder a list by pointer drag, computing the target index from the cursor over item midpoints.
40 minJavaScript - HARD
Drizzle Query Builder
PREMIUMBuild an in-memory query builder inspired by Drizzle with table helpers, filters, sorting, and pagination.
40 minJavaScript - HARD
Drizzle Query Builder II
PREMIUMExtend an in-memory query builder inspired by Drizzle with select projections and column aliases.
40 minJavaScript - HARD
Drizzle Query Builder III
PREMIUMExtend an in-memory query builder inspired by Drizzle with innerJoin and leftJoin between related tables.
40 minJavaScript - HARD
Extraterrestrial Language
PREMIUMGiven words sorted in an unknown alphabet's order, reconstruct the alphabet.
40 minAlgorithmsGoogle · Airbnb · Facebook - HARD
Fenwick Tree (Binary Indexed Tree)
PREMIUMBuild a Fenwick tree for logarithmic prefix-sum queries and point updates, using the lowest-set-bit trick to walk responsibility ranges.
40 minAlgorithms - HARD
Find Words in Grid
PREMIUMImplement a function that returns every word from a dictionary that can be traced through adjacent cells in a grid.
40 minAlgorithms - HARD
Gantt Chart
PREMIUMBuild a Gantt chart that renders tasks as bars positioned across a timeline by start and duration.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
getElementsByTagNameHierarchy
PREMIUMImplement a function that finds all DOM elements matching an ancestor-to-descendant tag-name hierarchy.
40 minJavaScript - HARD
Heap
PREMIUMImplement a binary heap data structure supporting push, pop, peek, and heapify with the standard ordering invariant.
40 minAlgorithms - HARD
Heap Sort
PREMIUMImplement heap sort by building a max-heap and repeatedly extracting the largest element.
40 minAlgorithms - HARD
HTML Tokenizer & Parser
PREMIUMTokenize an HTML string and build a nested node tree, handling attributes, void, and nested tags.
40 minJavaScript - HARD
Idle Task Scheduler
PREMIUMRun a queue of tasks in time-sliced batches, yielding between slices to keep the frame responsive.
40 minJavaScript - HARD
Image Carousel III
PREMIUMBuild an image carousel that smoothly transitions between images while keeping the DOM footprint minimal.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Image Cropper
PREMIUMBuild an image cropper with a draggable, resizable crop region over an image.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Immer produce()
PREMIUMImplement produce so mutating a draft proxy yields a new immutable state with structural sharing.
40 minJavaScript - HARD
Integer to English Words
PREMIUMSpell out a non-negative integer in English words — break it into groups of three digits and name each group with its scale word.
40 minJavaScript - HARD
JSON.parse
PREMIUMImplement JSON.parse — a recursive-descent parser that turns a JSON string into the corresponding JavaScript value.
40 minJavaScript - HARD
JSON.stringify II
PREMIUMImplement JSON.stringify with full spec support including replacer, indentation, and circular reference detection.
40 minJavaScript - HARD
Keyed DOM Reconcile
PREMIUMReconcile two keyed child lists into a minimal set of DOM inserts, moves, and removals.
40 minJavaScript - HARD
Lazy Tree View
PREMIUMBuild a collapsible tree that lazily loads a node's children the first time it is expanded.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Linked Lists Combine K Sorted
PREMIUMMerge k pre-sorted singly-linked lists into one sorted list in O(n log k) time.
40 minAlgorithmsGoogle · Amazon · Meta - HARD
Lowest Hiding Element
PREMIUMImplement a function that finds the deepest common ancestor whose hiding would conceal every target element.
40 minJavaScript - HARD
Map Async Limit
PREMIUMImplement an async map that processes an array with a bounded number of in-flight tasks.
40 minJavaScript - HARD
Median of Two Sorted Arrays
PREMIUMFind the median of two sorted arrays in logarithmic time by binary-searching for the partition that splits all the elements into equal halves.
40 minAlgorithms - HARD
Middlewares
PREMIUMImplement an async middleware composer that chains functions Koa-style, threading a shared context through next.
40 minJavaScript - HARD
Minesweeper
PREMIUMBuild Minesweeper with flood-fill reveal, flagging, and win/lose detection.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Mini MobX
Build MobX-style observables with autorun and computed that re-run when the data they read changes.
40 minJavaScript - HARD
Mini Object-relational Mapper III
PREMIUMBuild a simplified in-memory ORM with field selection and eagerly included related records.
40 minJavaScript - HARD
Mini React Query Core
PREMIUMBuild a framework-agnostic query cache with request dedup, staleTime, subscribers, and invalidation.
40 minJavaScript - HARD
Modal Dialog IV
PREMIUMBuild a fully accessible modal dialog with focus trapping, focus restoration, and keyboard support.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
N-Queens
PREMIUMPlace N queens on an N×N board so none attack another — a classic backtracking search that places one queen per row and prunes column and diagonal conflicts.
40 minAlgorithms - HARD
Nested Checkboxes
PREMIUMBuild a nested checkbox tree where parent state reflects its children and toggling a parent cascades down.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Number Stream Median
PREMIUMImplement a data structure that ingests integers one at a time and reports the running median in logarithmic time.
40 minAlgorithms - HARD
Observable
PREMIUMImplement a minimal Observable with subscribe/unsubscribe and of/from plus map and filter operators.
40 minJavaScript - HARD
Operational Transform (Text)
PREMIUMTransform concurrent insert and delete operations so replicas converge to the same text.
40 minJavaScript - HARD
Optimistic Mutation Manager
PREMIUMApply optimistic updates immediately and roll them back on failure, even with concurrent mutations.
40 minJavaScript - HARD
Partial JSON Parser
PREMIUMParse a truncated JSON string into the best-valid value so far by completing open strings and containers.
40 minJavaScript - HARD
Persistent Immutable List
PREMIUMBuild an immutable list where every update returns a new version that shares unchanged nodes with the old one — structural sharing over a cons list.
40 minAlgorithms - HARD
Progress Bars IV
PREMIUMBuild progress bars that fill concurrently up to three at a time, and let the user pause and resume each one.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Reactive Proxy Signals
PREMIUMBuild reactive state with a Proxy that tracks reads and re-runs registered effects on write.
40 minJavaScript - HARD
Realtime Search with Cache
PREMIUMBuild a search box that caches results per query and dedupes in-flight requests.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Redux-Saga Effect Runner
PREMIUMBuild a redux-saga-style interpreter that runs a generator of declarative effects and resumes it with each result.
50 minJavaScript - HARD
Rich Text Editor
PREMIUMBuild a contenteditable rich-text editor with bold/italic/list formatting and a live toolbar state.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Rich Text to HTML
PREMIUMImplement a function that converts a list of styled text ranges into a canonical, properly nested HTML string.
40 minJavaScript - HARD
RxJS-Lite Pipeable Operators
PREMIUMBuild a mini reactive-streams library: a cold Observable and pipeable operators composed with a .pipe() chain.
50 minJavaScript - HARD
Schema Validator III
PREMIUMExtend a tiny schema validator to handle nested object and array shapes plus optional fields.
40 minJavaScript - HARD
Segment Tree
PREMIUMBuild a segment tree over an array for logarithmic range-sum queries and point updates, each tree node holding the aggregate of its slice.
40 minAlgorithms - HARD
Selectable Cells
PREMIUMBuild a grid where you click and drag across cells to select a rectangular range of them.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Sequence CRDT (RGA)
PREMIUMBuild a replicated growable array for text whose positional-id inserts and deletes converge across replicas.
40 minJavaScript - HARD
Shortest Substring Containing Characters
PREMIUMImplement a function that returns the smallest window of a string that contains every character of another string.
40 minAlgorithms - HARD
Skip List
PREMIUMBuild a skip list — a sorted set layered with express lanes of linked lists so search, insert, and delete run in expected logarithmic time.
40 minAlgorithms - HARD
Spreadsheet Grid
PREMIUMBuild a grid of cells with formula evaluation and dependent-cell recalculation.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Spreadsheet III
PREMIUMBuild a spreadsheet that recomputes dependent cells when inputs change and detects circular references.
40 minJavaScript - HARD
Statechart Engine (XState-lite)
PREMIUMBuild a state-machine engine with events, guards, entry and exit actions, and context updates.
40 minJavaScript - HARD
Streaming Markdown State Machine
PREMIUMRender markdown-so-far to HTML, holding and closing unclosed bold, inline code, and fenced code blocks.
40 minJavaScript - HARD
structuredClone
PREMIUMImplement structuredClone — deep-clone a value including Map, Set, Date, RegExp, typed arrays, and circular references.
40 minJavaScript - HARD
Styled Text Ranges
PREMIUMImplement a slice operation over text annotated with overlapping style ranges, preserving alignment.
40 minJavaScript - HARD
Styled Text Ranges III
PREMIUMImplement a function that replaces a text range and keeps the surrounding style ranges normalized.
40 minJavaScript - HARD
Styled Text Ranges IV
PREMIUMImplement a function that patches shallow style objects over a text range without clobbering unrelated keys.
40 minJavaScript - HARD
Sudoku Solver
PREMIUMFill a 9×9 Sudoku grid by backtracking — try each digit in the next empty cell, checking its row, column, and 3×3 box, and undo on a dead end.
40 minAlgorithms - HARD
Superjson
PREMIUMImplement serialize and deserialize helpers that round-trip values like Date, Map, Set, and BigInt through JSON.
40 minJavaScript - HARD
Superjson II
PREMIUMBuild serialize and deserialize that preserve referential identity — shared references and circular structures round-trip intact.
40 minJavaScript - HARD
Table of Contents
PREMIUMImplement a function that walks an HTML document's headings and builds a nested table of contents.
40 minJavaScript - HARD
Tabs III
PREMIUMBuild a fully accessible tabs component with arrow-key navigation per the ARIA authoring guide.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Test Runner IV
PREMIUMExtend a tiny test runner so it correctly awaits asynchronous specs and asynchronous setup or cleanup hooks.
40 minJavaScript - HARD
Tetris
PREMIUMBuild Tetris with falling tetrominoes, rotation, line clears, and scoring.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Text Between Nodes
PREMIUMImplement a function that gathers the text content lying between two DOM nodes in document order.
40 minJavaScript - HARD
Tic-tac-toe II
PREMIUMBuild a generalized tic-tac-toe game on an N x N board where M consecutive marks wins.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Tooltip Positioning Engine
PREMIUMCompute a tooltip's position around an anchor, flipping and shifting to stay inside the viewport.
40 minJavaScript - HARD
Topological Sort
PREMIUMImplement a function that returns a topological ordering of nodes in a directed acyclic graph.
40 minAlgorithms - HARD
Transfer List II
PREMIUMBuild a transfer list with bulk select, deselect, and the ability to add new items to either side.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Undo / Redo Manager II
PREMIUMBuild a class that tracks draft values and commits them as batch checkpoints for undo and redo navigation.
40 minJavaScript - HARD
Undoable Database II
PREMIUMBuild a user database that buffers draft mutations and commits them as batch undo and redo checkpoints.
40 minJavaScript - HARD
useDebouncedCallback
PREMIUMImplement a hook returning a debounced callback with cancel and flush, always calling the latest function.
40 minJavaScript - HARD
useDraggable
PREMIUMImplement a pointer-based drag hook that tracks an element's x/y offset with start/move/end handlers.
40 minJavaScript - HARD
useForm
PREMIUMImplement a form-state hook managing values, touched, errors, validation, and submission.
40 minJavaScript - HARD
useInfiniteScroll
PREMIUMImplement a hook that loads more pages when a sentinel element scrolls into view, guarding against duplicate loads.
40 minJavaScript - HARD
useResizeObserver
PREMIUMImplement a hook that reports a ref'd element's content-box size via ResizeObserver.
40 minJavaScript - HARD
useSWR
PREMIUMImplement a stale-while-revalidate data hook with an in-memory cache, dedup, and revalidation shared across components.
40 minJavaScript - HARD
useThrottledCallback
PREMIUMImplement a hook returning a throttled version of a callback that runs at most once per interval, with leading/trailing calls.
40 minJavaScript - HARD
useUndoRedo
PREMIUMImplement an undo/redo state hook exposing undo, redo, canUndo, canRedo over past/present/future stacks.
40 minJavaScript - HARD
useVirtualList
PREMIUMImplement a windowing hook that renders only the visible rows of a long list, with correct spacer offsets.
40 minJavaScript - HARD
useWebSocket
PREMIUMImplement a WebSocket hook exposing connection status, last message, and send, with auto-reconnect and cleanup.
40 minJavaScript - HARD
Virtual Scroll List
PREMIUMCompute the visible slice and spacer offsets to render only on-screen rows of a huge list.
40 minJavaScript - HARD
Virtualized List
PREMIUMBuild a windowed list that renders only the visible rows of a large dataset for smooth scrolling.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Wildcard Matching
PREMIUMDecide whether a string matches a pattern containing `?` (any single character) and `*` (any sequence) — a two-dimensional dynamic-programming match over string and pattern.
40 minAlgorithms - HARD
Wordle
PREMIUMBuild the Wordle word-guessing game with row-by-row guesses and per-letter color feedback.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue