{"id":22310328,"url":"https://github.com/xSNOWM4Nx/react-flight-tracker","last_synced_at":"2025-07-29T07:32:56.433Z","repository":{"id":42569287,"uuid":"246212738","full_name":"xSNOWM4Nx/react-flight-tracker","owner":"xSNOWM4Nx","description":"✈️ An open-source real-time flight tracker with React, TypeScript, Mapbox and data from the OpenSky Network API.","archived":false,"fork":false,"pushed_at":"2025-07-07T19:49:33.000Z","size":36654,"stargazers_count":100,"open_issues_count":1,"forks_count":30,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-07T23:07:21.012Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xSNOWM4Nx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-03-10T05:04:22.000Z","updated_at":"2025-06-29T19:47:48.000Z","dependencies_parsed_at":"2025-07-07T22:45:17.629Z","dependency_job_id":"bb4ca6e1-73cd-4126-916d-4f1d840d7abf","html_url":"https://github.com/xSNOWM4Nx/react-flight-tracker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xSNOWM4Nx/react-flight-tracker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xSNOWM4Nx%2Freact-flight-tracker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xSNOWM4Nx%2Freact-flight-tracker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xSNOWM4Nx%2Freact-flight-tracker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xSNOWM4Nx%2Freact-flight-tracker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xSNOWM4Nx","download_url":"https://codeload.github.com/xSNOWM4Nx/react-flight-tracker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xSNOWM4Nx%2Freact-flight-tracker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267646053,"owners_count":24120931,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-12-03T21:01:16.120Z","updated_at":"2025-07-29T07:32:56.424Z","avatar_url":"https://github.com/xSNOWM4Nx.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-flight-tracker\r\nAn open-source project written with React and TypeScript.\r\n\r\nThe goal of this project is to read the data from [OpenSky Network](https://opensky-network.org/) and visualize it on a map.\r\n\r\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\r\n\r\n![](docs/react-flight-tracker_prview.gif)\r\n\r\n## 📦 Packages:\r\n- [react-map-gl](https://www.npmjs.com/package/react-map-gl)\r\n- [mapbox-gl](https://www.npmjs.com/package/mapbox-gl)\r\n- [MUI](https://www.npmjs.com/package/@mui/material)\r\n- [Vite](https://www.npmjs.com/package/vite)\r\n- [TypeScript](https://www.npmjs.com/package/typescript)\r\n\r\n## 🔮 Features:\r\n- Using \"Hooks\", \"Context\", \"Suspense\", \"React.lazy\" and other popular React patterns.\r\n- Written entirely in TypeScript.\r\n- Fetching flight data from [OpenSky Network](https://opensky-network.org/).\r\n- Using maps from [mapbox](https://www.mapbox.com/) with the React friendly wrapper [react-map-gl](https://github.com/visgl/react-map-gl).\r\n- Using styling components from [MUI](https://mui.com/) project.\r\n- Using [Vite](https://vitejs.dev/) to serve the app.\r\n\r\n## 🔌 Usage:\r\nTo 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.\r\n\r\nFor 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.\r\n\r\nStart by cloning the repository and install the packages:\r\n```\r\nnpm install\r\n```\r\nCreate a `.env.local` file in the root directory containing following entries:\r\n```\r\nVITE_REACT_MAPBOX_TOKEN=\u003cYOUR_MAPBOX_TOKEN\u003e\r\nVITE_REACT_OSKY_CLIENT_ID=\u003cYOUR_OPENSKYNETWORK_CLIENTID\u003e\r\nVITE_REACT_OSKY_CLIENT_SECRET=\u003cYOUR_OPENSKYNETWORK_CLIENTSECRET\u003e\r\n```\r\nStart the project:\r\n```\r\nnpm run preview\r\n```\r\n\r\n## 📑 License:\r\n- MIT © [xSNOWM4Nx](https://github.com/xSNOWM4Nx)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FxSNOWM4Nx%2Freact-flight-tracker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FxSNOWM4Nx%2Freact-flight-tracker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FxSNOWM4Nx%2Freact-flight-tracker/lists"}