RoamAl-Travel-Planner

Al-powered travel planner web app with itinerary generation, budget breakdown, maps integration, and modern glassmorphism UI.

Comment

Inspiration-As a second year engineering student, I’ve always been fascinated by how AI can simplify real-life problems. While planning trips with friends, I realized that most travel apps only provide generic suggestions and complicated interfaces. I wanted to build something that feels like a personal AI travel companion instead of just another booking website.

That idea became RoamAI — an intelligent travel planner that generates personalized itineraries, budget breakdowns, travel tips, and interactive experiences using AI.

What it does-RoamAI helps users plan trips effortlessly by generating smart AI-powered travel itineraries based on:

  • Destination
  • Budget
  • Trip duration
  • User interests

The platform includes:

  • 🧠 AI-generated itineraries
  • 📅 Day-wise schedules
  • 💰 Budget analysis
  • 🗺️ Google Maps integration
  • 🎙️ Voice trip explanation
  • 💡 AI travel tips
  • 🧳 Packing suggestions
  • 🌙 Modern glassmorphism UI
  • 📱 Fully responsive design

Users can interact with activities directly and explore locations through Google Maps integration.

How we built it-Frontend

We built the frontend using:

  • React + Vite
  • Tailwind CSS
  • Framer Motion
  • Lucide React Icons

The UI was designed with a premium glassmorphism aesthetic inspired by modern travel platforms and Apple-style interfaces.

Backend

The backend was built using:

  • Node.js
  • Express.js
  • Gemini API

The Gemini API powers itinerary generation and AI-assisted travel recommendations.

🧠 AI Logic

The AI system dynamically generates plans using prompts based on: [ Trip = f(destination, budget, interests, duration) ]

The generated output is then structured into:

  • Day schedules
  • Budget estimates
  • Recommended attractions
  • Smart travel advice

Challenges we ran into-One of the biggest challenges was connecting the frontend and backend properly while handling real-time AI responses.

We also faced issues with:

  • Environment variable configuration
  • API integration
  • React component interactions
  • Modal and click functionality
  • UI responsiveness

Another challenge was balancing aesthetics and functionality while keeping the app smooth and interactive.

Accomplishments that we're proud of

What we learned-Through this project, we learned:

  • Full-stack web development
  • API integration
  • React state management
  • Modern UI/UX design
  • AI workflow integration
  • Real-world debugging and deployment concepts

Most importantly, we learned how powerful AI can become when combined with creativity and user-focused design.

What's next for RoamAl-Travel-Planner-RoamAI is more than a travel planner.

It is an attempt to create a smart AI companion that transforms the way people explore the world.

Built With

Share this project:

Updates