Build a Flight Booker | Interview Question

Q: Build a Flight Booker

**Target Audience:** Frontend candidates preparing for a machine coding round. No React form experience is assumed; the [Form with validation](/interview-question/build-a-form-with-validation) question is a gentler warm-up if you want one. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from the runnable solution, and the outputs in section 6 were produced by actually running the code (the component on React 19.3.1, the date experiments on Node 22.22.0). ## 1. Why This Even Matters — A Story First A travel agent fills in a paper ticket: one-way or return, departure date, return date. A good agent will not let you return before you leave, will cross out the return box for a one-way ticket, and will refuse "30 February" no matter how confidently you say it. Only when the ticket makes sense do they st

The problem

Question presented to candidate: "Build a small flight booker. The user picks one-way or return, types a departure date and, for a return trip, a return date. Invalid dates should be flagged, the return date only matters for return trips and can never be before departure, and Book should only work when everything is valid. On booking, show a confirmation message."

Requirements:

A select with "One-way flight" and "Return flight"; two text inputs in YYYY-MM-DD format, both starting on the same date.
The return input is disabled for one-way trips, and its value is kept if the user switches back.
Each input shows its own error: empty, wrong format, or a date that does not exist (for example 2026-02-30).
For return trips, the return date must be on or after the departure date; show the trip length in nights when valid.
Book is disabled while anything is invalid; booking shows "You have booked a one-way flight on ..." or "... a return flight departing ... and returning ...". Editing anything clears the old confirmation.

What a strong answer should cover:

Minimal state (trip type, two strings, the confirmation) with everything else derived: errors, whether Book is enabled, nights.
Strict date parsing: why new Date("2026-02-30") is not a validator (it rolls over), and why parsing date-only strings can shift a day across time zones.
Cross-field validation (return vs departure) that only runs when both fields are individually valid.
Constraints between widgets: disabling the return input, keeping its value, and ignoring its errors for one-way trips.
Accessibility: labels, aria-invalid, aria-describedby, and a role="status" confirmation.

Clarifying questions expected:

"Should I use a native date picker or text inputs with a fixed format?"
"Is a departure date in the past allowed, and whose time zone defines today?"
"Is a same-day return allowed?"

Code / implementation expected: Yes. The booker component with a strict date parser, derived validation and enable rules, and a confirmation message.

Forms
Validation
Dates

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend candidates preparing for a machine coding round. No React form experience is assumed; the Form with validation question is a gentler warm-up if you want one. Difficulty: Medium

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from the runnable solution, and the outputs in section 6 were produced by actually running the code (the component on React 19.3.1, the date experiments on Node 22.22.0).

1. Why This Even Matters — A Story First

A travel agent fills in a paper ticket: one-way or return, departure date, return date. A good agent will not let you return before you leave, will cross out the return box for a one-way ticket, and will refuse "30 Febr

The solution is hidden so you can try first

11 min read · 10 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import FlightBooker from "./src/components/FlightBooker";
import "./styles.css";

export default function App() {
  return (
    <main className="page">
      <FlightBooker />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.