liildev

Work detail

Travel booking app

Hybrid mobile travel and accommodation booking app, shipped to the App Store and Google Play.

Travel and accommodation booking experience — hotel, hostel, and room discovery with map search, multi-language support, and offline-friendly browsing. Built as a hybrid mobile app at CoreTeam.

Role
Frontend Developer
Year
2024
Status
shipped
Links
App Store →Google Play →

01

Problem

Travelers needed a fast, map-driven way to discover and book accommodation — hotels, hostels, and rooms — from a single mobile app on both iOS and Android. The product was delivered as a hybrid app: one React codebase running inside a native shell, shipped to both stores.

02

What I built

  1. 1.Map-based accommodation discovery with the Google Maps JS API and Places autocomplete — search by location, browse results on the map, and sync map markers with the result list.
  2. 2.Virtualized result and listing views (TanStack Virtual / react-virtuoso) so long accommodation lists scroll smoothly inside the WebView.
  3. 3.Multi-language UI with i18next and Tolgee-managed translations, including locale switching and translation pulls wired into the build.
  4. 4.Offline-friendly browsing: TanStack Query with persisted cache (IndexedDB via idb-keyval) so recently viewed results and listings resume instantly without re-fetching.
  5. 5.Booking flows: date and room selection, image galleries and carousels (Embla, lightbox), and form input with masked phone fields.

03

Architecture

  1. 1.React SPA built with Vite, wrapped in a hybrid mobile shell (WebView) — a single codebase published to the App Store and Google Play.
  2. 2.TanStack Query owns server state with a persisted IndexedDB cache; React Router handles client-side navigation inside the shell.
  3. 3.Styling split across PandaCSS (codegen tokens) and styled-components, with Ant Design for complex form and data components.
  4. 4.Typed API access via openapi-fetch generated from the backend OpenAPI schema; heavy work offloaded to web workers through Comlink.
  5. 5.Grafana Faro for real-user monitoring — tracking errors and performance from real devices in production.

04

UX decisions

  1. 1.Dual map + list discovery: users scan results on the map or scroll the list, with the two views kept in sync so context is never lost.
  2. 2.Persisted cache makes returning to a previous search feel instant, which matters most on slower mobile connections.
  3. 3.Localized end to end so the app works across markets without rebuilds — content updates flow through Tolgee.
  4. 4.Image-forward listings with lazy loading and carousels to keep accommodation browsing visual without sacrificing scroll performance.

05

Challenges

  1. 1.WebView performance: optimized rendering and asset loading to make the hybrid shell feel native — roughly 30% faster through targeted WebView tuning.
  2. 2.Load speed: cut initial load time by about 25% via deployment and asset optimization.
  3. 3.Long lists inside a WebView caused scroll jank — solved with list virtualization so only visible rows render.

06

Outcome

Shipped to the App Store and Google Play at CoreTeam, serving accommodation search and booking on both platforms from one codebase.

Discuss a project→