Movie Swiping MVP Progress – June 24, 2025

Overview

We're excited to share major progress on the Movie Swiping MVP for the DAGGH companion app! The goal: deliver a robust, fluid, and delightful movie discovery experience, inspired by Tinder's swipe UI, fully integrated with our backend and authentication.

Architecture & Flow

• Frontend: Built with React Native (Expo), using Reanimated v3 and Gesture Handler for smooth, native-feeling swipe gestures.
• Backend: Next.js API routes, Supabase for data and authentication, with RLS enforced for user data and a service client for privileged operations.
• Authentication: All API requests include the user's access token in the Authorization header. The backend supports both bearer token (mobile) and cookie (web) auth flows.
• Data Flow:
  1. The frontend fetches random movies (not yet swiped) from /api/movies/random using the useRandomMovies hook.
  2. On swipe, the frontend POSTs to /api/swipes with { movie_id, liked, score }.
  3. The backend verifies the movie and user, then records the swipe using a Supabase service client (bypassing RLS for reliability).
  4. The UI updates optimistically, with error handling and retry support.

What's Working

• Fluid Swipe UI:
  • SwipeCard, SwipeStack, and AnimatedSwipeCard components for a modern, interactive stack.
  • Only the top card is interactive, with a preview of the next card for depth.
  • Fast, springy swipe animations for left (Nope), right (Like), and down (Skip) gestures.
• API Integration:
  • useRandomMovies hook fetches paginated movie data from /api/movies/random.
  • Handles loading, error, and empty states gracefully.
  • Infinite loading: fetches more movies as the stack gets low.
• Authentication:
  • All API requests include the user's access token in the Authorization header.
  • Backend supports both bearer token (mobile) and cookie (web) auth flows.
• Feedback & Accessibility:
  • Visual indicators for Like (right), Nope (left), and Skip (down) gestures fade in as you swipe.
  • Empty state UI when no movies remain.

Challenges & Solutions

• [object Object] Rendering Bug:
  • Challenge: Genres sometimes arrived as arrays of objects, causing [object Object] to appear in the UI.
  • Solution: Updated SwipeCard to robustly handle both string arrays and object arrays for genres.
• Authentication Consistency (Frontend & Backend):
  • Challenge: Supporting both mobile (bearer token) and web (cookie) authentication in the backend, and ensuring the frontend always sends the correct token.
  • Solution: The backend API was updated to extract the bearer token from the Authorization header and use it to identify the user, while falling back to cookie-based auth for web. The frontend now always sends the access token for all API requests, ensuring robust, secure authentication across platforms.
• Stack UX:
  • Challenge: Showing too many cards at once felt cluttered.
  • Solution: Only the top 1–2 cards are rendered, with the next card slightly scaled/offset for depth.
• Skip Gesture:
  • Challenge: Users wanted a way to skip a card without swiping left/right.
  • Solution: Added a swipe-down gesture with a "Skip" indicator and animation.
• Visual Feedback:
  • Challenge: Users needed clear feedback for each swipe direction.
  • Solution: Added animated "Like", "Nope", and "Skip" indicators that fade in as you swipe.
• RLS/Service Client:
  • Challenge: RLS policies blocked swipe inserts from the backend.
  • Solution: The backend now uses a Supabase service client (with the service key) for privileged operations, bypassing RLS and ensuring swipes are always recorded.

Next Steps

• Record swipes: POST to /api/swipes on each swipe (left, right, down), with optimistic UI updates and error handling.
• Add filter support (genre, year, etc.) to the movie query and UI.
• Further polish: accessibility, progress indicators, and more testing.
• Continue to refine the backend for performance and security.

---

Stay tuned for more updates as we continue to refine the DAGGH movie swiping experience!