Inspiration

Traditional audio guides are expensive and limited, while photos alone don't tell the full story. We built an AI-powered tool that transforms any walk into an enriching narrative experience, making location-based storytelling accessible to everyone.

What it does

  • Create custom walking tours with AI-generated narratives
  • Take photos and instantly get AI-crafted stories
  • Listen to professional text-to-speech narration
  • Build multi-chapter tours with location context
  • Save and share walking tours with others

How we built it

Our stack is focused on real-time AI processing and smooth user experience:

Frontend

  • React + Vite for fast, modern web development
  • TypeScript for type safety
  • Tailwind CSS + shadcn/ui for sleek UI
  • TanStack Query for data management

Backend & Infrastructure

  • Supabase
    • PostgreSQL database
    • Edge Functions for AI processing
    • Storage for media files
    • Real-time subscriptions

AI Services

  • OpenAI GPT-4
    • Story generation from images
    • Context-aware chapter titles
    • Narrative style adaptation
  • ElevenLabs
    • Text-to-speech narration
    • High-quality voice synthesis
    • Multiple voice options

Challenges we faced

  1. Concurrent Processing: Managing multiple API calls (GPT-4, ElevenLabs) while keeping the UI responsive
  2. State Management: Handling complex tour building states across chapters
  3. Media Processing: Efficient handling of images and audio streams
  4. User Experience: Creating a seamless flow between capturing, generating, and playing content

What we learned

  • Advanced OpenAI API integration patterns
  • ElevenLabs voice synthesis optimization
  • Real-time state management with Supabase
  • Complex media handling in the browser

What's next

  • Offline mode for downloaded tours
  • GPS integration for location-aware playback
  • Social features for tour sharing
  • Multi-language support
  • AR photo enhancements

Built With

  • Supabase (Database, Storage, Edge Functions)
  • OpenAI GPT-4 (Story Generation)
  • ElevenLabs (Text-to-Speech)
  • React + TypeScript
  • Tailwind CSS
  • TanStack Query

Built With

Share this project:

Updates