Time2Route is a route-planning web app (also installable as a PWA) for walking and cycling. It builds routes on Google Maps, shows elevation stats/charts, and finds interesting places near the route.
- Route planning — walking and cycling routes via Google Routes API
- Flexible start/destination input — autocomplete, current location, map pick
- POIs along route — up to 3 nearby-search circles, deduplication, and route-distance post-filter
- POI details — marker popups with actions and place photo loading
- Route stops — add/remove stops and automatic stop ordering
- Elevation — ascent/descent + compact chart
- PWA — installable app (
display: standalone) with auto-updating service worker
- Frontend: React 19, TypeScript
- Build tool: Vite 8 (
@vitejs/plugin-react) - PWA:
vite-plugin-pwa - Maps & Places: Google Maps JavaScript API + Places API (New)
- Fallback geolocation: Geoapify IP Geolocation API
- Charts: Chart.js +
react-chartjs-2 - Mobile sheet UI:
react-modal-sheet - Animation:
motion
Install dependencies:
npm installCreate .env in project root:
VITE_GOOGLE_MAPS_API_KEY=your_google_maps_key
VITE_GEOAPIFY_API_KEY=your_geoapify_keyRun locally:
npm run devProduction build + preview:
npm run build
npm run previewEnable these APIs for your Google key:
| Service | Purpose |
|---|---|
| Maps JavaScript API | map rendering, controls, markers |
| Routes API | route computation |
| Elevation API | elevation profile |
| Places API (New) | autocomplete, nearby search, place photos |
Optional but recommended for Advanced Markers:
- Create a Map ID
- Pass it as
VITE_GOOGLE_MAPS_MAP_ID
| Command | Description |
|---|---|
npm run dev |
Start dev server |
npm run build |
TypeScript check + production build |
npm run preview |
Preview dist |
npm run lint |
Run ESLint |
src/
├── App.tsx
├── api/
├── components/
├── hooks/
└── utils/