Overhead Flight Tracker

TLDR: I was bored; I wanted to play around with RTK2.0, and I am an amateur avGeek :)

To any potential interviewers: I scrambled this together in a few hours (after >1yr of career break to study. Wanted to get my hands dirty.) Happy to discuss design/drawbacks/improvements!

It's not exactly an FR clone, I wanted this more for an overhead projection for my room (see demo video), and basically to see the Airline/Src/Dest/Alt without having to individually click on an icon.

Real-time flight data from OpenSky API and ADSBD API

Main Takeaways

• React best practices for map rendering
• Interpolate flight position for smooth(er) animation rendering, given heading and velocity
• Flights might operate without a callsign (?!!)

Demo

2F37008F-9798-4517-AE9B-371C7FD68371.1.mp4

Screen capture

DIY Development

• Plug in your geo co-ordinates in constants file
• Get a google API key with Map APIs enabled and plug it in a .env file

├── package.json
├── .env (<------ CREATE!!)
├── app/
│   ├── utils/ 
|   |   |── constants.js (<------ GEO COORDINATES HERE)
│   └── 

Start the development server with HMR:

npm run dev

Your application will be available at http://localhost:5173.

Styling

This template comes with Tailwind CSS already configured for a simple default starting experience. You can use whatever CSS framework you prefer.

---

Built with ❤️ using React Router.