Spot Your Flights ✈️

Search and compare cheap flights from Nigeria, across Africa, and worldwide.

A flight search app built with React, TypeScript, MUI, and TanStack Query. Use it to find affordable flights near you—whether you're flying from Lagos to London, Abuja to Dubai, or anywhere else.

✨ Features

• Interactive Search: Dynamic origin/destination search with real-time airport suggestions.
• Smart Animations: Powered by Framer Motion for smooth staggered list loading and hover effects.
• Dynamic Context: Integration with Unsplash API to fetch high-resolution background imagery based on your selected destination.
• Price Analytics: Visual price distribution graphs via Recharts.
• Resilient Mocking: Automatic fallback to local mock data ensures the app works perfectly even without API credentials or when live data isn’t available for your route.

🎯 Who It’s For

• Travelers in Nigeria and Africa looking for cheap flights domestically and internationally.
• International users searching for affordable flights worldwide.

🚀 Getting Started

1. Prerequisites

• Node.js (v18+)
• npm

2. Installation

npm install

3. API Configuration (Optional but Recommended)

To use live flight data and dynamic images, create a .env file in the root directory:

# Amadeus API (Flight Data) - https://developers.amadeus.com/
VITE_AMADEUS_CLIENT_ID=your_api_key_here
VITE_AMADEUS_CLIENT_SECRET=your_api_secret_here

# Unsplash API (City Backgrounds) - https://unsplash.com/developers
VITE_UNSPLASH_ACCESS_KEY=your_access_key_here

Note: The Amadeus test environment has limited cached routes (often major hubs only). For full coverage—including Nigeria and other African routes—use Amadeus production keys when you go live.

4. Run Development Server

npm run dev

🧩 Technical Details

Framer Motion Usage

Look for motion.div and AnimatePresence in the following files to see how we handle animations:

• src/features/flights/FlightCard.tsx: Staggered entrance and hover scales.
• src/features/flights/FlightList.tsx: Orchestrates the entrance of the entire result set.
• src/features/search/SearchForm.tsx: Hero section entrance and smooth background transitions.
• src/components/ui/LoadingButton.tsx: Smooth state switching.

Unsplash Integration

Instead of static images, we use src/api/unsplashService.ts to search for city-specific high-res photos. When you select a destination (e.g., "Paris"), the background of the hero section automatically transitions to a beautiful photo of that city.

Architecture: Single Page Application (SPA)

The app is a high-performance Single Page Application. It dynamically swaps search inputs, results, filter sidebars, and analytics charts without reloading the browser, giving a smooth, app-like experience.

📄 Documentation

• DECISIONS.md: Architectural choices and design patterns.