GuideMe

"GuideMe: Your AI-powered personal tour guide. Discover self-guided tours tailored to your interests, with interactive maps, AI narration, and chat for immersive, personalized adventures."

Comment

Inspiration

My wife and I share a deep passion for traveling. Over the years, we’ve explored more than 50 countries together — backpacking, hiking, sightseeing, and diving into the culture and stories that make each place unique. One experience we consistently love is walking tours. There's nothing quite like learning about a city's history and hidden gems as you stroll through its streets.

But as much as we love them, walking tours often come with limitations:

  • They're not always available when you need them.
  • They can be expensive, especially in popular tourist destinations.
  • You’re bound to a schedule, group pace, and predefined route.
  • The information is fixed — if you have follow-up questions, you’re on your own.

On a recent trip to Rome, we downloaded a standalone app just for the Colosseum. While it offered some information, we quickly found it inconvenient to download separate apps for every landmark or city. Worse, when we wanted to dive deeper into certain topics, we had to resort to manual searches — all while standing under the scorching Roman sun. The whole experience felt fragmented and frustrating.

That’s when it hit us:
Why isn’t there a single, smart app that can guide us like a local, adapt to our interests, and answer our questions on the go?

We dreamed of an experience where:

  • Every place feels like a guided tour, but without the guide.
  • You’re not limited by group sizes, schedules, or costs.
  • You can ask questions, get real-time info, and explore at your own pace.
  • An app acts like a knowledgeable, friendly local, available 24/7 — powered by AI.

We envisioned a world where exploring isn’t limited by logistics, but enhanced by technology.

What it does

GuideMe is an AI-powered platform that transforms the way you explore the world through self-guided tours. Whether you're wandering through ancient ruins or strolling a modern metropolis, GuideMe delivers a rich, interactive, and personalized travel experience — right from your phone.

✨ Key Features

  • 🗺️ Discover Tours
    Browse a wide range of tours — both pre-defined and dynamically AI-generated — based on your location, interests, and custom filters.

  • 📍 Interactive Maps
    Visualize tour routes and points of interest on an intuitive, interactive map powered by Google Maps.

  • 🎧 AI-Powered Narration
    Listen to engaging, AI-generated audio guides at each stop. Get historical context, visiting tips, and key highlights tailored to your pace.

  • 🤖 AI Chat Guide
    Ask specific questions about a landmark or attraction through a built-in AI chat. Receive personalized, real-time answers — like having a local expert in your pocket.

  • 🔍 Filtering and Search
    Easily find tours by searching for cities, countries, or keywords. Apply filters such as:

    • Tour type (history, nature, art, etc.)
    • Topic
    • Difficulty level
    • Walking distance

  • 📡 Location-Aware Experience
    GuideMe uses your current location to:

    • Suggest nearby tours
    • Calculate distances
    • Help you start exploring immediately

How we built it

GuideMe was developed as a modern web application using a robust and scalable technology stack to ensure performance, flexibility, and a seamless user experience.

🧑‍💻 Frontend

  • React + TypeScript: Built with a component-based architecture and strong type safety to support scalability and maintainability.
  • Tailwind CSS: Enabled rapid development with utility-first styling for a consistent and responsive UI.
  • Framer Motion: Added smooth animations and transitions, enhancing the visual and interactive experience.

🗺️ Mapping & Visualization

  • Google Maps API: Integrated to display interactive maps, tour routes, and custom points of interest with detailed info windows and dynamic markers.

🔙 Backend & Database

  • Supabase: Served as our backend-as-a-service platform:
    • Powered by PostgreSQL to store pre-defined tour data.
    • Utilized Supabase’s real-time features for updates.
    • Initially included authentication and user management, later streamlined for simplified public access.

🤖 AI & Audio Experience

  • ElevenLabs API: Provided high-quality, natural-sounding text-to-speech audio for each tour stop.
  • AITourGenerator: A custom service that dynamically creates AI-generated tours — including:
    • Tour titles
    • Descriptions
    • Points of interest
      All based on location data and user-defined themes.

🧭 Routing

  • React Router DOM: Managed navigation within the single-page application (SPA), ensuring smooth route transitions and URL-based state handling.

🌍 City Search & Geocoding

  • citiesApi Service: Implemented to handle:
    • City search with autocomplete
    • Reverse geocoding
      This was achieved using external APIs such as GeoNames and OpenStreetMap Nominatim.

⚡ Build & Dev Experience

  • Vite: Used as the build tool for:
    • Fast development server with hot module replacement
    • Optimized production builds for better performance

Challenges we ran into

🤖 AI Integration Complexity

  • Integrating ElevenLabs for text-to-speech (TTS) involved managing:
    • Rate limits and usage quotas
    • Request queuing to ensure smooth and timely audio generation
  • Generating coherent, context-aware AI tour content dynamically, including points of interest, posed significant algorithmic and content-relevance challenges.

⚡ Performance and Data Loading

  • To maintain a snappy experience, we implemented a lazy loading strategy:
    • Initially, only lightweight data (title, image) is loaded for AI tours in the grid view.
    • Full tour details (points of interest, audio, etc.) are fetched and generated only on demand when a user selects a tour.
  • This approach drastically improved loading time and reduced API overhead.

📍 Geolocation and Mapping Accuracy

  • Obtaining the user’s accurate location, reverse-geocoding it to a city/country, and calculating distances to tours required:
    • Handling user permissions for location services
    • Managing variability and errors in external geocoding APIs
    • Ensuring precise distance calculations across devices

🎨 UI/UX Responsiveness

  • Designing a consistent, intuitive UI across devices meant:
    • Ensuring a responsive layout for components like:
    • Interactive map
    • Filter and search bar
    • AI chat modal
    • Using Tailwind CSS to fine-tune breakpoints and spacing for usability on mobile, tablet, and desktop

Accomplishments that we're proud of

Despite the challenges, we successfully delivered several core achievements that define the strength and uniqueness of GuideMe:

🤖 Seamless AI Integration

🎯 Intuitive User Experience

🔍 Robust Filtering System

🗺️ Interactive Map Integration

🧱 Scalable Architecture

What we learned

Building GuideMe was not only a rewarding development experience but also a journey filled with valuable technical and architectural lessons:

⚛️ Advanced React Patterns

  • Gained deeper insights into advanced React techniques, including:

🗃️ Supabase Proficiency

  • Strengthened our understanding of Supabase for rapid backend development:
    • Schema design and relational modeling
    • Efficient data fetching and real-time subscriptions
    • Simplified authentication and public-access strategies

🚀 Performance Optimization

  • Emphasized the importance of:
    • Lazy loading of dynamic content
    • Client-side caching
    • Efficient data handling and render control
  • These optimizations were crucial for maintaining a fast, responsive UI even with AI-generated content.

What's next for GuideMe

GuideMe has a bright future with many exciting enhancements on the roadmap, aimed at enriching the user experience and expanding the platform’s reach:

🔐 User Authentication and Personalization

  • Implement full user authentication to enable:
    • Saving favorite tours
    • Tracking tour progress
    • Receiving personalized recommendations based on interests and travel history

🌍 Community Features

  • Introduce tools for users to:
    • Create and share their own tours
    • Engage with a community of fellow travelers and explorers
    • Rate, comment, and suggest new points of interest

🤖 Real-Time AI Interaction

  • Explore integration of more advanced AI models to:
    • Provide real-time, context-aware responses in the AI chat
    • Adapt dynamically to live user location and preferences

📶 Offline Mode

  • Develop offline capabilities for tours, enabling users to:
    • Download maps and audio guides
    • Enjoy the full experience without needing an internet connection — ideal for remote or data-limited travel

💰 Monetization

  • Introduce premium features through a subscription model, such as:
    • Unlimited AI tour generation
    • Access to exclusive content
    • An ad-free experience

🌐 Expanded Content

  • Continuously grow the database of:
    • Pre-defined and AI-generatable locations
    • Themed tours (e.g., architecture, food, local legends)
    • Tours in multiple languages to support global travelers

📱 Mobile App Deployment

  • Package the existing web app into a native mobile application using:
    • Capacitor or Expo
    • For deeper device integration, better performance, and access via app stores

Built With

Share this project:

Updates