Pairwise Swiper Update (Angular frontend)
Budget: $250 – $750 USD
Task Doc: https://docs.google.com/document/d/1y4vRJsahufD5hHrEuhYs3k_s5ey1EN4FAjXDBn6VpwE/edit?usp=sharing
Data & Display
Input: Profiles with name, age, ~5 images, interests, bio (optional)
Process: Generate all pairs → shuffle → present sequentially
Content per Image:
Image 1: Interests (or bio if no interests)
Image 2+: Odd = interests, Even = bio
Single image: Interests only (ignore bio)
Card Interactions
Horizontal Swipe:
Manual: Drag to edge OR with velocity → selected card swipes right, other auto-swipes left
Heart button: Click heart on card → that card swipes right, other swipes left
One card at a time only
Vertical Image Scroll (per card):
Swipe: Non-sticky continuous scroll, continues during card swipe
Tap: Top 1/3 = previous snaps center, Bottom 1/3 = next snaps center, Middle = nothing
Display: 1.5 images visible, infinite loop
Pagination dots show position
Navigation:
Forward: Skip pair
Back: Return to previous, show heart on selected card
Animations
Interest tags: Fade + move up (in), fade + move down (out), stagger 50-100ms
Cards: Exit 300-400ms, entry 200-300ms
Image snap: 250ms
Tracking & Export
Track per selection: pairIndex, profileA/B (id/name/age), selectedCard, rejectedCard, method (heart/swipe/skip), timestamp, revisions
Completion: Emit JSON with all selections, skipped pairs, revised pairs, total time. Show "No more combinations" (on cards if visible, FAB chip if swiped off)
Loading
Preload: Current pair → next 2-3 → remaining. Show spinner. Failed images: Retry 2-3x → disappear → continue.
Requirements
Pixel-perfect to Figma
Existing components: FAB chip, spinner
Edge cases: Disable back on first, hide nav on single image, handle missing bio/interests
Accessibility: Keyboard nav, screen reader
Data & Display
Input: Profiles with name, age, ~5 images, interests, bio (optional)
Process: Generate all pairs → shuffle → present sequentially
Content per Image:
Image 1: Interests (or bio if no interests)
Image 2+: Odd = interests, Even = bio
Single image: Interests only (ignore bio)
Card Interactions
Horizontal Swipe:
Manual: Drag to edge OR with velocity → selected card swipes right, other auto-swipes left
Heart button: Click heart on card → that card swipes right, other swipes left
One card at a time only
Vertical Image Scroll (per card):
Swipe: Non-sticky continuous scroll, continues during card swipe
Tap: Top 1/3 = previous snaps center, Bottom 1/3 = next snaps center, Middle = nothing
Display: 1.5 images visible, infinite loop
Pagination dots show position
Navigation:
Forward: Skip pair
Back: Return to previous, show heart on selected card
Animations
Interest tags: Fade + move up (in), fade + move down (out), stagger 50-100ms
Cards: Exit 300-400ms, entry 200-300ms
Image snap: 250ms
Tracking & Export
Track per selection: pairIndex, profileA/B (id/name/age), selectedCard, rejectedCard, method (heart/swipe/skip), timestamp, revisions
Completion: Emit JSON with all selections, skipped pairs, revised pairs, total time. Show "No more combinations" (on cards if visible, FAB chip if swiped off)
Loading
Preload: Current pair → next 2-3 → remaining. Show spinner. Failed images: Retry 2-3x → disappear → continue.
Requirements
Pixel-perfect to Figma
Existing components: FAB chip, spinner
Edge cases: Disable back on first, hide nav on single image, handle missing bio/interests
Accessibility: Keyboard nav, screen reader