This is a production-ready flight search engine called FavFlight.

Quick Start

Prerequisites

• Node.js 18+
• Amadeus API credentials (free tier available at https://developers.amadeus.com)

Installation

pnpm install

Configuration

Edit .env.local:

AMADEUS_CLIENT_ID=your_client_id
AMADEUS_CLIENT_SECRET=your_client_secret

Running the App

pnpm dev

Open http://localhost:3000 with your browser.

Overview

FavFlight is a senior-level flight search application demonstrating:

• Real-time filtering (price, stops, airlines)
• Live price charts with Recharts
• Responsive design (desktop sidebar + mobile drawer)
• Clean state management with Zustand
• Type-safe API integration with Amadeus
• Production UX with loading states and error handling

Features

✈️ Flight Search: Enter origin/destination, dates, and passengers 🎯 Real-Time Filtering: Price range, stops, airlines update instantly 📊 Live Price Chart: Distribution visualization updates with filters 🎨 Responsive Layout: Desktop sidebar, mobile drawer, full touch support 🎁 Polish: Loading skeletons, error states, empty states, smooth transitions

Tech Stack

• Next.js 16 (App Router)
• TypeScript 5 (strict)
• TailwindCSS 4 + shadcn/ui
• Zustand (state management)
• Recharts (data visualization)
• Amadeus API (flight data)

Architecture

State Management

All flight data and filters live in Zustand store (useFlightStore):

• Raw flights from API
• Active filters
• Derived filtered flights (computed in real-time)
• Memoized selectors for optimal rendering

Key Components

• SearchForm: Flight search input
• FlightCard + FlightList: Results display with states
• PriceFilter, StopsFilter, AirlineFilter: Real-time filters
• PriceChart: Recharts visualization
• MainLayout: Responsive container with sidebar/drawer

Real-Time Filtering

1. User adjusts filter → Zustand action updates store
2. Store notifies subscribers
3. Selectors recompute filtered flights
4. Chart and list re-render with new data
5. No page reloads, no duplicated state

File Structure

app/
  api/
    flights/route.ts        # Flight search API (proxy to Amadeus)
    airports/route.ts       # Airport reference data
    airlines/route.ts       # Airline reference data
    bookings/route.ts       # Server-side booking persistence (POST)
    bookings/[id]/route.ts  # Booking retrieval (GET)
  booking/
    page.tsx                # Booking flow (select return / confirm)
    confirmation/
      page.tsx              # Confirmation wrapper (server)
      ConfirmationClient.tsx# Client rendering and copy-link UI
  globals.css
  layout.tsx
  page.tsx                  # Main search page

components/
  search/
    SearchForm.tsx
  results/
    FlightCard.tsx
    FlightList.tsx
  filters/
    PriceFilter.tsx
    StopsFilter.tsx
    AirlineFilter.tsx
  charts/
    PriceChart.tsx
  layout/
    MainLayout.tsx
  ui/
    button.tsx
    pagination.tsx

store/
  flightStore.ts            # Zustand store

types/
  flight.ts                 # TypeScript flight types

lib/
  amadeus.ts                # Amadeus API client
  referenceData.ts          # Airport/airline helper + caching
  utils.ts                  # small helpers (cn, formatters)
  formatters.ts             # display formatting helpers

public/                     # Static assets

.data/                      # (dev) server-side persisted bookings.json

Building & Deployment

Local Build

pnpm build
pnpm start

Vercel

vercel link
vercel env add AMADEUS_CLIENT_ID
vercel env add AMADEUS_CLIENT_SECRET
vercel deploy

Security Notes

✅ API keys never exposed to client ✅ All Amadeus calls proxied through /api/flights ✅ No sensitive data in public folders

Next Steps

1. Add Amadeus credentials to .env.local
2. Run pnpm dev
3. Search flights using IATA codes (JFK, LAX, etc.)
4. Use filters to explore results
5. Check README_DETAILED.md for architecture deep-dive

---

Built as a production-ready technical assessment. Every detail matters.