A Tinder-style swipe-based e-commerce app — swipe right to wishlist, swipe up to cart, swipe left to skip.
Built with React + TypeScript + Vite, with Capacitor support for iOS mobile deployment.
Most e-commerce apps overwhelm users with grids of products and cluttered filters. SwipeShop flips the experience — one product at a time, gesture-driven decisions. Swipe right to save, swipe up to buy, swipe left to skip. It's faster, more engaging, and built mobile-first. Think Tinder, but for shopping.
- Swipe Gestures — swipe right to wishlist, swipe up to add to cart, swipe left to skip
- Double Tap — quick-add to wishlist without swiping
- Category Tabs — filter by Electronics, Clothing, Beauty, Sports, Home, Accessories, and more
- Real-time Search — instant product filtering as you type
- Cart & Wishlist — full state management with add, remove, and clear actions
- Toast Notifications — instant feedback on every swipe and action
- Checkout Flow — order summary with subtotal, shipping, and order placement
- Responsive Design — mobile-first, works across all screen sizes
- iOS Support — Capacitor integration for native iOS deployment
| Layer | Tech |
|---|---|
| Frontend | React 18 · TypeScript · Vite |
| UI Components | shadcn/ui · Radix UI |
| Styling | Tailwind CSS · tailwindcss-animate |
| State Management | React Context API · useReducer |
| Routing | React Router v6 |
| Data Fetching | TanStack React Query |
| Forms | React Hook Form · Zod |
| Mobile | Capacitor (iOS) |
SwipeShop/
├── src/
│ ├── components/
│ │ ├── ProductCard.tsx # Swipe card with gesture engine
│ │ ├── CategoryTabs.tsx # Category filter tabs
│ │ ├── SearchBar.tsx # Real-time search bar
│ │ └── Navigation.tsx # Bottom navigation bar
│ ├── pages/
│ │ ├── Home.tsx # Main swipe feed + filtering logic
│ │ ├── Wishlist.tsx # Saved products view
│ │ ├── Cart.tsx # Cart with checkout flow
│ │ └── NotFound.tsx # 404 page
│ ├── context/
│ │ └── ShopContext.tsx # Global state with useReducer
│ ├── data/
│ │ └── products.ts # Product catalog + category definitions
│ └── hooks/
│ ├── use-mobile.tsx # Mobile detection hook
│ └── use-toast.ts # Toast notification hook
├── capacitor.config.ts # iOS mobile config
├── tailwind.config.js
└── vite.config.ts
- Built the ProductCard swipe engine — touch and mouse gesture detection, directional swipe logic (left/right/up), overlay animations, and double-tap support
- Developed CategoryTabs component and category filtering logic on the Home page
- Built the SearchBar component with real-time product filtering
- Assembled the product catalog (
products.ts) — product data, categories, and image mapping - Handled UI polish — swipe overlays, animations, responsive layout, and Tailwind styling across components
- Architected the global state management using React Context API and useReducer — cart, wishlist, and viewed products state
- Built the Cart page — item listing, price calculation, remove functionality, and checkout flow
- Built the Wishlist page — saved products view, move-to-cart action, and empty state handling
- Set up App routing using React Router v6 and composed the top-level provider structure
- Configured Capacitor for iOS mobile deployment and managed the build pipeline
- Node.js v18+
- npm or bun
git clone https://github.com/Ankitnotnani/SwipeShop.git
cd SwipeShopnpm installnpm run devOpen http://localhost:5173 in your browser.
| Gesture | Action |
|---|---|
| Swipe Right → | Add to Wishlist |
| Swipe Up ↑ | Add to Cart |
| Swipe Left ← | Skip product |
| Double Tap | Add to Wishlist |
Works with both touch (mobile) and mouse drag (desktop).
npm run buildOutput goes to dist/. Deploy to Vercel, Netlify, or any static host.
MIT License