chimezirimugochukwu / radarsite

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

🔮 Features:

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

🔌 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:

REACT_APP_MAPBOX_TOKEN=<YOUR_MAPBOX_TOKEN>
REACT_APP_OSKY_USERNAME=<YOUR_OPENSKYNETWORK_USERNAME>
REACT_APP_OSKY_PASSWORD=<YOUR_OPENSKYNETWORK_PASSWORD>

Start the project:

npm start

📑 License:

• MIT © xSNOWM4Nx

---

This project was bootstrapped with Create React App.