Where Drag Comes to Play - A decentralized video streaming platform built for drag artists and their communities.
- Short-form content (Bytes): Vertical videos up to 60 seconds
- Long-form content: Horizontal videos from 1 to 60 minutes
- Livepeer-powered: High-quality video transcoding and streaming
- Multi-bitrate support: Adaptive streaming for all devices (720p, 480p, 360p)
- Creator livestreams: Any creator can start their own stream with OBS/Streamyard
- Official Dragverse stream: Featured on homepage with real-time status detection
- RTMP ingest: Professional streaming setup with stream keys
- Live status detection: Backend API checks stream status every 30 seconds
- Crypto tipping: ETH and USDC tips on Base Network
- Fiat payments: Stripe integration (coming soon)
- Creator dashboard: Track earnings, views, likes, and engagement
- Direct transfers: No middleman - tips go directly to creators
- Privy Auth: Email, Google, and Farcaster login
- Web3 wallets: MetaMask, WalletConnect, Coinbase Wallet
- Decentralized identity: DID-based user profiles
- Dashboard: Analytics, earnings, and content management
- Upload validation: Automatic duration and file size checks
- Video management: Edit metadata, view stats, delete content
- Earnings tracking: Combined crypto + fiat revenue display
- Hall of Fame: Top creators leaderboard
- Notifications: Real-time alerts for tips, likes, comments, follows
- Follow system: Build your audience
- Comments & likes: Engage with content
- Dark theme: Purple gradient brand colors (#EB83EA, #7c3aed)
- Responsive design: Mobile-first, works on all devices
- Smooth animations: Polished transitions and interactions
- Hero slider: Featured content carousel on homepage
- Next.js 16.1.2: App Router, React Server Components, Turbopack
- React 19: Latest features and performance improvements
- TypeScript: Full type safety
- Tailwind CSS: Utility-first styling
- React Hot Toast: Beautiful notifications
- Livepeer Studio: Video transcoding, streaming, and livestream management
- HLS streaming: HTTP Live Streaming protocol
- TUS protocol: Resumable video uploads
- Privy: Authentication provider (email, social, wallet)
- Ceramic Network: Decentralized data storage (configured but not yet deployed)
- ComposeDB: GraphQL schemas for user data
- Base Network: Layer 2 Ethereum (low fees, fast transactions)
- Wagmi: React hooks for Ethereum (integration ready)
- Viem: TypeScript Ethereum library
- Stripe: Fiat payment processing (Phase 7B)
- Bluesky, Farcaster, Lens: Social media cross-posting (Phase 6)
- Ghost/Substack: Creator blogging (Phase 11)
- Node.js 18+ and npm
- A Livepeer Studio API key (get one here)
- A Privy App ID (sign up here)
- Clone the repository
git clone https://github.com/yourusername/dragverse-salti.git
cd dragverse-salti- Install dependencies
npm install- Set up environment variables
cp .env.example .env.localEdit .env.local and add your API keys:
# Authentication (PUBLIC)
NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id
# Livepeer (PRIVATE - server-only)
LIVEPEER_API_KEY=your_livepeer_api_key
# Ceramic (PRIVATE - optional for now)
CERAMIC_URL=https://ceramic-clay.3boxlabs.com
CERAMIC_ADMIN_SEED=your_ceramic_seed- Run the development server
npm run dev- Open your browser Navigate to http://localhost:3000
dragverse-salti/
├── src/
│ ├── app/
│ │ ├── (platform)/ # Authenticated routes
│ │ │ ├── dashboard/ # Creator dashboard
│ │ │ ├── live/ # Livestream creation
│ │ │ ├── notifications/ # Notification center
│ │ │ ├── upload/ # Video upload
│ │ │ ├── watch/[id]/ # Video player
│ │ │ └── ...
│ │ └── api/ # Backend API routes
│ │ ├── stream/ # Livestream APIs
│ │ ├── tips/ # Tipping APIs
│ │ ├── upload/ # Upload APIs
│ │ └── video/ # Video metadata APIs
│ ├── components/
│ │ ├── home/ # Homepage components
│ │ ├── layout/ # Navigation, sidebar
│ │ ├── video/ # Video player, tip modal
│ │ └── dashboard/ # Dashboard components
│ ├── lib/
│ │ ├── ceramic/ # Ceramic/ComposeDB schemas
│ │ ├── livepeer/ # Livepeer utilities
│ │ ├── privy/ # Auth hooks
│ │ └── store/ # State management
│ └── styles/
│ └── globals.css # Global styles
├── composites/ # Ceramic GraphQL schemas
├── public/ # Static assets
└── scripts/
└── setup-ceramic.sh # Ceramic deployment script
These are prefixed with NEXT_PUBLIC_ and are visible to the browser:
NEXT_PUBLIC_PRIVY_APP_ID: Your Privy application ID
These are NOT prefixed and only available server-side:
LIVEPEER_API_KEY: Livepeer Studio API keyCERAMIC_URL: Ceramic network endpoint (optional)CERAMIC_ADMIN_SEED: Ceramic admin seed (optional)
NEXT_PUBLIC_ prefix to sensitive API keys!
# Development
npm run dev # Start dev server with Turbopack
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
# Ceramic (when ready)
npm run ceramic:setup # Deploy Ceramic schemasWe welcome contributions! Please follow these guidelines:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
MIT License
- Livepeer: Video infrastructure and livestreaming
- Privy: Authentication and wallet management
- Ceramic Network: Decentralized data storage
- Next.js: Framework and tooling
Built with ❤️ by the Dragverse team
Where Drag Comes to Play 🎭✨