Backstage

Problem Statement

This project is a Next.js-based web application that creates a "Patreon for Creator Coins" experience, enabling creators to monetize content through blockchain-based token ownership on the Zora protocol.Core Functionality:For Creators:Upload and manage digital content (currently images only) to IPFS via PinataCreate token-gated access controls tied to their Zora creator coinsSet minimum token ownership requirements for content accessView analytics on their coin holders and supportersManage multiple creator coins from a unified dashboardFor Supporters/Fans:Access exclusive content based on coin ownership levelsBrowse creator profiles and discover new creatorsTrack their coin portfolios and supported creatorsPurchase your favorite creator's coins using fiatTechnical Architecture:Frontend: Built with Next.js 15, TypeScript, and TailwindCSS, featuring a responsive design with sidebar navigation and mobile-optimized layouts.Authentication: Integrates Privy for wallet-based authentication, supporting external wallets and cross-app wallet linking with Zora.Blockchain Integration: Uses the Zora Coins SDK to interact with creator coins, check balances, and verify ownership for content access.Content Storage: Files are encrypted and stored on IPFS via Pinata, with metadata stored in a PostgreSQL database using Prisma ORMAccess Control: Implements sophisticated token-gating where files are stored encrypted on IPFS and only decrypted when ACL (Access Control List) conditions are met. The system verifies users' creator coin holdings against the minimum token requirements set by creators before providing decryption access, ensuring content remains secure even if IPFS links are discovered.Key Features:Infinite scroll content feedsReal-time balance checking and coin portfolio managementCreator discovery through top creators showcaseWallet management for both primary and Zora walletsSecure file upload with encryption and conditional decryptionThis platform essentially bridges traditional content creator monetization models with Web3 token economics, allowing creators to build sustainable revenue streams through their community's token ownership while providing supporters with exclusive access and direct creator support mechanisms through cryptographically secured content access.

Solution

Core Tech Stack:Frontend: Next.js 15 with App Router, TypeScript, TailwindCSSAuthentication: Privy with cross-app wallet linkingDatabase: PostgreSQL with Prisma ORMFile Storage: IPFS via Pinata APIBlockchain: Zora protocol integration, Ethers.js for contract interactionsEncryption: Node.js crypto (AES-128-CBC)Purchase creator coins with fiat powered by Coinbase Onramp API.Key Architecture Decisions:Token-Gated Encryption System We implemented a content access control system where files are encrypted before IPFS upload using AES-128-CBC. The decryption endpoint at /api/decrypt-image/[cid] only serves decrypted content after verifying the user owns sufficient creator coins. This ensures content remains secure even if IPFS CIDs are discovered.Zora Cross-App Wallet Integration Used Privy's cross-app account linking to connect their Backstage embedded wallets with their Zora wallets. We hit a challenge: Zora's smart wallet addresses weren't consistently available through the Privy SDK. Our solution was to create a custom database table (wallet_links) that stores the mapping between primary wallets and Zora smart wallets, with raw SQL queries for reliability.Multi-Source Balance Verification Zora's SDK provides coin discovery through getProfileBalances() but doesn't guarantee real-time accuracy or handle all edge cases. To ensure precise access control, we implemented direct blockchain verification using Ethers.js contracts on Base network (via LlamaRPC). For each coin returned by the SDK, we make direct balanceOf(), decimals(), and owners() contract calls to verify the user's actual token holdings and creator status. This dual-layer approach ensures our token-gating is based on live blockchain data rather than potentially stale API responses, critical for secure content access.Creator Coin Purchase with Fiat We used Coinbase onramp API to allow users to purchase USDC with fiat and Zora's coin SDK to purchase creator coins with USDC, enabling a seamless experience.Notable Hacks & Workarounds:Cross-App Wallet Address Extraction Privy's cross-app wallet data structure was inconsistent. We created a robust address extraction function that tries multiple possible object properties and even parses wallet addresses from subject strings using regex.Raw SQL for Wallet Linking Used Prisma's $queryRaw and $executeRaw for wallet linking operations because the relationship between primary and Zora wallets needed custom table structure that didn't fit standard Prisma models.Contract Owner Detection To distinguish creators from supporters, we call the owners() function on coin contracts directly rather than relying on API metadata, ensuring accurate creator identification.Partner Technology Benefits:Privy: Simplified wallet authentication and cross-app linkingZora: Provided the creator coin infrastructure and GraphQL APIPinata: Reliable IPFS pinning with authenticated gatewaysThe most challenging aspect was bridging the gap between Zora's creator economy and secure content delivery - requiring custom encryption, multi-source balance verification, and robust wallet address handling across different authentication systems.