AvanzaCast - Plataforma de Streaming SaaS Modular# AvanzaCast - Vite prototype

📋 DescripciónPequeño prototipo con Vite + React + TypeScript + Tailwind (estilo Vristo minimal).

Plataforma de streaming en vivo tipo StreamYard con arquitectura modular SaaS:

• 🎬 Transmisión multistream (YouTube, Facebook, Twitch, LinkedIn)Instalación:

• 🎥 Estudio virtual con WebRTC

• 💬 Chat en tiempo real```bash

• 📹 Grabación y almacenamiento en la nubecd vite-app

• 👥 Gestión de invitados y colaboraciónnpm install

• 🎨 Personalización de escenas con overlaysnpm run dev

• 💳 Sistema de suscripciones y pagos```

🏗️ Arquitectura MonorepoEl servidor dev arranca en http://localhost:5173 por defecto.

Este proyecto usa npm workspaces con 4 módulos principales:

packages/
├── landing-page/      # Landing y registro (Puerto 3000)
├── backend-api/       # API REST + WebSocket (Puerto 4000)
├── broadcast-studio/  # Estudio de streaming (Puerto 3001)
└── admin-panel/       # Panel SaaS admin (Puerto 3002)

🌐 Landing Page (Puerto 3000)

• Tech: React 18 + Vite + Tailwind CSS
• Función: Marketing, registro, login
• Rutas: /, /login, /register

🔌 Backend API (Puerto 4000)

• Tech: Node.js 20 + Express + TypeScript + Prisma + PostgreSQL + Redis
• Función: Autenticación JWT, gestión usuarios, pagos, integraciones
• Endpoints: /api/v1/*

🎬 Broadcast Studio (Puerto 3001)

• Tech: React 18 + Vite + WebRTC + Socket.IO + Tailwind CSS
• Función: Estudio virtual, multistream, escenas, overlays
• Características: Transmisión en vivo, gestión de cámaras y audio

⚙️ Admin Panel (Puerto 3002)

• Tech: React 18 + Vite + Ant Design + Recharts
• Función: Panel SaaS (usuarios, suscripciones, analytics, facturación)
• Características: Dashboard, gestión usuarios, planes de pago

🚀 Instalación y Desarrollo

Requisitos

• Node.js >= 20.0.0
• npm >= 10.0.0
• PostgreSQL 15
• Redis 7

Instalación

# Instalar todas las dependencias del monorepo
npm install

Desarrollo

# Todos los módulos simultáneamente
npm run dev

# Módulos individuales
npm run dev:landing    # Landing page (3000)
npm run dev:api        # Backend API (4000)
npm run dev:studio     # Broadcast Studio (3001)
npm run dev:admin      # Admin Panel (3002)

Build

# Build completo
npm run build

# Build individual
npm run build:landing
npm run build:api
npm run build:studio
npm run build:admin

📦 Stack Tecnológico

Frontend (Landing, Studio, Admin)

• React 18.2.0
• Vite 4.3.9
• TypeScript 5.2.2
• Tailwind CSS 3.4.16
• React Router v6
• Ant Design 5.x (Admin Panel)
• Zustand (Estado global)

Backend API

• Node.js 20 LTS
• Express 4.18
• TypeScript 5.2.2
• Prisma ORM
• PostgreSQL 15
• Redis 7
• Socket.IO 4.6
• JWT + bcrypt
• Stripe (pagos)

Integraciones

• YouTube Data API v3
• Facebook Graph API
• Twitch API
• LinkedIn API
• AWS S3 / MinIO (almacenamiento)
• FFmpeg (procesamiento video)

📚 Documentación Completa

Consulta ARCHITECTURE.md para:

• Diagramas de arquitectura
• Flujos de autenticación
• Estructura de base de datos
• API endpoints completos
• Variables de entorno
• Patrones de comunicación entre módulos

🔐 Configuración de Backend

1. Copia el archivo de ejemplo:

cp packages/backend-api/.env.example packages/backend-api/.env

2. Configura las variables de entorno (DATABASE_URL, JWT_SECRET, etc.)

3. Ejecuta migraciones de Prisma:

cd packages/backend-api
npm run prisma:migrate

📈 Roadmap MVP

• Estructura monorepo
• Landing page funcional
• Backend API base
• Broadcast Studio UI base
• Admin Panel UI base
• Autenticación JWT completa
• Base de datos PostgreSQL + Prisma
• WebRTC streaming
• Multistream (YouTube, Facebook)
• Sistema de suscripciones Stripe
• Grabación en la nube

🤝 Contribución

1. Fork el proyecto
2. Crea una rama feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📄 Licencia

Proyecto privado - Todos los derechos reservados