This project is a web application that displays flight conditions on a map and allows users to view flight details. The application is used using React and Redux libraries.
Redux was used to manage flight data. FlightSlice was created to store flight data, loading and error status. An async thunk called GetFlights fetches data using Axios by making an API request and saves the results to the Redux store.
The app offers both a map view and a list view, allowing users to switch between them. The map view is created using the react-leaflet library. Flight data is displayed as aircraft icons on the map using customized aircraft images. List view presents flights in tabular format. Each flight is accompanied by a detail button.
Flight details can be viewed by clicking on the flight icons or the detail button in the list view. Details are displayed using the SideDetails component. The data is fetched using an API request and presented as a detail page.
Pagination is used in list view to display a limited number of flight items per page. The React-paginate library generates page numbers and makes it easier to navigate between pages.
CSS styling is applied to the app for visual improvements. Data is displayed properly in detailed pop-ups and other widgets.
Links in flight details (such as airport websites) are designed to be clickable. Flight status icons are displayed with background colors corresponding to the status.
Flight data is managed in the Redux store for sharing between different components. Preloading and storing data increases page switching speed.
