VibeTrails: A Cultural Day Planner

Turn any vibe into a local day plan. Qloo Taste AI finds food, activities, and media that fit. GPT explains why and builds a timeline with calendar export. Privacy first.

Comment

VibeTrail - AI-Powered Cultural Discovery

Inspiration

We've all been there - standing in a new city with that perfect vibe in mind, but struggling to translate our mood into concrete recommendations. "I want a La La Land weekend" or "Give me cozy coffee shop vibes", these feelings are real, but traditional recommendation engines can't understand them.

VibeTrail was born from the idea that AI could bridge this gap between human emotion and cultural discovery. What if we could speak to our devices in natural language about how we feel, and get back perfectly curated experiences that match that energy?

What We Learned

Building VibeTrail taught us invaluable lessons about AI orchestration and user experience design:

AI Integration Complexity: I discovered that combining multiple AI services (OpenAI for natural language processing + Qloo for cultural recommendations) requires sophisticated data flow management.

User Experience is Everything: Through extensive testing, I learned that users don't want to see 8 different tabs - they want 3-5 relevant tabs. This led us to develop a dynamic tab system based on vibe analysis.

How We Built It

Architecture: VibeTrail uses a modern React + TypeScript frontend with a Node.js Express proxy server. The magic happens in our API orchestration layer:

  1. Vibe Processing: User inputs like "bohemian artist weekend" get sent to our /api/taste endpoint
  2. AI Seed Extraction: OpenAI GPT-4 analyzes the vibe and extracts structured taste preferences
  3. Cultural Recommendations: These seeds feed into Qloo's Taste AI for personalized recommendations across 6+ categories
  4. Intelligent Planning: OpenAI creates optimized day schedules, avoiding conflicts like back-to-back food items

Technical Stack:

  • Frontend: React 18.3.1, TypeScript 5.5.3, Tailwind CSS, Framer Motion
  • Backend: Express 5.1.0 proxy server, Vercel serverless functions
  • AI Services: OpenAI API, Qloo Taste AI
  • Testing: Playwright for E2E, Vitest for units, comprehensive debugging tools

Challenges We Faced

1. API Orchestration Complexity

Initially, our frontend made 6+ separate API calls for different recommendation categories. This created race conditions, inconsistent loading states, and exposed API keys. We solved this by building a unified backend endpoint that orchestrates all calls server-side.

2. Real-time User Experience

Users expect instant feedback, but AI processing takes time. We implemented sophisticated loading states, skeleton loaders, and progressive data loading to maintain engagement during the 2-3 second AI processing window.

3. Mobile Responsiveness

Our initial design wasted screen real estate with excessive padding and scrolling. We redesigned the entire UI with a mobile-first approach, implementing horizontal tab scrolling, dense grid layouts, and compact information display.

4. Dynamic Tab System

Static tabs showing all 8 categories felt overwhelming. We built (but haven't fully implemented) a dynamic system that analyzes vibe context and shows only the 3-5 most relevant categories based on indoor/outdoor preferences, time of day, and AI confidence scores.

What's Next

VibeTrail demonstrates the power of AI orchestration in cultural discovery. Our next phase focuses on:

  • Dynamic Tabs: Completing the context-aware tab system
  • Social Features: Sharing and collaborative planning
  • Personalization: Learning from user selections over time
  • Expanded APIs: Integration with more cultural data sources

The future of recommendation engines isn't just about data - it's about understanding human emotion and translating it into meaningful experiences.

Built With

Languages & Frameworks:

  • TypeScript
  • React
  • Node.js
  • JavaScript

APIs & Services:

  • OpenAI API (GPT-4)
  • Qloo Taste AI
  • Netlify Serverless Functions

Frontend Technologies:

  • Tailwind CSS
  • Framer Motion
  • React Router
  • Vite

Backend & Infrastructure:

  • Express.js
  • Axios
  • Vercel
  • Node.js Proxy Server

Testing & Quality:

  • Playwright
  • Vitest
  • ESLint
  • TypeScript

Built With

Share this project:

Updates