Airport Analytics Dashboard

🎯 Project Overview

A professional airport passenger analytics dashboard built for technical interview demonstration. Visualizes predicted passenger data and flight information for KLIA (Kuala Lumpur International Airport) with interactive charts and SQL query demonstrations.

📋 Interview Questions Addressed

1. Data Linking Strategy

"How would you link all our flight data with the predicted passenger numbers?"

Solution:

• SQL JOIN on FLIGHTNO (with space removal) and FLIGHT_DATETIME
• Pre-processed CSV data with proper relationships
• Live SQL query demonstration in dashboard

2. Top 5 Continents Visualization

"Can you find the top 5 continents with the most predicted passengers on 14 Jun 2025?"

Solution:

• Chart: Bar Chart with color-coded continents
• Data: Aggregated by continent with passenger totals
• Features: Hover tooltips, responsive design

3. Daily Passenger Trends

"Can you show daily total of all predicted passengers in suitable chart?"

Solution:

• Chart: Line Chart with area fill
• Data: Daily aggregated passenger totals
• Features: Smooth curves, date formatting, trend visualization

4. Hourly Terminal Traffic Analysis

"How can we show the predicted passenger traffic for each terminal, hour by hour on 14 Jun 2025?"

Solution:

• Chart: Stacked Bar Chart (KLIA vs KLIA2)
• Data: Hourly breakdown by terminal
• Features: 24-hour timeline, terminal comparison, interactive legend

🛠 Technical Stack

• Frontend: Svelte 5 + SvelteKit
• Charts: Chart.js (direct implementation)
• Styling: Tailwind CSS
• Build: Vite + pnpm
• Language: TypeScript

🚀 Quick Start

# Install dependencies
pnpm install

# Start development server
pnpm run dev

# Open http://localhost:5173

📊 Dashboard Features

Three Main Sections:

1. 📈 Interactive Charts

• Top 5 Continents (Bar Chart)
• Daily Passenger Totals (Line Chart)
• Hourly Terminal Traffic (Stacked Bar Chart)
• Professional styling with hover tooltips
• Responsive design for all screen sizes

2. 📋 Raw Data Viewer

• Toggle-able CSV data display
• Clean table format (not JSON)
• First 20 rows with scroll indicators
• Professional styling with alternating row colors

3. 💻 SQL Queries & Results (NEW)

• 4 Complete SQL Queries with syntax highlighting
• Live Data Results showing query outputs
• Professional Presentation for interview discussions
• Query Types:
  • Flight Data JOIN with Predicted Passengers
  • Top 5 Continents Aggregation
  • Daily Totals Grouping
  • Hourly Terminal Traffic Analysis

Professional UI/UX

• Enterprise-grade design (Power BI/Tableau inspired)
• Card-based layout with subtle shadows
• Consistent color palette and typography
• Mobile-responsive grid system
• Loading states and error handling

📁 Project Structure

airport-v2/
├── src/
│   ├── lib/
│   │   └── Dashboard.svelte    # Main component (887 lines)
│   ├── routes/
│   │   └── +page.svelte       # App entry point
│   └── app.html               # HTML template
├── static/data/               # CSV datasets
│   ├── top5_continents.csv
│   ├── daily_totals.csv
│   ├── hourly_terminal.csv
│   ├── PredictedPax_Table.csv
│   └── FlightData_Table.csv
└── package.json

🔧 Key Implementation Details

Data Processing

• Parallel CSV fetching for optimal performance
• Custom CSV parser with proper type handling
• Date formatting for DD/MM/YYYY format
• SQL query simulation with real data

Chart Management

• Direct Chart.js implementation (Svelte 5 compatible)
• Proper lifecycle management (create/destroy)
• Memory leak prevention
• Responsive canvas rendering

Code Quality

• TypeScript with full type safety
• Comprehensive comments for interview discussion
• Error handling and validation
• Professional code organization

🎨 Design Philosophy

• Clean & Minimal: Professional enterprise aesthetic
• Data-First: Charts optimized for data interpretation
• Interview-Ready: Clear code structure for technical discussions
• Responsive: Works on desktop, tablet, and mobile

📈 SQL Query Examples

-- Top 5 Continents Query
SELECT 
    f.CONTINENT,
    SUM(p.PREDICTED_PAX) AS total_passengers
FROM flightdata f
JOIN PredictedPax p
  ON REPLACE(f.FLIGHTNO,' ','') = p.FLIGHT_NO
 AND DATE(f.FLIGHT_DATETIME) = p.FLIGHT_DATE
WHERE DATE(f.FLIGHT_DATETIME) = '2025-06-14'
GROUP BY f.CONTINENT
ORDER BY total_passengers DESC
LIMIT 5;

📞 Contact

Developer: Irman Wafi
Project: Technical Interview Demonstration
Focus: Data Visualization & Analytics