Problem 01
Full Stack Ecommerce Checkout Web App
Build a full-stack ecommerce checkout web app with cart items, quantities, promo codes, subtotal, shipping, tax, and order confirmation.
Requirements
- 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).
- 02Allow labeled quantity changes only from 0 through stock; visibly mark out-of-stock items and disable adding them.
- 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.
- 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.
- 05Provide labeled cart, order-summary, promo, and checkout controls that remain usable at mobile widths and by keyboard.
- 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
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