A modern flight search app built with React and the Amadeus API.
- Flight Search - Search flights by origin, destination, and dates
- Round Trip / One Way - Support for both trip types
- Multi-passenger - Select number of passengers
- Currency Selection - View prices in different currencies
- Advanced Filtering - Filter by stops, price range, and airlines
- Sorting - Sort results by price, duration, or departure time
- Live Price Graph - Visual price distribution that updates with filters
- Infinite Scroll - Loads more flights as you scroll down
- Responsive Design - Works great on mobile and desktop
- Theme Switcher - 6 color themes (Light, Dark, Ocean, Rose, Lavender, Mint)
| Technology | What it does |
|---|---|
| React 19 | UI framework - latest version with improved performance |
| Vite | Build tool - super fast dev server and builds |
| TanStack Query | Data fetching - handles caching, loading states, and refetching |
| TanStack Router | Routing - type-safe client-side navigation |
| Tailwind CSS 4 | Styling - utility-first CSS framework |
| shadcn/ui | UI components - accessible components built on Radix UI |
| Recharts | Charts - for the price distribution graph |
| Axios | HTTP client - API requests with interceptors for auth |
| date-fns | Date utilities - formatting and manipulation |
- Node.js 18+
- npm or yarn
- Amadeus API credentials (Get them here)
- Clone the repository:
git clone https://github.com/edriso/flyways.git
cd flyways- Install dependencies:
npm install- Set up environment variables:
cp .env.example .envThen open .env and add your Amadeus API credentials:
VITE_AMADEUS_CLIENT_ID=your_api_key_here
VITE_AMADEUS_CLIENT_SECRET=your_api_secret_here- Start the development server:
npm run dev- Open http://localhost:5173 in your browser.
src/
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── SearchForm.jsx # Flight search form
│ ├── FlightCard.jsx # Individual flight display
│ └── FlightResults.jsx # Results list with filters
├── context/ # React Context for app state
├── hooks/ # Custom React hooks
│ ├── useAppContext.js # Context consumer hook
│ └── useFlights.js # Flight data fetching
├── pages/ # Page components
├── utils/ # Utility functions
│ ├── axios.js # Axios instance with OAuth
│ └── helpers.js # Common helper functions
└── main.jsx # App entry point
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
Uses the Amadeus Flight Offers Search API for real flight data. OAuth2 authentication is handled automatically by axios interceptors.
Airport Search: Uses Amadeus Location API for autocomplete. Static list shows popular airports initially, then API kicks in when you type 2+ characters.
Note: The test environment has rate limits. If you see 429 errors, wait a moment before retrying.
TanStack Query - Handles caching, loading states, and retries out of the box. Same search won't hit the API twice.
Context API - Simple and lightweight for this app size. No need for Redux complexity here.
Tailwind + shadcn/ui - Fast to build, accessible components, no CSS headaches.
- useMemo for price graph and filter options - only recalculates when data actually changes
- useCallback for filter handlers - stable references prevent unnecessary re-renders
- Smart token handling - concurrent API calls share one token request instead of firing multiple
- Infinite scroll - uses IntersectionObserver to load 10 flights at a time, resets when filters change
- Currency persistence - saves your preferred currency to localStorage
MIT