CulturalCompass

Inspiration

Traveling is more than sightseeing—it's about respecting local customs, communicating meaningfully, and avoiding cultural misunderstandings. I built CulturalCompass to help travelers make informed, respectful, and safe decisions wherever they go.

What It Does

• Provides deep cultural insights on local customs, traditions, and etiquette
• Answers cultural or legal questions with a real-time AI assistant
• Offers interactive maps with destination-specific info
• Helps with essential phrases in local languages (with pronunciation)
• Displays local laws and regulations to ensure safe travel
• Generates custom itineraries based on user interests
• Supports voice control and multi-language interface (English, Hindi, Spanish, French, German, Japanese, Chinese)

How We Built It

• Frontend:

  • Next.js (App Router) with TypeScript
    
  • Tailwind CSS, shadcn/ui for UI
    
  • Framer Motion for animations
    

• Maps & Visualization:

  • React Leaflet with dynamic overlays

• Backend & Data:

  • tRPC for API handling
    
  • Prisma + PostgreSQL + pgvector for storage and vector search
    

• AI Integration:

  • Hybrid system combining Gemini and Groq for cultural Q&A
    
  • RAG (Retrieval Augmented Generation) with vector similarity search
    

• Voice & Internationalization:

  • ElevenLabs for AI-generated pronunciation
    
  • next-intl for multi-language support
    

Challenges We Ran Into

• SSR issues with Leaflet in Next.js App Router
• Designing seamless fallbacks between Gemini and Groq
• Building a trustworthy cultural knowledge base for diverse cities
• Integrating voice features in a multilingual and mobile-friendly way

Accomplishments We’re Proud Of

• Delivered a smooth multilingual UI with real-time AI assistance
• Built a scalable system combining AI + cultural data + vector search
• Created an experience that can genuinely help travelers

Built With

• ai
• animations
• apis
• app
• css
• elevenlabs
• for
• framer
• framermotion
• gemini
• groq
• interactive
• internationalization
• leaflet.js
• maps
• models
• motion
• next-intl
• next.js
• orm
• pgvector
• postgresql
• prisma
• react
• reactleaflet
• router
• search
• shadcn/ui
• synthesis
• tailwind
• tailwindcss
• trpc
• type-safe
• typescript
• vector
• voice
• with