Frontend AlgoArena & Practice Challenges
A practice arena built for frontend engineers. 150 hand-written problems across arrays and objects, async and promises, functions and closures, data structures, and DOM utilities — every one graded against real tests in your browser.
150 Problems
Frontend DSA AlgoArena
44
Easy Fundamentals
66
Medium Core System DSA
40
Hard Advanced DSA
Turn a flat array of records into an object keyed by whatever field you choose — the utility you end up rewriting on every project.
Stop a function firing on every keystroke. The classic interview question, and the thing that makes search boxes usable.
Flaky networks are normal. Retry a failing promise a few times, waiting longer after each attempt.
Why does `{a:1} === {a:1}` return false? Write the deep comparison that answers what you actually meant.
Flatten a nested array structure up to a specified maximum depth parameter.
Find the two indices in an array of numbers that sum up to a specific target value.
Ensure a function is executed at most once per specified time interval.
Create a memoized wrapper function that caches return values based on argument inputs.
Execute an array of promises concurrently and resolve with an array of all fulfilled values.
Design a data structure that follows the constraints of a Least Recently Used cache.
Build a event subscription pattern with `.on()`, `.emit()`, and `.off()` methods.
Determine if an input string of brackets `()[]{}` is valid.
Split a flat list into rows of N — the maths behind every grid layout, batched request, and carousel page.
Build [0, 1, 2, ...] without a for loop cluttering your JSX — the helper behind pagination bars and skeleton lists.
`new Set()` cannot dedupe objects. Write the version that decides sameness with a function you supply.
Trim a fat API object down to the three fields your component renders, without dragging the rest into props.
Strip `password` and `internalNotes` before you send an object anywhere — the inverse of pick.
Turn a list of records into a tally — the one-liner behind every filter chip that shows a number beside it.
Split a list into matches and non-matches without filtering twice and running your predicate on every item two times.
Turn a CSV header row plus a data row into a record — the last step of every hand-rolled spreadsheet import.
Convert an array of records into an id-keyed object so lookups stop being O(n) `find` calls.
Interleave parallel arrays into rows — how you line up labels, values, and colours before feeding a chart.
Transpose an array of rows into an array of columns — the inverse of zip, and how you turn a table into series.
Which permissions does this user have that this route requires? An ordered, deduplicated intersection.
Which of these items are not already in the cart? Set subtraction where identity is a function, not a reference.
Merge tag lists from three sources into one deduplicated list, in the order the tags first showed up.
Score descending, then name ascending. The comparator every sortable data table eventually needs.
The reorder operation behind every drag-and-drop list, written immutably so React notices the change.
Get `user.profile.avatar.url` without a chain of guards, and without throwing when the middle is missing.
Bundle a chat log into runs by the same author, so you render one avatar per burst instead of one per message.