π CDP Challenge Participant - Building the future of Web3 coffee loyalty with Coinbase Developer Platform
π Try it now: Snap Coffee on Farcaster β
| App Landing Page | Base App Search |
|---|---|
![]() |
![]() |
| Main interface with coffee feed and snap functionality | Featured in Base Mini Apps directory |
- πΈ Snap Coffee Photos - Take photos at local coffee shops and earn $BEAN rewards
- πͺ Earn Digital Rewards - Get 3 $BEAN tokens for every verified coffee visit
- π« Collect NFT Coupons - Receive redeemable NFT coupons after 10 coffee visits
- π° Tip Coffee Creators - Support coffee influencers with seamless USDC tips via fiat-to-crypto
- π Discover Local Coffee - Explore coffee culture in your city through social feed
- β‘ Experience Base Network - Lightning-fast transactions with minimal fees
Snap Coffee participates in 4 Coinbase Developer Platform challenge tracks, showcasing the complete CDP ecosystem integration:
Challenge: Build AI agents that can autonomously perform on-chain actions
- Our Implementation: GPT-4 Vision agent validates coffee photos and distributes $BEAN rewards
- Code:
Backend/src/agents/reward-agent.ts - Key Features: Autonomous coffee validation, smart reward distribution, fraud detection
Challenge: Create Farcaster mini app with CDP wallet infrastructure
- Our Implementation: Full MiniKit integration with automated coffee shop wallets
- Code:
FrontEnd/src/hooks/useMiniKit.ts+Backend/src/services/cdp-server-wallet.ts - Key Features: Seamless Farcaster UX, server wallet automation, USDC tipping
Challenge: Streamlined fiat-to-crypto conversion with contextual UI
- Our Implementation: Multi-tab onramp widget with coffee-specific use cases
- Code:
FrontEnd/src/components/EnhancedOnrampWidget.tsx - Key Features: Contextual onboarding, tip preparation, reward top-ups
Challenge: Leverage CDP wallet infrastructure for business operations
- Our Implementation: Coffee shop server wallets with automated NFT minting
- Code:
Backend/src/controllers/agent.ts - Key Features: Per-store wallets, coupon automation, revenue analytics
graph TB
subgraph "User Layer"
U[π€ Coffee Lovers]
I[π Influencers]
S[β Coffee Shops]
end
subgraph "Frontend - Base MiniKit App"
F[π± React + Vite App]
M[π MiniKit SDK]
O[π³ Enhanced Onramp]
W[π¦ Wallet Integration]
end
subgraph "Backend Services"
A[π€ CDP Agent Kit]
SW[πͺ Server Wallets]
API[π Node.js API]
FB[π₯ Firebase Storage]
end
subgraph "Base Network"
B[β‘ Base Blockchain]
SC[π Smart Contracts]
T[πͺ $BEAN Token]
N[π« NFT Coupons]
end
subgraph "External Services"
FC[π‘ Farcaster]
GM[πΊοΈ Google Maps]
OA[π§ OpenAI GPT-4]
CB[π° Coinbase Pay]
end
U --> F
I --> F
S --> F
F <--> M
F <--> O
F <--> W
F <--> API
API <--> A
API <--> SW
API <--> FB
A --> B
SW --> B
B <--> SC
SC <--> T
SC <--> N
A <--> OA
API <--> FC
API <--> GM
O <--> CB
style A fill:#00D4FF
style SW fill:#00D4FF
style M fill:#0052FF
style O fill:#0052FF
style B fill:#0052FF
graph LR
subgraph "π± Frontend"
MK[MiniKit SDK<br/>useMiniKit.ts]
EO[Enhanced Onramp<br/>EnhancedOnrampWidget.tsx]
OW[Basic Onramp<br/>OnrampWidget.tsx]
end
subgraph "π€ Backend AI"
AK[Agent Kit<br/>reward-agent.ts]
AC[Agent Controller<br/>agent.ts]
end
subgraph "πͺ Infrastructure"
SW[Server Wallets<br/>cdp-server-wallet.ts]
AR[Agent Routes<br/>agents.ts]
end
subgraph "β‘ Base Network"
BC[Smart Contracts]
TK[$BEAN Tokens]
NFT[NFT Coupons]
end
MK -->|USDC Tips| BC
EO -->|FiatβCrypto| BC
OW -->|Card Payments| BC
AK -->|Autonomous Actions| BC
AC -->|API Gateway| AK
SW -->|Automated Minting| BC
AR -->|Route Management| SW
AK -.->|GPT-4 Vision| OpenAI[π§ OpenAI]
SW -.->|Wallet Creation| CDP[π¦ CDP Platform]
MK -.->|Social Layer| Farcaster[π‘ Farcaster]
EO -.->|Payment Flow| Coinbase[π³ Coinbase Pay]
style AK fill:#00D4FF
style SW fill:#00D4FF
style MK fill:#0052FF
style EO fill:#0052FF
sequenceDiagram
participant U as π€ User
participant F as π± Frontend
participant M as π MiniKit
participant A as π€ Agent Kit
participant S as πͺ Server Wallet
participant B as β‘ Base Network
participant FC as π‘ Farcaster
Note over U,FC: 1. User Onboarding
U->>F: Open Snap Coffee App
F->>M: Initialize MiniKit SDK
M->>FC: Connect to Farcaster
FC-->>M: User Profile & Wallet
M-->>F: Wallet Connected
F-->>U: Welcome + Explore Feed
Note over U,FC: 2. Coffee Snap & Validation
U->>F: Take Coffee Photo
F->>F: Add Location + Details
U->>F: Submit Coffee Snap
F->>A: Send for AI Validation
A->>A: GPT-4 Vision Analysis
A->>B: Distribute $BEAN Rewards
B-->>A: Transaction Confirmed
A-->>F: Validation + Reward Result
F-->>U: β
Coffee Validated!
Note over U,FC: 3. Social Sharing & Tips
F->>FC: Post to Farcaster Feed
FC-->>F: Post Created
U->>F: View Creator Content
U->>F: Tip Creator (Fiat)
F->>M: Process USDC Tip
M->>B: Execute Tip Transaction
B-->>M: Tip Sent
M-->>F: Tip Confirmed
F-->>U: β
Creator Tipped!
Note over U,FC: 4. Reward Milestone
A->>A: Check User Progress
A->>S: User Hit 10 Coffees
S->>B: Mint NFT Coupon
B-->>S: NFT Minted
S-->>A: Coupon Created
A-->>F: π« NFT Coupon Ready!
F-->>U: Congratulations!
Note over U,FC: 5. Coupon Redemption
U->>F: Show QR Code at Shop
F->>A: Validate Redemption
A->>B: Burn/Mark NFT Used
B-->>A: Redemption Confirmed
A-->>F: β
Free Coffee!
F-->>U: Enjoy Your Reward!
sequenceDiagram
participant U as π€ User
participant F as π± Frontend
participant O as π³ Onramp Widget
participant CB as π¦ Coinbase Pay
participant B as β‘ Base Network
participant M as π MiniKit
Note over U,M: Enhanced Onramp Experience
U->>F: Want to Tip Creator
F->>F: Check USDC Balance
F->>O: Show Contextual Onramp
O->>O: "Top up for tipping"
U->>O: Select $25 for Tips
O->>CB: Open Coinbase Pay
CB->>U: Enter Payment Method
U->>CB: Complete Purchase
CB->>B: Send USDC to Wallet
B-->>CB: Transaction Confirmed
CB-->>O: Purchase Success
O-->>F: Balance Updated
F->>M: Enable Tip with New Funds
M-->>U: β
Ready to Tip!
Note over U,M: Multiple Use Cases
rect rgb(240, 248, 255)
Note over O: Tab 1: Tip Creators
Note over O: Tab 2: Top Up Rewards
Note over O: Tab 3: General Wallet
end
Snap Coffee is a social mini app and on-chain loyalty platform built on Base to onboard millions of new Web3 users by targeting one of the largest and most passionate global consumer segments: daily coffee drinkers, over 1 billion people worldwide.
We start with a simple, familiar action: taking a photo of your coffee. Every verified coffee purchase earns on-chain points, and after 10 coffees, users receive an NFT coupon for their 11th coffee, instantly redeemable at participating cafΓ©s.
Traditional loyalty programs are broken:
- Paper cards get lost, damaged, or forgotten πβ
- CafΓ© owners lack reliable customer data and insights πβ
- Loyalty isn't engaging β it's transactional and disconnected from the coffee culture ββ
Using Base for low-cost, fast, and scalable transactions, Snap Coffee creates a geolocated, on-chain customer database enriched with demographic insights. This enables cafΓ© owners to:
- β‘ Track visits in real time
- π― Understand customer behavior by location, time of day, and preferences
- π Run targeted marketing campaigns and personalized rewards
Snap Coffee generates revenue through:
- πΌ B2B SaaS subscriptions for cafΓ©s to access loyalty, analytics, and marketing tools
- π³ Transaction fees for each redeemed NFT coupon
- πͺ Brand sponsorships from coffee, equipment, and lifestyle companies
By fixing the loyalty gap and creating a shareable, gamified coffee culture, Snap Coffee drives mass adoption of Base, turning a daily habit into global on-chain engagement.
- πΈ Instagram-style Coffee Feed - Share and discover local coffee culture
- πͺ Earn $BEAN Tokens - Get rewards for every verified coffee purchase
- π« NFT Coupon Rewards - Redeem your 11th coffee with blockchain-backed coupons
- π° Creator Tipping - Support coffee influencers with fiat-to-crypto payments
- π Social Rankings - Compete on local coffee leaderboards
- π Real-time Analytics Dashboard - Track visits, peak hours, popular drinks
- π― Customer Insights - Understand demographics, preferences, and behavior patterns
- πͺ Marketing Campaigns - Run targeted promotions and loyalty programs
- π NFT Coupon System - Automated redemption with fraud protection
- π Revenue Growth - Increase customer retention and average visit value
- π Web3 Onboarding - Seamless transition from Web2 to Web3 through familiar actions
- β‘ Base Network Integration - Fast, cheap transactions for global scale
- π‘οΈ Privacy-First - Location data hashed, no raw GPS coordinates on-chain
- π€ AI Content Moderation - Automated fraud detection and quality control
- Framework: React 18 + Vite + TypeScript
- Styling: Tailwind CSS + shadcn/ui components
- Web3: OnchainKit for wallet integration
- Farcaster: MiniKit SDK (
useMiniKit.ts) - Payments: Enhanced Onramp widget (
EnhancedOnrampWidget.tsx) - State: React Query + local storage
- Mobile: PWA-ready responsive design optimized for Farcaster frames
LoyaltyToken.sol // ERC20 $BEAN rewards system
RewardsController.sol // Coffee verification & reward distribution
CouponNFT.sol // ERC721 redeemable coffee coupons
SnapRegistry.sol // Event logging, analytics & anti-fraud| Contract | Address | BaseScan Explorer | Status |
|---|---|---|---|
| πͺ LoyaltyToken ($BEAN) | 0xC74C0f76acA119B8e68F7A4f7580E80f0BE42752 |
π View Contract β | β Verified |
| π― RewardsController | 0xE3b30Cc77dfbEBC69C3c1e40703C792A934dE834 |
π View Contract β | β Verified |
| π« CouponNFT | 0xD887274dF28Ac21efafFeB8bc421B5305884fCAa |
π View Contract β | β Verified |
| π SnapRegistry | 0x384EB8166edf41e5a4cf2134fFf873459BD78EfC |
π View Contract β | β Verified |
π All Contracts Verified: Complete source code available on BaseScan with full transparency
Key Features:
- πͺ $BEAN Token: ERC20 rewards with 3 BEAN per verified coffee
- π« CouponNFT: ERC721 redeemable coffee coupons after 10 visits (10M max supply)
- π SnapRegistry: Event logging, user analytics, venue insights, and anti-fraud protection
- π‘οΈ Anti-fraud: Daily limits (10 coffees/user), 30min cooldowns per location
- π₯ Merchant System: Registration and analytics for coffee shops
- π Full Transparency: Complete source code verified on BaseScan
- Runtime: Node.js + TypeScript
- AI Agent: CDP Agent Kit with GPT-4 Vision (
reward-agent.ts) - Wallets: CDP Server Wallet v2 service (
cdp-server-wallet.ts) - API: Agent controller endpoints (
agent.ts) - Payments: Enhanced CDP Onramp integration
- Storage: Firebase + IPFS for media with on-chain content hashes
- π€ Autonomous AI Agents: Coffee validation + reward distribution
- πͺ Per-Store Server Wallets: Automated coffee shop infrastructure
- π Farcaster Integration: Native MiniKit SDK for seamless UX
- π³ Contextual Onramp: Multi-use case fiat-to-crypto conversion
- Indexing: CDP Data SQL API for on-chain events
- Events: SnapPosted, RewardGranted, CouponRedeemed, Tipped
- Privacy: Venue IDs (hashed) instead of raw coordinates
- Analytics: Real-time dashboard for coffee shop insights
- Node.js 18+
- npm/yarn/pnpm
- CDP API keys (Get them here)
- OpenAI API key for Agent Kit
- Firebase project for storage
# Clone the repository
git clone https://github.com/your-username/snap-coffee
cd snap-coffee
# Install dependencies for both frontend and backend
cd FrontEnd && npm install
cd ../Backend && npm installCopy the example environment file and configure CDP settings:
cd FrontEnd
cp .env.example .envKey variables to configure:
# Coinbase Ecosystem (Base Sepolia - Verified Contracts)
VITE_BEAN_TOKEN_ADDRESS=0xC74C0f76acA119B8e68F7A4f7580E80f0BE42752
VITE_NFT_COUPON_ADDRESS=0xD887274dF28Ac21efafFeB8bc421B5305884fCAa
VITE_USDC_TOKEN_ADDRESS=0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
VITE_ONRAMP_APP_ID=your_coinbase_onramp_app_id
VITE_MINIKIT_ENABLED=true
# Base Network
VITE_BASE_RPC_URL=https://sepolia.base.org
VITE_CHAIN_ID=84532Configure CDP Agent Kit and Server Wallets:
cd Backend
cp .env.example .envKey variables for CDP integration:
# CDP Agent Kit
CDP_API_KEY_NAME=your_cdp_api_key_name
CDP_API_KEY_PRIVATE_KEY=your_cdp_api_key_private_key
OPENAI_API_KEY=your_openai_api_key
# Server Wallets
CDP_WALLET_ID=your_server_wallet_id
CDP_NETWORK=base-sepolia
# Smart Contracts (Base Sepolia - Verified)
LOYALTY_TOKEN_ADDRESS=0xC74C0f76acA119B8e68F7A4f7580E80f0BE42752
COUPON_NFT_ADDRESS=0xD887274dF28Ac21efafFeB8bc421B5305884fCAa# Terminal 1: Start backend API with Agent Kit
cd Backend && npm run dev
# Terminal 2: Start frontend MiniKit app
cd FrontEnd && npm run devnpm run dev # Start development server
npm run build # Production build
npm run preview # Preview production build
npm run lint # Run ESLint- Connect wallet via OnchainKit (smart wallet creation)
- Grant location permissions or manual cafΓ© search
- Explore local coffee feed powered by CDP Data API
- Take coffee photo with camera integration
- Select cafΓ© location with auto-suggestion
- Add coffee type, rating, and pairing recommendation
- AI validation + on-chain event logging
- Receive $BEAN tokens for verified posts
- Track progress toward 10-coffee milestone
- Social engagement through likes and tips
- Automatic NFT coupon minting at 10 coffees
- QR code redemption at participating cafΓ©s
- On-chain verification and fraud protection
- Support coffee influencers with fiat payments
- CDP Onramp converts to USDC on Base
- Transparent tipping leaderboards
File: Backend/src/agents/reward-agent.ts
Our autonomous AI agent handles the complete coffee validation and reward cycle:
export class CoffeeRewardAgent {
private agent: CdpAgent;
private agentkit: CdpAgentkit;
// GPT-4 Vision validates coffee photos autonomously
async validateAndReward(params: {
imageUrl: string;
userAddress: string;
venueName: string;
// ... more params
}): Promise<AgentResult>
}Key Capabilities:
- π§ GPT-4 Vision Analysis: Validates coffee authenticity, venue matching, quality assessment
- β‘ Autonomous Transactions: Directly distributes $BEAN tokens without manual intervention
- π‘οΈ Fraud Detection: AI-powered spam and duplicate detection
- π Smart Rewards: Context-aware reward amounts (new venue bonuses, streak multipliers)
File: Backend/src/services/cdp-server-wallet.ts
Automated wallet infrastructure for every coffee shop:
export class CDPServerWalletService {
// Creates dedicated wallet for each coffee shop
async createStoreWallet(params: {
storeName: string;
storeId: string;
city: string;
state: string;
placeId: string;
}): Promise<StoreWalletResult>
// Automated NFT coupon minting
async mintStoreCoupon(storeWallet: Wallet, userAddress: string): Promise<MintResult>
}Infrastructure Benefits:
- π¦ Per-Store Wallets: Each coffee shop gets dedicated on-chain wallet
- π« Automated NFT Minting: No manual intervention for coupon creation
- π Revenue Analytics: Track redemptions, tips, engagement per store
- β‘ Gas Optimization: Batch transactions and subsidized gas fees
File: FrontEnd/src/hooks/useMiniKit.ts
Seamless Farcaster experience with native Web3 UX:
export const useMiniKit = () => {
// Native Farcaster wallet connection
const connectWallet = useCallback(async () => {
return await connectWallet();
}, []);
// USDC tipping with MiniKit
const sendUSDCTip = useCallback(async (params: {
toAddress: string;
amount: string;
creatorName: string;
}) => {
const { transactionId } = await tokenTransfer(transferParams);
return { success: true, transactionHash: transactionId };
}, []);
}MiniKit Advantages:
- π― Native Farcaster UX: Users never leave the familiar Farcaster environment
- β‘ Instant Transactions: Base network enables sub-second transaction finality
- π Social Integration: Coffee posts automatically sync with Farcaster feed
- π° Embedded Tipping: Native USDC transfers without external wallet switching
File: FrontEnd/src/components/EnhancedOnrampWidget.tsx
Context-aware fiat-to-crypto conversion with coffee-specific UX:
const EnhancedOnrampWidget = ({ context }: { context: OnrampContext }) => {
const tabs = [
{ id: 'tip', label: 'β Tip Creators', description: 'Support coffee influencers' },
{ id: 'rewards', label: 'πͺ Top Up Rewards', description: 'Buy more $BEAN tokens' },
{ id: 'wallet', label: 'π° Add to Wallet', description: 'General USDC purchase' }
];
// Context-aware onboarding and amounts
const getContextualAmounts = (context: string) => {
switch (context) {
case 'tip': return [5, 10, 25]; // Tip-appropriate amounts
case 'rewards': return [25, 50, 100]; // Reward bundle amounts
default: return [50, 100, 250]; // General wallet amounts
}
};
};Enhanced Features:
- π± Contextual UI: Different interfaces for tipping, rewards, general wallet funding
- π― Smart Amounts: Pre-configured amounts for different use cases
- π Onboarding Flow: Guided experience explains USDC, Base, and wallet concepts
- β Success Integration: Seamlessly returns to intended action after purchase
File: SmartContracts/contracts/CouponNFT.sol
Deployed: 0xD887274dF28Ac21efafFeB8bc421B5305884fCAa
Complete ERC721 NFT coupon system with coffee shop loyalty features:
contract CouponNFT is ERC721, ERC721URIStorage, ERC721Burnable, AccessControl {
struct CouponMetadata {
uint256 coffeeShopsEarned; // Number of visits to earn this
uint256 discountPercent; // Discount percentage (e.g., 20%)
uint256 expiryTimestamp; // Expiration timestamp
string venueId; // Associated venue ID
bool isRedeemed; // Redemption status
}
function mintCoupon(address to, uint256 coffeeShopsEarned,
uint256 discountPercent, uint256 expiryDays,
string calldata venueId) external;
}Advanced Features:
- πͺ Per-Store Coupons: Venue-specific or general redeemable coupons
- β° Expiration System: Configurable expiry (1-365 days)
- π Batch Minting: Mint up to 100 coupons in single transaction
- π‘οΈ Fraud Protection: Role-based access control and anti-replay
- π Analytics: Track user coupons, venue coupons, redemption rates
- π° Flexible Discounts: 1-100% configurable discount percentages
- π― Milestone Rewards: Automatic minting after 10 coffee visits
- β‘ Fast & Cheap: Sub-second finality, <$0.01 transactions enable micro-rewards
- π Ethereum Compatible: Full EVM compatibility with existing tooling
- ποΈ Developer Experience: OnchainKit, MiniKit, and CDP tools built for Base
- π Scalability: Handles millions of daily coffee transactions globally
- π Instant Rewards: No waiting for confirmations on $BEAN token distribution
- π° Affordable Tipping: Enable $1-5 tips without prohibitive gas fees
- π± Mobile First: Optimized for mobile wallet and Farcaster integration
- π Global Reach: Low costs enable worldwide coffee community participation
- πͺ Coffee Shop Adoption: Low transaction costs make loyalty programs profitable
- π³ Fiat-to-Crypto Bridge: Coinbase ecosystem integration simplifies onboarding
- π Real-time Analytics: Fast block times enable live dashboard updates
- π― Targeted Campaigns: Efficient micro-transactions enable granular marketing
Base is the only L2 that combines technical excellence with a comprehensive ecosystem (CDP, OnchainKit, MiniKit, Farcaster integration) purpose-built for consumer applications like Snap Coffee.
- React frontend with mobile-first UI optimized for Farcaster
- Camera integration and photo workflow
- Progress tracking and localStorage persistence
- Instagram-style feed with coffee cards
- Base network smart contracts (BEAN Token + RewardsController)
- OnchainKit wallet integration
- ERC20 $BEAN token implementation (3 BEAN per coffee reward)
- Smart contract rewards controller with anti-fraud protection
- CDP Agent Kit: GPT-4 Vision autonomous validation (
reward-agent.ts) - CDP Server Wallets: Per-store wallet automation (
cdp-server-wallet.ts) - MiniKit SDK: Native Farcaster integration (
useMiniKit.ts) - Enhanced Onramp: Contextual fiat-to-crypto (
EnhancedOnrampWidget.tsx) - Agent API endpoints for autonomous operations (
agent.ts)
- ERC721 NFT coupon system: Complete with automated minting and redemption (Contract β)
- Coffee shop analytics dashboard with CDP wallet data
- Advanced AI moderation pipeline with Agent Kit
- B2B SaaS subscription system
- Brand partnership integration
- Mobile app (React Native/PWA)
- Advanced gamification features
- Multi-language support
- Enterprise cafΓ© management tools
- Cross-chain compatibility research
Target: Independent cafΓ©s and small chains
Pricing: $49-199/month per location
- Basic analytics and loyalty tools
- Customer demographic insights
- Marketing campaign management
- NFT coupon redemption system
Model: 2-3% fee on NFT coupon redemptions
- Automated fee collection via smart contracts
- Volume discounts for high-traffic locations
- Premium features unlock at higher tiers
Partners: Coffee brands, equipment manufacturers, lifestyle companies
- Sponsored content in coffee feed
- Branded NFT coupon designs
- Influencer partnership programs
- Event and campaign sponsorships
- Total Addressable Market: $45B+ global coffee shop market
- Daily Active Users Potential: 100M+ coffee drinkers worldwide
- Web3 Adoption: Bridge mainstream users to Base ecosystem
- Network Effects: Each new cafΓ© and user increases platform value
We welcome contributions to make Snap Coffee the leading Web3 loyalty platform!
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
- TypeScript for type safety
- ESLint + Prettier for code formatting
- Comprehensive testing for smart contracts
- Mobile-first responsive design
- Accessibility compliance (WCAG 2.1)
This project is licensed under the MIT License - see the LICENSE file for details.
- π Live App: Snap Coffee on Farcaster
- π Website: snapcoffee.xyz (coming soon)
- π± App Store: Download from App Store (coming soon)
- π¦ Twitter: @SnapCoffeeBase
- π¬ Discord: Join Community
- π§ Contact: hello@snapcoffee.xyz
- π Base: Built on Base
Built with β€οΈ for the coffee community on Base
Turning daily coffee moments into on-chain memories, one snap at a time.

