Flighty — flight search demo

A lightweight Kiwi.com-style flight comparison built for a hackathon. Searches live airline data via the Duffel API (test environment) and displays results with sort + filter. Search-only — no booking.

Routes supported: AMS ↔ ZRH and AMS ↔ GVA.

Stack

• Next.js 16 (App Router) + React 19
• TypeScript
• Tailwind CSS
• Duffel API (test environment)

Setup

1. Get a Duffel test key

1. Sign up at https://app.duffel.com
2. Go to Developers → Access tokens
3. Create a token with prefix duffel_test_* (test mode is free; no card required)

2. Configure environment

cp .env.local.example .env.local

Edit .env.local:

DUFFEL_API_KEY=duffel_test_xxx

3. Run

npm install
npm run dev

Open http://localhost:3000.

Notes

• Test mode returns offers from real and synthetic airlines (e.g. Duffel Airways) with realistic schedules and prices — perfect for a demo.
• The Duffel key never reaches the browser — all calls go through the Next.js server (app/api/search/route.ts and the server component in app/search/page.tsx).
• Booking is intentionally out of scope — the Select button is disabled.

Project layout

app/
  page.tsx              # landing page with hero + search form
  search/page.tsx       # results page (server component, calls Duffel directly)
  api/search/route.ts   # JSON API endpoint
components/
  Header.tsx
  SearchForm.tsx        # client component, pushes URL params on submit
  Results.tsx           # client component, sort + filter
  FlightCard.tsx
lib/
  airports.ts           # AMS/ZRH/GVA + route validation
  duffel.ts             # Duffel client + response mapper
  types.ts              # shared types
  utils.ts              # cn, format helpers