React Coding Challenges

This problem covers greeting people by name, and what to show when no name has been given.

Here you build one shared button whose text and click behaviour are decided wherever it's used.

This task deals with missing profile pictures, standing in with the person's initials instead.

Build a checkout calculator that takes a base price, discount % and tax %, then shows the subtotal, tax and final price, with discount applied before tax. A quick task to show you can get a calculation's order right.

Build a component where scores are added one at a time and the running average and letter grade update as you go. A simple task to show you can compute from a growing list and handle the edges safely.

Library Card is an Easy composition question that hands the candidate a library membership desk - name, card number, and tier controls with a live card preview that fills in as they type. They build one reusable field wrapper that labels and composes any control and shows an inline error, plus the two validators behind the member name and card number.

Sign up to see what this challenge asks.

A contact form that checks what the visitor typed before it's sent, points at exactly what needs fixing, and confirms once the message is on its way.

Generate random passwords honoring a configurable length and character-class toggles, guaranteeing at least one character from each enabled class.

Compute live word count, character counts (with/without spaces), and reading time from a controlled textarea on every keystroke.

Implement add, toggle, delete, and a live remaining-count for a pre-built React + TypeScript todo app; the UI, wiring, and seed data are provided.

Wire up a studio-gear checkout cart by implementing the pure functions that drive each line total, the order total, and quantity changes (including remove-on-zero).

Build the selection logic for a photography gallery viewer: show the first image by default, swap the hero when a thumbnail is clicked, and mark exactly the active thumbnail in a six-frame contact strip.

Build a movie search that waits until you stop typing before querying, and throws away results for a search you've already moved on from. A good task to show you can stop slow responses arriving out of order.

Build a paginated product list where the server sends one page at a time, with Prev and Next disabled at the ends. A practical task to show you can keep page state and the server in step.

Build a forecast loader that retries a failed request a few times with increasing gaps, then gives up cleanly with a manual retry. A good task to show you can handle flaky networks without hammering the server.

Sign up to see what this challenge asks.

Build a useDebounce hook that only reports a value once it stops changing, clearing pending timers as it goes. A quick task to show you can package timing behaviour into a clean hook.

Build a useLocalStorage hook so a half-finished form survives a page refresh. A simple task to show you can sync React state with browser storage safely.

Build a useFetch hook that refetches when its URL changes and ignores a response that arrived for the old one. A good task to show you understand where race conditions come from.

Bring a store's checkout form to life - track what the shopper enters, flag invalid or missing details, and let the order go through only when every field is valid.

Build the logic behind a task board. The screen is ready - a list of tasks, tabs for All, Active, and Completed, and a counter for tasks left - but nothing responds yet. Make it work: add tasks, check them off, delete them, clear completed ones, and switch filters so the board always shows the right tasks and the right count.

The back-office dashboard for an online store, where the team searches, sorts, and reviews orders. It's fully designed but the controls aren't wired up yet — the sidebar, search, and column sorting don't respond.

Build the "select rows" behavior for a team members table. Tick a row to select it, use the header checkbox to select or clear everyone at once, and keep a running count of what's chosen - the kind of multi-select you see in any admin dashboard or inbox.

Build a registration form whose validation is a pure, testable function. The form UI (fields, inline error slots, submit button) is provided and wired; the validator is missing, so nothing validates and submit is never gated.

Sign up to see what this challenge asks.

During sign-up, check a chosen handle's availability against the backend as the user types. The handle input and the status indicator are provided and wired; the debounced fetch + status logic is missing, so the indicator never changes.

In a SaaS admin app, auth state and a permission check are exposed through context, but the permission helper and the login/logout transitions are unimplemented, so `can(...)` never returns the right answer and signing in or out does not change what a consumer may see.

The app needs a real app-wide notification center - a queue, not a single toast. The provider and the toast list UI are provided and wired, but the queue reducer and the auto-dismiss scheduling are missing, so notifications never appear, never collapse duplicates, and never time out.

A dashboard has many widgets reading one shared store. Today every store update re-renders every consumer. The store provider and the widgets are provided; the subscription mechanism that isolates re-renders is missing, so an unrelated update repaints the whole board.

On a social feed, a like button should feel instant - flip the liked state and count immediately, then confirm with the server. The button and the post card are provided and wired, but the optimistic toggle + rollback logic is missing, so clicking does nothing and a failed request is never undone.

In a news reader, a "Load more" button should append the next page of articles. The list and the button are provided and wired, but the paging logic is missing, so the button does nothing, duplicates can slip in, and it never disables at the end.

An analytics dashboard needs three independent resources at once. The panels and the combined loading UI are provided and wired, but the parallel-load logic is missing, so the dashboard never resolves and one failing request would take the whole page down.

A banking screen must render 50,000 transactions smoothly. The header summary, filter bar, and scroll container are provided and wired, but the windowing + filter/sort logic is missing, so the table tries to mount every row (or nothing) and never filters or sorts.

On a kanban board, interacting with one card must never re-render the whole board. The columns, cards, and the add/edit/move controls are provided and wired, but the state ops and stable handlers are missing, so editing one card either does nothing or repaints every card.

A metrics dashboard derives expensive aggregates (grouping, percentiles) from a large dataset. The tabs, theme toggle, and chart chrome are provided and wired, but the aggregation + its memo boundary are missing, so it either recomputes on every unrelated click or never computes.