A static React-based kiosk application for a snack cart, similar to McDonald's menu kiosks. Customers can browse menu items, add them to a cart, and pay using Bitcoin Lightning Network via the CLINK protocol.
- Responsive Design: Works on tablets (primary), phones, and laptops
- Menu Display: Grid layout of menu items with images, descriptions, and prices
- Shopping Cart: Add items, adjust quantities, view totals in USD and sats
- Payment Processing: Uses @shocknet/clink-sdk for CLINK protocol payments
- Price Conversion: Automatically fetches BTC price from Coinbase API and converts USD to satoshis
- Touch-Friendly: Large buttons and touch targets optimized for kiosk use
- Install dependencies:
npm install-
Configure menu: Edit
dist/menu.jsonto add your menu items and offer string. -
Start development server:
npm run dev- Build for production:
npm run buildThe built files will be in the dist/ directory, ready to serve on your tablet or web server.
The menu.json file contains:
menuItems: Array of menu items with:id: Unique identifiername: Item namedescription: Item descriptionprice: Price in USDimage: Path to image (should be inpublic/images/)
offer: Offer string for payment processing- Can be a noffer string (starts with "noffer1...")
- Or a JSON string with
{"pubkey": "...", "relay": "...", "offer": "..."}
- React: UI framework
- Vite: Build tool and dev server
- @shocknet/clink-sdk: Payment processing via CLINK protocol
- react-icons: Icon library
- qrcode.react: QR code generation for invoices
- Coinbase API: BTC/USD exchange rate
The app uses colors extracted from the PlebCafe logo:
- Primary Yellow:
#E8B923 - Accent Yellow:
#F5D042 - Dark Background:
#2c2c2c - Light Background:
#ffffff
- Build the application:
npm run build - Serve the
dist/directory using any static file server - For tablet deployment, you can use a simple HTTP server or deploy to a web hosting service
MIT