Web3 Playground & Sandbox - Learn, Develop, Test MCP Servers + Toolkit SDK

Lyra Web3 Playground

✨ Creado por nich | GitHub | X/Twitter

[](https://github.com/nirholas/lyra-web3-playground) [](https://www.typescriptlang.org/) [](https://react.dev/) [](docs/ACCESSIBILITY.md) [](docs/ARCHITECTURE.md) [](https://x.com/nichxbt)

Una plataforma integral de aprendizaje Web3 de código abierto. Entornos de desarrollo profesionales, herramientas asistidas por IA, pruebas de seguridad y funciones colaborativas, todo en tu navegador.

Obtén el código fuente en GitHub

Nota de alojamiento: la demo alojada en lyra.works está actualmente fuera de línea mientras se migra el alojamiento. Clona el repositorio y ejecuta npm install && npm run dev para usar todos los entornos a continuación en http://localhost:3000.

---

🛠️ Entornos de Desarrollo

IDEs Profesionales

Herramienta	Descripción	Enlace
Web Sandbox	IDE web completo con React, Vue, Python, vista previa en vivo, modo Vim	/ide?type=web
Solidity IDE	IDE para contratos inteligentes con compilador multi-versión (0.6.x - 0.8.24)	/ide?type=solidity
Full-Stack Playground	Construye dApps completas con contrato + frontend + vista previa en vivo	/fullstack-demo
Interactive Sandbox	IDE con asistente de IA, plantillas y despliegue en testnet	/sandbox

Laboratorio de Innovación (Experimental)

Abre http://localhost:3000/innovation o activa el "Modo Innovación" en el sandbox:

Función	Capacidad
AI Code Whisperer	Detección de vulnerabilidades en tiempo real, control por voz, sugerencias de corrección automática
Contract Time Machine	Historial de versiones, ramificaciones, simulación de estados
Security Testing Lab	Prueba contratos contra reentrancy, flash loans, ataques de overflow
Collaborative Arena	Programa con compañeros de IA, participa en desafíos
Neural Gas Oracle	Predicción y optimización de gas impulsada por ML
Cross-Chain Deployer	Despliega en 8+ cadenas con configuración automatizada de puentes

♿ Accesibilidad (WCAG 2.1 AAA)

Soporte integral de accesibilidad:

Función	Descripción
Dwell Click	Haz clic al pasar el cursor — sin necesidad de botón del ratón
Reading Guide	Línea horizontal que sigue la posición del cursor
Color Blind Filters	Soporte para protanopía, deuteranopía, tritanopía
Text-to-Speech	Lee el contenido en voz alta con velocidad/tono ajustables
Cognitive Support	Modo simplificado, modo de enfoque, tiempos de espera extendidos
Code-to-English	Traduce Solidity a explicaciones en inglés sencillo

Consulta ACCESSIBILITY.md para la documentación completa.

---

Acceso Rápido a Todas las Herramientas

Herramienta	URL	Descripción
IDE Hub	/ide	Elige Web Sandbox o Solidity IDE
Web Sandbox	/ide?type=web	IDE de HTML/CSS/JS/React/Vue/Python
Solidity IDE	/ide?type=solidity	Desarrollo de contratos inteligentes
Interactive Sandbox	/sandbox	Sandbox con asistente de IA
Contract Playground	/playground	Editor de contratos basado en plantillas
Learning Playground	/learn	Tutoriales interactivos
Full-Stack Demo	/fullstack-demo	Constructor de Contrato + Frontend
Innovation Lab	/innovation	Funciones experimentales de IA
Markets	/markets	Precios de cripto en vivo y datos DeFi
Explore	/explore	Galería de proyectos de la comunidad

---

🎯 ¿Para quién es esto?

Eres...	Lyra te ayuda a...
🌱 Principiante total	Aprender Solidity con tutoriales paso a paso
💻 Desarrollador web	Transicionar a Web3 con herramientas familiares
🎓 Estudiante	Practicar contratos inteligentes sin gastar gas
🔧 Constructor	Prototipar dApps rápidamente con plantillas
👩‍🏫 Educador	Enseñar blockchain con ejemplos interactivos

---

⚡ Empieza en 30 Segundos

Ejecuta npm install && npm run dev y luego elige una opción a continuación.

Opción 1: Explora los tutoriales

1. Abre http://localhost:3000
2. Haz clic en cualquier tutorial o ejemplo
3. Empieza a programar de inmediato

Opción 2: Prueba el Solidity IDE

1. Abre http://localhost:3000/ide
2. Escribe o pega un contrato inteligente
3. Haz clic en "Compile" y luego en "Deploy" (usa JavaScript VM - no se necesita wallet)

Opción 3: Sigue un tutorial

1. Abre http://localhost:3000
2. Desplázate hasta "Learn Web3 Development"
3. Elige un tutorial según tu nivel

---

🎮 ¿Qué puedes hacer aquí?

Para Aprender

• 📖 Más de 50 tutoriales desde "¿Qué es una blockchain?" hasta DeFi avanzado
• 🎯 Ejemplos interactivos - el código se ejecuta mientras lees
• 💡 Retroalimentación instantánea - ve errores y resultados de inmediato
• 🏆 Seguimiento de progreso - continúa donde lo dejaste

Para Construir

• ⚡ Solidity IDE - compila y despliega en segundos
• 📝 Más de 40 plantillas - tokens, NFTs, DAOs, DeFi
• 🤖 AI dApp Builder - describe lo que quieres, obtén código
• 🔗 Multi-cadena - Ethereum, Polygon, Base, Arbitrum y más

Para Todos

• 🌍 10 idiomas - inglés, español, chino, árabe y más
• ♿ Totalmente accesible - lectores de pantalla, navegación por teclado, soporte para daltonismo
• 🌙 Modo oscuro - fácil para los ojos
• 📱 Compatible con móviles - aprende en cualquier dispositivo

---

📚 Rutas de Aprendizaje

🌱 Soy nuevo en blockchain

1. Empieza con el tutorial "What is Ethereum?" en la página de inicio (/)
2. Continúa con "Your First Smart Contract" (/)
3. Prueba el ejemplo Hello World (/example/hello-world)

💻 Sé JavaScript, enséñame Solidity

1. Lee "Solidity for JS Developers" en la página de inicio (/)
2. Compara JavaScript y Solidity lado a lado (/)
3. Construye un Token Simple (/example/erc20-token)

🚀 Quiero construir una dApp

1. Usa el AI dApp Builder en la página de inicio (/) y describe tu idea
2. O empieza desde una plantilla en el IDE (/ide)
3. Despliega en testnet y comparte con la comunidad

---

✨ Funciones

🎮 Code Sandbox Premium (¡NUEVO!)

• IDE de clase mundial comparable a CodePen, JSFiddle y Remix
• Web Sandbox: Proyectos multi-archivo con HTML, CSS, JS, React, Vue, Python
• Solidity IDE: Entorno completo de desarrollo de contratos inteligentes
• Diseños de paneles divididos con redimensionamiento arrastrable
• Ajustes preestablecidos de dispositivo para pruebas responsivas (Escritorio/Tablet/Móvil)
• Ejecución automática al cambiar con vista previa en vivo
• Panel de consola con captura de log/advertencia/error
• Panel de configuración: Tema, tamaño de fuente, modo Vim, auto-guardado y más

🎮 Interactive Code Playground (/playground)

• Editor multi-archivo con pestañas de archivos (HTML, CSS, JS, Solidity, JSON y más)
• Diseño de doble panel con vista previa de recarga en vivo
• Captura de consola — ve console.log/warn/error de tu código en tiempo real
• Gestión de archivos — crea, elimina y cambia entre archivos
• Generación de contratos impulsada por IA a partir de indicaciones en lenguaje natural
• Más de 40 plantillas de contratos inteligentes listas para desplegar
• Despliegue con un clic en cualquier blockchain compatible

🔧 Desarrollo en Solidity (¡NUEVO!)

• Múltiples versiones de Solidity (0.6.x hasta 0.8.24)
• Compilación en tiempo real con resaltado de errores/advertencias
• Despliega en cualquier red (JS VM, Sepolia, Goerli, Mumbai, Mainnet)
• UI interactiva de contratos - llama funciones directamente
• Historial de transacciones con seguimiento de gas
• Copia ABI/Bytecode con un clic
• Atajos de teclado (Ctrl+S para compilar)

###️ Full-Stack Sandbox (/sandbox)

• Navegación de árbol de archivos con gestión de espacios de trabajo
• Panel de vista previa web con recarga en vivo para proyectos HTML/CSS/JS
• Captura de logs de consola desde el iframe de vista previa
• Panel de interacción con contratos para contratos inteligentes desplegados
• Integración de Asistente de IA para sugerencias de código
• Modo Innovación — funciones experimentales como AI Whisperer, Time Machine, Exploit Lab
• Exportar/compartir espacios de trabajo con un clic

📚 Plantillas de Contratos Inteligentes

• Más de 40 plantillas listas para usar en varias categorías:
  • Tokens ERC-20, ERC-721, ERC-1155
  • DeFi (staking, vaults, DEX)
  • Mercados NFT y acuñación
  • Gobernanza y DAOs
  • Puentes entre cadenas

📖 Tutoriales Integrales

• Más de 50 tutoriales de principiante a avanzado [en progreso]
• Guías paso a paso con ejemplos interactivos
• Temas: fundamentos de Solidity, mecánicas DeFi, patrones de seguridad, optimización de gas

🔗 Soporte Multi-Cadena

• Ethereum, Base, Polygon, Avalanche, BSC, Arbitrum
• Integración con Solana
• Soporte de testnet Monad

🧹 Herramienta de Consolidación de Tokens

• Barre tokens residuales entre wallets
• Gestión de tokens multi-cadena
• Operaciones por lotes eficientes en gas

🎨 UI/UX Moderna

• Modo oscuro/claro
• Diseño totalmente responsivo
• Atajos de teclado para usuarios avanzados
• Optimizado para móviles con navegación inferior

♿ Accesibilidad - Más Allá de WCAG 2.1 AAA (¡NUEVO!)

Vamos mucho más allá de la accesibilidad estándar. Nuestro sistema incluye funciones futuristas que hacen que Web3 sea verdaderamente accesible para todos:

Perfiles Rápidos (ajustes preestablecidos con un clic):

• 👓 Baja Visión • 🦯 Ciego • 🦻 Sordo • 🖐️ Discapacidad Motora • 🧠 Cognitivo

Funciones de Visión:

• Modo de alto contraste, texto grande (hasta 200%), colores personalizados
• Filtros para daltonismo: Protanopía, Deuteranopía, Tritanopía y más
• Guía de lectura: Línea horizontal que sigue tu cursor para una lectura más fácil
• Fuente OpenDyslexic: Diseñada especialmente para lectores disléxicos

Accesibilidad Motora:

• Dwell Click: Haz clic al pasar el cursor - sin necesidad de botón del ratón
• Objetivos de clic grandes (hasta 64px), simulación de teclas adhesivas
• Navegación completa por teclado con acceso rápido Alt+A

Soporte Cognitivo:

• Modo de interfaz simplificada, modo de enfoque, animaciones reducidas
• Tiempos de espera extendidos, ajuste de velocidad de lectura
• Diseños claros y consistentes

Lector de Pantalla y Audio:

• Las regiones en vivo de ARIA anuncian todas las acciones
• Text-to-Speech: Lee el contenido en voz alta con velocidad/tono ajustables
• Code-to-Natural-Language: Traduce código a inglés sencillo

Amigable para Desarrolladores:

• Botón de accesibilidad flotante arrastrable
• Exportar/importar configuraciones personalizadas
• Soporte completo de atajos de teclado

Consulta ACCESSIBILITY.md para la documentación completa

🤖 Constructor de dApps Impulsado por IA (¡NUEVO!)

• Lenguaje natural → Generación de dApps full-stack
• Genera Solidity + HTML + CSS + JavaScript a partir de indicaciones
• Plantillas de contratos inteligentes: Token, NFT, DAO
• Editor interactivo estilo tutorial con guía paso a paso
• Despliega directamente en testnets

🌐 Funciones de Comunidad (¡NUEVO!)

• Compartir Proyectos: Publica tu trabajo con enlaces únicos compartibles
• Explorar Galería: Descubre proyectos, plantillas y tutoriales de la comunidad
• Me Gusta y Comentar: Interactúa con el trabajo de otros desarrolladores
• Fork de Proyectos: Construye sobre el código de otros
• Autenticación con Wallet: Conecta tu wallet para acceder a funciones de la comunidad
• Insertar Código: Inserta proyectos compartidos en tus propios sitios web

🌍 Internacionalización (¡NUEVO!)

• 10 idiomas compatibles de serie
• Inglés, español, chino, francés, alemán, japonés, coreano, portugués, ruso, árabe
• Soporte RTL para árabe
• Selector de idioma en la navegación
• Preferencia de idioma persistente

📊 Integración de Datos de Mercado (¡NUEVO!)

• Precios de Cripto en Vivo: Datos en tiempo real de CoinGecko
• Analíticas DeFi: TVL de protocolos, rendimientos de DeFiLlama
• Estadísticas de Cadenas: TVL por cadena, monedas en tendencia
• Página de Mercados: Visión general completa del mercado en /markets

---

🚀 Inicio Rápido

Requisitos Previos

• Node.js 18+
• npm o yarn

Instalación

# Clone the repository
git clone https://github.com/nirholas/lyra-web3-playground.git
cd lyra-web3-playground

# Install dependencies
npm install

# Start development server
npm run dev

Abre http://localhost:3000 en tu navegador.

Variables de Entorno

La aplicación funciona sin configuración, pero el inicio de sesión con wallet, la API del backend, el acceso RPC y las funciones respaldadas por Supabase necesitan credenciales. Copia el archivo de ejemplo y complétalo:

cp .env.example .env

Variable	Propósito
VITE_PRIVY_APP_ID	ID de aplicación de Privy utilizado para el inicio de sesión con wallet / correo electrónico
VITE_API_URL	URL base de la API backend (por defecto http://localhost:3001)
VITE_INFURA_API_KEY	ID de proyecto de Infura para llamadas RPC de solo lectura
VITE_SUPABASE_URL	URL del proyecto de Supabase
VITE_SUPABASE_ANON_KEY	Clave anónima (pública) de Supabase

Cada valor con prefijo VITE_ se incluye en el bundle del cliente y, por lo tanto, es público: nunca coloques una clave privada o un secreto de servidor en .env. Los secretos del lado del servidor van en server/.env (consulta server/.env.example).

Compilar para producción

npm run build
npm run preview

---

🏗️ Estructura del proyecto

├── src/
│   ├── components/     # React components
│   │   ├── Accessibility/    # Comprehensive a11y system
│   │   │   ├── AccessibilityButton.tsx  # Floating button
│   │   │   ├── AccessibilityPanel.tsx   # Settings panel
│   │   │   ├── DwellClick.tsx           # Click-by-hovering
│   │   │   ├── ReadingGuide.tsx         # Line highlighter
│   │   │   └── ColorBlindFilters.tsx    # Color blind support
│   │   ├── CodePlayground/   # Monaco editor & compiler
│   │   ├── Tutorial/         # Tutorial system
│   │   ├── Sandbox/          # Premium sandbox IDEs
│   │   │   ├── WebSandbox.tsx       # Web dev sandbox
│   │   │   ├── SoliditySandbox.tsx  # Solidity IDE
│   │   │   ├── UnifiedSandbox.tsx   # Generic sandbox wrapper
│   │   │   └── ShareModal.tsx       # Project sharing modal
│   │   ├── Playground/       # Full-stack dApp playground
│   │   ├── FullStackPlayground/  # AI dApp builder
│   │   └── Consolidation/    # Token consolidation
│   ├── pages/          # Route pages
│   │   ├── SandboxPage.tsx   # Premium IDE selection
│   │   ├── ExplorePage.tsx   # Community project gallery
│   │   ├── SharedProjectPage.tsx  # View shared projects
│   │   ├── MarketsPage.tsx   # Market data dashboard
│   │   └── ExamplePage.tsx   # Example with sandbox toggle
│   ├── services/       # API services
│   │   ├── community.ts      # Sharing, likes, comments, forks
│   │   └── marketData.ts     # CoinGecko & DeFiLlama integration
│   ├── hooks/          # Custom React hooks
│   │   └── useMarketData.ts  # Market data hooks
│   ├── stores/         # Zustand state management
│   │   ├── accessibilityStore.ts  # 40+ a11y settings
│   │   ├── i18nStore.ts           # 10 languages + RTL
│   │   ├── themeStore.ts          # Dark/light mode
│   │   └── walletStore.ts         # Wallet connection
│   ├── styles/
│   │   ├── index.css             # Main styles
│   │   └── accessibility.css     # 580+ lines a11y CSS
│   ├── examples/       # Code examples (web3, ai)
│   └── utils/          # Helper functions
│       └── contractTemplates.ts  # 40+ contract templates
├── server/             # Backend API (optional)
├── docs/               # Documentation
└── public/             # Static assets

---

🛠️ Stack tecnológico

Categoría	Tecnología
Frontend	React 18, TypeScript, Vite
Estilos	TailwindCSS
Editor	Monaco Editor
Web3	ethers.js v6, viem
Estado	Zustand (con persistencia)
i18n	Store personalizado (10 idiomas + RTL)
Accesibilidad	Sistema a11y personalizado (WCAG 2.1 AAA+)
Base de datos	Supabase
Pruebas	Vitest
Despliegue	Vercel, Netlify, Docker

---

📖 Documentación

Documento	Descripción
Primeros pasos	¿Nuevo en blockchain? ¡Empieza aquí!
Guía de inicio rápido	Ponte en marcha localmente
Guía del IDE	Todos los entornos de desarrollo y URLs
Guía del Sandbox	Funciones premium del sandbox
Laboratorio de innovación	Funciones de IA y experimentales
Playgrounds	Todos los componentes de playground
Descripción de la arquitectura	Diseño del sistema
API backend	Referencia de la API
Guía de despliegue	Despliega tu propia instancia
Seguridad	Prácticas de seguridad
Accesibilidad	Funciones de accesibilidad y uso

---

❓ Preguntas frecuentes

¿Necesito instalar algo?

¡No! Ejecuta npm run dev y abre http://localhost:3000 en tu navegador. Todo se ejecuta en tu navegador.

¿Necesito criptomonedas o una wallet?

¡No! Puedes aprender y practicar sin criptomonedas. El IDE tiene un modo "JavaScript VM" que simula una blockchain localmente. Cuando estés listo para desplegar de verdad, necesitarás MetaMask y ETH de testnet (que es gratuito).

¿Es gratuito?

Sí, es gratuito de ejecutar. Sin tarifas ocultas, sin nivel premium. Consulta el archivo LICENSE para conocer los términos de uso.

Estoy recibiendo errores. ¿Qué hago?

1. Revisa el mensaje de error: normalmente te indica qué está mal
2. Asegúrate de que tu versión de Solidity coincida con tu código
3. Consulta el /faq para problemas comunes
4. Abre un issue si estás atascado

¿Puedo usarlo para mi clase/taller?

¡Por supuesto! Es uno de los casos de uso principales. Puedes compartir enlaces a ejemplos específicos y los estudiantes pueden programar en sus navegadores. Sin configuración necesaria.

¿Cómo despliego a una red real?

1. Instala MetaMask
2. Obtén ETH de testnet desde un faucet (gratuito)
3. Conecta tu wallet en Lyra
4. Selecciona tu red (por ejemplo, Sepolia, Mumbai)
5. Haz clic en "Deploy": ¡tu contrato ahora está en la blockchain!

Encontré un bug / tengo una sugerencia

¡Por favor abre un issue! Agradecemos todos los comentarios.

---

🤝 Contribuciones

¡Las contribuciones son bienvenidas! Lee nuestra Guía de contribución para conocer los detalles sobre:

• Código de conducta
• Flujo de trabajo de desarrollo
• Proceso de pull requests
• Estándares de codificación
• Mensajes de commit accesibles - Usamos un formato diseñado para lectores de pantalla y accesibilidad cognitiva

Formato de mensajes de commit

[type] Clear description in plain English (emoji at end) 🎉

Ejemplo: [add] Keyboard navigation for dropdown menus ♿

¿Por qué este formato?

• Texto primero - Los lectores de pantalla leen los nombres de los emojis, así que el significado va primero
• Palabras simples - Claro para desarrolladores con discapacidades cognitivas
• Consistente - Fácil de escanear para usuarios con baja visión

Consulta CONTRIBUTING.md para las pautas completas.

Buenos primeros issues

Revisa los issues etiquetados como good first issue para empezar.

---

📄 Licencia

Todos los derechos reservados. Consulta el archivo LICENSE para más detalles.

---

🙏 Agradecimientos

• Remix IDE por la inspiración
• OpenZeppelin por los estándares de contratos
• La comunidad de desarrolladores Web3

---

Si encuentras útil este proyecto, considera darle una ⭐

Hecho con ❤️ por nich

Documentación

Sitio de documentación completo: https://nirholas.github.io/lyra-web3-playground/

• Primeros pasos cubre la instalación y la primera ejecución.
• Ejemplos tiene fragmentos de código para copiar y pegar.