Archived: This repository is a historical academic artifact and is no longer actively maintained. It is public solely for reference purposes and is published without an open-source license. Public availability should not be interpreted as permission to use, modify, or redistribute the material.

Bus Web Frontend

A React-based web application for tracking bus locations in real-time using the PisAPI service.

Features

• Real-time Bus Tracking: View live bus locations on an interactive map
• Bus Arrival Predictions: Click on bus stops to see real-time arrival predictions
• Route Selection: Choose specific bus routes and directions
• Interactive Map: Leaflet-based map with custom bus and stop markers
• Countdown Timers: Live countdown showing time until next buses arrive
• Responsive Design: Works on desktop and mobile devices
• Auto-refresh: Automatically updates bus locations every 30 seconds and predictions every 15 seconds

Technology Stack

• React 18 with TypeScript
• Vite for fast development and building
• Leaflet.js with React-Leaflet for mapping
• Zustand for lightweight state management
• Axios for HTTP requests
• CSS Modules for styling

Project Structure

src/
├── components/
│   ├── common/          # Reusable components (Header, Loading)
│   ├── forms/           # Form components (RouteSelector)
│   ├── map/             # Map-related components (MapView, BusMarker, StopMarker)
│   └── predictions/     # Bus arrival prediction components
├── pages/               # Page components
│   └── BusTracking/     # Main bus tracking page
├── services/            # API services and type definitions
├── hooks/               # Custom React hooks
├── stores/              # Zustand state management
└── utils/               # Utility functions and constants

Setup and Installation

1. Install dependencies:

   npm install

2. Configure environment: Copy .env and adjust settings as needed:

3. Start development server:

   npm run dev

4. Build for production:

   npm run build

Configuration

Configuration is loaded from environment variables.

Variable	Default	Purpose
VITE_PISAPI_URL	empty	PisAPI base URL. When empty, the frontend uses the current hostname on port 8003.
VITE_DEFAULT_LAT	-15.8267	Default map center latitude.
VITE_DEFAULT_LNG	-47.9218	Default map center longitude.
VITE_DEFAULT_ZOOM	11	Default map zoom level.
VITE_POLLING_INTERVAL	30000	API polling interval in milliseconds.
VITE_PREDICTIONS_POLLING_INTERVAL	15000	Prediction polling interval in milliseconds.
VITE_LOCATIONS_POLLING_INTERVAL	15000	Bus location polling interval in milliseconds.
VITE_MAX_PREDICTIONS_PER_STOP	3	Number of predictions displayed for a selected stop.
VITE_AUTO_ZOOM_ON_LOCATION_UPDATE	false	Whether the map automatically zooms when bus locations update.
VITE_MAP_HEIGHT_VH	70	Map height as a percentage of the viewport height.
PISAPI_URL	http://localhost:8003	PisAPI base URL used by the API test scripts.