<aside>
This project is a real-time, browser-based analytics dashboard that monitors live air traffic activity at Ninoy Aquino International Airport (NAIA), Manila, Philippines. It consumes live flight data from the Aviationstack REST API and presents it in a visually compelling, management-grade interface covering arrivals, departures, delays, airline breakdown, runway utilization, terminal status, aircraft types, and trend analysis.
The dashboard is built as a single self-contained HTML file using vanilla HTML, CSS, and JavaScript — no frameworks, no build tools, no backend required. It is deployed and publicly accessible via GitHub Pages.
</aside>
<aside>
https://cloudrosemage.github.io/naia-air-traffic-dashboard/
</aside>
<aside>
This project was built with two interlocking purposes. The first is professional: to demonstrate a working command of data analytics, front-end web development, and REST API integration through a single, cohesive artifact. Rather than abstract exercises, the dashboard presents real computed metrics — on-time rates, delay distributions, airline share, and traffic volume — derived from live API data and rendered in a production-grade interface built without any frameworks or third-party libraries. The second purpose is practical: to document the full project lifecycle, from API research and data modeling to deployment and versioning, as a portfolio case study that reflects how real-world data projects are scoped, built, and maintained.
As a secondary objective, this project serves as an exploration of the aviation data landscape available to independent developers in the Philippines — mapping out what is publicly accessible, what requires formal agreements, and where the gaps are — and lays the groundwork for a more advanced version using paid data tiers or an eventual CAAP data-sharing arrangement.
The dashboard is designed to be useful to a range of stakeholders. Airport management at MIAA can use it for a real-time overview of traffic volume, delay patterns, runway load, and airline performance. Airline operations teams benefit from a quick reference for on-time rates and flight statuses. Aviation analysts gain a structured, visual representation of flight data that would otherwise require manual querying. Passengers can use the live flight board to check arrivals and departures at NAIA. For portfolio reviewers and recruiters, the project serves as direct, working evidence of data, front-end, and API skills applied to a locally relevant problem. Finally, the open-source codebase and accompanying documentation offer a practical reference for other developers looking to integrate Aviationstack in a Philippine aviation context.
</aside>
<aside>
| Tool | Purpose |
|---|---|
| HTML5 | Page Structure & Layout |
| CSS3 | Styling, Animations, CSS Variables, Grid, & Flexbox |
| JavaScript (ES6+) | API Calls, DOM Manipulation, Canvas Charts, & SVG Map |
| Canvas API | Donut Chart Rendering |
| SVG | Live Aircraft Map |
| Google Fonts | Bebas Neue, DM Mono, & Geist Typefaces |
| </aside> |
<aside>
</aside>
<aside>
</aside>
<aside>
The dashboard is built as a single self-contained file (
index.html) with no external dependencies beyond Google Fonts and the Aviationstack API. Everything — structure, styling, logic, and data rendering — lives in one file, making it portable, easy to deploy, and straightforward to audit.
</aside>
<aside>
</aside>
<aside>
Aviationstack was selected as the primary data source after evaluating several aviation APIs available to independent developers in the Philippines. FlightRadar24 has no public API and is commercial-only. The Civil Aviation Authority of the Philippines (CAAP) has no public API and requires a formal data-sharing agreement. OpenSky Network is free and open but only provides raw ADS-B transponder data — it lacks flight numbers, airline names, schedules, and flight status, which are essential to this dashboard. AviationStack was the only option that provided all required fields (flight number, airline, route, status, delay, terminal) on a free tier with no credit card required.
Aviationstack: Real-Time Flight Tracker API - Free Flight APIs
<aside>
https://cloudrosemage.github.io/naia-air-traffic-dashboard .</aside>
<aside>
<aside>
</aside>
</aside>
<aside>
<aside>
Live dashboard source code · v2.0 Portfolio Rebuild · Single-file application deployed via GitHub Pages
Project overview, setup guide, code structure, data source documentation, and known limitations
Project overview, setup guide, code structure, data source documentation, and known limitations
Full field-level documentation of the Aviationstack API response structure consumed by the dashboard
Full field-level documentation of the Aviationstack API response structure consumed by the dashboard
Complete version history from v0.1 prototype to v2.0 portfolio rebuild
Complete version history from v0.1 prototype to v2.0 portfolio rebuild
</aside>
<aside>
Initial static prototype with hardcoded simulated data · 8 panels · No API integration
Initial static prototype with hardcoded simulated data · 8 panels · No API integration
First live version · Aviationstack REST API integration · Secure key entry · Auto-refresh
First live version · Aviationstack REST API integration · Secure key entry · Auto-refresh
Minor update · Global font changed to Inter · No functional changes from v1.0
Minor update · Global font changed to Inter · No functional changes from v1.0
Full portfolio rebuild · New visual design · Live aircraft map · Terminal breakdown · Weekly trend · Full animation
</aside>
</aside>
<aside>
Built by John Miguel Co Molina · Remote Operations Support & Junior Data Analyst · LinkedIn · Live Dashboard · GitHub · v2.0 · April 2026 · Data by Aviationstack · Not affiliated with MIAA or CAAP
</aside>