RoleDesk Frontend

Documentación de Usuario

• 📖 Guía de Uso - Manual de usuario y administrador

Gestión de Producto

• 📋 Historias de Usuario - Épicas, features y criterios de aceptación

---stión de Producto**

• 📋 Historias de Usuario - Épicas, features y criterios de aceptación
• 🎯 Product Backlog - Roadmap, estimaciones y métricas avanzadas
• ⚡ Metodología Ágil - Framework Scrum/Kanban completov align="center">

Plataforma de oficina virtual moderna construida con Next.js y TypeScript para RoleDesk. Una experiencia inmersiva de colaboración en tiempo real que incluye salas interactivas, videochat avanzado y compartir pantalla.

📚 Documentación

Documentación Técnica

• 🏗️ Arquitectura Técnica - Explicación detallada del sistema
• ⚡ Optimizaciones de Performance - Benchmarks y optimizaciones
• 🔒 Seguridad - Autenticación, autorización y protecciones
• 🛠️ Guía de Desarrollo - Setup, testing y contribuciones

Documentación de Usuario

• 📖 Guía de Uso - Manual de usuario y administrador

Gestión de Producto

• � Historias de Usuario - Épicas, features y criterios de aceptación
• 🎯 Product Backlog - Roadmap, estimaciones y métricas

---

✨ Características Principales

• 🎥 Videochat Avanzado: Cámara + pantalla compartida simultáneamente
• 🗺️ Editor de Mapas: Edición colaborativa en tiempo real con PixiJS
• 🏠 Salas Virtuales: Espacios personalizables con sistema de permisos
• 👥 Presencia Multi-usuario: Avatares y posicionamiento en tiempo real
• 📱 Responsive Design: Optimizado para desktop y móviles
• 🔐 Autenticación Segura: OAuth con Google + sistema de permisos granular

---

🏗️ Stack Tecnológico

Frontend Core

• Next.js 15 - Framework React con SSR y SSG
• TypeScript 5.3 - Tipado estático para JavaScript
• React 18.2 - Biblioteca para interfaces de usuario
• Tailwind CSS 3.4 - Framework CSS utility-first

Comunicación en Tiempo Real

• Agora RTC SDK - Videochat y compartir pantalla de alta calidad
• Socket.IO Client - WebSocket para comunicación en tiempo real

Renderizado y Gráficos

• PixiJS 8.1 - Motor de renderizado 2D de alto rendimiento
• GSAP 3.12 - Animaciones suaves y transiciones

Backend y Datos

• Supabase - Backend-as-a-Service con PostgreSQL
• Zod 3.23 - Validación y parseo de esquemas TypeScript

---

🚀 Inicio Rápido

Requisitos del Sistema

Node.js >= 18.x
npm >= 9.x
Git

Instalación y Desarrollo

# Clonar repositorio
git clone https://github.com/marzo245/RoleDesk_F.git
cd RoleDesk_F

# Instalar dependencias
npm install

# Configurar variables de entorno
cp .env.local.example .env.local
# Edita .env.local con tus credenciales de Supabase y Agora

# Ejecutar en modo desarrollo
npm run dev

# Abrir en navegador
open http://localhost:3000

Scripts Disponibles

npm run dev          # Servidor de desarrollo
npm run build        # Build para producción
npm run start        # Servidor de producción
npm run lint         # Linting con ESLint
npm run type-check   # Verificación de tipos TypeScript

---

🏗️ Estructura del Proyecto

app/                    # Next.js 13+ App Router
├── auth/              # Autenticación y callbacks OAuth
├── editor/            # Editor de mapas colaborativo
├── play/              # Interface de gameplay y videochat
├── manage/            # Administración de realms
└── hooks/             # React hooks personalizados

components/            # Componentes React reutilizables
├── VideoChat/         # Sistema completo de A/V
├── Modal/             # Modales del sistema
├── Navbar/            # Navegación principal
└── Layout/            # Componentes de estructura

utils/                 # Lógica de negocio y utilidades
├── video-chat/        # Integración Agora WebRTC
├── pixi/              # Motor de renderizado PixiJS
├── supabase/          # Operaciones de base de datos
└── backend/           # Utilidades server-side

public/                # Assets estáticos
├── sprites/           # Sprites y texturas para mapas
└── fonts/             # Fuentes personalizadas

---

🧪 Testing

Cobertura actual:

• Componentes UI: 85%
• Utils y helpers: 90%
• Hooks personalizados: 80%

npm test              # Ejecutar tests
npm run test:coverage # Coverage report
npm run test:watch    # Watch mode

---

🚀 Despliegue

Vercel (Recomendado)

vercel --prod

Otros Proveedores

• Netlify - Build estático
• AWS Amplify - Con SSR
• Railway - Deploy desde Git

---

🤝 Contribuir

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

Convenciones:

• Conventional Commits
• 100% TypeScript coverage
• Seguir guías de ESLint
• Documentar props y hooks

---

📋 Roadmap

• PWA Support - Aplicación web progresiva
• Mobile App - React Native
• AI Integration - Asistente virtual
• VR Support - WebXR
• Plugin System - Extensiones de terceros

---

👥 Equipo

Diego Chicuazuque
Full Stack Developer

---

📄 Licencia

MIT - ver LICENSE para más detalles.

---

🙏 Agradecimientos

• Vercel por Next.js y hosting
• Supabase por el backend
• Agora.io por WebRTC
• Tailwind Labs por CSS framework
• Comunidad open source por las herramientas

---

⭐ Si te gusta este proyecto, ¡dale una estrella! ⭐

🐛 Reportar Bug • 💡 Sugerir Feature • 📖 Documentación Completa