Loading challenges...
Fetching the challenge catalog...
Loading challenges...
Fetching the challenge catalog...
Browse the full collection of frontend coding challenges, system design problems and JavaScript practice exercises. Every entry links to a full write-up with an explanation, a worked solution and a runnable demo.
Looking for long-form articles and deep notes? Those live on the blog.
25 entries
Test your JavaScript skills by predicting console output for tricky code snippets. Covers hoisting, closures, this binding, async operations, and event loop quiz questions.
By Pratik Rai ·
Tricky · Event Loop · Closures
Master the debounce technique in JavaScript to control function execution frequency. Essential for optimizing search inputs, resize handlers, and preventing excessive API calls.
By Pratik Rai ·
Easy · Utilities · Logic
Implement a function that recursively traverses an object, evaluates functions with given arguments, and transforms keys to lowercase. Master recursive object traversal and type checking.
By Pratik Rai ·
Medium · Objects · Algorithms
Level up your JavaScript expertise with advanced tips, tricks, and gotchas. Master closures, hoisting, coercion, and event loop behavior to write cleaner, bug-free code.
By Pratik Rai ·
Tricky · Event Loop · Closures · JavaScript
Challenge yourself with Promise output quiz questions. Test your understanding of async execution order, resolve/reject behavior, microtasks, and the JavaScript event loop.
By Pratik Rai ·
Tricky · Event Loop · Promises
Deep dive into JavaScript internals: primitive vs reference types, memory allocation, hoisting mechanics, type coercion rules, and scope chains explained with practical examples.
By Pratik Rai ·
JavaScript · Fundamentals · Types · Hoisting
Implement a retry function that handles transient failures by retrying async operations with optional delays.
By Pratik Rai ·
Medium · Promises · Async
Implement your own Promise.all polyfill to understand how concurrent Promise handling works under the hood.
By Pratik Rai ·
Medium · Promises · Polyfill · Concurrency
Implement a Function.prototype.call polyfill from scratch. Master JavaScript this binding, execution context, primitive boxing, and safe property assignment techniques.
By Pratik Rai ·
Medium · this binding · Polyfill · Functions
Implement two async functions A and B, then return their sum using both sequential and parallel Promise execution, observing the time difference.
By Pratik Rai ·
Easy · Promises · Async/Await
Implement a function to flatten a nested array in JavaScript.
By Pratik Rai ·
Medium · Arrays · Recursion
Practice the object transformation patterns interviewers love — group by, flatten, invert, pick, omit, deep merge, and more. 15 quick drills with instant feedback.
By Pratik Rai ·
Objects · Drills · Interview Prep · Transformations
Implement Array.prototype.map from scratch. Master callback signatures, thisArg binding, and sparse-array hole preservation.
By Pratik Rai ·
Easy · Arrays · Polyfill
Implement Array.prototype.filter from scratch. The key detail: push the original element, not the boolean result of the predicate.
By Pratik Rai ·
Easy · Arrays · Polyfill
Implement Array.prototype.reduce from scratch, including the tricky no-initial-value path and the empty-array error case.
By Pratik Rai ·
Medium · Arrays · Polyfill
Implement Function.prototype.apply from scratch — identical to call except arguments arrive as a single array.
By Pratik Rai ·
Medium · Functions · Polyfill · this binding
Implement Function.prototype.bind from scratch, including partial application and the new-operator edge case that almost nobody gets right.
By Pratik Rai ·
Hard · Functions · Polyfill · this binding
Implement debounce from scratch: delay execution until a quiet period has passed, resetting the timer on every new call.
By Pratik Rai ·
Easy · Utilities · Polyfill
Implement throttle from scratch: guarantee a function runs at most once per interval regardless of how often it is called.
By Pratik Rai ·
Easy · Utilities · Polyfill
Implement Array.prototype.flat from scratch with a configurable depth. Default depth is 1, not Infinity.
By Pratik Rai ·
Easy · Arrays · Polyfill
Implement a curry function that transforms a multi-argument function into a chain of single (or partial) calls using fn.length.
By Pratik Rai ·
Medium · Functional · Polyfill
Implement the three Promise utility variants: allSettled (never rejects), race (first to settle wins), and any (first to resolve wins).
By Pratik Rai ·
Medium · Promises · Polyfill
Implement Object.assign from scratch: copy own enumerable properties (including Symbols) from sources onto the target.
By Pratik Rai ·
Medium · Objects · Polyfill
Implement Object.create using the classic empty-constructor trick to set an object's prototype chain.
By Pratik Rai ·
Medium · Objects · Prototypes · Polyfill
Implement a pub/sub EventEmitter class with on, off, emit, and once — the pattern behind Node's events module.
By Pratik Rai ·
Medium · Design Patterns · Polyfill
11 entries
Build a Reddit-style nested comments system in React using recursion. Learn tree data structures, efficient state management, and how to render deeply threaded replies.
By Pratik Rai ·
Medium · Recursion · Data Structures
Build an accessible modal dialog component in React with focus trapping, keyboard navigation, backdrop click handling, and portal rendering. A common frontend interview question.
By Pratik Rai ·
React · Modal Component
Create an interactive image carousel in React with smooth slide transitions, navigation arrows, dot indicators, autoplay, and touch/swipe support for mobile devices.
By Pratik Rai ·
Medium · Image Carousel · React
Build a dynamic Tic Tac Toe game in React with customizable grid sizes, win detection algorithms, player turn management, and game reset functionality. Great for interviews.
By Pratik Rai ·
Medium · Tic Tac Toe · React
Create an animated dice roller component in React with realistic rolling animations, random number generation, multiple dice support, and roll history tracking.
By Pratik Rai ·
Medium · Dice Roller · React
Build a fun Whack-a-Mole game in React with random mole spawning, click detection, score tracking, countdown timer, and increasing difficulty levels. Perfect for React practice.
By Pratik Rai ·
Medium · Whack A Mole · React · Game · Whack-a-mole-for-frontend
Create a card-matching memory game in React with flip animations, pair detection logic, move counter, timer, and win condition handling. A classic frontend coding challenge.
By Pratik Rai ·
Medium · Memory Game · React · Game
Implement infinite scrolling in React using Intersection Observer API. Learn lazy loading, pagination, scroll position restoration, and performance optimization techniques.
By Pratik Rai ·
Medium · Infinite Scroll · React · List
Build the classic Simon Says memory game in React with color sequence generation, player input validation, sound effects, increasing difficulty, and high score tracking.
By Pratik Rai ·
Medium · Simon Says · React · Game
Learn to build an accessible accordion component in React with smooth animations, keyboard navigation, and single or multi-expand modes. Perfect for FAQs and collapsible UI sections.
By Pratik Rai ·
Medium · Accordion · React
Implement a debounce function with a search input. The debounce function should delay the execution of the search function until the user stops typing for 500ms.
By Pratik Rai ·
React · Debounce · Search