The Buggy App: Offline-First Desert Safari Kiosk

The Buggy App is a sales kiosk for Drive The Thrill, a desert adventure operator in Dubai. Guides use it on tablets and phones at remote staging camps with no cellular reception to show visitors the fleet (Polaris, Can-Am and custom V6 dune buggies), play videos, spin vehicles in 360° and compare options. It is a responsive React and TypeScript web app that stores everything it needs on the device. I built the frontend.

Desert staging camps have no mobile signal, but guides still need to sell: show the vehicles, explain the differences and packages. A normal website cannot do that offline, and large photos and videos make offline storage hard. Vehicles, packages and media also change, so the data has to be updated easily when the device is back online.

• Offline catalogue

  the full fleet is stored in the browser's IndexedDB database, including seating capacity (1, 2, 4 and 6 seats), engine size from 200cc up to 3000cc V6, packages and related activities such as archery.

• Offline media

  action photos, interior shots and promo videos are saved on the device as binary data, so they play without waiting on a network.

• 360° viewer

  a touch-friendly spin viewer draws a sequence of pre-cached frames on an HTML5 canvas, with drag and momentum, so visitors can inspect suspension, roll cages and seating on models like the Can-Am Maverick Turbo RR and Polaris RZR XP Pro.

• Comparison

  pick several vehicles to compare seating, engine size, drive type (ATV quad or side-by-side buggy) and packages, with visual markers for the differences.

• Sync Data

  one tap pulls new vehicles, package details and media when the guide has Wi-Fi, fetching only records changed since the last sync.

• Field-ready design

  bold type and high contrast for bright sunlight, and instant filtering by seat count.

• All catalogue data and media live in IndexedDB, and screens read from it directly, so the app behaves the same with or without a connection. Filtering by seat count queries indexed fields in the local database.
• The 360° viewer decodes its frames ahead of time and draws them to a canvas, with no 3D library.
• The layout is tablet-first with CSS Grid and Flexbox.

• Sync is explicit and visible

  a Sync Data button with status indicators requests records changed after the last sync timestamp from the REST API and writes them to the local database.

• 1

  Storage limits

  HD video and long 360° frame sets can use up the browser's storage budget. Assets are downsampled and loaded on demand, so only the frames and media needed are stored while images stay sharp on high-density tablet screens.

• 2

  Smooth spinning

  frames are decoded ahead of time into image bitmaps, which keeps rotation responsive during drag gestures without decoding on the fly.

• 3

  Interrupted syncs

  updates are written to the local database in transactions, so if the hotspot drops midway the existing catalogue stays valid instead of ending up half-updated.

A live kiosk app that lets guides present the full fleet with video, 360° views and comparisons at remote camps, then bring vehicles and package details up to date with a single sync when back on Wi-Fi.