Traveler is a clean, globe-first travel atlas built with React, TypeScript, Vite, and React Three Fiber. The app centers the experience on an interactive stylized globe, then opens a focused place sheet with photos, highlights, tags, saved state, visited state, and personal notes.
- Interactive 3D globe with orbit controls and clickable place markers.
- Region dropdown and search in the top bar.
- Place popup with online images, travel highlights, tags, notes, star, and visited actions.
- Saved places panel with starred places, visited list, and note rollup.
- Browser persistence through
localStorage. - Runtime Wikimedia Commons image lookup for place photos, backed by in-memory and
localStoragecaching. - Background image prefetching for faster place-sheet transitions.
- Clean textureless globe style generated from Natural Earth country geometry via
world-atlas.
- React 19
- TypeScript
- Vite
- three.js
@react-three/fiber@react-three/dreid3-geotopojson-clientworld-atlaslucide-react
npm install
npm run devOpen the local URL printed by Vite, usually:
http://127.0.0.1:5173/npm run lint
npm run buildThe current build may warn about a large JavaScript chunk because three.js and the WebGL renderer are shipped in the client bundle. That warning is expected for this prototype.
Places are currently defined in src/App.tsx as structured objects with:
- name, country, region
- latitude and longitude
- short travel tone and summary
- special highlights
- best-for tags
- marker color
- image search query
Saved places, visited places, and notes are stored locally in the browser under traveler:* keys.
Place photos are not stored as local assets. The app queries Wikimedia Commons through the public MediaWiki API and uses returned image URLs for the three-photo grid. Results are cached in memory and in localStorage under traveler:image-cache:v2, and the app prefetches place images in the background after startup.
If Commons has no usable result or a remote image fails, the app falls back to generated SVG art so the sheet never renders broken image chrome.
The globe does not use a photographic Earth texture. It creates a high-resolution canvas texture at runtime from world-atlas country geometry, with flat ocean, clean continent fills, subtle country edges, and a light graticule. This keeps the globe quiet and graphic while preserving real land and island shapes.