πŸ‘¨β€πŸ’Ό The muffin shop wants a simple dashboard for a single order so the team can double-check totals before handing it off.
πŸ“œ This example uses React + Vite, but everything React-related is already done for you. You only need the workshop skills: numbers, strings, booleans, variables, functions, if/else, switch statements, loops, and never.
🐨 Open
src/muffin-utils.ts
and implement the exported helpers. Function signatures are already in the file.

Business rules

  • Money display: formatMoney formats an amount with a leading $ (for example 4.5 displays as $4.5).
  • Line items: buildLineItemText shows quantity x name, and appends (GF) (leading space) when the item is gluten-free. Examples: 2 x Blueberry Muffin, 1 x Oatberry Muffin (GF).
  • Subtotal: sum of each item’s price Γ— quantity (use a loop).
  • Member discount: status 'member' gets 10% off when the subtotal is at least $20; otherwise $0.
  • Tax / tip: tax uses the taxable amount and rate; tip uses the amount before tip and the tip percent.
  • Total: subtotal, minus discount, plus tax, tip, and pickup fee.
  • Pickup fee (switch): counter β†’ $0, curbside β†’ $3, delivery β†’ $7.
  • Pickup label (switch): Counter pickup, Curbside pickup, or Delivery dropoff. Use assertNever for impossible cases.
  • Notes: null or an empty string becomes No special notes; otherwise keep the note.
  • Ready log: logOrderReady is a void function that logs Order ready for <customer>.
  • assertNever: throw so TypeScript knows that branch cannot continue (include the unexpected value in the error).

Success criteria

  • The dashboard in
    src/app.tsx
    renders without runtime errors once the helpers are implemented
  • With the default app fixtures (member, curbside, gluten-free items, empty note), you should see:
    • Line items including a (GF) suffix where appropriate
    • Pickup label Curbside pickup and a pickup fee of $3
    • Special note text No special notes
    • Console log: Order ready for Avery
  • Toggle memberStatus or pickupMethod in
    src/app.tsx
    and confirm labels/fees/discounts update

Run the example

npm run dev --workspace extra_muffin-shop-dashboard

Try next

  • 🐨 Add another OrderItem and watch the totals change.
  • 🐨 Add a rushOrder boolean and increase the tip when it is true.
  • 🐨 Add a itemCount helper that uses a loop to count total quantity.
  • 🐨 Add a happyHour boolean and reduce the muffin price when true.
  • 🐨 Add a memberMessage string in app.tsx using an if check.
  • πŸ’° Change specialNote to a real note and confirm the fallback logic.

Please set the playground first

Loading "Muffin Shop Dashboard"
Login to get access to the exclusive discord channel.
Loading Discord Posts