Digital Tour Guide System

A kiosk-style desktop application built for a solar-powered campus e-vehicle. It turns a shuttle ride into a guided tour by tracking the vehicle's GPS position, detecting nearby campus landmarks, and automatically presenting narrated multimedia content to passengers.

The system was designed around a dual-screen vehicle setup: a 7-inch driver touchscreen for controls and navigation, and a 22-inch passenger display for live maps, landmark slides, and audio narration.

Campus visitors often need context while moving between facilities, but a human guide is not always available. The project needed to deliver a reliable, hands-free experience that reacts to the vehicle's real-world location and presents the right content at the right landmark.

It also had to give drivers simple controls without distracting them, drive a separate immersive passenger display, and fit into a solar-powered e-vehicle prototype with battery and solar monitoring considerations.

I developed a desktop application using Electron, React, Vite, and Tailwind CSS. The app receives GPS data from a serial-connected receiver, evaluates it against polygon-based geofences, and triggers synchronized content whenever the vehicle enters a campus point of interest:

• GPS-driven geofencing over GeoJSON polygon boundaries
• Automated landmark storytelling with images, text, and narration
• Dual-screen driver kiosk and fullscreen passenger window
• Live MapLibre map with mode-specific vehicle markers
• Eco Mode and Tour Mode, synchronized across windows over IPC
• Locally packaged narration audio and landmark imagery
• Battery, solar power, and charging metrics for ESP32 sensor hardware

Eco Mode keeps the passenger display inactive; Tour Mode launches the second fullscreen window and enables location-triggered narration and slideshows.

The architecture separates hardware and window orchestration from the interface layer. The Electron main process owns the hardware: it reads NMEA sentences from a USB GPS receiver via `serialport`, tests each fix against GeoJSON polygons with Turf's `booleanPointInPolygon`, and manages the lifecycle of both display windows.

A secure preload bridge exposes narrowly scoped IPC listeners to React rather than enabling Node.js in the renderer. React Context centralizes the active vehicle mode, and reusable hooks manage GPS updates, geofence state, narration playback, and sensor metrics.

Landmarks live in GeoJSON rather than in code, so a new route or attraction is a data change, not a rewrite of the geofence engine.

The result is a practical proof of concept for an intelligent campus shuttle: passengers receive contextual, location-aware tours automatically, while drivers retain a focused operational interface.

The modular architecture also makes the system adaptable for other campuses, tourism vehicles, museum shuttles, or smart transportation projects.