VIDEODANZA GENERATIVA - NFT Platform

🎨 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

# Clonar repositorio
git clone https://github.com/videodanza/nft-platform.git
cd videodanza-nft

# Instalar dependencias
npm install

# Configurar variables de entorno
cp .env.example .env.local
# Editar .env.local con tus credenciales

# Iniciar desarrollo
npm run dev
# Visitar http://localhost:3000

---

📁 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)

# BLOCKCHAIN
NEXT_PUBLIC_CONTRACT_ADDRESS=0x...
NEXT_PUBLIC_CHAIN_ID=8453
NEXT_PUBLIC_RPC_URL=https://mainnet.base.org

# PINATA (IPFS)
PINATA_API_KEY=...
PINATA_API_SECRET=...
PINATA_GATEWAY_URL=https://gateway.pinata.cloud

# BASE TESTNET (Desarrollo)
BASE_TESTNET_RPC=https://sepolia.base.org
BASE_TESTNET_CHAIN_ID=84532

# API
NEXT_PUBLIC_API_URL=http://localhost:3000/api
API_SECRET=...

# JWT
JWT_SECRET=...

---

📚 Documentación

Cada fase tiene documentación completa:

FASE 0 - Arquitectura ✅

• ARQUITECTURA.md - Diagrama técnico
• ALGORITMO_GENERATIVO.md - Lógica
• CONTRATOS.md - ERC-721
• API.md - Endpoints
• WIREFRAMES.md - UI

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

# Smart contracts
cd smart-contracts
npm run test

# Frontend
npm run test

# API integration
npm run test:api

---

🚀 Deployment

Base Testnet (Desarrollo)

npm run deploy:testnet

Base Mainnet (Producción)

npm run deploy:mainnet

Vercel (Frontend)

vercel deploy --prod

---

📊 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:

1. Agregar más videos de danza
2. Crear nuevas pistas de música
3. Implementar nuevos efectos visuales
4. Mejorar algoritmo generativo
5. Agregar interactividad

Ver CONTRIBUTING.md para detalles.

---

📜 Licencia

MIT License - Ver LICENSE

---

📞 Contacto

• Website: videodanza.art
• Twitter: @videodanzanft
• Discord: Comunidad
• Email: [email protected]

---

🎯 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

1. Determinismo: Mismo seed = misma composición siempre
2. Reproducibilidad: Verificable en blockchain
3. Escalabilidad: IPFS para descentralización
4. Seguridad: Smart contract auditado
5. UX: Streaming sin latencia desde IPFS
6. 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

• ERC-721 Standard
• IPFS Docs
• Base Blockchain
• Solidity by Example
• Web3.js Docs

---

Proyecto iniciado: 24 de Febrero 2025 Status: 🟢 FASE 0 Completada Siguiente: FASE 1 - Smart Contracts & IPFS