Loading challenges...
Fetching the challenge catalog...
Loading challenges...
Fetching the challenge catalog...
Browse the full collection of frontend coding challenges, system design problems, JavaScript practice exercises and in-depth guides. Every entry links to a full write-up with an explanation, a worked solution and a runnable demo.
27 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 modernDev ·
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 JSHero ·
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 modernDev ·
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 modernDev ·
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 modernDev ·
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 modernDev ·
JavaScript · Fundamentals · Types · Hoisting
Implement a retry function that handles transient failures by retrying async operations with optional delays.
By modernDev ·
Medium · Promises · Async
Implement your own Promise.all polyfill to understand how concurrent Promise handling works under the hood.
By modernDev ·
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 modernDev ·
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 modernDev ·
Easy · Promises · Async/Await
Implement a function to flatten a nested array in JavaScript.
By modernDev ·
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 modernDev ·
Objects · Drills · Interview Prep · Transformations
Implement Array.prototype.map from scratch. Master callback signatures, thisArg binding, and sparse-array hole preservation.
By modernDev ·
Easy · Arrays · Polyfill
Implement Array.prototype.filter from scratch. The key detail: push the original element, not the boolean result of the predicate.
By modernDev ·
Easy · Arrays · Polyfill
Implement Array.prototype.reduce from scratch, including the tricky no-initial-value path and the empty-array error case.
By modernDev ·
Medium · Arrays · Polyfill
Implement Function.prototype.call from scratch using the temporary-property trick and a Symbol key to avoid collisions.
By modernDev ·
Medium · Functions · Polyfill · this binding
Implement Function.prototype.apply from scratch — identical to call except arguments arrive as a single array.
By modernDev ·
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 modernDev ·
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 modernDev ·
Easy · Utilities · Polyfill
Implement throttle from scratch: guarantee a function runs at most once per interval regardless of how often it is called.
By modernDev ·
Easy · Utilities · Polyfill
Implement Promise.all from scratch: resolve with an ordered results array when all settle, reject immediately on the first rejection.
By modernDev ·
Medium · Promises · Polyfill
Implement Array.prototype.flat from scratch with a configurable depth. Default depth is 1, not Infinity.
By modernDev ·
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 modernDev ·
Medium · Functional · Polyfill
Implement the three Promise utility variants: allSettled (never rejects), race (first to settle wins), and any (first to resolve wins).
By modernDev ·
Medium · Promises · Polyfill
Implement Object.assign from scratch: copy own enumerable properties (including Symbols) from sources onto the target.
By modernDev ·
Medium · Objects · Polyfill
Implement Object.create using the classic empty-constructor trick to set an object's prototype chain.
By modernDev ·
Medium · Objects · Prototypes · Polyfill
Implement a pub/sub EventEmitter class with on, off, emit, and once — the pattern behind Node's events module.
By modernDev ·
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 modernDev ·
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 modernDev ·
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 modernDev ·
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 modernDev ·
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 modernDev ·
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 modernDev ·
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 modernDev ·
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 modernDev ·
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 modernDev ·
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 modernDev ·
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 modernDev ·
React · Debounce · Search
14 entries
Complete guide to Turborepo setup and migration. Learn intelligent caching, parallel task execution, and monorepo best practices to speed up your frontend builds dramatically.
By modernDev ·
Monorepo · Build System · Performance · DevOps
A practical guide to crawling, indexing, meta tags, semantics, and Core Web Vitals so your pages rank and stay fast.
By modernDev ·
SEO · Core Web Vitals · Crawling · Performance
Understand how browsers render pages through the Critical Rendering Path. Learn to optimize DOM, CSSOM, render tree construction, and reduce time to first paint for faster websites.
By modernDev ·
Critical Rendering Path · Performance · Frontend
How I built a simple, client-only rate limiter to keep code execution fast, safe, and predictable without any backend dependency.
By modernDev ·
Medium · Rate Limiter · Client-Side
Understanding frontend performance optimization from the ground up - learn how browsers work and optimize your code accordingly.
By modernDev ·
Performance · Frontend · Optimization · Browser
Learn how I cut CSS bundle size by 85% and improved page load times by 50% using dynamic imports and automatic code splitting in Next.js—a simple pattern with massive performance impact.
By modernDev ·
Performance · CSS · Code Splitting · Next.js · Optimization
The mental models and edge cases that separate someone who has used HTML, CSS, JS, forms, responsive design, and HTTP from someone who actually understands them. Part 1 of the Frontend Roadmap series.
By modernDev ·
HTML · CSS · JavaScript · HTTP · Beginners · Roadmap
Accessibility, state management, component design, media optimization, rendering strategies, fonts, testing, and deployment — the intermediate tier where most mid-level interviews actually live. Part 2 of the Frontend Roadmap series.
By modernDev ·
Accessibility · State Management · Testing · Deployment · Roadmap
Build systems, security, offline-first patterns, internationalization, maintainable CSS, performance internals, and design systems — the advanced tier where senior-level depth is tested. Part 3 of the Frontend Roadmap series.
By modernDev ·
Security · Performance · Design Systems · i18n · Build Tools · Roadmap
Local-first systems and CRDTs, monorepo tooling, server-driven UI, microfrontends, WebGL/WebGPU, WebAssembly, and browser internals — the expert tier where architecture and platform machinery meet. Part 4 of the Frontend Roadmap series.
By modernDev ·
CRDTs · WebAssembly · Microfrontends · Browser Internals · WebGPU · Roadmap
The rendering pipeline, critical rendering path, event loop, CSS cascade and layout, and HTTP — explained as mental models and edge cases, not surface definitions. The "do you actually understand how the browser works" round.
By modernDev ·
Browser · HTTP · CSS · Event Loop · Rendering · CORS
Every implementation worth having as muscle memory — debounce, throttle, Promise combinators, Array polyfills, bind/call/apply, deep clone, curry, memoize, EventEmitter, retry with backoff, and capped concurrency. Plus the concepts behind output-prediction questions.
By modernDev ·
JavaScript · Closures · Promises · Async · Polyfills · Patterns
Core Web Vitals (LCP, INP, CLS), loading strategies (code splitting, tree shaking, resource hints, image optimization), runtime performance (layout thrashing, compositor animations, web workers, virtualization), and a structured debugging framework.
By modernDev ·
Performance · Core Web Vitals · LCP · INP · CLS · Optimization
XSS (stored, reflected, DOM-based), CSRF, CORS and the Same-Origin Policy, auth token storage tradeoffs (HttpOnly cookies vs localStorage), and a set of quick-hit defenses — explained as layered mental models, not a checklist.
By modernDev ·
Security · XSS · CSRF · CORS · JWT · Auth · Cookies