Natio Travels (prototype)
A clickable UX prototype for a travel companion-matching app: meet verified travelers of your own nationality abroad, one-on-one or through group meetups.
Running it
npm install
npm run dev
What's real
- The full React app: routing, screens, component structure, design system.
- All UI state and interactions: signup/signin branching, swipe matching, group requests/accept/kick, messaging (including photo/file attachments), notifications (likes, right-swipes, messages — with live pop-ups once a real backend is configured), group deletion by its owner, plan selection, trip-expiry lockout.
- ID verification: real camera access to capture a passport/ID photo (or upload one) during onboarding — no setup required.
- Optionally real, each independently switched on by adding its own keys to
.env.local (the app works with none of them set — see SETUP.md):
- Database & accounts — Supabase Postgres + Auth, replacing the mock in-memory store.
- Location — real browser geolocation + reverse geocoding, real distances between users.
- Billing — real Paddle checkout for Trip Pass / Frequent Traveler (sandbox mode).
- Error monitoring — real Sentry crash reporting for the frontend.
- Report alerts — an email to you the moment someone submits a report, via a Database
Webhook and Resend.
- Email verification — a real confirmation email sent via Resend after signup; soft (never
blocks access), shown as a banner until confirmed.
- Map tab — every discoverable traveler shown as pins on a real Mapbox map, using the same
fuzzed coordinates as Discover's distances.
- Live chat — an open conversation updates the instant the other person replies, via Supabase
Realtime, once a real backend is configured.
- Terms acceptance — signup requires checking a box agreeing to the Terms & Privacy Policy
before an account can be created.
- Abuse prevention — database-enforced rate limits on messages, swipes, reports, and post
comments (can't be bypassed by calling the API directly), always on regardless of the above.
- Without those keys, everything falls back to local mock data persisted to
localStorage (zustand persist), exactly like the original prototype.
What's still simulated
- ID document authenticity — the app captures a passport/ID photo but doesn't verify it's a genuine, unaltered, unexpired document, or that it belongs to the person signing up. That needs a KYC vendor (Persona, Onfido, Veriff) and a compliance review.
- Anything not configured in
.env.local — see SETUP.md for exactly what each phase needs and what's still simplified even once it's on (e.g. private-account enforcement is UI-level, not yet database RLS).
Demo accounts
Sign in with any of these emails and the password password123:
[email protected] — active subscription, on a 35-day trip with no lockout (subscriptions aren't capped)[email protected] — trip pass whose reported trip ended naturally, now locked[email protected] — still mid-trip by her own reported dates, but her trip pass caps out at 14 days from arrival regardless, so she's locked too — this is the "cancels after more than 2 weeks" rule in action
Trip Pass expiry logic
A Trip Pass is valid until min(reported departure date, arrival date + 14 days) — whichever comes first. This is implemented in src/lib/store.js as tripPassExpiry() / isTripLocked(). A subscription has no such cap.
