DEV Community

Denise Amsen
Denise Amsen

Posted on

Building an Offline-First PWA with 41 Driver-Ready Bilingual Cards for China Travelers

#ai #tutorial #openapi #webdev

Traveling to a country where you don't speak the language is intimidating. But traveling to China right now has a unique set of modern technical hurdles that catch almost every developer and traveler off guard:

  1. The Cashless Reality & 3% Fee Trap: You can't just swipe a foreign Visa/Mastercard at a street kiosk. You need Alipay or WeChat Pay. And transactions over 200 RMB (~$28 USD) incur a 3% platform fee.
  2. GPS Coordinate Shift (GCJ-02): Google Maps is heavily offset in mainland China by 200–500 meters due to topographic datum encryption, making walking navigation confusing.
  3. The Airport Arrival Drop: Landing at 1 AM after a 14-hour flight, roaming eSIMs often take 10 minutes to register. Showing an English map to a local taxi driver results in blank stares.

To solve this for myself, my family, and fellow travelers, I built Land in CN.

The Tech Stack & Design Decisions

Here is what went under the hood:

  • React 18 + TypeScript + Vite: Ultra-lean bundle size (< 180KB initial JS).
  • High-Contrast "Driver Focus" UI: When taking a taxi, the driver is sitting 1 meter away with reflections on the windshield. We designed a one-tap OLED Driver Mode with massive 64px simplified Chinese characters and phonetic Pinyin so drivers can read the destination at a single glance.
  • Offline-First PWA (Service Worker v3.0): We implemented Cache-First strategies for all critical emergency routes (taxis, hospitals, pharmacies, dietary restrictions) and pre-cached native audio files. Even in Airplane Mode with zero cellular signal, every single card, custom address replacement, and audio file works offline instantly.
  • Dynamic 2D Canvas Social Cards: Using pure HTML5 Canvas, users can generate 4:5 Feed cards or 9:16 Instagram Story/Wallpaper assets containing custom hotel addresses and dynamically encoded vector QR codes that link back to native Mandarin pronunciation.
  • Zero Backend Auth / Zero Friction: No user login, no email capture, and zero ads on the emergency cards.

Try it Out

The project is live at:
👉 https://landincn.com

Whether you're planning a trip for a conference, exploring Beijing/Shanghai on the 144-hour visa-free transit, or building offline-first web apps, I'd love to hear your feedback on the architecture and offline caching strategy!

Happy travels and happy coding! 🇨🇳

Top comments (0)