aichallengesafrica
Take a challenge
HomeChallengesRepsProblemsLeaderboardTake a challenge
TRACK 02

React + UI

Match a target design under the clock. Layout, responsive breakpoints, component state.

20 challenges7 free6h of build time5 graded by running your code

CSS Speed Sprint

Match the target design before the clock runs out.

  1. Landing LayoutStyle the markup to match the target on the left. The HTML is fixed — CSS only.Beginner · 10 min

Component Builder

Build production-ready UI against a spec, on the clock.

  1. Product CardBuild a product card with image, title, price, and CTA button.Beginner · 5 min
  2. Responsive NavbarCreate a navigation bar with logo, links, and a mobile menu button.Intermediate · 8 min
  3. Contact FormBuild a contact form with focus states and proper vertical rhythm.Intermediate · 8 min · Pro
  4. Modal DialogCreate a modal with overlay, close button, and smooth transitions.Advanced · 10 min · Pro
  5. Pricing CardBuild a pricing tier with a features list and a highlighted "popular" badge.Advanced · 10 min · Pro

React + UI Sprint

Three of the interfaces every product needs, on the clock.

  1. Tailwind Landing HeroMatch the hero on the left. Semantic markup, a gradient, and it has to survive a phone.Beginner · 10 min
  2. Form Validation SprintA contact form with React Hook Form and Zod: real rules, real messages, no double submits.Intermediate · 15 min · Pro
  3. Data TableSort, filter and paginate a table — without re-sorting a thousand rows on every keystroke.Advanced · 20 min · Pro
  4. User Dashboard (SPA)Fetch on mount, handle every state it can be in, and derive the rest. The five things every SPA interview tests.Advanced · 40 min · Pro

Components That Fit Together

Not how to build a component — how a component becomes a page.

  1. Data Flows DownOne product card, assembled from three components. Nothing has state; everything is props. This is the whole idea, and every stage after it is a variation.Beginner · 15 min
  2. Slots and ChildrenA Panel that does not know what goes inside it. This is the difference between a component you reuse and a component you copy.Beginner · 15 min · Pro
  3. A List and Its RowEvery table you will ever build. One component owns the list, another owns a row, and the empty case is a real state rather than an afterthought.Intermediate · 20 min · Pro
  4. Lift the State UpA search box, a count and a list of results. Three components that must always agree — which means exactly one of them can own the state, and it is none of these three.Intermediate · 20 min · Pro
  5. Container and ViewSplit a dashboard into the part that decides and the part that draws. The drawing half should be renderable with numbers you made up — that is the test of whether you got it right.Advanced · 25 min · Pro

Routing and State, the React Way

Angular has Routes and Guards and A Signal Store. This is the other half of that mirror.

  1. Routes and guards, the React wayTwo feature areas that should not be in the first bundle, behind a guard that remembers where you were going, with a loader that fetches before the component renders and something sensible for a path nobody defined.Intermediate · 25 min
  2. A store without a libraryShared cart state for the whole app, with no Redux and no Zustand. Context and a reducer, state nobody outside can mutate, an update that happens before the request and rolls back to the exact snapshot if it fails.Advanced · 25 min · Pro

Reachable by Everyone

The library graded a modal on its shadow and never on whether a keyboard could leave it.

  1. The modal that traps focusA dialog that looks right and cannot be operated. Announce it as a dialog, take focus when it opens, keep Tab inside it, hand focus back when it closes, and let Escape out.Intermediate · 20 min
  2. A form without a mouseEvery input needs a name a screen reader can read, every error needs to reach the person who caused it, and a group of radios needs to say what it is a group of. Placeholders are not labels.Intermediate · 20 min · Pro
  3. Names the screen reader can readA toolbar of icon buttons, a decorative logo, a link that says "click here", and a status that changes without telling anybody. Give every one of them the right name, and give the decorative ones no name at all.Intermediate · 20 min · Pro