✈️ Lens & Lore — AI Travel Companion

Your AI-powered trip planner with real-time itinerary generation, interactive maps, photo analysis, and a cultural survival kit — all powered by Gemini 3 Flash.

🧭 What is Lens & Lore?

Lens & Lore is a hackathon MVP that turns trip planning into a conversation. Instead of browsing endless blog posts and review sites, just tell Polo (your AI travel buddy) where you want to go — and it builds a complete, map-pinned itinerary in seconds.

✨ Key Features

Feature	Description
🗺️ AI Trip Planner	Enter a destination, duration, and preferences. Gemini generates a full itinerary with real place names and GPS coordinates.
⚡ Quick Adventure	Uses your live geolocation + topic selection (Food, Nightlife, Shopping, Sightseeing, etc.) to generate a spontaneous 4-hour outing.
🗺️ Interactive Map	Google Maps integration with custom markers for each itinerary stop. Click a stop → zoom to it on the map.
💬 Polo Chat (Agentic AI)	Natural language itinerary editor across all tabs. Say "Swap the museum for a café" and Polo finds a real café nearby, updates coordinates, and modifies your plan. Persistent across page reloads.
📸 Lens Guide	Upload or capture a photo → Gemini Vision analyzes it: historical context, camera settings, framing advice, and a Stylistic Filter Vibe with live color overlay preview.
🛡️ Survival Kit	AI-generated cultural rules, tourist trap warnings, and a local phrasebook — all specific to your destination.
🎨 Neo-Brutalism Design	Minimal paper aesthetic with ink-black borders, hard drop shadows, and highlighter accent colors. No dark mode, no gradients — just clean, bold design.

🛠️ Tech Stack

Frontend: React 19, Vite 7, Tailwind CSS 3.4
AI: Google Gemini 3 Flash via @google/genai
Maps: Google Maps JavaScript API via @vis.gl/react-google-maps
State: Zustand with persist middleware (localStorage)
Icons: Lucide React
Routing: React Router v7

🚀 Getting Started

Prerequisites

Node.js 18+
A Google AI Studio API key (for Gemini)
A Google Cloud Console API key with the following APIs enabled:
- Maps JavaScript API
- Places API

Installation

# Clone the repo
git clone https://github.com/your-username/lens-and-lore.git
cd lens-and-lore

# Install dependencies
npm install

# Create your env file
cp .env.example .env

Environment Variables

Create a .env file in the root with:

VITE_GEMINI_API_KEY=your_gemini_api_key_here
VITE_GOOGLE_MAPS_KEY=your_google_maps_api_key_here

Run

npm run dev

Open http://localhost:5173 in your browser.

📁 Project Structure

src/
├── components/
│   ├── GoogleMap.jsx        # Google Maps with itinerary markers
│   ├── Header.jsx           # Navigation bar
│   ├── LensGuide.jsx        # Photo analysis with Gemini Vision
│   ├── MapEditor.jsx        # Map + timeline sidebar
│   ├── Polo.jsx             # Animated mascot SVG
│   ├── PoloChat.jsx         # Global AI chat (all tabs)
│   └── SurvivalKit.jsx      # Cultural tips & phrasebook
├── pages/
│   ├── Home.jsx             # Trip creation + Quick Adventure
│   └── TripWorkspace.jsx    # Trip view with tabs
├── services/
│   └── gemini.js            # All Gemini API calls
├── store/
│   └── tripStore.js         # Zustand store (persisted)
├── App.jsx                  # Router setup
├── index.css                # Tailwind + custom styles
└── main.jsx                 # Entry point

🤖 Gemini Integration

All AI features use the gemini-3-flash-preview model:

Function	Purpose
`generateItinerary()`	Creates multi-stop itineraries with GPS coordinates
`editItinerary()`	Agentic natural-language itinerary edits
`analyzePhoto()`	Vision analysis: history, camera settings, filter vibe
`generateSurvivalKit()`	Cultural rules, tourist traps, phrasebook
`generateQuickAdventure()`	Location + topic-based spontaneous trips

🎨 Design System

Neo-Brutalism Lite — inspired by Minimal Paper aesthetics:

Background: Off-white Paper #FDFBF7
Borders: Ink-black #1A1A1A, border-2
Shadows: Hard drop shadow-[4px_4px_0px_#1A1A1A]
Accents: Highlighter Yellow #FFD700, Pastel Orange #FF9B71, Mint Green #98D8AA
Mascot: Polo — animated paper airplane SVG

📱 Responsive Design

Desktop: Side-by-side map + timeline, full feature layout
Mobile: Full-screen map with slide-out timeline panel, compact header, collapsible chat