VibeVoyager — Project Story

Inspiration

Travel is deeply personal and emotional, yet most itinerary apps provide generic, one-size-fits-all recommendations. We were inspired to build VibeVoyager to bridge the gap between mood and travel experience — transforming how people discover trips by letting their emotions shape the journey. The idea came from wanting to give travelers not just destinations, but stories and vibes that resonate with their current state of mind. By leveraging AI and cultural data, we aspired to create meaningful, mood-driven travel adventures that feel truly unique.

What it does

VibeVoyager generates personalized travel itineraries based on three mood words entered by the user. It uses GPT-4 to craft narrative-driven trip stories and the Qloo API to recommend culturally enriched activities, landmarks, and experiences that align with the vibe. Users receive a creative travel plan with rich descriptions explaining why each stop matches their mood, can save favorite trips, and get real-time progress updates as the itinerary is generated. The app turns emotion into exploration, making trip planning more inspiring and engaging.

How we built it

• Frontend: Developed with React (using Vite) and styled with Tailwind CSS for responsive, accessible UI. We focused on modular UI components and state management via React Context and custom hooks.
• Backend: Built an Express server in TypeScript exposing REST APIs and real-time WebSocket (Socket.io) endpoints. The backend coordinates AI calls to OpenAI GPT-4 for story generation and integrates Qloo API for personalized cultural recommendations.
• Database: Used PostgreSQL with Prisma ORM for indexing and persisting user itineraries.
• DevOps: Containerized using Docker Compose for local development parity and deployed on Render.com, supplemented by CI/CD automation through GitHub Actions.
• AI/ML Integration: Crafted tailored GPT-4 prompts for narrative generation; normalized Qloo API responses to match mood input semantics.
• Real-Time Interaction: Leveraged WebSocket streams to push itinerary construction updates live to users, creating a seamless and engaging UX.

Challenges we ran into

• Crafting reliable GPT-4 prompts that balance creative storytelling with relevant itinerary details took several iterations to perfect.
• Normalizing and matching cultural data from Qloo to diverse user moods required sophisticated API handling and fallback logic.
• Ensuring smooth real-time streaming without overloading sockets or causing UI jank was technically intricate.
• Maintaining strict type safety and schema validation across frontend/backend boundaries using TypeScript and Zod demanded careful architectural decisions.
• Achieving responsive, accessible UI design with Tailwind CSS under tight deadlines was a test of design and development collaboration.

Accomplishments that we're proud of

• Delivering a fully integrated AI-powered mood-to-itinerary pipeline that works in real-time.
• Building a user-friendly and visually appealing interface that adapts seamlessly across devices.
• Establishing a robust backend capable of scalable API orchestration, error handling, and WebSocket communication.
• Implementing a modular architecture with reusable components and clear separation of concerns across the codebase.
• Automating testing and deployment workflows for smooth continuous integration and delivery.

What we learned

• The power of prompt engineering: subtle wording changes dramatically improve AI narrative quality.
• Real-time WebSocket interactions add significant UX value but require thoughtful state and error management.
• Strong typing and schema validation are invaluable for preventing runtime bugs in complex frontend-backend systems.
• Combining AI narrative with cultural data creates richer, more meaningful recommendations than either alone.
• Collaborative iteration and user feedback are critical to tuning app flow and UI responsiveness.

What's next for VibeVoyager

• Expand AI prompt modularity to support multi-lingual and internationalization (i18n).
• Add end-to-end testing to cover critical user journeys and improve stability before scaling.
• Explore integration with additional cultural and travel data providers to diversify itinerary content.
• Implement user authentication for personalized history, sharing, and collaboration features.
• Enhance UI with richer media (photos, videos) and interactive maps to deepen immersion.
• Investigate incorporating sentiment analysis or mood detection from text/photos for more intuitive vibe capture.

Built With

• axios
• openai-api
• qlooapi
• radix-ui
• react
• tailwind-css
• tanstack-react-query
• typescript
• vite
• zod