Design prompt: calendar and booking
Store instants with their zone, keep series as wall times, and let the server decide who gets the seat.
Predict first
Before you read: predict
ExamHall's ECON-201 session at the Leipzig centre starts at 09:00 in Leipzig on Monday 26 October 2026. The server stores it as a UTC instant, and the booking page shows each session's start in the candidate's own zone.
What start time does the page show a candidate in Cairo?
The 30-second version
A booking is a moment plus its place: store the UTC instant and the place's zone, and show it on each viewer's clock. Zones change clocks on different dates. A weekly slot is a wall time plus a zone. The free-seat list is old news; one conditional server write decides, and a hold covers the payment.
Store instants with their zone, keep series as wall times, and let the server decide who gets the seat.
How it works
Step 1 of 11
Analogy: A tattoo studio's diary for a guest artist flying in from another country
| At the studio | In the design |
|---|---|
| the diary writes each appointment as one moment with the studio's city beside it; the guest artist's phone shows it in her home city's time | instant plus zone, each viewer's clock (steps 2–3) |
| the Saturday walk-in session is written as 12:00 in the studio's city every week, not as last Saturday's plus seven days | a series is a wall time (step 5) |
| the free slots posted on the studio's page may be gone when a client reads them | availability is a snapshot (step 7) |
| a deposit request holds a slot for a set time, and still holds it while the client's transfer is on its way; only the front desk writes a name in the book, never two in one slot | a hold extended while paying; one conditional write (steps 8–10) |
In real terms: a booking UI shows moments the server owns, on clocks it does not.
Breaks down when: the front desk can message a client to agree a swap; a 409 only tells the second page to pick again.
Contrasting case: a single-office meeting room app: one zone, one clock, 09:00 is enough.
Examples, run for real
4.1 ExamHall EXH-3480 → MR !3780: the admin's board in the week of two clock changes
The pilot stored each session as a local string with no zone, and every browser read it in its own zone (EXH-3480). MR !3780 stores the instant with the centre's zone (steps 2–4).
4.1 model: weekdays Fri 23 Oct to Fri 30 Oct 2026 (6) · Leipzig sessions 09:00, Cairo sessions 10:00 · the Berlin admin sees both centres, a Cairo candidate books Leipzig · Intl (tz data of this Node), tz 2026c
4.1 EXH-3480 pilot: Cairo candidate's Leipzig sessions at the wrong instant, 23 Oct 1 h early, 26 Oct 2 h early, 27 Oct 2 h early, 28 Oct 2 h early, 29 Oct 2 h early, 30 Oct 1 h early
4.1 EXH-3480 pilot: Berlin admin's Cairo sessions at the wrong instant, 23 Oct 1 h late, 26 Oct 2 h late, 27 Oct 2 h late, 28 Oct 2 h late, 29 Oct 2 h late, 30 Oct 1 h late
4.1 EXH-3480 pilot: 12 of 18 views at the wrong instant
4.1 MR !3780: 0 of 18 views at the wrong instant · the admin's board on Mon 26 Oct: Leipzig 09:00 (her 09:00), Cairo 10:00 (her 08:00)
A string read in another zone names another moment: the Berlin admin's Cairo sessions moved by one hour, then two, then one (step 4).
4.2 Proof domain, streaming: a weekly New York show seen from Berlin and Cairo
A streaming service's talk show goes live at 20:00 in New York every Sunday; its schedule keeps that wall time with America/New_York (step 5).
4.2 model: a talk show live at 20:00 in New York every Sunday, kept as that wall time with America/New_York
4.2 Sun 18 Oct: New York 20:00 · Berlin Mon 02:00 · Cairo Mon 03:00
4.2 Sun 25 Oct: New York 20:00 · Berlin Mon 01:00 · Cairo Mon 03:00
4.2 Sun 1 Nov: New York 20:00 · Berlin Mon 02:00 · Cairo Mon 03:00
4.2 Sun 8 Nov: New York 20:00 · Berlin Mon 02:00 · Cairo Mon 03:00
Three zones, three change dates: New York leaves summer time on 1 November, a week after Berlin, so Berlin's viewers see the show at 02:00, 01:00, then 02:00 again.
4.3 The board for "Design the frontend of a booking calendar for test centres across the EU" (worked, not executed)
| Typical question | Steps that answer it | Mechanism owner |
|---|---|---|
| "How do you render 09:00 in Cairo for a Berlin admin during a DST change?" | 2–4 | this lesson; timeZone in Intl: fsd-i18n-architecture |
| "A slot is shown free but was just taken. What does the user see?" | 7, 8 | this lesson; the problem-details body: fsd-api-contract-frontend |
| "The candidate pays in the last seconds of the hold. Then what?" | 9, 10 | this lesson; the countdown's clock: fsd-clock-sync-timers |
Try it
Answer first, then check. Nothing is saved.
Question 1 of 7
ExamHall's design so far stores each session as a UTC instant with its centre's zone. The interviewer's next follow-up: "The Cairo centre runs ECON-201 at 10:00 local time every weekday from Monday 19 October to Friday 30 October 2026.
ExamHall's admins work in Leipzig and Cairo, and either may create the series in her browser." Which way of storing the series puts every session at 10:00 in Cairo, with the fewest zone lookups?
Question 2 of 7
A streaming service premieres a live concert at 02:30 in Berlin on Sunday 25 October 2026, the night the clocks go back; the promoter means the first 02:30. The scheduler stores one value per premiere and starts the stream from it for viewers in Berlin, Cairo and New York.
Which stored value starts the stream at the instant the promoter means for every viewer?
Question 3 of 7
ExamHall stores each booking as one row of bookings (session_id, seat, candidate_id). The booking page lists the free seats of each ECON-201 session; the server rebuilds that list every 10 seconds and gives each rebuild a new version number. 3 candidates see seat 14 free and press Book within the same second.
Which write leaves seat 14 with exactly one booking, across 1,000 such races?
Question 4 of 7
ExamHall's booking holds a seat for 10 minutes on the server's clock while the candidate pays, and the provider answers within 120 seconds. When a hold ends, the seat is offered to the next candidate.
Which rule means no seat is sold twice and no candidate is refunded after paying?
Question 5 of 7
The interviewer says: "Design the frontend of a booking calendar for ExamHall's test centres in Leipzig and Cairo." The numbers you get when you ask: candidates see the centre's time and admins in Berlin their own; ECON-201 runs at 09:00 in Leipzig and 10:00 in Cairo every weekday through October 2026; 3 candidates may press Book on one seat in the same second; a hold lasts 10 minutes; the payment provider answers within 120 seconds; a seat left unpaid must be offered again within 15 minutes. In 20 minutes, write your board: the numbers, what a session record holds, how a series is stored, whose clock each page shows, the booking write, the hold and what Pay does.
Then write your choices in the shape of design.template.mjs as my-design.mjs, and run the check.
Question 6 of 7
A chat company's weekly team call starts at 17:00 in New York on Monday 26 October 2026. Its calendar keeps each call as a UTC instant on a server in Los Angeles, and the page turns the instant into a clock time in the browser. A team member in Berlin opens the calendar on Friday 16 October.
What start time does the page show her for the call?
Question 7 of 7
A ticketing site plans a match's sale for when the clock in Cairo reads 23:30 on Thursday 29 October 2026. Egypt's summer time (UTC+3) ends at 24:00 that day; winter time is UTC+2.
How many times does Cairo's clock read 23:30 that night?
Go deeper
Pro tip
- Say instant plus IANA zone, then name the risky dates: in 2026 Berlin leaves summer time on 25 October and Cairo after the 29th, so the gap is 2 hours for those days. When: the interviewer asks how times are stored or shown across centres. Status: RAN on this Node's tz data.
Source
No item is keyed on a source; every key is executed. A guide's interview advice is valid as of 2026-10-12.
- MDN, Temporal (the curriculum row's URL): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal (
mdn-temporal.txt). "Occasional changes such as daylight saving time are not part of the calendar, but are part of the time zone's information." (steps 2, 4). - MDN, Temporal.ZonedDateTime: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/ZonedDateTime (
mdn-zoneddatetime.txt). "Same behavior as Date: use later for gaps and earlier for ambiguities." (step 6; the rulelib/tz.mjsfollows). - RFC 5545, iCalendar (the curriculum row's URL): https://www.rfc-editor.org/rfc/rfc5545 (
rfc5545.txt, the .txt rendition). "To properly communicate a fixed time in a property value, either UTC time or local time with time zone reference MUST be specified." (step 2); "the DATE-TIME value refers to the first occurrence of the referenced time" (step 6). - MDN, Intl.DateTimeFormat (the curriculum row's URL): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat (
mdn-datetimeformat.txt). The formatter every zone key runs on; itstimeZoneoption is taught infsd-i18n-architecturestep 9. - MDN, 409 Conflict: https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/409 (
mdn-http-409.txt). "indicates a request conflict with the current state of the target resource" (step 8). - Front End Interview Handbook, Front End System Design: https://www.frontendinterviewhandbook.com/front-end-system-design (
fih-overview.txt). "Requirements exploration: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions" (step 1).
Related lessons
Checked against the tools and docs as of 2026-10-12.