@id0/ Interface Collection

Maritime model store with a local cabinet

Keel & Frame

Choose model kits, manage the cart, create a browser-local profile during checkout, select delivery and a payment method, and review the saved order.

Technology
  • Nuxt
  • Vue
  • TypeScript
  • PrimeVue
  • Pinia

Design problem

The cart quantity, profile, delivery, payment choice, confirmation, and order history must describe the same order. The checkout must also make clear that data stays in this browser and no real payment is taken.

Main user flow

  1. Choose a model kit

    Browse vessel types, open a product page, review scale and included materials, and see whether the item is already in the cart.

  2. Build the cart

    Add more units, change quantities, remove items, and keep product-page and cart counts synchronized.

  3. Complete checkout

    Create a browser-local profile inline when needed, keep the cart intact, then choose additional options, delivery, and a simulated payment method on the same checkout page.

  4. Review the saved order

    Open the cabinet after confirmation to check profile details, purchased items, options, delivery, payment choice, and total.

Key decisions

  • Keep related data together

    Profile, cart, and orders are saved together in this browser. They survive reload, can be reset explicitly, and do not synchronize across devices.

Critical states

  • Truthful disclosure at the action

    The checkout explains local persistence and the absence of real payment only where those limitations affect the user's decision.

  • Accessible destructive confirmation

    Resetting the local profile and orders uses a keyboard-operable modal with explicit cancel and confirm actions instead of a browser dialog.