DisneyNav 🏰

A mobile-first web app that helps you navigate Disneyland Paris — just like Google Maps, but tailored to your family and the live crowds.

Features

• 🗺️ Dark map (CARTO dark tiles) centered on the park, with a pin per attraction.
• ⏱️ Live wait times via the ThemeParks.wiki API (free, CORS-enabled, no key required). Refreshes every 5 minutes.
• 👨‍👩‍👧 Family profile: age, height, sensitivity to dark/drops, stroller mode, max wait time. Stored in localStorage.
• 🧭 Route planning: greedy algorithm (walking distance + wait time) that accounts for family fit and closed attractions.
• 📍 Live location (optional) via navigator.geolocation with a blue "you are here" pin.
• 🏰🎬 Park/Studios switch (Disneyland Park ↔ Walt Disney Studios / Adventure World).

Tech stack

Layer	Choice
Build	Vite 5 + TypeScript 5 strict
UI	React 18 + Tailwind CSS 3
Map	Leaflet 1.9 + react-leaflet 4
Tiles	CARTO Dark Matter (OSM data)
Live data	ThemeParks.wiki v1 (/entity/{id}/live)
Storage	localStorage (family profile)

Getting started

npm install
npm run dev       # http://localhost:5173
npm run build     # production build in dist/
npm run preview   # preview of dist/
npm test          # vitest run
npm run sync:ids  # match live UUIDs against ThemeParks.wiki

Deploy to Vercel

The project is Vercel-ready (vercel.json is set up with framework=vite + SPA rewrites + cache headers). Two options:

One-click via the dashboard:

1. Go to https://vercel.com/new
2. "Import Git Repository" → pick sydneyvb-nl/Disneynav-
3. The framework is auto-detected as Vite — click Deploy
4. Done; every git push to main deploys automatically

CLI (if you have a Vercel account):

npm i -g vercel
vercel link        # link this project
vercel --prod      # deploy

No environment variables are required. The app talks directly to api.themeparks.wiki from the browser (CORS-enabled).

Project structure

src/
├─ App.tsx                    Root: park selection, state, routing
├─ main.tsx                   React entry
├─ styles.css                 Tailwind + Leaflet theming
├─ types.ts                   FamilyProfile, LiveWait, Scored
├─ components/
│  ├─ TopBar.tsx              Header with park switch + "I'm here"
│  ├─ MapView.tsx             Leaflet map with pins + route line
│  ├─ BottomSheet.tsx         Nearby / Route / All, crowd badges
│  └─ FamilySheet.tsx         Modal for family composition
├─ data/
│  └─ attractions.ts          ~25 curated attractions + coords + requirements
├─ hooks/
│  ├─ useLiveWaits.ts         Polling of /entity/dlp/live
│  └─ useGeolocation.ts       watchPosition wrapper
└─ lib/
   ├─ api.ts                  Mapping API → LiveWait
   ├─ geo.ts                  Haversine + walking time
   ├─ scoring.ts              Eligibility + greedy route planner
   └─ storage.ts              localStorage helpers

APIs — disclaimer

ThemeParks.wiki is a community API, not officially from Disney. Use it respectfully (no high refresh rates). For production, consider setting up your own cache/proxy. See ROADMAP.md for next steps and MODEL_HANDOFF.md for the technical status.

License

Licensed under the Apache License 2.0.