anthonysetiadi / ovatu-aviation

Ovatu Aviation

This single page application was created as a submission to a coding challenge set by Ovatu Interview Process.

Tech stack:

• Vue.js
• Tailwind CSS

App features

An airport schedule app with the following features:

• Uses the Aviation API by AirLabs
• Fully responsive web app
• Users can select an airport from a list of major Australian airports
• Includes a schedule of all departures and arrivals for the selected airport for the current day
• Each list is searchable by flight name and paginated
• Clicking on a row in the schedule opens a modal to show more information about the flight

Future Todos / Feature Ideas

• Add dynamic colours to the flight status in the FlightInfo modal
• Combine API calls for fetchFlightInfo and fetchSchedule to reduce number of API requests and improve performance
• Render a static table and add a custom skeleton loader component within each row of the table for initial loading state

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build