BaseTip
Social Tipping, transparently tip your favorite streamers through Base!
Demo
About
The problem it solves BaseTip solves the problem of supporting content creators directly with cryptocurrency in a user-friendly way. Traditional donation methods often involve high fees and complex setup processes. BaseTip enables viewers to send ETH tips to their favorite Twitch streamers with just a few clicks, creating a more direct relationship between creators and their audience. The platform also gamifies tipping with NFT rewards, encouraging community support. User Interaction and Data Flow Connect Wallet – Users visit BaseTip and connect their Coinbase Wallet using OnchainKit components Browse Streamers – Users can explore featured streamers or search for a specific Twitch username. Watch Stream – The selected Twitch stream is embedded directly in the app, allowing users to watch without leaving BaseTip. Send a Tip – Users choose a preset or custom ETH amount, add an optional message, and confirm the transaction. Blockchain Transaction – The tip is sent via Base Sepolia, and a real-time tip overlay appears on the stream. Track Transactions – Users can view their tip history, monitor pending transactions, and check their leaderboard ranking. Earn Rewards – Top tippers receive exclusive NFT badges, showcasing their support on-chain. The project architecture and development process 1. Users connect their wallet to the BaseTip platform using MetaMask or Coinbase Wallet 2. They can browse popular streamers or search for a specific Twitch username 3. When they find a streamer they want to support, they can watch their stream directly in the app 4. To send a tip, users select an amount (preset or custom) and optionally add a message 5. The transaction is sent to the Base Sepolia network and appears as an overlay on the stream 6. Users can view their transaction history and see their position on the leaderboard 7. Top tippers receive NFT rewards that showcase their support Data Flow - Wallet connection via Web3 providers - Twitch API integration for stream embedding - On-chain transactions for tips - Local storage for transaction history - Visual feedback through UI overlays ### The project architecture and development process BaseTip is built as a Next.js application with a focus on client-side functionality. The core architecture includes: 1. **Frontend**: React components with Tailwind CSS for styling and shadcn/ui for UI elements 2. **Blockchain Integration**: Direct wallet connection using window.ethereum for transaction execution 3. **State Management**: React hooks and context for managing wallet connection and application state The development process involved: - Setting up the Next.js application with Tailwind CSS - Implementing wallet connection functionality - Creating the Twitch stream viewer component - Building the tipping mechanism with transaction execution - Adding social features like the leaderboard and transaction history - Implementing NFT rewards visualization - Adding network status indicators and transaction monitoring Product Integrations **Base Sepolia Testnet**: The primary blockchain network for executing transactions **Twitch API**: Used to embed live streams directly in the application **MetaMask/Coinbase Wallet**: For wallet connection and transaction signing **Base Explorer**: For transaction verification and tracking Key differentiators and uniqueness of the project - **Seamless Integration**: Combines Twitch streaming with crypto tipping in one interface - **Visual Feedback**: Real-time tip overlays that appear on the stream for social recognition - **NFT Rewards**: Gamified tipping with collectible NFT badges for top supporters - **Cross-Platform**: Works across different devices and wallet providers - **Low Barrier to Entry**: Simple UI that makes crypto tipping accessible to non-technical users - **Social Elements**: Leaderboards and transaction history with social interactions Trade-offs and shortcuts while building - **Testnet Focus**: Currently using Base Sepolia testnet instead of mainnet for safety and testing - **Local Storage**: Using browser storage instead of a database for simplicity, which limits data persistence - **Mock Data**: Some elements like the leaderboard use mock data rather than real-time blockchain data - **Limited Wallet Support**: Currently focused on MetaMask and Coinbase Wallet compatibility - **Single Recipient**: All tips currently go to a single test address instead of individual streamer wallets Additional Features Mainnet deployment with real ETH transactions Backend integration for better data persistence Streamer automatically onboarding flow to register their own wallets Enhanced analytics for streamers to track their tips Mobile app development for broader accessibility Integrate all networks and allow this to be implemented not just in twitch but youtube and kick along wiht many other platforms