CityScout: Your Interactive Map Companion

Context

Travelers and locals alike often seek quick insights about unfamiliar places. CityScout addresses this need by allowing users to interact directly with a map and receive tailored information about any location they choose. The app simplifies the process of gathering interesting facts and recommendations, enhancing the exploration experience for users on the go.

What I built

CityScout is a single-screen React Native application designed for both mobile and web platforms. Users can long-press on a map to drop a pin, which triggers an AI-generated summary about that specific location. The system provides a structured output that includes a brief history, a fun fact, and a local food recommendation, all displayed in an animated bottom panel for easy viewing.

Technical approach

The application leverages Expo for React Native development, ensuring compatibility across iOS, Android, and web platforms. For map functionality, I utilized `react-native-maps` for mobile and Leaflet for the web version, allowing for seamless user interactions. The app communicates with OpenAI's GPT-4o-mini for generating content and uses OpenStreetMap Nominatim for reverse geocoding, ensuring accurate location data retrieval.

Results

The implementation of CityScout resulted in a functional and engaging app that simplifies location exploration. Users can quickly obtain relevant information about any place they select, enhancing their travel experience. This project also deepened my understanding of integrating AI with mobile applications and managing cross-platform development challenges.

Key outcomes

• ▹Built an interactive map application that provides AI-generated summaries for locations.
• ▹Shipped a seamless user experience across mobile and web platforms using React Native.
• ▹Designed a structured JSON response format for effective communication with the AI model.
• ▹Implemented reverse geocoding to enhance location accuracy and user engagement.