WalrENS

Problem Statement

WalrENS is a web application that bridges traditional web hosting and blockchain infrastructure by combining Walrus storage, Vercel deployment, and Ethereum Name Service (ENS) resolution.Traditional web hosting relies on centralized servers that can be censored, taken down, or become inaccessible. While blockchain storage exists, it's often complex to use and doesn't provide the performance users expect. WalrENS solves this by creating a hybrid approach: Decentralized Storage: Content stored on Walrus for censorship resistance and permanent accessPerformance: Websites deployed on Vercel's CDN for fast loading Access: Use ENS names (like yourname.eth) to access sites Workflow: Upload and deploy without blockchain expertise requiredTechnical ArchitectureFrontend (Next.js + React) UI: Interface built with Tailwind CSS File Upload: Drag & drop with preview and validation Progress: Live updates during upload and deployment Workflow: Multi-step wizard from upload to live site Wallet Integration: Connect with MetaMask and other Web3 walletsBackend APIs (Next.js API Routes) Upload API (/api/upload): Handles file processing and Walrus integration Deploy API (/api/deploy): Manages Vercel deployment automation Resolve API (/api/resolve): ENS name resolution and validation Proxy API (/api/proxy): Routes ENS-based requests to live sitesWalrENS represents a shift in web hosting, combining centralized performance with decentralized resilience. By making decentralized website deployment as simple as traditional hosting while maintaining blockchain technology benefits, WalrENS enables users to create uncensorable, permanently accessible websites without requiring deep technical knowledge of blockchain infrastructure.The project demonstrates how Web3 technologies can be integrated with existing web infrastructure to create solutions that are both user-friendly and technically robust, paving the way for a more decentralized and resilient internet.

Solution

WalrENS is built on a modern full-stack architecture using Next.js 14 with TypeScript as the core framework, providing both the frontend interface and serverless API backend. The frontend leverages React 18 with Tailwind CSS for styling and integrates heavily with Web3 technologies including Wagmiv2 and Viem for Ethereum interactions, RainbowKit for wallet connectivity, and custom ENS contract integrations for domain management. The application implements a sophisticated dual-deployment strategy where websites aresimultaneously stored on Walrus decentralized storage and optionally deployed to Vercel's traditional hosting infrastructure, creating a hybridapproach that bridges Web2 and Web3 accessibility.The most technically challenging aspect was creating seamless integrationbetween multiple complex systems that weren't designed to work together. Wehad to solve several particularly hacky problems: first, implementing custom ENS contenthash encoding for Walrus blob references since no official codec exists yet, requiring us to create a custom "walrus://" format. Second, building a robust file processing pipeline that handles everything from ZIP archives to individual HTML files, automatically detecting content types and optimizing for both Walrus storage and web serving. The Vercel API integration required extensive format conversionsince their API expects files as arrays with specific naming conventionsthat differed from our internal object-based structure. Perhaps the mostinnovative solution was creating a content proxy system that makes Walrus-stored websites accessible through standard web browsers while maintaining the benefits of decentralized storage. We also implemented intelligent caching layers, optimistic UI updates for deployment feedback,and a comprehensive error handling system that gracefully manages failuresacross multiple external services, resulting in a system that feels liketraditional web hosting while being fully decentralized under the hood.