https://github.com/huseyinerikci/flightradar
A flight radar project developed with React.js, Redux Toolkit Thunk, Bootstrap CSS libraries and RapidAPI
https://github.com/huseyinerikci/flightradar
bootstrap css rapidapi react redux-toolkit-thunk slidejs
Last synced: 3 months ago
JSON representation
A flight radar project developed with React.js, Redux Toolkit Thunk, Bootstrap CSS libraries and RapidAPI
- Host: GitHub
- URL: https://github.com/huseyinerikci/flightradar
- Owner: huseyinerikci
- Created: 2025-01-28T11:50:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-28T12:01:13.000Z (over 1 year ago)
- Last Synced: 2025-03-24T05:32:28.329Z (over 1 year ago)
- Topics: bootstrap, css, rapidapi, react, redux-toolkit-thunk, slidejs
- Language: JavaScript
- Homepage:
- Size: 80.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flight Radar Project
Flight Radar is a ReactJS application developed to display and track real-time flight data. This project allows users to track planes on a map and access flight details using flight data received via RapidAPI. In addition, visual elements and detailed information about flights are presented with a user-friendly interface.
## Preview
A preview of my flight radar project is in the gif below.
## Features
* Real-Time Flight Data: Flight data is retrieved using RapidAPI and this data is displayed on the map.
* Leaflet Map Integration: The locations and routes of the planes are visualized on an interactive map with the Leaflet library.
* Detailed Flight Data: By clicking on the plane markers on the map, detailed information about the flight (flight time, departure place, destination, aircraft type, etc.) is displayed.
* Visual Slides with SplideJS: Pictures of the plane are presented as a scrollable gallery with the SplideJS library.
* Flight Route: The route of the plane is drawn on the map with Polyline.
* List View and Pagination: Users can go to a page where the flights are listed and access detailed flight information. The data is sorted using the pagination library.
* Responsive Design: The application is designed to be compatible with different devices.
* Loader: A loading animation is shown to the user until the flight data is loaded.
* Live Data Stream: Flight data is updated every 10000ms (10 seconds) so flights and aircraft can be followed in real time.
## Technologies
* ReactJS: ReactJS was used as the basic building block of the application.
* Redux Toolkit & Thunk: Flight data management and asynchronous data retrieval operations were performed using Redux Toolkit and Thunk.
* Axios: Axios library was used for data retrieval operations from the API.
* Leaflet: Leaflet library was used to visualize flights and aircraft routes on the map.
* SplideJS: SplideJS was used to present aircraft images as a scrollable slideshow.
* React Router DOM: React Router DOM was used to provide transition between pages within the application.
* Pagination: A suitable pagination library was integrated for pagination on the page listing the flights.
* Polling: Polling methods are used to update the data stream every 10000ms.