TreeHole dApp

TreeHole is a revolutionary Web3 application that combines blockchain-based payments with real-time voice communication. Users can start listening sessions with a random 10-15 minute timer that can be extended by paying THT tokens through smart contracts. The platform features peer-to-peer voice chat using WebRTC technology, integrated with MetaMask wallet connectivity and deployed smart contracts on Sepolia testnet. The payment system includes a 50/50 split between listeners and treasury, with advanced features like token approval, transaction monitoring, and real-time balance updates. Built with vanilla JavaScript, Vite, Tailwind CSS, and Ethers.js, TreeHole offers a modern glassmorphism UI with comprehensive error handling, performance monitoring, and responsive design for seamless user experience in the decentralized web

TreeHole implements a sophisticated peer-to-peer audio streaming architecture using the libp2p JavaScript library as the core networking stack, enabling direct browser-to-browser communication without centralized servers. The frontend is built with vanilla JavaScript ES6+, styled with Tailwind CSS, and bundled with Vite for optimal development and production performance.

The audio streaming pipeline leverages the MediaRecorder API for high-fidelity microphone capture combined with MediaSource API for low-latency playback, utilizing WebM containers with Opus codec compression for efficient transmission. We implemented Gossipsub pubsub protocol for both real-time audio data distribution and automated peer discovery, enabling seamless connection establishment between browsers.

For robust NAT traversal, we deployed circuit relay servers running on Node.js that function as intermediaries to establish direct WebRTC connections between browsers behind firewalls or restrictive networks. The system dynamically discovers relay nodes through a distributed configuration mechanism using GitHub Gist as a decentralized address registry, allowing runtime updates without application redeployment.

A particularly innovative technical solution involves our custom buffered chunking implementation with 250ms recording intervals to optimize the latency-reliability tradeoff, paired with an advanced SourceBuffer management system that handles network jitter by intelligently queuing and reordering audio chunks before playback.

Blockchain integration utilizes Ethers.js v6 for comprehensive Web3 functionality, including MetaMask wallet connectivity and smart contract interactions on Sepolia testnet. The PaymentSplitter contract, built with Solidity and OpenZeppelin libraries using Foundry, implements secure token transfers with reentrancy protection and automated 50/50 revenue splitting between listeners and treasury.

The application features a custom reactive state management system with event-driven architecture, comprehensive error handling, and performance monitoring. Notable technical achievements include deterministic timer synchronization with local storage persistence, automated token approval workflows, and sophisticated connection quality assessment with automatic reconnection capabilities."**

🔧 Enhanced Technical Stack:

| Layer | Technologies | Implementation Details | |-------|-------------|----------------------| | P2P Networking | libp2p, Gossipsub, WebRTC | Browser-to-browser streaming, Pubsub for discovery | | Audio Pipeline | MediaRecorder API, MediaSource API, WebM/Opus | 250ms chunking, Jitter buffer management | | NAT Traversal | Circuit Relay, Node.js servers | GitHub Gist discovery, Dynamic relay updates | | Frontend | Vanilla JS, Tailwind CSS, Vite | Glassmorphism UI, Responsive design, ES6+ | | Web3 Integration | Ethers.js v6, MetaMask | Wallet connectivity, Transaction monitoring | | Smart Contracts | Solidity, Foundry, OpenZeppelin | PaymentSplitter, TestToken, Security-first | | Architecture | Event-driven, Reactive State | Pub/Sub pattern, Local persistence, Error boundaries |

💡 Advanced Technical Innovations:

• Decentralized relay discovery via GitHub Gist for dynamic infrastructure updates
• Optimized audio chunking balancing latency (250ms) with reliability
• Intelligent jitter compensation through custom SourceBuffer queue management
• Hybrid networking approach combining libp2p reliability with WebRTC performance
• Security-first smart contracts with OpenZeppelin standards and comprehensive testing

This enhanced version provides a complete technical overview combining both the original TreeHole architecture and the advanced P2P streaming capabilities. Ready for professional submission!** 🚀