Build a 3x3 Tic Tac Toe board with alternating X and O turns, game status display, and a restart button.

Tic Tac Toe I

Add winner detection logic to the Tic Tac Toe game by checking rows, columns, and diagonals for three matching marks.

Tic Tac Toe II

Integrate async request handling into the Tic Tac Toe game to send game results to a server endpoint.

Tic Tac Toe III

Todo list enables users to seamlessly add, edit, delete tasks, and mark completion for efficient task management.

Todo List

Build a city search component with a text input that dynamically fetches and displays matching city suggestions from an API.

City Search I

Add result caching to the city search so previously searched terms return instantly without redundant API calls.

City Search II

Implement debouncing in the city search to reduce excessive API calls while the user is actively typing.

City Search III

Build a bar chart component that fetches and renders color-coded bars with heights proportional to department ticket counts.

Bar Chart I

Extend the bar chart with sorting functionality to reorder bars by ticket count in ascending or descending order.

Bar Chart II

Generalize the bar chart to accept data of any shape, plus discussion on representing extreme values and Canvas vs SVG trade-offs.

Bar Chart III

Build a reliable type checking function that correctly identifies JavaScript value types.

Type Checking Utility

Build your own version of JSON.stringify that serializes JavaScript values to JSON strings.

Implement JSON.stringify()

Safely access deeply nested object properties using a path string or array.

Implement lodash.get()

Set a value at an arbitrary nested path, creating intermediate objects or arrays as needed.

Implement lodash.set()

Implement a Least Recently Used cache with O(1) get and put operations.

LRU Cache

Recreate setInterval behavior using only setTimeout.

Implement setInterval using setTimeout

What are the benefits of using hooks in React?

Explain the composition pattern in React

What is the CSS display property and what are examples of its use?

What is CSS selector specificity and how does it work?

What are error boundaries in React?

What are ES2015 classes and how do they differ from ES5 function constructors?

Describe event capturing in JavaScript

What is forwardRef() in React?

What are iterators and generators in JavaScript?

What are the differences between Map/Set and WeakMap/WeakSet?

What is the difference between mouseenter and mouseover?

What are JavaScript object getters and setters?

What are JavaScript object property flags and descriptors?

Explain the presentational vs container component pattern

What are some common React anti-patterns?

What is React Fiber?

What are React Fragments used for?

What is the difference between React Node, React Element, and React Component?

How do you decide between React state, context, and external state managers?

What is React Suspense?

What are render props in React?

How do you reset a component state in React?

What are the rules of React hooks?

What are server-sent events?

What happens when the useState setter function is called in React?

Why does React recommend against mutating state?

What are workers in JavaScript?

Build a multi-screen signup form that collects user information across 4 steps with navigation between screens.

Multi Step Signup

Build a configurable text transformer that applies a chain of operations like uppercase, lowercase, capitalize vowels, and character replacement.

Configurable Text Transformer

Build a sortable list where items can be reordered by dragging and dropping.

Drag and Drop Sortable List

Build a color palette where users can select a color and copy its hex value to the clipboard.

Color Swatch

Build a dynamic interface where clicking on a canvas places circles that change color when they overlap.

Overlapping Circles

Build an interactive matching game where players pair countries with their capitals.

Country Capital Game

Build a scrollable list that automatically loads more items as the user reaches the bottom.

Infinite Scroll

Generate a hierarchical table of contents from a HTML document.

Virtualized List

Write a function to move an array element from one position to another.

Move Array Element

Write a throttle function for an event handler that limits API calls to once every 5 seconds, remembering and firing the latest event after the timeout.

Throttle Event Handler

Build a dynamic medical report form with labeled text areas driven by a predefined sections array, featuring a stepper UI and structured log output on submit.

Medical Report Form

Semantic markup, accessibility, forms, and document structure

HTML Essentials

Selectors, specificity, layout systems, and the cascade

CSS Mastery

Scope, closures, prototypes, and the tricky parts of JS

JavaScript Deep Dive

Event loop, promises, async/await, and execution order

Async JavaScript

DOM manipulation, events, storage, and web platform APIs

DOM & Browser APIs

Hooks, state management, rendering, and component patterns

React Core Concepts

HTML, CSS, and JavaScript basics combined

Frontend Foundations

JavaScript, DOM, and React - mid-level challenges

Frontend Intermediate

Performance, security, and advanced patterns

Frontend Advanced

Mixed difficulty - simulates real screening assessments

Technical Screen Prep

Implement a browser history class with navigation functionality like back, forward, and visiting new URLs.

Browser History

Build a counter application with undo and redo functionality that tracks operation history and allows users to navigate through past states.

Undo Redo

Remove all falsy values deeply nested in objects and arrays.

Deep Remove Falsy

Implement a custom version of the getElementsByTagName method from scratch.

getElementsByTagName

Function to calculate the angle between the two hands on a clock representing that time.

Clock Angle

Function that converts a hexadecimal color code to an RGB color code.

HEX to RGB

How would you style an SVG?

Why is input validation important?

A custom React hook for tracking window scroll position on both X and Y axes.

useScrollPosition

Shallow equality refers to the comparison of the immediate properties of two objects or arrays, without considering nested properties.

Shallow Equality

Checks if a given number falls within a specified range, adjusting for order and inclusive of boundaries.

inRange

Make sure the log function outputs the right value.

Right or wrong?

Implement a JavaScript function that creates counter objects with multiple operations.

Counter Advanced

Creates a new array where the original array is divided into multiple chunks each of the specified size.

Chop into Chunks

Currying is a technique of translating a function that takes multiple arguments into a sequence of functions.

mul(a)(b)(c)

A reusable kanban board component that allows users to organize and move cards between columns, demonstrating state management and user interaction in React.

Kanban Board

A conversational guide to understanding thunks in JavaScript—what they are, why they have a weird name, and how they help manage async operations.

What is an async thunk?

Manages unique elements, allowing for efficient addition, removal, and presence checks without duplicates.

What is the use of aria-label, aria-labelledby, and aria-live?

Executes asynchronous functions in sequence, each starting only after the previous one has completed.

Sequential Async

Implement a JavaScript function that creates customizable counters.

Counter Function

Implement a custom useMemo hook to memoize expensive computations.

Custom useMemo Hook

Converts a callback-based function to a promise-based function.

promisify

Write a function that takes a number and returns it clamped between a minimum and maximum value.

Clamp

Given a set of integers arr, return a new array of those integers greater than n.

Integers Greater Than

Given a query string, return an object of key value pairs.

String to Object

Could you find a security issue in this code snippet?

Find Security Issue

Creates a new array with elements passing a test in environments lacking native support.

Polyfill: filter( )

A chaining calculator is a class with methods for arithmetic operations, enabling successive method calls to be linked together in one continuous chain.

Chaining: Calculator

Enhance the Event Emitter class to support method chaining.

Event Emitter II

Emits events and registers listeners for handling asynchronous, event-driven operations.

Event Emitter

A simple javascript utility for conditionally joining classNames together.

classnames

The function retries a promise returning function with optional delays until success or a max attempt limit.

Retry Promise N Times

Checks if a given string consists solely of numeric digits, without any spaces, symbols, or decimal points.

isNumbersOnly

A custom React hook for detecting when an element is being hovered over.

Changelog

March 2026