HKMTRVUE - MTR & LRT Schedule & Real-time Arrivals

Use Google Maps for navigation → Use HKMTRVUE for train schedules & real-time arrivals → Complete your Hong Kong journey!

🚇 The Google Maps Companion - While Google Maps gets you to MTR and LRT stations, HKMTRVUE provides schedules and real-time arrival times in a traditional timetable view design. A specialized frontend web app with official DATA.GOV.HK data updated every 10 seconds - no GPS or location services required.

🗺️ How to Use with Google Maps

Step 1: Navigate with Google Maps

Use Google Maps to find directions to any MTR or Light Rail station
Get walking/driving routes to station entrances
See estimated travel time to reach the station

Step 2: Check Real-time Arrivals with HKMTRVUE

Open HKMTRVUE web app on your phone
Select your destination station (no GPS location required)
See live schedules & arrival times in traditional timetable view updated every 10 seconds
Check which platform and direction to take

Step 3: Complete Your Journey

Board the train with confidence knowing exact arrival times
Use Google Maps again for final walking directions from destination station
Bookmark frequently used stations for faster access

🌟 Why This Combination Works Perfectly for Hong Kong

For Daily Commuters

Google Maps Navigation: Get the fastest route to your nearest MTR/LRT station
Real-time Train Data: Check exact arrival times so you don't rush unnecessarily
Platform Information: Know which platform and direction before you arrive
Transfer Planning: See connections and timing for multi-line journeys

For Tourists & Visitors

Familiar Interface: Use Google Maps (which you already know) for navigation
No App Downloads: HKMTRVUE works in any web browser - frontend web app only
No Location Required: Manual station selection - no GPS or location services needed
Traditional Timetable View: Easy-to-read scheduled timetables and real-time arrival information
Complete Journey Planning: From hotel to attraction using both apps together
Language Support: English and Traditional Chinese in both Google Maps and HKMTRVUE

For All Hong Kong Transit Users

Perfect Timing: Arrive at station just as your train is coming
Avoid Crowds: Choose less crowded trains by seeing multiple arrival times
Weather Protection: Minimize waiting time on outdoor platforms (especially LRT)
Data Efficiency: Only use data when you need real-time information

🗺️ Google Maps + HKMTRVUE: The Perfect Transit Solution

Why Use Both Apps Together?

Google Maps Strengths:

🚶‍♂️ Walking/driving directions to stations
🗺️ Overview of entire Hong Kong transit network
📍 Station locations and nearby landmarks
🏢 Integration with restaurants, hotels, attractions

HKMTRVUE Strengths:

🚇 Real-time train schedules & arrival times in traditional timetable view (updated every 10 seconds)
🚉 Platform and direction information
⏱️ Exact waiting times and train frequencies
📱 Lightweight frontend web app - no installation or GPS required

Combined Workflow Examples

Tourist Journey: Airport to Tsim Sha Tsui

Step 1: Use Google Maps
🗺️ Search "Hong Kong Airport to Tsim Sha Tsui"
🚶‍♂️ Follow walking directions to Airport Express platform

Step 2: Use HKMTRVUE  
🚇 Check Airport Express real-time arrivals
⏱️ See next train in 8 minutes, then 18 minutes
🚉 Confirm Platform 1 for Hong Kong/Kowloon direction

Step 3: During Journey
📱 Use HKMTRVUE to check Kowloon Station arrival time
🔄 Plan transfer to Tsuen Wan Line

Step 4: Final Destination
🗺️ Use Google Maps for walking directions from Tsim Sha Tsui Station to hotel

Daily Commute: Sha Tin to Central

Step 1: Check Schedule
📱 Open HKMTRVUE → Select Sha Tin Station (East Rail Line)
⏰ Next train: 3 minutes, then 6 minutes, then 9 minutes

Step 2: Navigate to Station  
🗺️ Google Maps → "Directions to Sha Tin MTR Station"
🚶‍♂️ 5-minute walk → Perfect timing to catch the 6-minute train

Step 3: Monitor Journey
📱 HKMTRVUE → Check real-time arrival at Admiralty for transfer
🔄 Transfer to Island Line for Central

Light Rail Journey: Tuen Mun to Yuen Long

Step 1: Route Planning
🗺️ Google Maps → Overview of LRT network and stations
📍 Find nearest LRT stop to your current location

Step 2: Real-time Information
📱 HKMTRVUE → Select LRT station (e.g., Tuen Mun Town Centre)  
🚊 Route 610: 4 minutes | Route 615: 7 minutes | Route 614: 12 minutes
✅ Choose Route 610 for fastest journey

Step 3: Destination Navigation
🗺️ Google Maps → Walking directions from Yuen Long LRT station

✨ Key Features

✨ HKMTRVUE Features

🚇 Real-time MTR & LRT schedules & arrival times in traditional timetable view for all Hong Kong lines (updated every 10 seconds)
🕐 Live train schedules showing next 3-4 arrivals with exact timing
🚉 Platform and direction information so you know exactly where to go
📱 Mobile-optimized frontend web app - no installation, GPS, or location services required, works in any browser
⚡ 10-second refresh rate - fastest real-time data in Hong Kong
🌐 Bilingual support (English/Traditional Chinese) for all users
💾 Bookmark favorite stations for quick access to frequently used routes
🌙 Dark mode support for comfortable viewing day and night
📳 Haptic feedback for enhanced mobile experience
🔄 Auto-refresh technology with smart caching to save your data

🚀 Technical Excellence & Hong Kong-Specific Optimizations

Data Sources & Reliability

Official Government APIs: Direct integration with DATA.GOV.HK transport endpoints
MTR Corporation Data: Real-time train schedules from MTR's official systems
10-Second Refresh Cycle: Perfectly tuned for Hong Kong's high-frequency train service
Resilient Error Handling: Exponential backoff and retry mechanisms for Hong Kong's mobile network conditions

Hong Kong Transit System Coverage

MTR Lines Supported:

🔵 Island Line (港島綫): Chai Wan ↔ Kennedy Town
🔴 Tsuen Wan Line (荃灣綫): Tsuen Wan ↔ Central
🟢 Kwun Tong Line (觀塘綫): Tiu Keng Leng ↔ Whampoa
🟣 Tseung Kwan O Line (將軍澳綫): Po Lam/LOHAS Park ↔ North Point
🟤 Tuen Ma Line (屯馬綫): Tuen Mun ↔ Wu Kai Sha
🔵 East Rail Line (東鐵綫): Lo Wu/Lok Ma Chau ↔ Admiralty
🟡 South Island Line (南港島綫): South Horizons ↔ Admiralty
🟢 Airport Express (機場快綫): AsiaWorld Expo ↔ Hong Kong
🟠 Tung Chung Line (東涌綫): Tung Chung ↔ Hong Kong

Light Rail Transit (LRT) Coverage:

🔴 Complete LRT Network in Tuen Mun and Yuen Long districts
68 LRT Stations across New Territories West
12 LRT Route Numbers (505, 507, 610, 614, 614P, 615, 615P, 705, 706, 751, 751P, 761P)

Integration with Hong Kong's Digital Ecosystem

Google Maps Connectivity

// Seamless integration flow:
1. 🗺️ Google Maps → Find directions to nearest MTR/LRT stations  
2. 🚇 HKMTRVUE App → Manual station selection (no GPS required) for real-time timetable view
3. ⏰ Traditional Timetable Design → Clear scheduled times and live arrival information
4. 🕐 Smart Timing → Combine walking time + wait time + travel time
5. 📱 Browser-based → Direct handoff between Google Maps and HKMTRVUE web app

Why This Matters for Hong Kong Users

Density-Optimized: Hong Kong has the world's highest concentration of MTR stations - this app helps navigate the complexity
Transfer Intelligence: Multi-line journeys are common in HK - smart transfer suggestions save time
Rush Hour Optimization: Real-time data crucial during Hong Kong's intense peak hours (7-9 AM, 6-8 PM)
Tourist-Friendly: Essential for visitors navigating Hong Kong's extensive transit network
Weather-Aware Planning: Indoor connections mapped for Hong Kong's rainy season and summer heat

Real-World Use Cases in Hong Kong

Scenario 1: Daily Commuter (Sha Tin → Central)

Morning Routine with HKMTRVUE:
1. Check app at home → See East Rail delays/normal service
2. Google Maps integration → Walking route to Sha Tin Station  
3. Real-time platform info → Platform 1 or 2 for southbound trains
4. Transfer optimization → Best route via Admiralty or direct to Central
5. Arrival prediction → Exact ETA at Central for meeting planning

Scenario 2: Tourist Journey (Airport → Tsim Sha Tsui)

Visitor Experience:
1. Land at Hong Kong Airport → Open HKMTRVUE web app (no download needed)
2. Airport Express timing → Real-time departures every 10-15 minutes
3. Kowloon Station arrival → Transfer guidance to Tsuen Wan Line
4. Google Maps handoff → Walking directions in Tsim Sha Tsui
5. Return journey planning → Bookmark favorite stations for later

Scenario 3: Light Rail User (Tuen Mun → Yuen Long)

New Territories Navigation:
1. Complex LRT network → 12 different route numbers, multiple platforms
2. Real-time platform display → Which route arrives first
3. Transfer optimization → Direct route vs. faster connection
4. Google Maps integration → Last-mile connection to final destination
5. Service disruption alerts → Alternative routing during maintenance

🔄 Technical Architecture & Performance

Real-Time Data Pipeline

// Optimized for Hong Kong's mobile network conditions
const CACHE_DURATION = 10000 // 10 seconds - matches MTR frequency
const MAX_RETRIES = 3        // Handles network congestion
const API_ENDPOINTS = {
  MTR: 'https://rt.data.gov.hk/v1/transport/mtr/getSchedule.php',
  LRT: 'https://rt.data.gov.hk/v1/transport/mtr/lrt/getSchedule'
}

Hong Kong-Specific Optimizations

Network Resilience: Handles Hong Kong's underground mobile coverage gaps
Bilingual Data Processing: Seamless Chinese/English station name handling
Local Time Accuracy: Hong Kong timezone (UTC+8) precision for arrival predictions
Mobile Data Efficiency: Minimized API calls for Hong Kong's expensive mobile data plans

Project Structure

src/
├── App.vue                          # Main app component with routing logic
├── main.ts                          # Vue app entry point
├── pages/                           # Page components
│   ├── MtrTrain/
│   │   └── MtrTrain.vue            # Main MTR train page with real-time data
│   ├── LightRail/
│   │   └── LightRail.vue           # Light Rail transit page
│   ├── Home/
│   │   └── Home.vue                # Home page component
│   └── BusEta/
│       └── BusEta.vue              # Bus ETA page (placeholder)
├── components/                      # Reusable UI components
│   ├── settings/
│   │   ├── PersonalizeDialog.vue   # Settings modal dialog
│   │   └── OptionsList.vue         # Simplified settings buttons
│   ├── icons/                      # SVG icon components
│   │   ├── BackspaceIcon.vue
│   │   ├── ClearIcon.vue
│   │   └── CloseIcon.vue
│   ├── route-board/                # Route selection components
│   │   ├── BoardTabbar.vue         # Tab navigation
│   │   ├── RouteInputPad.vue       # Route input interface
│   │   └── SwipeableRoutesBoard.vue # Swipeable route board
│   └── route-eta/                  # ETA display components
│       ├── RouteHeader.vue         # Route information header
│       ├── StopAccordionList.vue   # Expandable stop list
│       └── TimeTableButton.vue     # Timetable access button
├── composables/                     # Vue 3 composable functions
│   ├── useMtrData.ts               # MTR API data fetching logic
│   ├── useFavoriteStations.ts      # Bookmark management
│   ├── useTheme.ts                 # Dark/light theme handling
│   └── useNetworkStatus.ts         # Network connectivity monitoring
├── constants/
│   └── mtrLines.ts                 # MTR line configurations and station data
├── types/
│   └── train.ts                    # TypeScript interfaces for train data
└── utils/
    ├── index.ts                    # Utility functions (distance, formatting)
    └── tests/
        └── searchRouteHelpers.ts   # Helper functions for route search

Key Dependencies and Data Flow

Data Fetching (`useMtrData.ts`)

Used by: MtrTrain.vue, LightRail.vue
Purpose: Fetches real-time train arrival data from DATA.GOV.HK APIs
Features: 10-second caching, retry logic, error handling
APIs:
- MTR: https://rt.data.gov.hk/v1/transport/mtr/getSchedule.php
- LRT: https://rt.data.gov.hk/v1/transport/mtr/lrt/getSchedule

Theme Management (`useTheme.ts`)

Used by: App.vue (global), all components inherit
Purpose: Manages dark/light mode, font sizes, color schemes
Features: System preference detection, localStorage persistence
CSS Variables: Dynamically sets CSS custom properties for theming

Favorite Stations (`useFavoriteStations.ts`)

Used by: Station selection components, route displays
Purpose: Manages user's bookmarked stations
Storage: localStorage with JSON serialization

Network Status (`useNetworkStatus.ts`)

Used by: Data fetching components for connection monitoring
Purpose: Monitors online/offline status and connection quality
Features: Connection type detection (2G, 3G, 4G, etc.)

Station Configuration (`mtrLines.ts`)

Used by: All MTR-related components
Purpose: Central configuration for all MTR lines and stations
Data: Line colors, station names (Chinese/English), terminus information

Type Definitions (`train.ts`)

Used by: All components handling train data
Purpose: TypeScript interfaces for type safety
Interfaces: TrainArrival, StationData, LineConfig, etc.

Development Notes

Clean Architecture: Removed all legacy React components and unnecessary files
Mobile-First Design: Container max-width of 480px, centered layout like HKBUS.APP
Simplified Settings: Converted complex React settings to simple button-based interface
TypeScript Support: Full type safety with proper interfaces and type definitions

Installation

Clone the repository:

git clone https://github.com/HugoLi0213/HKMTRVUE.git
cd HKMTRVUE

Install dependencies:

npm install

Start development server:

npm run dev

Build for production:

npm run build

API Data Source

This app uses real-time data from:

DATA.GOV.HK - Hong Kong Government's open data platform
MTR real-time arrival API endpoints

Mobile UI Design

The app features a mobile-centered design similar to HKBUS.APP:

Maximum container width of 480px
Centered layout on larger screens
Touch-friendly button sizes
Smooth animations and transitions
Card-based design with subtle shadows

Settings Features

🔄 App Updates: Force refresh service worker
🛠️ Database Updates: Renew route database
🌙 Dark Mode: Switch between light/dark themes
📳 Vibration: Enable/disable haptic feedback
📋 Bookmark Management: Save and organize favorite stations
🎨 Traditional Timetable View: Classic scheduled timetable design for easy reading

Contributing

Fork the repository
Create a feature branch
Commit your changes
Push to the branch
Create a Pull Request

Author

Hugo
📧 Email: s12332146@gmail.com
🐙 GitHub: HugoLi0213

License

This project is open source and available under the Apache License Version 2.0

Acknowledgments

Hong Kong MTR Corporation for providing public transportation,also data display like:https://www.mtr.com.hk/ch/customer/services/timetable_detail_weekday.html for UI 's reference
DATA.GOV.HK for open data APIs
HKBUS.APP for design inspiration
https://github.com/sammyfung/mtrtrain for code & design 's reference,API reference,data reuse.

Name		Name	Last commit message	Last commit date
Latest commit History 40 Commits
.vercel		.vercel
node_modules		node_modules
public		public
src		src
.gitignore		.gitignore
.npmrc		.npmrc
.nvmrc		.nvmrc
DEPLOYMENT_CHECKLIST.md		DEPLOYMENT_CHECKLIST.md
IMPLEMENTATION_REPORT.md		IMPLEMENTATION_REPORT.md
LICENSE		LICENSE
NOTICE		NOTICE
README.md		README.md
SEO_ASSETS_GUIDE.md		SEO_ASSETS_GUIDE.md
SEO_STRATEGY.md		SEO_STRATEGY.md
deploy-test.sh		deploy-test.sh
deploy.cmd		deploy.cmd
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
platform-destinations-demo.html		platform-destinations-demo.html
run-all-tests.cmd		run-all-tests.cmd
simple-test.js		simple-test.js
test-platform-destinations.js		test-platform-destinations.js
test-theme.js		test-theme.js
test-time-format.js		test-time-format.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
validate-implementation.cmd		validate-implementation.cmd
validation-test.html		validation-test.html
vercel.json		vercel.json
vite.config.ts		vite.config.ts

License

HugoLi0213/hkmtrvue

Folders and files

Latest commit

History

Repository files navigation

HKMTRVUE - MTR & LRT Schedule & Real-time Arrivals

🗺️ How to Use with Google Maps

Step 1: Navigate with Google Maps

Step 2: Check Real-time Arrivals with HKMTRVUE

Step 3: Complete Your Journey

🌟 Why This Combination Works Perfectly for Hong Kong

For Daily Commuters

For Tourists & Visitors

For All Hong Kong Transit Users

🗺️ Google Maps + HKMTRVUE: The Perfect Transit Solution

Why Use Both Apps Together?

Combined Workflow Examples

Combined Workflow Examples

Tourist Journey: Airport to Tsim Sha Tsui

Daily Commute: Sha Tin to Central

Light Rail Journey: Tuen Mun to Yuen Long

✨ Key Features

✨ HKMTRVUE Features

🚀 Technical Excellence & Hong Kong-Specific Optimizations

Data Sources & Reliability

Hong Kong Transit System Coverage

MTR Lines Supported:

Light Rail Transit (LRT) Coverage:

Integration with Hong Kong's Digital Ecosystem

Google Maps Connectivity

Why This Matters for Hong Kong Users

Real-World Use Cases in Hong Kong

🔄 Technical Architecture & Performance

Real-Time Data Pipeline

Hong Kong-Specific Optimizations

Project Structure

Key Dependencies and Data Flow

Data Fetching (useMtrData.ts)

Theme Management (useTheme.ts)

Favorite Stations (useFavoriteStations.ts)

Network Status (useNetworkStatus.ts)

Station Configuration (mtrLines.ts)

Type Definitions (train.ts)

Development Notes

Installation

API Data Source

Mobile UI Design

Settings Features

Contributing

Author

License

Acknowledgments

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Data Fetching (`useMtrData.ts`)

Theme Management (`useTheme.ts`)

Favorite Stations (`useFavoriteStations.ts`)

Network Status (`useNetworkStatus.ts`)

Station Configuration (`mtrLines.ts`)

Type Definitions (`train.ts`)

Packages