Small demo Vue.js application that uses the AviationStack API to show flight status.
- Search flights by airline, flight number, and date
- Display detailed flight information including:
- Flight status (e.g., scheduled, active, landed, cancelled)
- Departure and arrival airport details
- Scheduled, estimated, and actual times
- Terminal and gate information
- Pagination for multiple flight results
- Responsive design using Tailwind CSS
- API response caching for improved performance
- Visual indicator for cached data usage
- Option to force refresh cached data
Before you begin, ensure you have met the following requirements:
- Node.js (v14.0.0 or later)
- npm (v6.0.0 or later)
-
Clone the repository:
git clone https://github.com/esoltys/flight-tracker-app.git cd flight-tracker-app -
Install the dependencies:
npm install -
Create a
.envfile in the root directory and add your AviationStack API key:VUE_APP_AVIATION_STACK_API_KEY=your_api_key_here
To run the application in development mode:
npm run serve
The application will be available at http://localhost:8080.
To build the application for production:
npm run build
To run the Jest test suite:
npm run test:unit
This project uses the AviationStack API to fetch real-time flight data. You'll need to sign up for an API key to use this service.
The application implements a simple caching mechanism to improve performance and reduce API calls:
- API responses are cached for 5 minutes
- A visual indicator is shown when displaying cached data
- Users can force a refresh of the data, bypassing the cache
Distributed under the MIT License. See LICENSE for more information.