Mobile app experience improvements

[nicholaspsmith]

Summary

Improve the mobile experience to make MemoryLoop feel more native-like on smartphones and tablets.

Motivation

• 60%+ of study sessions happen on mobile devices
• Mobile-first experience increases usage frequency
• Quick study sessions during commute/breaks
• Native-like feel improves engagement

Current Issues on Mobile

• Touch targets too small (< 44px)
• Horizontal scrolling issues
• Card flip animation not optimized
• Keyboard covers input fields
• No swipe gestures for navigation

Proposed Improvements

Touch Optimization

• Minimum 44x44px touch targets
• Adequate spacing between interactive elements
• Large, thumb-friendly buttons

Swipe Gestures

• Swipe left/right to rate cards (1-4)
• Swipe up to reveal answer
• Swipe down to skip card

Mobile Navigation

• Bottom navigation bar (thumb-reachable)
• Hamburger menu for secondary actions
• Swipe from edge for back navigation

Study Session Improvements

• Full-screen study mode
• Larger text on cards
• Swipe-based rating
• Progress indicator always visible

Technical Implementation

Swipe Detection

import { useSwipeable } from 'react-swipeable'

function FlashcardMobile({ onRate }) {
  const handlers = useSwipeable({
    onSwipedLeft: () => onRate(1),  // Again
    onSwipedRight: () => onRate(4), // Easy
    onSwipedUp: () => revealAnswer(),
  })
  
  return <div {...handlers}>...</div>
}

Responsive Breakpoints

• sm (640px): Phone portrait
• md (768px): Phone landscape / Tablet
• lg (1024px): Desktop

Performance

• Touch event optimization (passive listeners)
• Reduced animations on low-end devices
• Lazy load off-screen content

Dependencies

• react-swipeable for gesture handling
• Consider framer-motion for native-feel animations

Testing

• Test on iOS Safari, Android Chrome
• Test with various screen sizes
• Touch gesture testing

Acceptance Criteria

• All touch targets ≥ 44px
• Swipe gestures work for rating
• Bottom navigation on mobile
• Full-screen study mode
• No horizontal scroll issues
• Keyboard doesn't cover inputs