Home
Courses
Learn React 19: The Complete Guide to Modern Web Apps

Challenge: Multi-Step Order Form

Build a transaction-safe, accessible multi-step React Order Form (Cart, Shipping, Payment, Review). Keep draft state in the parent, run step validation plus async promo checks without UI stalls, and submit with a React 19 transaction (useActionState, useOptimistic, useTransition) that locks duplicates and shows pending → confirmed (or rollback) results.

We'll cover the following...

Problem statement

A multi-step order form (wizard checkout) UI is required with four steps: Cart, Shipping, Payment, and Review and Submit. The interface must remain responsive while users move between steps, while validation runs (including async promo checks), and while the final submission is processed as a transaction. When validation fails, we must surface errors without collapsing the UI into global spinners or losing draft state. When submissions are in flight, duplicate submissions must be prevented, and the UI must clearly distinguish pending from confirmed outcomes.

Success criteria

The following success criteria confirm that the wizard remains stable under continuous edits and that navigation, validation, transactional submission, and accessibility all work together correctly.

  • The user can move Back/Next across steps without losing any draft input, even when steps mount/unmount.

  • Step navigation does not advance when the current step has blocking errors; errors are shown near the related fields.

  • Promo code validation runs asynchronously and shows a clear checking / valid/invalid status without freezing the form.

  • The UI runs field-level validation during editing and a final schema validation at submission time, without mixing async work into render.

  • Submitting the order is transactional: only one submission can be in flight, the submit button is disables, and the UI shows Submitting… until completion.

  • The receipt can appear optimistic and then be confirmed, or roll back cleanly on server failure.

  • Errors are accessible: inputs are connected to errors via aria-describedby, error summary is announced, and focus management keeps keyboard users oriented.

Technical requirements: Implement the following features step by step

  • Task 1: Multi-step wizard with stable draft state
    Create a wizard shell with a stepper and Back/Next navigation. Draft state must live in a parent owner (not in each step) so step transitions never discard data.

  • Task 2: Field validation per step
    Add synchronous field validation for each step (required fields and basic formats). Inline errors must appear near the fields and block navigation forward when the step is invalid.

  • Task 3: Async promo validation without UI stalls
    Validate promo codes asynchronously against a fake server. The UI must show a checking state while the request is in flight. Stale requests must be ignored or canceled, so typing quickly does not produce incorrect status.

  • Task 4: Schema validation and accessible error summary
    On submit, run a full schema validation that aggregates step errors into a structured result. Render an accessible error summary that is announced to assistive technology, and connect each field to its error via aria-describedby.

  • Task 5: Transactional submit with React 19 coordination
    Implement a transactional submit using React 19 APIs:

    • Use useActionState to model the submission lifecycle and return success/error outcomes.

    • Use useOptimistic to show a pending receipt that becomes confirmed or rolls back on failure.

    • Use useTransition for non-urgent step transitions so the UI remains responsive.

    • Ensure only one submission can be in flight (transaction lock) and show Submitting… while pending.

Project structure

Below is the hierarchy of the project files and folders: