xsnowm4nx / react-flight-tracker

✈️ An open-source real-time flight tracker with React, TypeScript, Mapbox and data from the OpenSky Network API.

react-flight-tracker

An open-source project written with React and TypeScript.

The goal of this project is to read the data from OpenSky Network and visualize it on a map.

📦 Packages:

• ts-lib-module
• react-lib-module
• TypeScript
• react-router
• MUI
• react-map-gl
• Vite

🔮 Features:

• Using "Hooks", "Context", "Suspense", "React.lazy" and other popular React patterns.
• Written entirely in TypeScript.
• Fetching flight data from OpenSky Network.
• Using maps from mapbox with the React friendly wrapper react-map-gl.
• Using styling components from MUI project.
• Using Vite to serve the app.

🔌 Usage:

To use the maps from mapbox, you need an appropriate token. You can create one on their website by registering there. Registration is free and all relevant things are covered for development purposes.

For the use of the flight data via The OpenSky Network, I would also recommend creating a corresponding account on their website. The flight data is then provided with a delay of ~5 seconds. Without an account, the delay is ~10 seconds.

Start by cloning the repository and install the packages:

npm install

Create a .env.local file in the root directory containing following entries:

VITE_REACT_MAPBOX_TOKEN=<YOUR_MAPBOX_TOKEN>
VITE_REACT_OSKY_USERNAME=<YOUR_OPENSKYNETWORK_USERNAME>
VITE_REACT_OSKY_PASSWORD=<YOUR_OPENSKYNETWORK_PASSWORD>

Start the project:

npm run preview

📑 License:

• MIT © xSNOWM4Nx

react-flight-tracker's Issues

Question

Hi there, I have a question regarding the OpenSky API. I am making something similar and I am having trouble determining the GET request for a particular flight using the ICAO24. Is it possible for you to help me with the "begin" and "end" parameters of the request? I cannot seem to figure out what time interval [begin, end] to choose in order to get the most recent flight information. I need to use this request in order to get the departure and arrival airport information. I am wondering how you did this part. Please see the following for more information:
https://opensky-network.org/apidoc/rest.html#flights-by-aircraft

Thank you.

The map has no flights

When i set up the project with the correct enviroment variables and started the server the only thing i get is a map and no flights displayed.

I get a lot of errors

Hard to deploy

I have tried to deploy this project to Netlify/Cloudflare pages and it is not displaying flights. Where shall this flight tracker be hosted at as it only displays flights whennpm run startis ran and it takes 6~ GB Ram to compile?