Flight App

Brief Description

In this project, I developed a React-based flight tracking interface that lists, filters, and displays flight data on a detail page.

Problem

Flight data can be difficult to read when presented in its raw form. This project focuses on solving the need for a more organized interface to aggregate departure-arrival flow, date filtering, status information, and flight details.

Solution

I built the application using React, Redux Toolkit, and React Router. After fetching flights from the API, I enriched the data with additional information obtained through separate requests, such as airline, destination, and aircraft type. This enriched data is then displayed on the list screen, including flight time, city-airport information, aircraft type, and real-time status. I separated the departure and arrival screens, managed date selection via query parameters, and added a dedicated detail page for each flight.

Outcome

The result is a flight tracking application with a clear filtering and detail flow that also functions on mobile devices. The project clearly demonstrates API integration, management of multiple data requests, and maintaining synchronized screen state with Redux.

Technologies

React, JavaScript, Redux Toolkit, React Router DOM, Axios, date-fns, Tailwind CSS, React Icons, React Spinners, Vite

Setup