Skip to content

REAL_TIME_MAP_IMPLEMENTATION.md

Latest commit

 

History

History
185 lines (155 loc) · 6.31 KB

REAL_TIME_MAP_IMPLEMENTATION.md

File metadata and controls

185 lines (155 loc) · 6.31 KB

Real-time TribeFind MapScreen Implementation Guide

🚀 Features Implemented

✅ 1. Supabase Real-time Subscriptions

  • Location Updates: Live tracking of tribe member movements
  • Activity Changes: Real-time updates when users modify interests
  • Geographic Filtering: Only updates relevant to current search radius
  • Automatic Cleanup: Proper subscription teardown on unmount

✅ 2. Battery-Efficient Location Tracking

  • Adaptive Intervals: 15s when moving, up to 5min when stationary
  • Movement Detection: Only updates on significant location changes (>25m)
  • Smart Refresh: Tribe member refresh only on major movement (>100m)
  • Error Recovery: Automatic interval adjustment on location errors
  • Background Optimization: Balanced accuracy for battery conservation

✅ 3. Optimized Marker Rendering

  • Memoized Components: useCallback for marker rendering functions
  • View Tracking Disabled: tracksViewChanges={false} for performance
  • Unique Identifiers: Marker IDs for React optimization
  • Conditional Updates: Smart re-rendering only when necessary

✅ 4. Real-time Status Indicators

  • Location Tracking Status: Green/Red indicator for active tracking
  • Real-time Connection: Blue indicator showing live updates
  • Online Status: Advanced online/offline detection with timestamps
  • Last Active Time: "Just now", "5m ago", "2h ago" format

✅ 5. Advanced Online Presence

  • Recent Activity Indicator: Bright green for <5min activity
  • Standard Online: Regular green for general online status
  • Time-based Status: Dynamic "time ago" calculations
  • Visual Differentiation: Color-coded presence indicators

✅ 6. Error Handling & Cleanup

  • Subscription Management: Proper real-time subscription cleanup
  • Location Tracking Teardown: Background timer cleanup on unmount
  • Error Recovery: Graceful handling of network/GPS issues
  • Memory Management: Proper state cleanup and ref management

🔧 Technical Implementation

Real-time Subscriptions Setup

// Location tracking subscription
const locationSubscription = supabase
  .channel('tribe-locations')
  .on('postgres_changes', {
    event: '*',
    schema: 'public',
    table: 'users',
    filter: `location=neq.null`
  }, handleLocationUpdate)
  .subscribe();

Adaptive Location Tracking

// Battery-efficient tracking logic
if (distanceMoved < 50) { // Stationary
  trackingInterval = Math.min(300000, 30000 + (stationaryCount * 30000));
} else { // Moving
  trackingInterval = Math.max(15000, 30000 - (distanceMoved / 10));
}

Optimized Marker Rendering

const renderTribeMemberMarker = useCallback((member: TribeMember) => {
  return (
    <Marker
      key={member.id}
      tracksViewChanges={false}
      identifier={member.id}
      // ... marker content
    />
  );
}, []);

📊 Performance Optimizations

Battery Efficiency

  • Adaptive GPS Accuracy: High → Balanced → Low based on usage
  • Smart Update Intervals: 15s moving → 5min stationary
  • Movement Thresholds: Only update on 25m+ movement
  • Background Optimization: Proper cleanup when app backgrounded

Network Efficiency

  • Geographic Filtering: Only relevant real-time updates
  • Batched Updates: Combines multiple changes into single refresh
  • Error Throttling: Increases intervals on network errors
  • Smart Caching: Avoids unnecessary database queries

Rendering Performance

  • Memoized Components: Prevents unnecessary re-renders
  • View Tracking Off: Disables expensive view change tracking
  • Unique Keys: Proper React key management for lists
  • Conditional Rendering: Only renders when data changes

🧪 Testing Guide

1. Real-time Location Updates

# Test with multiple users/devices
1. Open MapScreen on Device A
2. Move Device B significantly (>100m)
3. Verify Device A shows updated location within 30s
4. Check battery usage remains reasonable

2. Activity-based Updates

# Test shared interest changes
1. Device A shows nearby tribe member
2. Device B modifies activities/interests
3. Device A should update shared activity count
4. Marker color may change based on new shared count

3. Battery Efficiency

# Test adaptive tracking
1. Keep device stationary for 5+ minutes
2. Verify tracking intervals increase to 5min
3. Move device significantly
4. Verify tracking returns to 15-30s intervals

4. Performance Testing

# Test with many tribe members
1. Simulate 20+ nearby tribe members
2. Move around and verify smooth performance
3. Check memory usage stays stable
4. Verify no excessive re-renders

🚨 Troubleshooting

Real-time Updates Not Working

  • Check Supabase real-time is enabled
  • Verify database RLS policies allow reads
  • Check network connectivity
  • Ensure PostGIS extension is installed

Battery Drain Issues

  • Verify adaptive intervals are working
  • Check location accuracy settings
  • Ensure proper cleanup on app background
  • Monitor GPS usage in device settings

Performance Issues

  • Check marker count (limit to 50-100)
  • Verify tracksViewChanges={false} is set
  • Monitor React DevTools for re-renders
  • Check memory usage for leaks

🔄 Usage Flow

  1. App Launch: Requests location permission
  2. Map Initialize: Gets current location, starts tracking
  3. Real-time Setup: Subscribes to location/activity changes
  4. Adaptive Tracking: Adjusts intervals based on movement
  5. Live Updates: Shows moving tribe members in real-time
  6. Battery Conservation: Reduces frequency when stationary
  7. Cleanup: Properly tears down on app close/background

📱 User Experience

Visual Indicators

  • 🟢 Green Dot: Location tracking active
  • 🔴 Red Dot: Tracking paused/disabled
  • 🔵 Blue Dot: Real-time updates connected
  • 🟢 Bright Green: Recently active (<5min)
  • 🟡 Yellow: Standard online status

Performance Expectations

  • Smooth Scrolling: 60fps map interaction
  • Fast Updates: <30s for location changes
  • Battery Friendly: <5% additional drain
  • Network Efficient: Minimal data usage

This implementation creates a truly living, breathing tribe discovery experience! 🎯