A mobile, onchain coffee ordering platform that rewards users, farmers, and coffee shops.
"But why crypto? Why USDC?"
- Eliminate 3.5% credit card fees ❌
- Universal loyalty program. $DRIP token is actually cash in your pocket 💵
- Tip a coffee grower, or drip them your saved credit card fees 👨🌾
- Shop Discovery: Find nearby coffee shops on an interactive map
- Digital Menu: Browse items, customize orders, and apply discounts
- Crypto Payments: User-friendly USDC payments on Base
- Farmer Support: Direct rewards to coffee growers
- Order Tracking: Track order status in real-time
The Drip platform uses USDC for payments:
- Lower Fees: Eliminates the 3-3.5% credit card processing fees
- Direct Rewards: Enables direct microtips to coffee growers
- Transparent Transactions: All payments are verifiable onchain
- User connects wallet or uses embedded Privy wallet
- Order total is calculated in USDC
- User approves transaction
- Payment is processed on Base
- Coffee shop receives payment notification
- Optional: Portion of savings automatically "drips" to farmer
Drip connects coffee drinkers directly with the farmers who grow their beans:
- Direct Tipping: Users can send tips directly to verified farmers
- Fee Sharing: Portion of saved credit card fees can be directed to farmers
- Transparent Impact: All contributions are trackable on-chain
- Framework: Next.js 14 (Pages Router)
- Styling: Tailwind CSS, Shadcn UI
- State Management: React Query
- Type Safety: TypeScript, Effect Schema
- Web3: Viem, Privy, Slice
- Payments: USDC, Square integration
- Database: Vercel Postgres
src/
├── components/ # UI components
├── data-model/ # Domain models and business logic
├── lib/ # Utility functions
├── pages/ # Next.js page components
├── queries/ # React Query hooks
├── services/ # Backend services
└── styles/ # Global styles- Domain-Driven Design: Business logic isolated in data-model directory
- Functional Programming: Using Effect.js for rust-like type-safe pipelines
- Branded Types: For strong typing of IDs and special strings
- React Query: For data fetching and state management
- Merchant syncs their shop, pulling in store data
- User lands on the page is identified by a JWT in their cookies
- User selects a shop and browses the menu
- User adds items to cart (stored in local storage)
- User places an order via
/order/pay - Payment is executed on-chain, and the order is sent to an external POS service provider
- Barista marks the order as complete
- External order is synced with Drip, and order is now complete
- User can view order history
- Node.js 18+ and pnpm
- Vercel account (for deployment)
- Square developer account (for payment processing)
- Slice account (for on-chain POS)
# Clone the repository
git clone https://github.com/your-username/drip-ui.git
cd drip-ui
# Install dependencies
pnpm install
# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your API keys and configuration
# Start the development server
pnpm devOpen http://localhost:3000 to see the application.
© 2024 Drip Software LLC. All rights reserved.