Building a Production-Ready Card Swiper Component: A Vue 3 & TypeScript Case Study

At Betway Africa, a teammate was building a "swipe bet" feature—users swipe cards left or right to make betting decisions. The interaction needed to feel smooth, work on touch and desktop, and handle edge cases.

The initial attempts hit common issues:
- Janky animations that didn't feel natural
- Touch events conflicting with mouse events
- Cards not stacking correctly
- No way to undo actions

- Accessibility gaps

Rather than debug line-by-line, I built a complete, reusable component as a reference. This let us see the full pattern, understand the decisions, and adapt it to the betting feature.