https://github.com/xSNOWM4Nx/react-flight-tracker
✈️ An open-source real-time flight tracker with React, TypeScript, Mapbox and data from the OpenSky Network API.
https://github.com/xSNOWM4Nx/react-flight-tracker
aircraft-flights aircraft-map aircraft-traffic flight-map flight-radar flight-tracker flight-tracking map mapbox-gl-js material-ui mui mui-material opensky-api opensky-network radar react react-map-gl reactjs typescript vite
Last synced: 3 months ago
JSON representation
✈️ An open-source real-time flight tracker with React, TypeScript, Mapbox and data from the OpenSky Network API.
- Host: GitHub
- URL: https://github.com/xSNOWM4Nx/react-flight-tracker
- Owner: xSNOWM4Nx
- License: mit
- Created: 2020-03-10T05:04:22.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-07-07T19:49:33.000Z (4 months ago)
- Last Synced: 2025-07-07T23:07:21.012Z (4 months ago)
- Topics: aircraft-flights, aircraft-map, aircraft-traffic, flight-map, flight-radar, flight-tracker, flight-tracking, map, mapbox-gl-js, material-ui, mui, mui-material, opensky-api, opensky-network, radar, react, react-map-gl, reactjs, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 35 MB
- Stars: 100
- Watchers: 1
- Forks: 30
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://opensky-network.org/) and visualize it on a map.
[](https://standardjs.com)
## 📦 Packages:
- [react-map-gl](https://www.npmjs.com/package/react-map-gl)
- [mapbox-gl](https://www.npmjs.com/package/mapbox-gl)
- [MUI](https://www.npmjs.com/package/@mui/material)
- [Vite](https://www.npmjs.com/package/vite)
- [TypeScript](https://www.npmjs.com/package/typescript)
## 🔮 Features:
- Using "Hooks", "Context", "Suspense", "React.lazy" and other popular React patterns.
- Written entirely in TypeScript.
- Fetching flight data from [OpenSky Network](https://opensky-network.org/).
- Using maps from [mapbox](https://www.mapbox.com/) with the React friendly wrapper [react-map-gl](https://github.com/visgl/react-map-gl).
- Using styling components from [MUI](https://mui.com/) project.
- Using [Vite](https://vitejs.dev/) to serve the app.
## 🔌 Usage:
To use the maps from [mapbox](https://www.mapbox.com/), 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](https://opensky-network.org/), i would also recommend creating a account on their website and setup the API client to get a client ID and a client SECRET. The flight data is then provided with a delay of ~6 seconds. Without an account, the delay is ~12 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=
VITE_REACT_OSKY_CLIENT_ID=
VITE_REACT_OSKY_CLIENT_SECRET=
```
Start the project:
```
npm run preview
```
## 📑 License:
- MIT © [xSNOWM4Nx](https://github.com/xSNOWM4Nx)