Christine & Demi Yunnan Odyssey Project

README.md

@@ -1 +1,125 @@
-Add a readme for your dashboard here. Include content overview, data citations, and any relevant technical details.
+# Yunnan Odyssey
+
+**Yunnan Odyssey** is a concept travel-planning web experience for Yunnan, China, built to merge **“rational planning”** (climate, cost, filters, itinerary building) with **“emotional inspiration”** (a social, Instagram-like feed tied to specific places).
+
+The product is structured as a **3-step journey**: **Inspiration → Intelligence → Action**. 
+
+---
+
+## Why we built this
+
+When people make travel plans today:
+
+- Social platforms are great at *inspiration*, but “saved” places usually **can’t be directly turned into map collections and itineraries**.
+- Travel planning tools are good at *logistics*, but places often lack the **human, emotional decision signals** (what it feels like, what others posted, why it’s worth going).
+
+**Yunnan Odyssey combines both**:
+1) a planning dashboard with decision-friendly data, and  
+2) a location-based social feed (“Yunstagram”) where every post is attached to a POI, so when you click a place, you instantly see all posts about that place and can like/comment to interact. 
+
+---
+
+## Product walkthrough
+
+### Step 1 — Inspiration: *The Ancient Tea Horse Road* Storymap
+A narrative entry point that sets the tone for Yunnan travel using the **Tea Horse Road** as a storyline, and turns it into a “data journey” with map-driven chapters. 
+
+Implementation notes:
+- Uses Leaflet and a generated “fractal path” to evoke the Tea Horse Road route between key locations. 
+- Loads POIs from `poi_new2_updated_with_pics.geojson`. 
+- Ends with a CTA to enter the Dashboard. 
+
+---
+
+### Step 2 — Intelligence: Exploration Dashboard + “Yunstagram”
+This is the main exploration hub:
+- Left panel: **Month Highlight**, **Popularity Rank**, **Climate Info**. 
+- Center: interactive map with **category filters** and **search**. 
+- Right panel: **YUNSTAGRAM** feed. :contentReference
+- Button to jump into the itinerary planner.
+
+#### Seasonal highlighting (month-based)
+The dashboard includes a month slider and updates UI theme content (title/description/image), then re-renders the map to highlight seasonal “best” places.
+
+#### Climate information (“rational signals”)
+The climate card uses a chart that combines temperature + precipitation patterns (demo values in the current build). 
+
+#### Yunstagram (“emotional signals”)
+The social feed supports:
+- Viewing all posts, posts for a selected location, or “My Posts”. 
+- Creating posts that **must be tied to a location** (`locationId`, `locationName`) with optional image upload. 
+- Likes and comments interactions on posts. 
+
+---
+
+### Step 3 — Action: Interactive Itinerary Planner
+The planner turns exploration into a concrete itinerary:
+- Set **date range** and see total days. 
+- Track **Total Cost**, **Stops**, and set a **Budget** limit.
+- See an **Elevation Profile** chart for the itinerary.
+
+#### Wishlist-driven planning
+Only points in the user’s **wishlist** appear in the planner map:
+- Planner loads POIs + a user wishlist document, then “renders markers only for wishlist IDs”. :contentReference
+
+#### Add POIs into specific days
+Each POI popup shows elevation + cost and lets you choose a target day (Day 1, Day 2, …) then **Add** it. 
+
+#### Auto-generate daily routes
+Routes are generated per-day using **Mapbox Directions API (driving)**; if the API fails, it falls back to a dashed straight polyline. 
+
+---
+
+## Data notes ❕
+This project is a **prototype** and the dataset is **not fully real**:
+
+- POI coordinates + (original) Chinese names come from **OpenStreetMap** (OSM).
+- Other attributes were generated via rules + ChatGPT, and English names were produced via Google Sheets translation.
+- As a result, some distributions (e.g., elevation) may look unrealistic.
+
+The web app loads POIs from `poi_new2_updated_with_pics.geojson`.
+
+---
+
+## Tech stack
+- **Leaflet** for web mapping (storymap/dashboard/planner). 
+- **Chart.js** for climate/elevation charts. 
+- **SortableJS** for drag-and-drop (planner).   
+- **Firebase (Firestore)** for demo user wishlist + social posts.
+- **Mapbox Directions API** for routing. 
+
+---
+
+## Project structure (typical)
+> (Paths reflect how pages reference assets in code.)
+
+- `index.html` — Home (CN/EN toggle + accessibility mode) 
+- `storymap.html` + `js/storymap.js` — Tea Horse Road storymap 
+- `dashboard.html` + `js/dashboard.js` — Exploration dashboard 
+- `interactive.html` + `js/interactive.js` — Itinerary planner 
+- `poi_new2_updated_with_pics.geojson` — POI dataset 
+- `css/*` — styling referenced by each page (not included in this snippet set)
+
+---
+
+## How to run locally
+Because the project fetches local GeoJSON files, it must be served via a local web server (not opened as a raw file).
+
+Recommended:
+1. Open the folder in VS Code
+2. Use **Live Server**
+3. Start from `index.html`
+
+The planner also shows an explicit error if GeoJSON cannot be fetched and recommends Live Server. 
+
+---
+
+## Known limitations (prototype)
+- Climate values and several POI attributes are mock/generated (not authoritative).
+- Firebase and Mapbox keys/tokens are embedded for demo purposes; in a real deployment, move them to environment variables and restrict usage.
+
+---
+
+## Credits
+- Map data & base attribution include OpenStreetMap contributors (used in tile attribution). 
+- Routing: Mapbox Directions API.