Full Stack Ecommerce Checkout Web App

Problem 01

Full Stack Ecommerce Checkout Web App

live

Build a full-stack ecommerce checkout web app with cart items, quantities, promo codes, subtotal, shipping, tax, and order confirmation.

Requirements

  1. 01Render Canvas tote ($25.00, quantity 2, stock 3), Espresso beans ($18.00, quantity 1, stock 4), and Stoneware mug ($12.00, quantity 0, stock 0).
  2. 02Allow labeled quantity changes only from 0 through stock; visibly mark out-of-stock items and disable adding them.
  3. 03Calculate all money in integer cents: subtotal from line items, 8% tax rounded to cents, $7.00 shipping below a $50.00 pre-discount subtotal, discount, and a nonnegative total.
  4. 04Normalize promo input by trimming and uppercasing: SAVE10 takes 10% off, FREESHIP removes shipping, BIGSAVE takes $200 off capped at the subtotal, and unknown codes show a recoverable error.
  5. 05Provide labeled cart, order-summary, promo, and checkout controls that remain usable at mobile widths and by keyboard.
  6. 06Prevent duplicate checkout submission, show loading and failure states, and finish with exactly one clear order confirmation.

Worked contract

Example user flow
Given a shopper has cart items
When quantities or a promo change
Then totals update and checkout reaches a clear confirmation state

Constraints

  • • Submit one compact engineering spec, not implementation code.
  • • The generated artifact must use the declared Next.js 16 adapter.
  • • Scoring rewards observable behavior and prompt efficiency, not runtime.
Difficulty
intermediate
Target
12 min
Acceptance
Artifact
web