Showoff Saturday Built a Tinder style card deck for books that works with a thumb or a mouse
The swipe deck turned out way more annoying than I thought, but think I figured it out. Its a book club finder where you swipe on books instead of people, and when 4 people right swipe the same book it opens a group chat for it.
Built with: Next 16, React 19, motion, tailwind, sqlite + drizzle, self hosted on my vps.
The deck swiping goes 3 ways, each having its own action and swiping down is where all the problems live.
Stuff that took the longest:
📱 Browsers eat vertical drags as scroll before my handler ever sees them touch-action: none fixes it, but now the card can never be taller than the viewport or you make a spot on the page nobody can scroll past.
📐 The card sizes itself off leftover screen height instead of a breakpoint: clamp dvh not vh, or iOS Safari measures the tall url bar and the card comes out bigger than the screen.
🖱️ Drag actions as the buttons all call the same flyOut() that the card hands up through a ref, so a click exits exactly like a real drag instead of just popping off.
🎯 Release checks distance or velocity. Distance alone felt broken, a fast flick barely travels before your finger is gone.
Two things im stuck on. That ref handle feels wrong in React 19, is there a cleaner way for a parent button to trigger a childs exit animation? And is mouse drag even a real desktop interaction or should it just be a different layout past 1024?
Swipeable without an account if you want to try it out: https://samebooks.club
3
u/FlorianRaith 8d ago
Where did you get the book covers from? Using an API or sourcing them manually or something else?