Vibe Code Prompt: Swipe to Give Farcaster MiniApp

Build a mobile-responsive Tinder-style project discovery and tipping app within the existing Celo Composer Farcaster MiniApp template.

App Overview

Create a single-page application where users swipe through Celo ecosystem projects, save their favorites, and tip them directly using their connected Farcaster wallet.

Required Dependencies

Add these to package.json:

• framer-motion for swipe animations
• lucide-react for icons (already in shadcn)
• shadcn/ui components: Card, Button, Avatar, Badge, Input, Toast

Data Source & API Integration

Fetch projects from: https://gapapi.karmahq.xyz/v2/communities/celo/projects?page=1&limit=100&programIds=944_42161

Sort projects by: numTransactions (descending - most transactions first)

Key data fields to display:

• details.title - Project name
• details.description - Project description
• details.logoUrl - Project logo
• percentCompleted - Completion percentage
• numTransactions - Number of supporters
• numMilestones - Total milestones
• endorsements.length - Number of endorsements
• grantNames - Recent grants (show first 3)
• members array - Find the member with role: "owner" for tip recipient address

Core Features to Build

1. Main Interface - Card Stack

• Display 3 cards max in a stack (current card + 2 behind it)
• Cards behind the front card should be slightly smaller and offset
• Only the front card should be swipeable
• Use smooth animations for card transitions

2. Project Card Content

Design each card to show:

┌─────────────────────────────────┐
│  [Logo] Project Name      [%]   │
│                                 │
│  Brief description (2-3 lines   │
│  max with line clamp)           │
│                                 │
│  📊 X supporters                │
│  🎯 Y% complete                 │
│  ⭐ Z endorsements              │
│  🏆 Recent grants: Grant1...    │
│                                 │
│  [Pass Button] [Save Button]    │
└─────────────────────────────────┘

3. Swipe Mechanics

• Swipe right or tap "Save": Add to saved projects
• Swipe left or tap "Pass": Skip project
• Swipe threshold: 100px horizontal movement
• Visual feedback: Show green "SAVE" overlay on right swipe, red "PASS" on left
• Card rotation: Rotate card ±15 degrees based on swipe direction
• Smooth animations: Use spring animations for all transitions

4. State Management

Track these states:

• Current card index
• Saved projects array
• Passed projects array
• Loading states
• Error states

5. Saved Projects View

After swiping through all cards OR when user taps "View Saved" button:

Show saved projects list with:

┌─────────────────────────────────┐
│ Your Saved Projects (X)         │
│ ─────────────────────────────── │
│ [Logo] Project Name             │
│        Brief description        │
│        Suggested: $25           │
│        [$5][$10][$25][$50][Custom] │
│        [💰 Tip Now]             │
│ ─────────────────────────────── │
│ [Tip All Projects - $Total]     │
└─────────────────────────────────┘

6. Tipping Integration

Use Farcaster MiniApp SDK for payments:

// Import from existing template
import { sdk } from '@farcaster/frame-sdk';

// For individual tips
await sdk.actions.sendToken({
  token: selectedToken, // 'USDC', 'cUSD', or 'CELO'
  amount: tipAmount.toString(),
  recipient: ownerAddress, // from project.members where role === 'owner'
  chainId: '42220' // Celo mainnet
});

Token options:

• USDC (default)
• cUSD
• CELO

Tip amounts:

• Suggested: $5, $10, $25, $50
• Custom amount input field
• Default suggestion: $25

7. UI States & Navigation

Main view states:

1. Loading projects
2. Swiping through cards
3. All cards completed → auto-redirect to saved projects
4. Saved projects view

Navigation elements:

• "View Saved Projects (X)" button always visible at top
• Back to swiping button when viewing saved projects (if cards remaining)

8. Error Handling & Empty States

API failure:

• Show error message with "Retry" button
• Toast notification for network errors

Tip failure:

• Show error toast with "Try Again" option
• Don't remove project from saved list

Empty states:

• No projects loaded: "Unable to load projects. Please try again."
• No saved projects: "No projects saved yet. Start swiping to discover projects!"
• All cards swiped, none saved: "No projects saved. Start over to discover more!"

9. Mobile Responsiveness

Breakpoints:

• Mobile (≤768px): Full width cards, 90vw max-width
• Desktop (>768px): Fixed 400px width, centered

Touch optimization:

• 44px minimum touch targets
• Smooth gesture handling
• Prevent scroll interference during swipes

10. Animation Details

Use Framer Motion for:

• Card swipe gestures with physics
• Stack reordering when card removed
• Smooth transitions between views
• Loading animations
• Success/error feedback animations

Animation specs:

• Spring transitions with natural damping
• Card rotation: -15° to +15° range
• Scale effect: Cards behind scaled to 0.95 and 0.9
• Opacity: Background cards at 0.9 and 0.8 opacity

Technical Requirements

Data fetching:

• Fetch on app load with loading state
• Sort by numTransactions descending
• Handle API errors gracefully

State persistence:

• No local storage needed
• State resets on page refresh (acceptable)

Performance:

• Smooth 60fps animations
• Lazy load project images
• Efficient re-renders

Styling:

• Use shadcn/ui components
• Mobile-first responsive design
• Consistent spacing and typography
• High contrast for accessibility

Success Criteria

The app should:

1. Load projects from the API and display them in a swipeable card interface
2. Allow smooth swiping with visual feedback
3. Track saved vs passed projects
4. Show saved projects with tipping interface
5. Process tips using Farcaster wallet with token selection
6. Handle errors gracefully with retry mechanisms
7. Work smoothly on both mobile and desktop
8. Have a polished, professional appearance using shadcn components

Build this as a single React component that can be dropped into the existing Celo Composer Farcaster template's main page. If you are not sure about something, please ask before proceeding.