A modern, responsive flight search application built with React that mimics the Google Flights interface. Search for flights, view results in multiple formats, and explore destination information.
- Smart Airport Search: Real-time airport search with autocomplete
- Flexible Search Options: Round-trip and one-way flight searches
- Multiple View Modes: Toggle between Google Flights-style view and traditional list view
- Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- 🔍 Intelligent Airport Autocomplete: Type-ahead search with airport names, cities, and IATA codes
- 📅 Date Selection: Interactive date pickers for departure and return dates
- 👥 Passenger Options: Select number of passengers (1-9)
- 💺 Cabin Class Selection: Economy, Premium Economy, Business, or First class
- 🔄 Quick Airport Swap: One-click swap between origin and destination
- Google Flights View: Mimics the official Google Flights interface with flights and destination info
- List View: Traditional flight results display with sorting and filtering
- Flight Details: Airline information, duration, stops, and pricing
- API Integration: Real-time data from Sky Scrapper API
- Fallback System: Mock data ensures functionality even when API is unavailable
- Error Handling: Graceful error states with user-friendly messages
- Node.js 14+ and npm installed on your machine
- A modern web browser (Chrome, Firefox, Safari, Edge)
- Clone the repository
git clone https://github.com/AprajitSarkar/google-flights-clon.git
cd google-flights-clon- Install dependencies
npm install- Set up environment variables (optional)
Create a
.envfile in the root directory:
REACT_APP_RAPIDAPI_KEY=your_api_key_here
REACT_APP_RAPIDAPI_HOST=sky-scrapper.p.rapidapi.com- Start the development server
npm startThe application will open automatically at http://localhost:3000
-
Enter Origin:
- Type in the "From" field
- Select an airport from the dropdown suggestions
- Suggestions show airport names, IATA codes, and cities
-
Enter Destination:
- Type in the "To" field
- Select your destination airport
- Use the swap button (⇄) to quickly exchange origin and destination
-
Select Dates:
- Click on the departure date field
- Choose your travel date from the calendar
- For round trips, select a return date
-
Configure Options:
- Click the passenger/class button
- Adjust number of passengers
- Select your preferred cabin class
-
Search:
- Click "Search flights" button
- View results in either Google or List view
- Toggle between views using the switch button
Google View displays:
- Flight options with airline and duration
- Destination information and imagery
- Weather information for the destination
List View offers:
- Sortable results (by price, duration, departure time)
- Filter by number of stops
- Detailed flight information cards
- React 18.2.0 - UI framework
- React Router - Navigation
- Axios - HTTP client for API calls
- Lucide React - Modern icon library
- React DatePicker - Date selection component
- CSS3 - Custom styling
- Responsive Design - Mobile-first approach
- Google Fonts - Typography
- Create React App - Build tooling
- ESLint - Code linting
- npm - Package management
google-flights-clone/
├── public/
│ ├── index.html
│ └── manifest.json
├── src/
│ ├── components/
│ │ ├── AirportSearch.js # Airport search autocomplete
│ │ ├── SearchForm.js # Main search form
│ │ ├── FlightResults.js # List view results
│ │ ├── FlightCard.js # Individual flight card
│ │ └── GoogleFlightsDisplay.js # Google-style view
│ ├── data/
│ │ ├── mockAirports.js # Fallback airport data
│ │ └── mockFlights.js # Fallback flight data
│ ├── services/
│ │ └── flightService.js # API integration
│ ├── styles/
│ │ ├── AirportSearch.css
│ │ ├── SearchForm.css
│ │ ├── FlightResults.css
│ │ ├── FlightCard.css
│ │ └── GoogleFlightsDisplay.css
│ ├── utils/
│ │ └── helpers.js # Utility functions
│ ├── App.js # Main app component
│ ├── App.css # App styles
│ └── index.js # Entry point
├── package.json
└── README.md
The app uses the Sky Scrapper API from RapidAPI. To use your own API key:
- Sign up at RapidAPI
- Subscribe to the Sky Scrapper API
- Add your credentials to
.envfile
The application includes comprehensive mock data for:
- Major airports worldwide
- Sample flight results
- Testing without API access
# Start development server
npm start
# Build for production
npm run build
# Run tests
npm test
# Eject from Create React App (irreversible)
npm run ejectAirport search not showing results:
- Check your internet connection
- Verify API key is configured correctly
- The app will automatically use mock data if API fails
Flights not updating on new search:
- The app now properly clears previous results
- Each search triggers a fresh API call
- Loading states are shown during data fetching
Styling issues:
- Clear browser cache
- Ensure all CSS files are properly imported
- Check browser console for errors
- Install gh-pages:
npm install --save-dev gh-pages- Add to package.json:
"homepage": "https://AprajitSarkar.github.io/google-flights-clon",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}- Deploy:
npm run deploy- Build the project:
npm run build- Drag the
buildfolder to Netlify
- Install Vercel CLI:
npm i -g vercel- Deploy:
vercelContributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Design inspired by Google Flights
- Airport data from Sky Scrapper API
- Icons from Lucide React
- React community for excellent documentation
Aprajit Sarkar
- GitHub: @AprajitSarkar
- Project Link: https://github.com/AprajitSarkar/google-flights-clon
⭐ Star this repository if you find it helpful!