SwipeShop is a modern mobile-first shopping app with a Tinder-like swiping interface for discovering products. Built with React, Tailwind CSS, and Capacitor.js, it offers a seamless experience on both desktop and mobile.
- Product Discovery: Swipe right to like, left to pass, up to add to cart
- Product Cards: Show image, name, brand, price, original price, and discount
- Likes & Cart: Manage liked products and shopping cart, with real-time feedback
- Responsive UI: Beautiful on both desktop and mobile
- Animations: Smooth transitions and swipe gestures
- Mobile App Ready: Package as an APK with Capacitor
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
- Swipe right: Like a product (adds to wishlist)
- Swipe left: Pass on a product (removes from stack)
- Swipe up: Add to cart (removes from likes if already liked)
- Toast notifications for all actions
- Responsive card layout and beautiful background
- View all liked products
- Add liked product to cart (removes from likes)
- Remove product from likes
- Sorting and filtering options
- Real-time feedback with toasts
- View products added to cart
- Increase/decrease quantity or remove items
- See total, savings, and tax
- Checkout-ready summary
- Brand logo and name
- Navigation links with icons
- Cart and likes count badges
- Mobile-friendly hamburger menu
- Built with Capacitor.js for easy APK generation
- Native-like experience on Android
- Node.js & npm
- Android Studio (for APK generation)
git clone https://github.com/yourusername/Swipe-Shop.git
cd Swipe-Shopnpm installnpm run devOpen http://localhost:5173 in your browser.
npm run buildnpm run build
npx cap sync
npx cap open androidThen build the APK in Android Studio (see README instructions above).
All screenshots used above are stored in public/screenshots/.
- React 19
- Tailwind CSS
- React Spring
- @use-gesture/react
- Capacitor.js
- Vite
MIT