Table Stories
Filter masterclasses, compare sessions, choose the party size and dietary options, review remaining places and price, and send a booking request.
- 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
-
Find a suitable class
Filter the catalog by format and topic, then compare duration, level, date, and price.
-
Review the class details
Check the programme, teacher, venue, included materials, and available sessions before booking.
-
Choose session and options
Select an available time, participant count, and dietary options while capacity and total price update together.
-
Submit and retry
Correct field-level errors and recover from capacity changes or temporary failures without re-entering valid information.
Class search and booking
The filtered catalog, session details, and booking summary keep the selected class, two places, and vegetarian option together.
One matching class
August and Italian filters leave Pasta by Hand as the clear next choice.
Session details before booking
Programme, venue, duration, available times, and price can be checked before opening the form.
A complete booking summary
The result keeps two participants, the vegetarian option, venue, time, and next steps together.
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.