Opensource Orchestra

Demo

About

# Open Source Orchestra Portal - Hackathon Submission ## **🎵 One-Liner** A decentralized platform transforming how musicians connect and support each other in Web3 through a pure giving economy - no fees, no tokens, just music and community. ## **🎯 Problem Statement** The current Web3 music landscape is dominated by speculation, tokenization, and rent-seeking platforms that extract value from artists. Musicians need authentic spaces to connect, perform, and receive direct support without intermediaries or financial gatekeepers. ## **💡 Solution** The Open Source Orchestra Portal creates a virtual concert hall where: - **Artists perform live** on an interactive digital stage with Twitch/Youtube streaming integration - **Musicians queue** in a visual "orchestra pit" waiting their turn to perform - **Fans gift directly** to artists via ETH with zero platform fees across 5+ chains - **ENS profiles** provide decentralized identity (artist.catmisha.eth) - **Community thrives** through a global donations feed and artist discovery ## **🚀 Key Innovations** 1. **Interactive Stage Metaphor**: Visual orchestra pit with clickable artist avatars positioned on music stands 2. **Pure Giving Economy**: 100% of donations go to artists - no monetization or tokenization 3. **Multi-Chain Gifting**: Seamless ETH transfers across Mainnet, Base, Optimism, Arbitrum, Polygon 4. **ENS Integration**: Subdomain-based musician profiles with customizable avatars, headers, and social links 5. **Live Performance Hub**: Real-time "Now Playing" tracking with integrated streaming ## **🛠 Technical Stack** - **Frontend**: Next.js 15, TypeScript, TailwindCSS v4, shadcn/ui - **Web3**: RainbowKit, wagmi, viem, Porto (universal accounts) - **Infrastructure**: Turborepo monorepo, Bun runtime - **Blockchain**: Multi-chain support with ENS on mainnet ## **📊 Impact & Traction** - ✅ Live at 2 Devcon conferences - ✅ Deployed at 20+ ETH Global hackathons - ✅ Active community across Zuzalu-inspired gatherings - ✅ Zero fees collected - 100% community-owned ## **🎪 What's Next** - Major activation planned for Devconnect World Fair - IPFS integration for decentralized media storage - Enhanced live performance features - Global artist discovery network ## **🌍 Why This Matters** We're proving that Web3 can enable human connection without financialization. By treating music as the shared language it's always been - not as an asset to monetize - we're building the cultural infrastructure for a more collaborative Ethereum ecosystem. ## **🔗 Links** - Live Demo: [your-deployment-url] - GitHub: [github-repo] - ENS: orchestra.eth (example) ## **🏆 Hackathon Fit** This project embodies Web3's original vision: decentralization, community ownership, and human coordination without rent-seeking intermediaries. We're not building another NFT platform - we're creating a space where musicians gather, perform, and support each other just as they have throughout human history, now enhanced by Ethereum's capabilities. --- **The Open Source Orchestra: Where Web3 meets the timeless tradition of musicians gathering to create something beautiful together. No tokens. No fees. Just music.**

How it's made

# How It's Made: Open Source Orchestra Portal ## 🎵 Project Overview The Open Source Orchestra Portal is a decentralized Web3 platform that transforms how musicians connect and support each other through a pure giving economy. Built during ETH Global New Delhi 2025, this project embodies the spirit of collaboration and community-first development. ### Core Technologies #### Frontend Stack - **Next.js 15** with App Router for modern React development - **TypeScript** in strict mode for type safety - **TailwindCSS v4** for utility-first styling - **shadcn/ui** components built on Radix UI primitives - **Bun** as the JavaScript runtime and package manager #### Web3 Integration - **RainbowKit** for beautiful wallet connection UI with 50+ wallet support - **wagmi** for React hooks and Ethereum interactions - **viem** as the TypeScript-first Ethereum client - **Porto** for universal account support (next-gen Ethereum accounts) ## 🌐 Multi-Chain Web3 Implementation ### Supported Networks We implemented seamless multi-chain support across: - **Mainnet** - Primary Ethereum network for ENS - **Base** - Coinbase's L2 for low-cost transactions ### Zero-Fee Donation System One of our most notable implementations is the **zero-fee donation system**. Unlike traditional platforms that take 5-30% cuts, we route 100% of donations directly to artists: ## 🎯 ENS Integration & Custom L2 Contracts ### The "Durin" Package We created custom smart contracts for ENS subdomain management on L2s, packaged as "Durin": #### L2Registry Contract (`packages/durin/src/L2Registry.sol`) ```solidity contract L2Registry is ERC721, Initializable, L2Resolver { bytes32 public baseNode; uint256 public totalSupply; mapping(bytes32 node => bytes name) public names; mapping(address registrar => bool approved) public registrars; // Combined Registry, BaseRegistrar and PublicResolver functionality } ``` **Why Custom Contracts?** - Standard ENS contracts are gas-expensive on mainnet - We needed subdomain management (artist.opensourceorchestra.eth) - Combined multiple ENS contract functions for efficiency - L2-optimized for cheaper transactions ### ENS Profile System Artists get decentralized profiles with: - **Custom subdomains**: `artist.opensourceorchestra.eth` - **Avatar images** stored on IPFS/Arweave - **Header banners** for visual branding - **Social links** (Twitter, Instagram, SoundCloud) - **Text records** for bio and contact info Implementation in `apps/web/src/components/ens/SubdomainRegistration.tsx`: ```typescript const registerMutation = useRegisterSubdomain(); const setPrimaryMutation = useSetPrimaryName(); // Two-phase registration process: // 1. Register subdomain on L2 // 2. Set as primary name for reverse resolution ``` ## 🎨 UI/UX Innovation ### Interactive Orchestra Pit Visualization One of our most unique features is the **interactive orchestra pit** where musicians appear as avatars on music stands: ```typescript // 3D card effects for musician avatars export function CardContainer({ children, className, containerClassName }: { children: React.ReactNode; className?: string; containerClassName?: string; }) { const containerRef = useRef<HTMLDivElement>(null); // Mouse tracking for 3D transform effects const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => { // Calculate rotation based on mouse position // Apply 3D transforms for interactive feel }; } ``` ### Global Donations Feed Real-time donation tracking across all artists: ```typescript export function GlobalDonationsFeed() { const { data: donations } = useDonations(); return ( <div className="space-y-4"> {donations?.map((donation) => ( <DonationCard key={donation.id} artist={donation.artist} amount={donation.amount} timestamp={donation.timestamp} /> ))} </div> ); } ``` ### Theme System Dark/light mode support using `next-themes`: ```typescript // apps/web/src/components/providers/theme-provider.tsx export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return <NextThemesProvider {...props}>{children}</NextThemesProvider>; } ``` ## 🔧 Notable Technical Decisions & Hacks ### 1. Porto Universal Accounts **Decision**: Integrate Porto for next-gen account support **Why**: Prepares for Account Abstraction future, better UX for non-crypto users **Implementation**: ```typescript // Simple one-line integration Porto.create(); ``` ### 2. File Upload **Hack**: Direct browser uploads to S3 (o3) for artist content ```typescript import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3"; import { getSignedUrl } from "@aws-sdk/s3-request-presigner"; // Generate presigned URLs for direct uploads const uploadUrl = await getSignedUrl(s3Client, putCommand, { expiresIn: 3600 }); ``` ## 🎪 Unique Features & Innovations ### 1. Zero-Fee Architecture **Innovation**: No platform fees, no tokens, no speculation **Implementation**: Direct wallet-to-wallet transfers **Impact**: Artists keep 100% of donations ### 2. Interactive Stage Metaphor **Innovation**: Visual orchestra pit with clickable musician avatars **Implementation**: CSS transforms + React state management **Impact**: Makes Web3 interactions feel natural and musical ### 3. ENS-First Identity **Innovation**: Every artist gets a .eth subdomain **Implementation**: Custom L2 contracts for cheap subdomain minting **Impact**: Decentralized identity without high gas costs ## 🌟 Partner Technology Benefits ### ENS Integration **Benefit**: Decentralized identity and human-readable addresses **Implementation**: Custom L2 contracts for affordable subdomains **Impact**: Artists get professional web3 identity ### Base L2 Integration **Benefit**: Low-cost transactions for donations and profile updates **Implementation**: Multi-chain wagmi configuration **Impact**: Makes micro-donations economically viable ## 🎯 Hackathon-Specific Hacks ### 1. Rapid Prototyping with shadcn/ui Used pre-built, accessible components to focus on Web3 functionality rather than building UI from scratch. ### 2. Mock Data for Demo Created realistic mock data for donations feed and artist profiles to demonstrate the full user experience. ### 3. Progressive Web3 Enhancement Built the app to work without wallet connection first, then enhance with Web3 features - better for demos and user onboarding. ## 🎵 Community Impact & Future ### Real-World Usage - **Live deployments** at 2 Devcon conferences - **Community events** at 20+ ETH Global hackathons - **Zero platform fees** collected - truly community-owned - **Organic growth** through musician word-of-mouth ### Technical Roadmap - **IPFS integration** for decentralized media storage - **Live streaming** integration with WebRTC - **Global discovery** algorithm for artists - **Mobile app** with React Native ### Philosophy We're proving that Web3 can enable human connection without financialization. Music has been a shared language since the beginning of civilization - we're just adding the infrastructure to help musicians connect across the decentralized web. --- **Built with ❤️ during ETH Global New Delhi 2025** As seen in previous ETH Global Hackathons and Devcons, The Open-Source Orchestra can be activated by having a space in Ethereum gatherings where instruments are accesisble and permission-less to "Play IT together" *The Open Source Orchestra: Where Web3 meets the timeless tradition of musicians gathering to create something beautiful together. No tokens. No fees. Just music.*