TravelAgent AI

Inspiration

As a frequent traveler frustrated by disjointed booking tools and generic itineraries, I wanted to build something that felt like a personal travel agent—powered by AI, but human-centric. Watching friends waste hours piecing together flights, hotels, and activities sparked the idea: why not automate it all with a seamless, conversational interface?

What it does

TravelAgent AI lets users input a destination, travel dates, and budget to generate a fully organized, bookable itinerary. It combines flight/hotel/car rental comparisons, day-by-day plans, and group coordination tools—all in one sleek, intuitive web app.

How we built it

I started with mobile-first design in Figma, mapping responsive layouts for every screen size. Using React and Next.js for the frontend, I integrated Tailwind CSS for rapid styling and Framer Motion for scroll-triggered animations (like staggered card fades and hover effects). I built the glassmorphism input forms and animated CTAs to match the premium travel aesthetic, then connected mock booking flows to simulate real-time trip generation.

Challenges we ran into

The biggest hurdle was balancing visual flair with performance—floating particle animations in the hero section initially slowed load times, so I optimized them with lazy loading and reduced motion support for accessibility. Responsive grid alignment for feature cards also took trial-and-error to work across 375px mobile to 1280px desktop.

Accomplishments that we're proud of

Creating a UX that feels both luxurious and functional—users often comment on how the frosted-glass nav, gradient accents, and smooth animations make planning feel effortless. The validation logic for the trip input form (ensuring all fields are filled before generation) also works flawlessly across devices.

What we learned

I deepened my understanding of accessibility (supporting prefers-reduced-motion), responsive animation design, and user trust signals (like the Trust Bar with traveler stats). Most importantly, I learned that even "AI-powered" tools need human-centric design to feel approachable.

What's next for this project

First, integrate real flight/hotel APIs to pull live pricing instead of static data. Then add voice input for conversational planning, and build out the group travel mode (voting/expense splitting) we’ve only teased so far. Finally, launch the Premium subscription tier with priority support and zero commission bookings—making TravelAgent AI a full-service solution for travelers worldwide.

Built With

• next.js
• react
• tailwindcss
• typescript