A modern Progressive Web App (PWA) for checking real-time bus arrival times (ETA) for Hong Kong bus services. Built with SvelteKit, this application provides a fast and user-friendly interface to browse routes, view stops, and check bus arrival times from multiple bus companies.

• 🚌 Multi-Company Support: Browse routes from CTB (Citybus), KMB, and NWFB
• 🔍 Route Search: Quickly find bus routes with real-time filtering
• 📍 Stop Information: View detailed stop information and real-time ETA
• ⏱️ Auto-Refresh: ETA data automatically refreshes every 10 seconds
• ⭐ Favorites: Save your frequently used stops for quick access
• 🔄 Direction Switching: Switch between inbound and outbound directions
• 📱 PWA Support: Install as a mobile app with offline capabilities
• ⚡ Performance Optimized: Virtual scrolling for smooth performance with large route lists
• 🎨 Modern UI: Clean, responsive design with Tailwind CSS

• Framework: SvelteKit with Svelte 5
• Language: TypeScript
• Styling: Tailwind CSS 4
• Data Fetching: TanStack Query (formerly React Query)
• Virtualization: TanStack Virtual
• HTTP Client: Axios
• Date Formatting: date-fns
• PWA: Workbox
• Deployment: Netlify (Edge Functions)

The application fetches real-time bus data from official Hong Kong government APIs:

• CTB/Citybus: https://rt.data.gov.hk/v2/transport/citybus
• KMB: https://data.etabus.gov.hk/v1/transport/kmb

• Node.js (v18 or higher)
• pnpm (recommended) or npm

1. Clone the repository:

git clone <repository-url>
cd bus-realtime-info

2. Install dependencies:

pnpm install

Start the development server:

pnpm run dev

The app will open automatically in your browser at http://localhost:5173.

Build the production version:

pnpm run build

Preview the production build:

pnpm run preview

Check TypeScript types:

pnpm run check

Lint code:

pnpm run lint

Format code:

pnpm run format

src/
├── app.html              # HTML template
├── routes/               # SvelteKit routes
│   ├── +page.svelte      # Home page (route list)
│   ├── favorites/        # Favorites page
│   └── [companyId]/      # Dynamic routes
│       └── route/
│           └── [route]/
│               ├── +page.svelte        # Route detail page
│               └── stop/
│                   └── [stopId]/
│                       └── +page.svelte # Stop detail page
├── lib/
│   ├── api/              # API clients
│   │   ├── ctb/          # Citybus API
│   │   ├── kmb/          # KMB API
│   │   └── common/       # Shared API types
│   ├── components/       # Reusable Svelte components
│   ├── stores/           # Svelte stores (favorites)
│   └── utils/            # Utility functions (ETA formatting)
└── service-worker.ts     # PWA service worker

• Browse all available routes from supported bus companies
• Search/filter routes by route number
• Virtual scrolling for optimal performance with large lists

• View all stops along a route
• See real-time ETA for each stop
• Switch between inbound and outbound directions

• Shows arrival time in minutes for buses arriving in more than 1 minute
• Displays "即將到達" (Arriving Soon) for buses arriving within 1 minute
• Automatically refreshes every 10 seconds
• Sorted by arrival time

• Save frequently used stops
• Access favorites from the dedicated favorites page
• Favorites are stored in browser local storage
• Filter favorites by route number

The project is configured for deployment on Netlify using the Netlify adapter with Edge Functions enabled.

Build configuration is defined in netlify.toml:

[build]
  command = "pnpm run build"
  publish = "build"

• Modern browsers with ES6+ support
• Mobile browsers (iOS Safari, Chrome Mobile)
• PWA installation supported on compatible browsers

This project is private.

This is a private project. Contributions are not currently accepted.

Built with ❤️ using SvelteKit