TasteBridge

Choose Your Cultural Journey

Comment

🌟 Inspiration

The inspiration for TasteBridge stemmed from a desire to bridge cultural gaps and foster mutual understanding through a universally relatable medium: personal taste.

In a world that often feels divided, we envisioned an AI-powered application that connects individuals to diverse cultures by leveraging their preferences in music, food, entertainment, fashion, and lifestyle.

The Qloo Global Hackathon provided the perfect platform to bring this vision to life, combining Qloo's Taste AI™ with Google's Gemini LLM to create a powerful cultural discovery engine. We were driven by the idea that understanding what people love can open doors to understanding where they come from and what makes their culture unique.

🛠️ What It Does

TasteBridge is a cross-cultural discovery engine that personalizes cultural exploration based on a user’s existing preferences.

🌍 Key Features:

  • Select a Culture: Users begin by selecting one of 8 cultures — Japan, France, Brazil, India, Mexico, Italy, South Korea, or Morocco.

  • Input Tastes: Users enter their favorites across five categories:

    • 🎵 Music
    • 🍽️ Food & Drink
    • 🎬 Entertainment
    • 👗 Fashion
    • 🌱 Lifestyle

  • Cultural Taste Mapping: Using Qloo’s Taste AI™, the app matches user tastes with culturally relevant counterparts.

  • AI-Powered Recommendations: Suggests dishes, genres, sites, and more, tailored to user taste.

  • Deep Cultural Insights: Gemini provides contextual insights — cultural significance, how to experience authentically, and conversation starters.

  • Beautiful UI: A modern, responsive interface enriched with animations and themed aesthetics for an immersive discovery experience.

🏗️ How We Built It

🧩 Tech Stack:

  • Frontend: React + TypeScript
  • Styling: Tailwind CSS for fast, elegant design
  • Build Tool: Vite for fast bundling
  • Icons: Lucide React
  • State Management: React hooks (useState, useEffect)
  • HTTP: axios for API communication

🔌 APIs Integrated:

  • Qloo Taste AI™

    • Endpoint Integration via src/services/qloo.ts
    • Custom payload builder for taste categories
    • Authentication and payload validation logic

  • Google Gemini AI

    • Prompt engineering handled in src/services/gemini.ts
    • Structured prompts to receive consistent JSON for:
    • connectionExplanation
    • culturalSignificance
    • conversationStarters

📦 App Structure:

  • Modular design with isolated components:

    • CultureCard, TasteInput, RecommendationCard

  • Services are split into manageable files:

    • qloo.ts and gemini.ts

  • Environment variables managed in .env with Vite support

🧗 Challenges We Ran Into

🔧 API Integration:

  • Environment Variables: Needed careful handling in vite.config.ts to load securely and properly.
  • Qloo Payload Formatting: Debugging correct taste structures (category tagging) for precise recommendations.
  • Gemini Reliability: Occasional 503 errors from Gemini API required retry logic and user-friendly messaging.

🧨 Error Handling:

  • Removed all silent demo fallbacks.
  • Implemented full try/catch blocks and custom error messages.
  • Created clear user notifications (e.g., missing keys, rate limits, network errors).

🔄 Data Orchestration:

  • Transforming and mapping Qloo output with Gemini’s structured JSON.
  • Ensuring Gemini always returns consistent fields for the recommendation cards.

💬 Prompt Engineering:

  • Crafted custom prompts for Gemini to return structured data for:

    • Explanation of relevance
    • Cultural insight
    • Conversation starters

🎉 Accomplishments We’re Proud Of

  • 🔁 AI Synergy: Seamlessly merged Qloo’s taste intelligence with Gemini’s general knowledge.
  • 🎨 Apple-level UI: Achieved elegant, gradient-rich UI with modern UX principles.
  • 🛡️ Robust Error Management: Clear, actionable error feedback for a seamless user experience.
  • 🌐 Real Cultural Connection: Created a platform that helps users understand other cultures through their own tastes.
  • 🏗️ Scalable Architecture: Production-ready codebase with modularity, scalability, and performance built-in.

📚 What We Learned

  • 🧠 Deep API Integration: Authentication, payload schemas, rate limits, retries, and transformation logic.
  • 🛠️ Value of Explicit Error Feedback: Clear messages improve UX far more than silent failures.
  • 🤖 Power of Combined AI Models: Using domain-specific AI with general LLMs enhances contextual depth.
  • 🎛️ Frontend Optimization: Improved our skills in creating performant React + Tailwind applications.
  • 🔁 Iterative Debugging: Building, testing, refining — essential to high-quality development.

🚀 What’s Next for TasteBridge

  1. 🧑‍💼 User Accounts: Taste profile persistence and revisit options.
  2. 📣 Social Sharing: Let users share cultural matches and recommendations.
  3. 🧳 Travel & Booking Integrations: Direct links to travel or local providers.
  4. 🌍 Cultural Expansion: Add more cultures and refine cultural datasets.
  5. 📱 Mobile App: Native versions using React Native or Expo.
  6. 🤖 AI Enhancements: Richer dialogues, interactive learning, adaptive pathways.
  7. 📊 Feedback Loop: Let users rate and improve the AI suggestions over time.
Share this project:

Updates

Submission history