🌍 WanderAI: Your Personal Travel Architect

Turn hours of travel research into minutes. > WanderAI uses AI to generate personalized, safety-aware, and budget-conscious travel itineraries with a single click.

📖 The Inspiration

I love traveling and exploring new cultures, but I hated the planning process.

• The Problem: "Tab Fatigue"—having Google, TripAdvisor, Booking.com, and blogs open all at once.
• The Vision: I built WanderAI to streamline this. Enter your destination, budget, and dates, and get a cohesive plan instantly.

✨ Key Features

• 🤖 AI-Powered Generation: Leverages the Claude API to create day-by-day itineraries tailored to user interests.
• 🛡️ Safety First: Automatically provides scam alerts, emergency numbers, and local laws for every destination.
• 💰 Budget Intelligence: Offers "Cheap," "Moderate," and "Luxury" tiers with realistic local pricing.
• 💱 Currency Conversion: Auto-detects local currency (e.g., Ruble for Russia) and converts values to Malaysian Ringgit (MYR).
• 📸 Dynamic Visuals: Integrated Unsplash API to fetch real, high-quality images of destinations and food.
• 🗺️ Interactive Maps: React Leaflet integration for visualizing the journey.

⚙️ Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS (Glassmorphism UI)
• AI Engine: Claude API (Anthropic)
• Animations: Framer Motion
• Maps: React Leaflet (OpenStreetMap)
• Images: Unsplash API

🛠️ Engineering Challenges & Solutions

1. Currency Accuracy & Validation

Challenge: AI models frequently default to USD ($) even for countries with different currencies (e.g., Russia, Japan). Solution: Implemented a strict validation function and enhanced prompting to detect currency mismatches.

// Currency validation logic snippet
function validateCurrencyForDestination(
  tripData: Trip, 
  requestedDestinations: string[]
): { isValid: boolean; warning?: string } {
  // Logic to validate if AI used correct currency symbols
  // Detects mismatches (e.g., $ used instead of ₽)
}

Built With

• claude
• css
• next.js
• react
• tailwind
• typescript