CityMouse

Discover your city one step at a time - like a homeless mouse, roaming around in the city.

Comment

Inspiration

The inspiration for CityWalk came from a simple observation: we often walk past amazing places in our own neighborhoods without even knowing they exist. While apps like Pokémon GO gamified exploration by making us discover virtual creatures, I wondered - what if we could gamify discovering real places around us?

The idea struck me during a routine walk to my local coffee shop. I realized I had been taking the same route for months, completely unaware of the charming bakery two blocks away or the cozy bookstore hidden in a side street. This got me thinking about how technology could help us become more connected to our physical surroundings, turning everyday walks into mini-adventures.

What I Learned

Building CityWalk taught me several valuable lessons:

Technical Skills

  • Vue 3 Composition API: Deep dive into reactive programming and component composition
  • Google Maps Integration: Mastering the Places API, handling rate limits, and optimizing API calls
  • Geolocation APIs: Understanding browser location permissions and GPS accuracy challenges
  • Performance Optimization: Implementing caching strategies and throttling mechanisms

Real-World Challenges

  • API Cost Management: Learning to balance discovery accuracy with Google Places API costs
  • Mobile UX: Designing touch-friendly interfaces for walking users
  • Battery Optimization: Minimizing location tracking impact on mobile devices
  • Privacy Considerations: Ensuring user location data stays secure and local

Product Design

  • User Behavior: Understanding how people actually use location-based apps while moving
  • Gamification Balance: Making discovery engaging without being overwhelming
  • Accessibility: Ensuring the app works for users with different mobility needs

How I Built It

Architecture Decisions

I chose Vue 3 with Vite for rapid development and modern tooling. The component-based architecture made it easy to separate concerns:

  • CityWalk.vue: Main application logic and state management
  • TripReport.vue: Data visualization and reporting
  • ToastNotification.vue: User feedback system
  • mapUtils.js: Core business logic and API integration

Key Technical Implementation

Smart Discovery Algorithm:  ⁠javascript // Throttling to prevent API spam const shouldQuery = (distance, timeElapsed) => { return distance >= 30 || timeElapsed >= 20000; };

⁠ Efficient Caching System:  ⁠javascript // 25-second TTL cache to reduce API calls const cache = new Map(); const CACHE_TIMEOUT = 25000;

⁠ Real-time Location Tracking:  ⁠javascript // Continuous position monitoring with error handling const watchId = navigator.geolocation.watchPosition( handleLocationUpdate, handleLocationError, { enableHighAccuracy: true, timeout: 10000 } );

Development Process

  1. MVP First: Started with basic map integration and location tracking
  2. Iterative Enhancement: Added features incrementally (caching, notifications, reports)
  3. Performance Optimization: Implemented throttling and caching after initial testing
  4. Mobile Testing: Extensive testing on actual devices while walking

Challenges I Faced

Technical Challenges

API Rate Limiting & Costs

  • Problem: Google Places API charges per request, and continuous queries could become expensive
  • Solution: Implemented intelligent throttling (30m distance or 20s time thresholds) and 25-second caching
  • Learning: Always consider API costs in location-based applications

Location Accuracy & Battery Life

  • Problem: High-accuracy GPS drains battery quickly
  • Solution: Balanced accuracy settings and optimized query frequency
  • Learning: Mobile apps need to be battery-conscious, especially for outdoor use

Cross-Browser Compatibility

  • Problem: Geolocation APIs behave differently across browsers
  • Solution: Implemented comprehensive error handling and fallback mechanisms
  • Learning: Always test location features across multiple browsers and devices

Design Challenges

Mobile-First UX

  • Problem: Designing for users who are walking and may not want to stop
  • Solution: Large touch targets, clear visual feedback, and minimal interaction required
  • Learning: Context of use is crucial - walking users have different needs than stationary ones

Discovery Balance

  • Problem: Too many notifications could be annoying, too few could feel boring
  • Solution: Smart deduplication and configurable place types
  • Learning: Gamification needs careful tuning to maintain engagement

Product Challenges

Privacy Concerns

  • Problem: Users are rightfully concerned about location tracking
  • Solution: All data stored locally, clear privacy messaging, optional permissions
  • Learning: Transparency about data usage builds user trust

Real-World Testing

  • Problem: Testing location-based features requires actual walking
  • Solution: Extensive field testing with different routes and conditions
  • Learning: Some features can only be properly tested in real-world conditions

Future Vision

CityWalk represents just the beginning of location-based discovery. The core concept of gamifying real-world exploration has potential applications in:

  • Tourism: Helping visitors discover authentic local experiences
  • Community Building: Connecting neighbors through shared discoveries
  • Health & Wellness: Making exercise more engaging and social
  • Education: Teaching geography and local history through exploration

The technical foundation built here - efficient API usage, mobile-optimized UX, and privacy-first design - provides a solid base for expanding into these broader applications.

Conclusion

Building CityWalk taught me that the best technology solutions often come from simple observations about everyday life. By combining familiar concepts (gamification) with practical needs (urban exploration), we can create tools that genuinely enhance how people interact with their physical world.

The project reinforced that successful location-based applications require careful balance between functionality, performance, privacy, and user experience. Most importantly, it showed me that sometimes the most impactful innovations are those that help us rediscover what's already around us.

Built With

  • browser-geolocation-api-storage:-localstorage-(client-side-data-persistence)-development:-node.js
  • css3
  • css3-apis:-google-maps-javascript-api
  • geolocation-api
  • google-maps-javascript-api
  • google-places
  • html5
  • javascript-es6+
  • localstorage
  • npm
  • vite
  • vue-3
Share this project:

Updates