Seat Booking Grid

Build the seat picker from a cinema booking page: seats laid out in rows at different prices, some already sold, a limit of four selections, and a running total.

This is one of the few machine-coding problems where layout and logic carry equal weight, which is why it gets used — a candidate who can only do one shows it within minutes.

On state, a Set of seat ids beats an array of seat objects. Every question the UI asks is membership, ids like B3 are derivable from the row and index without storing anything, and the summary needs nothing an id cannot look up. Copying the Set before mutating is the usual React rule: add returns the same object, so returning it re-renders nothing.

The selection limit has an asymmetry worth catching. Guarding the whole toggle means someone who has already picked four seats cannot deselect any of them — a genuinely broken UI. Only the add path is capped.

Prices living on the row rather than the seat means the total cannot be a count multiplied by one number. Flattening to a seat-id-to-price lookup once keeps the summary a reduce instead of a nested search back through the layout.

One small thing that reads as a bug if you skip it: list the selected seats in seat order, not click order.

Note that the source post describes the round only as "similar to the Book My Show ticket booking page" — the detailed requirements here are ours.