🎨 Descripción
Plataforma de experiencias interactivas de videodanza donde cada NFT mint genera una combinación única de videos, música y narrativa basada en blockchain.
Usuario selecciona preferencias
↓
Sistema generativo crea composición única (determinística)
↓
Usuario ve video en vivo desde IPFS
↓
Usuario mintea NFT en Base blockchain
↓
NFT con metadata inmutable en IPFS
🚀 Quick Start
Requisitos Previos
- Node.js 18+
- npm o yarn
- Wallet Base (MetaMask, Rainbow Kit, etc.)
- Clave API Pinata Cloud
Instalación
git clone https://github.com/videodanza/nft-platform.git
cd videodanza-nft
npm install
cp .env.example .env.local
npm run dev
📁 Estructura del Proyecto
videodanza-nft/
├── docs/
│ ├── ARQUITECTURA.md # Diagrama técnico completo
│ ├── ALGORITMO_GENERATIVO.md # Lógica de combinaciones
│ ├── CONTRATOS.md # ERC-721 specification
│ ├── API.md # Endpoints detallados
│ ├── WIREFRAMES.md # UI mockups
│ └── FASE0_RESUMEN.md # Completitud de Fase 0
│
├── smart-contracts/ # FASE 1
│ ├── contracts/
│ │ └── VideoDanzaNFT.sol # Contrato ERC-721
│ ├── scripts/
│ │ └── deploy.js # Deployment script
│ ├── test/
│ │ └── VideoDanzaNFT.test.js # Test suite
│ ├── hardhat.config.js
│ └── package.json
│
├── backend/ # FASE 2 (Next.js API)
│ ├── api/
│ │ ├── generate.ts # POST /api/generate
│ │ ├── composition/
│ │ │ └── [seed].ts # GET /api/composition/:seed
│ │ ├── ipfs/
│ │ │ ├── upload.ts # POST /api/ipfs/upload
│ │ │ └── metadata/
│ │ │ └── [cid].ts # GET /api/ipfs/metadata/:cid
│ │ ├── mint/
│ │ │ └── prepare.ts # POST /api/mint/prepare
│ │ ├── nfts/
│ │ │ ├── [walletAddress].ts # GET /api/nfts/:walletAddress
│ │ │ └── [tokenId].ts # GET /api/nft/:tokenId
│ │ └── health.ts # GET /api/health
│ │
│ ├── services/
│ │ ├── generativeEngine.ts # Lógica de generación
│ │ ├── pinataService.ts # Integración Pinata
│ │ ├── blockchainService.ts # Queries a blockchain
│ │ └── videoComposer.ts # Composición de videos
│ │
│ ├── utils/
│ │ ├── seedGenerator.ts # Hash + seed
│ │ ├── ipfsGateway.ts # URLs de IPFS
│ │ ├── contractABI.ts # ABI ERC-721
│ │ └── validators.ts # Validaciones
│ │
│ └── config/
│ ├── constants.ts # Constantes
│ └── networks.ts # Config redes
│
├── frontend/ # FASE 3 (React)
│ ├── pages/
│ │ ├── _app.tsx # Provider global
│ │ ├── index.tsx # Landing
│ │ ├── app.tsx # Selector de preferencias
│ │ ├── watch.tsx # Video player
│ │ ├── nft-gallery.tsx # Galería de NFTs
│ │ └── about.tsx # Información
│ │
│ ├── components/
│ │ ├── PreferenceSelector/
│ │ │ ├── GenderPicker.tsx
│ │ │ ├── PerspectivePicker.tsx
│ │ │ └── MusicTonePicker.tsx
│ │ │
│ │ ├── VideoPlayer/
│ │ │ ├── Player.tsx
│ │ │ ├── VideoLoader.tsx
│ │ │ └── MusicSync.tsx
│ │ │
│ │ ├── MintFlow/
│ │ │ ├── MintButton.tsx
│ │ │ ├── MintModal.tsx
│ │ │ └── SuccessScreen.tsx
│ │ │
│ │ ├── NFTGallery/
│ │ │ ├── GalleryGrid.tsx
│ │ │ ├── NFTCard.tsx
│ │ │ └── DetailModal.tsx
│ │ │
│ │ └── Common/
│ │ ├── Header.tsx
│ │ ├── Footer.tsx
│ │ └── LoadingSpinner.tsx
│ │
│ ├── hooks/
│ │ ├── useGenerativeEngine.ts
│ │ ├── useVideoPlayer.ts
│ │ ├── usePinataGateway.ts
│ │ ├── useWeb3Auth.ts
│ │ ├── useNFTMint.ts
│ │ └── useSeeding.ts
│ │
│ ├── styles/
│ │ ├── globals.css
│ │ └── theme.ts
│ │
│ └── public/
│ └── logo.svg
│
└── .env.example # Variables de entorno (template)
🔧 Configuración
Variables de Entorno (.env.local)
NEXT_PUBLIC_CONTRACT_ADDRESS=0x...
NEXT_PUBLIC_CHAIN_ID=8453
NEXT_PUBLIC_RPC_URL=https://mainnet.base.org
PINATA_API_KEY=...
PINATA_API_SECRET=...
PINATA_GATEWAY_URL=https://gateway.pinata.cloud
BASE_TESTNET_RPC=https://sepolia.base.org
BASE_TESTNET_CHAIN_ID=84532
NEXT_PUBLIC_API_URL=http://localhost:3000/api
API_SECRET=...
JWT_SECRET=...
📚 Documentación
Cada fase tiene documentación completa:
FASE 0 - Arquitectura ✅
FASE 1 - Blockchain & IPFS (Próxima)
- Smart contract deployment
- IPFS asset setup
- Video pinning
FASE 2 - Backend
- Generative engine
- API implementation
- Database setup
FASE 3 - Frontend
- React components
- Web3 integration
- UI/UX
FASE 4 - Interactividad
- Webcam integration
- ML5.js pose detection
- Interactive effects
FASE 5 - Minting
- Wallet connection
- Mint flow
- NFT gallery
FASE 6 - Deploy
- Optimization
- Testing
- Vercel deployment
🎬 Flujo de Uso
1. LANDING PAGE
└─> Usuario aprende sobre el proyecto
└─> Botón "Explorar Ahora"
2. PREFERENCE SELECTOR
└─> Elige género (he, she, hybrid, avatar)
└─> Elige perspectiva (dancer POV, spectator, multiple)
└─> Elige música (melancholic, joyful, abstract, ambient)
└─> Clic [GENERATE]
3. VIDEO PLAYER
└─> Sistema genera composición única (seed)
└─> Videos se cargan desde IPFS
└─> Música sincronizada
└─> Metadata visible
└─> Clic [MINT NFT]
4. MINT FLOW
└─> Conectar wallet (Web3)
└─> Confirmación de transacción (0.001 ETH)
└─> Blockchain: acuña token ERC-721
└─> Metadata guardada en IPFS
5. SUCCESS
└─> NFT acuñado exitosamente
└─> Links a Etherscan, OpenSea
└─> Ver en galería personal
6. NFT GALLERY
└─> Ver todos los NFTs acuñados
└─> Ver metadata de cada uno
└─> Compartir en redes
🏗️ Stack Técnico
Frontend
- Framework: Next.js 14 (React 18)
- Lenguaje: TypeScript
- Estilos: Tailwind CSS + Framer Motion
- Web3: Wagmi + Viem
- Wallet: RainbowKit
- Video: Streaming desde IPFS
- Audio: Web Audio API
Backend
- Runtime: Node.js
- Framework: Next.js API Routes
- Blockchain: ethers.js + Base RPC
- IPFS: Pinata SDK
- Base de datos: SQLite (desarrollo) / PostgreSQL (producción)
Smart Contracts
- Lenguaje: Solidity 0.8.20
- Estándar: ERC-721 + ERC-2981
- Librerías: OpenZeppelin
- Red: Base (8453) + Base Sepolia (84532)
IPFS
- Servicio: Pinata Cloud
- Almacenamiento: Videos + Música + Metadata
- Gateway: CDN de Pinata
🧪 Testing
cd smart-contracts
npm run test
npm run test
npm run test:api
🚀 Deployment
Base Testnet (Desarrollo)
Base Mainnet (Producción)
Vercel (Frontend)
📊 Estadísticas
- Combinaciones Únicas: 20.48 millones
- Videos en IPFS: 121 clips
- Pistas de Música: 16 (4 tonos × 4 pistas)
- Costo de Mint: 0.001 ETH (~$3.50 en Base)
- Royalties: 7.5% en ventas secundarias
- Duración promedio: 7-8 minutos por composición
🤝 Contribuir
Este proyecto es generativo y abierto a contribuciones:
- Agregar más videos de danza
- Crear nuevas pistas de música
- Implementar nuevos efectos visuales
- Mejorar algoritmo generativo
- Agregar interactividad
Ver CONTRIBUTING.md para detalles.
📜 Licencia
MIT License - Ver LICENSE
🎯 Roadmap
- Q1 2025: Fase 0-2 (Arquitectura + Smart Contract + Backend)
- Q2 2025: Fase 3-4 (Frontend + Interactividad)
- Q3 2025: Fase 5-6 (Minting + Deploy)
- Q4 2025: V1.0 en mainnet, marketing, community
📝 Notas para Desarrolladores
Principios de Desarrollo
- Determinismo: Mismo seed = misma composición siempre
- Reproducibilidad: Verificable en blockchain
- Escalabilidad: IPFS para descentralización
- Seguridad: Smart contract auditado
- UX: Streaming sin latencia desde IPFS
- Monetización: Royalties automáticos ERC-2981
Puntos Críticos
⚠️ Los videos en IPFS deben ser accesibles sin CORS issues
⚠️ El algoritmo generativo debe ser determinístico (reproducible)
⚠️ La sincronización video+audio debe ser imperceptible
⚠️ El mint debe ser atómico (todo o nada)
⚠️ Validar seed para evitar duplicados en blockchain
🎓 Learning Resources
Proyecto iniciado: 24 de Febrero 2025
Status: 🟢 FASE 0 Completada
Siguiente: FASE 1 - Smart Contracts & IPFS