✈️ Real-Time Flight Tracker

A beautiful, real-time flight tracking application built with React, Vite, and Leaflet. Track flights around the world with an interactive map, search functionality, and live updates.

✨ Features

• 🗺️ Interactive Map - Leaflet-powered map with dark theme
• ✈️ Real-Time Flight Data - Live flight tracking using OpenSky Network API
• 🔍 Search & Filter - Search flights by callsign or country
• 📊 Live Statistics - Track total flights, in-flight count, and countries
• 🎨 Premium UI/UX - Modern dark theme with glassmorphism and animations
• 🔄 Auto-Refresh - Flight data updates every 10 seconds
• 📱 Responsive Design - Works on desktop, tablet, and mobile

🚀 Getting Started

Prerequisites

• Node.js (version 20.19+ or 22.12+ recommended)
• npm (comes with Node.js)

Installation

1. Clone the repository

   git clone https://github.com/akashkaintura/flight-tracker.git
   cd flight-tracker

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser

   • Navigate to the URL shown in the terminal (typically http://localhost:5173)
   • The app will automatically reload when you make changes

🛠️ Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🎨 Tech Stack

• Frontend Framework: React 19.2.0
• Build Tool: Vite 7.2.4
• Map Library: Leaflet + React-Leaflet
• Data Source: OpenSky Network API
• Styling: Vanilla CSS with CSS Variables
• Icons: Emoji & Custom SVG

🌟 Key Features Explained

Real-Time Flight Tracking

The app fetches live flight data from the OpenSky Network API, displaying up to 200 flights at a time with automatic updates every 10 seconds.

Interactive Map

• Click on airplane markers to view flight details
• Map automatically focuses on selected flights
• Dark theme optimized for visibility
• Custom airplane icons that rotate based on flight heading

Search Functionality

Filter flights in real-time by:

• Flight callsign (e.g., "UAL123")
• Origin country (e.g., "Germany")

Premium Design

• Glassmorphism effects with backdrop blur
• Animated gradients and glowing effects
• Smooth transitions and micro-animations
• Responsive layout for all screen sizes

📁 Project Structure

flight-tracker/
├── src/
│   ├── components/
│   │   ├── FlightMap.jsx      # Interactive Leaflet map
│   │   ├── FlightCard.jsx     # Flight information card
│   │   ├── SearchBar.jsx      # Search input component
│   │   └── FlightStats.jsx    # Statistics display
│   ├── services/
│   │   └── flightService.js   # API integration
│   ├── utils/
│   │   └── utils.js           # Helper functions
│   ├── App.jsx                # Main application
│   ├── App.css                # App-specific styles
│   ├── index.css              # Global styles & design system
│   └── main.jsx               # Entry point
├── public/
├── index.html
├── package.json
└── vite.config.js

🔧 Configuration

API Rate Limits

The OpenSky Network API has rate limits for anonymous users (~100 requests/day). For higher limits, consider:

• Creating an OpenSky Network account
• Using alternative APIs (Aviationstack, FlightAPI, AirLabs)

Customization

• Colors: Modify CSS variables in src/index.css
• Map Theme: Change tile layer URL in src/components/FlightMap.jsx
• Refresh Rate: Adjust interval in src/App.jsx (default: 10 seconds)
• Flight Limit: Change limit in src/services/flightService.js (default: 200)

🌐 Deployment

Build for Production

npm run build

The optimized build will be in the dist/ folder, ready for deployment to:

• Vercel
• Netlify
• GitHub Pages
• Any static hosting service

🤝 Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest new features
• Submit pull requests

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• OpenSky Network for providing free flight data
• Leaflet for the amazing mapping library
• React and Vite for the development experience

📧 Contact

Created by Akash Kaintura

---

⭐ Star this repo if you find it helpful!