Web DevelopmentBeginner 1 to 2 hours

Build a Basic Shopping Cart UI

Create a static shopping cart that calculates totals using React state.

The Scenario

A small boutique clothing brand is launching their first online store. The designer has created the cart slide-out UI, but it currently has hardcoded values. You need to bring it to life so users can see their items, update quantities, and see the correct total price.

The Brief

Build a React cart component. It should accept an array of product objects (id, name, price, quantity, image). Render the list of items, allow the user to increase or decrease the quantity of each item, and automatically calculate the subtotal, a flat shipping fee, and the grand total.

Deliverables

  • The React component code for the Cart and CartItem
  • The state management logic for updating item quantities and removing items
  • The math logic for calculating the grand total securely

Submission Guidance

Focus on clean, predictable state updates. Never mutate the state array directly - always return a new array when updating quantities.

Submit Your Work

Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.

This appears on your public Badge.

0/20000 charactersMarkdown supported

One per line or comma separated. Up to 5 links.

By submitting, you agree your submission text, name, and evaluation will appear on a public Badge URL.