Skip to main content

DAGGH React Native App Development Plan

🎯 Project Overview​

Building a React Native companion app for DAGGH (Collaborative Movie Recommendation System) focusing on core mobile features: movie swiping, recommendations access, and basic profile management.

📋 Core Features (MVP)​

1. Movie Swiping Interface​

  • Tinder-like swipe experience with smooth, fast animations (Reanimated v3)
  • Movie cards with poster, title, year, rating, and genres
  • Gesture-based interactions (swipe left/right, tap buttons)
  • Real-time feedback and progress tracking
  • Fluid transitions between cards (no visual gap)

2. User Recommendations​

  • Personalized movie recommendations from existing ML service
  • Browse and filter recommended movies
  • View recommendation reasons and scores
  • Mark movies as watched or add to watchlist

3. Basic Profile Management​

  • Username management and display
  • Profile picture upload and display
  • Swipe statistics and preferences overview
  • Account settings and preferences

4. Movie Detail & Recommendations Experience (Completed)​

  • Robust movie detail page with loading, error, and empty states
  • Dynamic header title and improved back navigation (back label: "Recommendations")
  • Retry logic and user-friendly error UI
  • Modal navigation removed for detail page; native-like navigation
  • Expo SSR/static export issues resolved (output: "single")
  • Debug logging for navigation and API issues

🏗️ Technical Architecture​

Core Tech Stack​

  • Framework: React Native with Expo (latest SDK 53)
  • Navigation: Expo Router (file-based routing)
  • State Management: Zustand + React Query (TanStack Query)
  • Styling: NativeWind (Tailwind CSS for React Native)
  • Animations: React Native Reanimated 3 + Gesture Handler
  • Backend: Existing DAGGH APIs (Supabase + Next.js)

Key Dependencies​

{
  "@expo/vector-icons": "^14.1.0",
  "@tanstack/react-query": "^5.0.0",
  "expo-router": "~5.1.0",
  "react-native-reanimated": "~3.17.4",
  "react-native-gesture-handler": "~2.24.0",
  "nativewind": "^2.0.11",
  "zustand": "^4.4.0",
  "expo-image": "~2.3.0",
  "expo-secure-store": "~14.1.0"
}

📱 App Structure & Screens​

App Root
├── (auth)
│   ├── login.tsx
│   └── register.tsx
├── (tabs)
│   ├── index.tsx (Swipe)
│   ├── recommendations.tsx
│   └── profile.tsx
└── movie/
    └── [id].tsx (Movie Details)

Screen Breakdown​

1. Authentication Flow​

  • Login Screen: Email/password with Supabase Auth
  • Register Screen: Account creation
  • Auto-login: Secure token storage

2. Main Swipe Screen ((tabs)/index.tsx)​

  • Movie Card Stack: Animated card stack for swiping
  • Action Buttons: Like, dislike, skip buttons
  • Progress Indicator: Shows swiping progress
  • Filters: Genre and year filters (optional)

3. Recommendations Screen ((tabs)/recommendations.tsx)​

  • Recommendation List: Personalized movie suggestions
  • Filter/Sort Options: By genre, rating, year
  • Movie Details: Quick view with rating and description
  • Actions: Mark as watched, add to favorites

4. Profile Screen ((tabs)/profile.tsx)​

  • User Info: Username, profile picture
  • Statistics: Swipe count, preferences summary
  • Settings: Preferences, logout
  • Swipe History: Recently swiped movies

5. Movie Details Screen (movie/[id].tsx)​

  • Detailed View: Full movie information
  • Actions: Rate, add to watchlist, share
  • Similar Movies: Recommendations based on this movie

🔌 API Integration​

Existing DAGGH APIs to Use​

1. Authentication​

  • Supabase Auth: Direct integration with existing auth system
  • User Sessions: Maintain login state across app launches

2. Movie Swiping​

// Existing API: GET /api/movies/random
interface MovieSwipeAPI {
  endpoint: "/api/movies/random"
  params: {
    limit: number
    page: number
    genre?: string
    min_year?: number
  }
  response: {
    movies: Movie[]
    metadata: {
      total_available: number
      user_swiped_count: number
      remaining_count: number
    }
  }
}

// Existing API: POST /api/swipes
interface SwipeRecordAPI {
  endpoint: "/api/swipes"
  body: {
    movie_id: number // TMDB ID
    liked: boolean
    score?: number
  }
  response: {
    success: boolean
    swipe: SwipeRecord
  }
}

3. Recommendations​

// Existing API: GET /api/recommendations
interface RecommendationsAPI {
  endpoint: "/api/recommendations"
  params: {
    limit: number
    page: number
  }
  response: {
    recommendations: Recommendation[]
    analytics: RecommendationAnalytics
  }
}

4. User Profile​

// Supabase direct queries for user data
interface UserProfileAPI {
  // Get user swipe history
  swipeHistory: "/api/swipes"
  // Update user preferences (custom endpoint needed)
  updateProfile: "/api/user/profile"
}

📐 Component Architecture​

Core Components​

1. Movie Swipe Components​

// SwipeCard.tsx - Individual movie card
interface SwipeCardProps {
  movie: Movie
  onSwipe: (direction: "left" | "right") => void
  onSkip: () => void
}

// SwipeStack.tsx - Stack of swipeable cards
interface SwipeStackProps {
  movies: Movie[]
  onSwipeComplete: (movieId: number, liked: boolean) => void
}

// SwipeGestureHandler.tsx - Gesture handling logic
interface SwipeGestureProps {
  onSwipeLeft: () => void
  onSwipeRight: () => void
  children: React.ReactNode
}

2. UI Components​

// MoviePoster.tsx - Optimized movie poster display
// LoadingSpinner.tsx - Loading states
// Button.tsx - Consistent button styling
// Card.tsx - Base card component
// Header.tsx - Screen headers with navigation

3. Data Components​

// MovieService.ts - API calls for movies
// AuthService.ts - Authentication handling
// CacheManager.ts - Offline data management
// ErrorHandler.ts - Error boundary and handling

🎨 Design System​

Visual Design​

  • Color Palette: Based on existing DAGGH branding
  • Typography: System fonts with clear hierarchy
  • Spacing: Consistent 8px grid system
  • Components: Reusable component library

Animation Design​

  • Swipe Animations: Smooth card transitions with physics
  • Micro-interactions: Button press feedback, loading states
  • Screen Transitions: Native-feeling navigation animations
  • Loading States: Skeleton screens and progress indicators

🚀 Development Phases​

Phase 1: Foundation (Week 1-2)​

  • Project Setup: Expo app with required dependencies
  • Navigation Structure: Basic screen navigation with Expo Router
  • Authentication: Login/register with Supabase integration
  • API Services: Base API client and authentication handling
  • Design System: Core components and styling setup

Phase 2: Core Swiping (Week 3-4)​

  • Movie API Integration: Connect to existing movie endpoints
  • Swipe Interface: Basic card swiping functionality
  • Gesture Handling: Smooth swipe animations with Reanimated
  • Swipe Recording: Integrate with existing swipe API
  • Progress Tracking: Show swiping progress and statistics

Phase 3: Recommendations (Week 5)​

  • Recommendations API: Connect to existing recommendation system
  • Recommendations Screen: Display personalized suggestions
  • Movie Details: Detailed view for recommended movies
  • Filtering & Sorting: Basic recommendation filtering

Phase 4: Profile & Polish (Week 6)​

  • Profile Management: Basic user profile with statistics
  • Settings Screen: User preferences and app settings
  • Profile Pictures: Image upload and display
  • Performance Optimization: Caching and loading improvements
  • Testing & Bug Fixes: Comprehensive testing and refinements

📊 Data Management Strategy​

State Management​

// Zustand stores for global state
interface AppStore {
  // User authentication state
  user: User | null
  isAuthenticated: boolean

  // App preferences
  theme: "light" | "dark"
  preferences: UserPreferences

  // Current session
  currentSwipeSession: SwipeSession
}

// React Query for server state
const queryKeys = {
  movies: ["movies"],
  recommendations: ["recommendations"],
  profile: ["profile"],
  swipeHistory: ["swipeHistory"],
}

Offline Support​

  • Movie Caching: Cache movie data for offline swiping
  • Queue Swipes: Store swipes locally when offline, sync when online
  • Image Caching: Cache movie posters for better performance

🧪 Testing Strategy​

Testing Approach​

  • Unit Tests: Core business logic and utilities
  • Component Tests: React Native Testing Library for components
  • Integration Tests: API integration and data flow
  • E2E Tests: Critical user flows with Detox

Test Coverage Goals​

  • 80%+ Coverage: For core business logic
  • Critical Flows: Authentication, swiping, recommendations
  • Error Scenarios: Network failures, API errors, edge cases

🚀 Deployment Strategy​

Development​

  • Expo Development Build: For testing on devices
  • EAS Update: Over-the-air updates for rapid iteration
  • Environment Management: Development, staging, production

Production​

  • App Store Distribution: iOS App Store and Google Play Store
  • EAS Build: Cloud builds for app store submission
  • Analytics: Crash reporting and usage analytics
  • Performance Monitoring: App performance tracking

📈 Success Metrics​

User Engagement​

  • Daily Active Users: Track app usage
  • Swipe Completion Rate: Percentage of started swipe sessions completed
  • Recommendation Interaction: How often users interact with recommendations
  • Session Duration: Average time spent in app

Technical Metrics​

  • App Performance: Startup time, gesture responsiveness
  • Crash Rate: App stability metrics
  • API Response Times: Network performance
  • User Retention: 1-day, 7-day, 30-day retention rates

🔄 Integration with Existing System​

Leverage Existing Infrastructure​

  • Authentication: Use existing Supabase auth system
  • Database: Utilize existing user and movie data
  • ML Recommendations: Connect to existing recommendation engine
  • API Endpoints: Reuse existing well-tested APIs

Mobile-Specific Enhancements​

  • Push Notifications: New recommendations, group activities
  • Offline Mode: Cache data for offline usage
  • Device Features: Camera for profile pictures, haptic feedback
  • Performance: Optimized for mobile hardware constraints

🎯 Next Steps​

  1. Environment Setup: Set up development environment and project structure
  2. Basic Authentication: Implement login/register flow with existing APIs
  3. Movie Swiping MVP: Create basic swipe interface with gesture handling
  4. API Integration: Connect to existing DAGGH APIs for movies and swipes
  5. Iterative Development: Build features incrementally with regular testing

This plan leverages your existing DAGGH infrastructure while creating a focused, mobile-optimized experience for your core user needs. The phased approach allows for early testing and feedback while building toward a complete mobile experience.

Ready to start building? Let's begin with setting up the project structure and basic authentication flow!