@id0/ Interface Collection

Cooking masterclass booking

Table Stories

Filter masterclasses, compare sessions, choose the party size and dietary options, review remaining places and price, and send a booking request.

Technology
  • Nuxt
  • Vue
  • TypeScript
  • Nuxt UI

Design problem

A class description is not enough to book a place. The visitor also needs a compatible session, enough remaining places, supported dietary options, and the total price for the selected party.

Main user flow

  1. Find a suitable class

    Filter the catalog by format and topic, then compare duration, level, date, and price.

  2. Review the class details

    Check the programme, teacher, venue, included materials, and available sessions before booking.

  3. Choose session and options

    Select an available time, participant count, and dietary options while capacity and total price update together.

  4. Submit and retry

    Correct field-level errors and recover from capacity changes or temporary failures without re-entering valid information.

Critical states

  • Limit the party by session

    The available participant count follows the selected session's remaining places rather than one limit for every class.

  • Capacity changes remain recoverable

    If availability changes after selection, the form explains what changed, preserves unrelated answers, and offers the next valid action.