Overview
A modern flight search interface built in one day as part of an interview assessment, inspired by Google Flights. The app allows users to search for flights in real-time, view route and price details, and interact with a responsive UI optimized for both desktop and mobile.
The focus was on delivering a polished UX with real API integration, thoughtful component architecture, and scalable UI patterns—all built with modern tooling like React, TypeScript, and Tailwind CSS.
Tech Stack
Frontend
React
TypeScript
Vite
Tailwind CSS
React Router
Radix UI
Headless UIReact Day Picker
Data & State Management
React QuerySky Scrapper API
Infrastructure & Others
ESLint
Prettier
pnpmKey Features
- Real-time flight search powered by the Sky Scrapper API
- One-way and round-trip support with advanced passenger options
- Interactive date picker with range selection via React Day Picker
- Flight detail breakdown, including duration, layovers, and airline info
- Price comparison across flight options
- Responsive design, optimized for mobile and desktop
- Robust UX: loading states, error boundaries, and empty states handled gracefully
Project Structure
src/
├── components/ # UI and shared components
│ └── ui/ # Reusable styled primitives
├── pages/ # Route-level components
├── hooks/ # Custom React hooks
├── types/ # TypeScript definitions
├── lib/ # Configuration and utilities
├── services/ # API service functions
└── assets/ # Static assets and stylesHighlights
- Built in under 24 hours to meet interview conditions
- Fully typed codebase with TypeScript, improving maintainability and developer confidence
- Optimized development workflow using Vite for fast builds and HMR
- Used design systems like Radix UI and HeadlessUI for accessibility and composability
- Modular architecture to allow for future extensibility such as pagination, filters, or saved searches
Future Improvements
Flight Search
- Add pagination and infinite scroll for large result sets
- Introduce sorting and filtering (price, stops, airlines, departure times)
- Add multi-city support and historical price visualization
API & Performance
- Integrate additional Sky Scrapper endpoints (airports, flight tracking, airline info)
- Implement client-side caching for common queries
- Add price alerts and saved routes
UX Enhancements
- Recent searches and favorites
- Flight price trend charts
- Internationalization and language support
Technical
- Add end-to-end tests
- Further performance optimization and bundle analysis
Development Practices
- Code Quality: Enforced with ESLint and Prettier
- Consistent Typing: Full TypeScript coverage
- Modular Design: Built with separation of concerns in mind
- Responsive-first Layouts: Designed mobile-up, then scaled to desktop
