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.
- 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.
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
- MIT © xSNOWM4Nx