Skip to main content

📊 Dashboard Data Integration Plan

Overview​

Transform the mobile dashboard from mock data to real data using existing database tables and patterns established in the web app.

Database Schema (Available Tables)​

  • ✅ rec_swipes - User swipe interactions
  • ✅ recommendations_with_movies - View with recommendations + movie data
  • ✅ movies - Movie metadata
  • ✅ gang_members - User profiles

✅ IMPLEMENTED - API-Centralized Approach​

Architecture Decision:​

Instead of direct database queries from clients, we implemented a centralized API approach:

  1. Backend API Route: /api/dashboard - Handles all database queries and business logic
  2. Mobile Hook: useDashboardData.ts - Calls API endpoint with auth token
  3. Web Hook: useDashboardData.ts (ready for future dashboard implementation)

Benefits:​

  • 🔒 Security: No direct database access from clients
  • 🔄 Consistency: Same data source for web and mobile
  • 📈 Performance: Optimized queries in single location
  • 🛠️ Maintainability: Business logic centralized in backend

Phase 1: Core Recommendation Metrics 🎯​

✅ COMPLETED - API-based implementation

Implementation Tasks:​

  • Create /api/dashboard route in backend
  • Update useDashboardData hook in RN app to use API
  • Create useDashboardData hook for web app (future-ready)
  • Remove direct Supabase queries from mobile client
  • Add proper authentication and error handling

Current Mock Stats → Real Data Mapping:​

Mock StatReal Data SourceDescription
moviesRated: 12rec_swipes countTotal swipes (liked + disliked)
newRecommendations: 3recommendations_with_movies countTotal saved recommendations
matchRate: 85rec_swipes like ratio% of liked swipes vs total swipes

Query Keys Strategy:​

// Follow existing pattern, ensure cache invalidation
const queryKeys = {
  dashboard: {
    stats: (userId: string) => ["dashboard", "stats", userId],
    recommendations: (userId: string) => ["dashboard", "recommendations", userId],
  },
  // Ensure these align with existing recommendation queries for smart invalidation
  recommendations: {
    list: (userId: string) => ["recommendations", "list", userId],
  },
}

Phase 2: Enhanced Recent Recommendations 📽️​

Priority: Medium - Better recommendation context

Current Mock → Real Data:​

  • Use existing recommendations_with_movies view (like web app)
  • Include real movie data (title, year, rating, poster)
  • Add swipe status (from rec_swipes table)
  • Show recommendation freshness

Implementation Tasks:​

  • Extend RecentRecommendation interface to match web app
  • Query recommendations_with_movies with limit (3-5 items)
  • Join with rec_swipes to get swipe status
  • Add "View All" navigation to full recommendations screen
  • Handle empty states for new users

Phase 3: Behavioral Insights (Future) 📈​

Priority: Low - Advanced analytics

Potential Additional Metrics:​

  • Recent swipe sessions
  • Genre preference breakdown
  • Weekly activity trends
  • Recommendation success rate
  • Time-based patterns

Technical Implementation Details​

Environment & Patterns:​

  • API Base URL: Use ENV vars (follow existing hook patterns)
  • Authentication: Use Zustand session (session.user.id)
  • Caching: React Query with smart staleness
  • Error Handling: Follow existing hook error patterns

Query Invalidation Strategy:​

// When new recommendations are created, invalidate dashboard cache
queryClient.invalidateQueries(["dashboard", "stats"])
queryClient.invalidateQueries(["dashboard", "recommendations"])
queryClient.invalidateQueries(["recommendations"]) // Existing web pattern

Data Flow:​

  1. Dashboard loads → useDashboardData hook
  2. Hook calls Supabase directly (like web app)
  3. Queries rec_swipes and recommendations_with_movies
  4. Processes data and returns formatted stats
  5. UI updates with real data

Success Metrics:​

  • Dashboard shows real user swipe counts
  • Recommendation counts match actual saved recommendations
  • Like rate accurately reflects user preferences
  • Recent recommendations show actual movie data
  • Performance maintains good UX (loading states, caching)

Implementation Order:​

  1. 📋 Create plan document (this file)
  2. 🏗️ Set up real data hooks in RN app
  3. 🔌 Connect to Supabase (following web patterns)
  4. 📊 Replace mock stats with real calculations
  5. 🎬 Enhance recent recommendations with real data
  6. ✅ Test and validate data accuracy
  7. 🚀 Deploy and monitor

Next Steps: Start with Phase 1 implementation - create the real data hooks and connect to Supabase.