Family TravelHub

A single-file web app for planning family trips: day-by-day itinerary with reservations (flights, hotels, attractions, transport), an interactive map of each day's stops, budget tracking, and optional shared storage via Supabase.

Run locally

Open index.html in a browser — no build step. Data is saved in localStorage. (For the map/geocoding features a local server is nicer: npx http-server and open http://localhost:8080.)

Features

• Trips — trip cards with destination, dates, and travelers (edit via the trip dialog). Finished trips fold away under Past trips; a trip that is not happening can be marked cancelled in its dialog and files there too (its budget stays in Budget). While you are on a trip, the hero shows a Today card: what is happening now, what comes next, where you sleep tonight, with confirmation numbers and Maps links, and a Full day button into today's timeline.
• Itinerary → Timeline — day-by-day stops. "Add to day" opens a modal supporting flight / hotel / attraction / transport / other, with dates, times, location, confirmation number, and a Position in the day picker for stops that should not simply sort by time. Edit/delete on each card, and Mark visited on the ⋯ sheet (dimmed with a tick; the stop number stays, because that is what ties a row to its map pin). Mid-trip the timeline opens on today rather than day one. Day sheet on any day header produces a self-contained page — stops, times, addresses, notes, confirmations, walking legs — to save, share or print. Generate it while you have signal; the saved copy is what works without.
• Itinerary → Maps — Leaflet + OpenStreetMap view with lettered pins per day (day chips 16 | 17 | … | All). Locations autocomplete via Photon (OpenStreetMap) and are geocoded on save. Import a place from Google Maps: paste a Maps link into the booking's name or Location field and the place name and pin fill in (bare lat, lng, decimal or DMS, works too). A share-sheet paste that includes a place name plus the link is fine. Short maps.app.goo.gl links are expanded by the app's own /api/expand (the one serverless function, api/expand.js; also served by tools/serve.js locally) — if that is unreachable the sheet asks you to paste the full URL. Every stop has an "open in Google Maps" link, which doubles as the fallback when the map library or coordinates are unavailable. Flights are not pinned on the map. The stop rows carry the booking's notes and confirmation alongside the address, and a locate button puts you on the map with an accuracy circle and the walking distance to your next unvisited stop. It only ever asks for a position when you press it.
• Bookings — every booking across trips, one collapsible group per trip (the trip you are on opens first), filter chips by type, notes on the card, and Add expense on a booking that has none yet — prefilled from the booking and linked to it, so the card then shows its payment status. Deleting a booking deletes its linked expense too (with Undo).
• Budget — funds, per-trip budgets, expenses (Hotel · Flight · Food · Groceries · Transport · Activities · Shopping · Gifts · Other), rollovers, JSON export/import. Shekels are the only accounting currency — every budget and total is in ₪. A trip can set a spending currency and a rough rate, and an expense records the amount in the currency it was actually paid in, showing an estimated ₪ figure (plus a card-fee %) beside it. When the statement arrives, Settle replaces that estimate with the real charge; the Unsettled filter chip is the worklist. An expense with no rate set still saves — it says "rate needed" and is left out of the totals, which disclose how many they left out rather than quietly under-counting. The overview leads with Funds vs committed — "₪X to spare" or "₪X short".
• Sharing (optional) — with Supabase configured, the Share button creates a link (?room=…&key=…). Anyone with the link sees and edits the same data, synced every ~20 s (last write wins).

Enable sharing (one-time Supabase setup)

1. Create a free project at supabase.com.
2. In the project's SQL Editor, paste and run supabase-schema.sql.
3. Put the Project URL and publishable (anon public) key from Project Settings → API into config.js (see config.example.js for the shape).
4. Reload the app — a Save button appears in the top bar.

config.js is committed in this repo on purpose: the hosted app on GitHub Pages needs it to enable Save/sharing, and the publishable key is safe to expose in client code. Trip data is protected by the per-trip secret embedded in each share link. Without config.js the app is fully local — no errors, no Save button.

Sharing: one person creates the room, everyone else Joins. These are different actions and only the first person does the first one:

• Create a room makes a new shared space from everything on that device and copies a link. Exactly one person, exactly once.
• Join a shared trip connects a device to an existing one — Menu → paste the link. Anyone who taps Share instead creates a second, separate room that will never sync with the first, so the app warns about this.

The link carries a room id and a secret; the app strips them from its own address bar once joined, so the secret isn't left on screen or leaked in outbound Referer headers. Use Copy share link when you need it again. You'll be asked who you are once per device, so changes are stamped with a name. The room you're in (Shared · 3644ee) is shown in the app bar on a wide screen and at the top of the ⋯ menu on a phone — two devices showing different codes are in different rooms, which is the first thing to check if syncing seems broken. The badge turns amber when a device hasn't synced for a week. Leave shared trip (the exit-arrow button, or the ⋯ menu on a phone) disconnects and keeps your trips on the device.

A device starts empty: there is no sample data, so a second family can install this and see only their own trips. ⋯ → Start fresh on this device empties a device again — it takes a backup first and refuses to go ahead if that backup can't be written, and Restore in the same menu brings it back. One device belongs to one room at a time; see design/MULTI-ROOM-PLAN.md for what switching between several would take.

How syncing behaves: your edits upload automatically, and incoming changes apply on their own within about 20 seconds while the tab is open (backgrounded tabs pause polling and catch up when you return). The exception is when you have unsaved edits of your own: then the app waits, shows a dot and a "tap Sync" toast, and merges both sides when you tap it — so two people editing different things at once both keep their work. If you both change the same field, the value that reached the server first wins. Large documents make every sync heavier, so keep attachments small.

Hosting — Vercel

The app is static, so there's no build step to speak of. Share links only work for others once the app is hosted somewhere they can reach.

One-time setup:

1. Import this repository at vercel.com/new. Framework preset: Other. vercel.json already sets the build command and output directory — leave the defaults alone.
2. In Settings → Environment Variables, add these for all environments (Production, Preview, Development):
   • VACATION_SUPABASE_URL — e.g. https://xxxx.supabase.co
   • VACATION_SUPABASE_ANON_KEY — the publishable key
3. Deploy. scripts/write-config.js writes config.js from those variables at build time; if they're missing it silently no-ops and the committed config.js is used instead.

.vercelignore keeps the design archive, handoff bundles, and the source CSV out of the public deployment. vercel.json also sets a Content-Security-Policy and Referrer-Policy: no-referrer — if you add a new external script, image host, or API, add it to the CSP or the browser will block it.

To deploy from the terminal instead:

npx vercel --prod