Travana - Visualize. Personalize. Go

🌟 Inspiration Planning trips should be exciting, not overwhelming. But juggling tabs, maps, hotel listings, and schedules makes it stressful and time-consuming. We wanted to solve this problem with a single, smart, and stunning solution, that’s how Travana was born.

🚀 What it does Travana is an AI-powered travel web app that takes a natural language trip description and transforms it into a complete travel plan. It:

Generates a personalized itinerary
Visualizes the journey on an interactive 3D map
Suggests accommodations like hotels and Airbnb's All in one place; no spreadsheets, no confusion.

🛠️ How we built it We built Travana using:

Next.js 14 & React 18 for the frontend framework
TypeScript for scalable, maintainable code
Tailwind CSS and Framer Motion for clean design and smooth animations
Mapbox GL JS for immersive 3D map visualizations
Gemini AI to generate custom itineraries from user prompts
Vercel for fast, seamless deployment

⚠️ Challenges we ran into

Rendering 3D map data dynamically based on AI-generated locations
Ensuring UX stayed smooth and intuitive despite real-time updates
Integrating AI outputs into modular components for itinerary and map

🏅 Accomplishments that we're proud of

Built a fully functional AI travel planner with 3D mapping in just 36 hours
Created a smooth, polished UX that feels production-ready
Bridged AI generation with real-time geospatial rendering

📚 What we learned

How to integrate multiple advanced technologies (Mapbox, AI, and React) into one cohesive experience
The importance of modular architecture in hackathon-scale apps
How to prioritize user experience under tight development timelines

🔮 What's next for Travana – Visualize. Personalize. Go.