\n ✨ Built by nich | GitHub | X/Twitter\n
\n[](https://github.com/nirholas/lyra-web3-playground)\n[](https://www.typescriptlang.org/)\n[](https://react.dev/)\n[](docs/ACCESSIBILITY.md)\n[](docs/ARCHITECTURE.md)\n[](https://x.com/nichxbt)\n\n> **A comprehensive open-source Web3 learning platform.** Professional development environments, AI-assisted tools, security testing, and collaborative features — all in your browser.\n\n\n\n> **Hosting note:** the hosted demo at lyra.works is currently offline while hosting is being migrated. Clone the repo and run `npm install && npm run dev` to use every environment below at `http://localhost:3000`.\n\n---\n\n## 🛠️ Development Environments\n\n### Professional IDEs\n\n| Tool | Description | Link |\n|------|-------------|------|\n| **Web Sandbox** | Full-featured web IDE with React, Vue, Python, live preview, Vim mode | `/ide?type=web` |\n| **Solidity IDE** | Smart contract IDE with multi-version compiler (0.6.x - 0.8.24) | `/ide?type=solidity` |\n| **Full-Stack Playground** | Build complete dApps with contract + frontend + live preview | `/fullstack-demo` |\n| **Interactive Sandbox** | IDE with AI assistant, templates, and testnet deployment | `/sandbox` |\n\n### Innovation Lab (Experimental)\n\nOpen `http://localhost:3000/innovation` or enable \"Innovation Mode\" in the sandbox:\n\n| Feature | Capability |\n|---------|------------|\n| **AI Code Whisperer** | Real-time vulnerability detection, voice control, auto-fix suggestions |\n| **Contract Time Machine** | Version history, branching, state simulation |\n| **Security Testing Lab** | Test contracts against reentrancy, flash loans, overflow attacks |\n| **Collaborative Arena** | Code with AI teammates, participate in challenges |\n| **Neural Gas Oracle** | ML-powered gas prediction and optimization |\n| **Cross-Chain Deployer** | Deploy to 8+ chains with automated bridge setup |\n\n### ♿ Accessibility (WCAG 2.1 AAA)\n\nComprehensive accessibility support:\n\n| Feature | Description |\n|---------|-------------|\n| **Dwell Click** | Click by hovering — no mouse button required |\n| **Reading Guide** | Horizontal line follows cursor position |\n| **Color Blind Filters** | Protanopia, Deuteranopia, Tritanopia support |\n| **Text-to-Speech** | Read content aloud with adjustable speed/pitch |\n| **Cognitive Support** | Simplified mode, focus mode, extended timeouts |\n| **Code-to-English** | Translates Solidity to plain English explanations |\n\nSee [ACCESSIBILITY.md](docs/ACCESSIBILITY.md) for complete documentation.\n\n---\n\n## Quick Access to All Tools\n\n| Tool | URL | Description |\n|------|-----|-------------|\n| **IDE Hub** | `/ide` | Choose Web Sandbox or Solidity IDE |\n| **Web Sandbox** | `/ide?type=web` | HTML/CSS/JS/React/Vue/Python IDE |\n| **Solidity IDE** | `/ide?type=solidity` | Smart contract development |\n| **Interactive Sandbox** | `/sandbox` | Sandbox with AI assistant |\n| **Contract Playground** | `/playground` | Template-based contract editor |\n| **Learning Playground** | `/learn` | Interactive tutorials |\n| **Full-Stack Demo** | `/fullstack-demo` | Contract + Frontend builder |\n| **Innovation Lab** | `/innovation` | Experimental AI features |\n| **Markets** | `/markets` | Live crypto prices & DeFi data |\n| **Explore** | `/explore` | Community projects gallery |\n\n---\n\n## 🎯 Who is this for?\n\n| You are... | Lyra helps you... |\n|------------|-------------------|\n| 🌱 **Complete beginner** | Learn Solidity with step-by-step tutorials |\n| 💻 **Web developer** | Transition to Web3 with familiar tools |\n| 🎓 **Student** | Practice smart contracts without spending gas |\n| 🔧 **Builder** | Prototype dApps quickly with templates |\n| 👩🏫 **Educator** | Teach blockchain with interactive examples |\n\n---\n\n## ⚡ Start in 30 Seconds\n\nRun `npm install && npm run dev`, then pick an option below.\n\n**Option 1: Browse the tutorials**\n1. Open `http://localhost:3000`\n2. Click any tutorial or example\n3. Start coding immediately\n\n**Option 2: Try the Solidity IDE**\n1. Open `http://localhost:3000/ide`\n2. Write or paste a smart contract\n3. Click \"Compile\" then \"Deploy\" (uses JavaScript VM - no wallet needed)\n\n**Option 3: Follow a tutorial**\n1. Open `http://localhost:3000`\n2. Scroll to \"Learn Web3 Development\"\n3. Pick a tutorial based on your level\n\n---\n\n## 🎮 What can you do here?\n\n### For Learning\n- 📖 **50+ tutorials** from \"What is a blockchain?\" to advanced DeFi\n- 🎯 **Interactive examples** - code runs as you read\n- 💡 **Instant feedback** - see errors and results immediately\n- 🏆 **Progress tracking** - pick up where you left off\n\n### For Building\n- ⚡ **Solidity IDE** - compile and deploy in seconds\n- 📝 **40+ templates** - tokens, NFTs, DAOs, DeFi\n- 🤖 **AI dApp Builder** - describe what you want, get code\n- 🔗 **Multi-chain** - Ethereum, Polygon, Base, Arbitrum, and more\n\n### For Everyone\n- 🌍 **10 languages** - English, Spanish, Chinese, Arabic, and more\n- ♿ **Fully accessible** - screen readers, keyboard nav, color blind support\n- 🌙 **Dark mode** - easy on the eyes\n- 📱 **Mobile friendly** - learn on any device\n\n---\n\n## 📚 Learning Paths\n\n### 🌱 I'm new to blockchain\n1. Start with the \"What is Ethereum?\" tutorial on the home page (`/`)\n2. Continue with \"Your First Smart Contract\" (`/`)\n3. Try the Hello World example (`/example/hello-world`)\n\n### 💻 I know JavaScript, teach me Solidity\n1. Read \"Solidity for JS Developers\" on the home page (`/`)\n2. Compare JavaScript and Solidity side by side (`/`)\n3. Build a Simple Token (`/example/erc20-token`)\n\n### 🚀 I want to build a dApp\n1. Use the AI dApp Builder on the home page (`/`) and describe your idea\n2. Or start from a template in the IDE (`/ide`)\n3. Deploy to testnet and share with the community\n\n---\n\n## ✨ Features\n\n### 🎮 Premium Code Sandbox (NEW!)\n- **World-class IDE** comparable to CodePen, JSFiddle, and Remix\n- **Web Sandbox**: Multi-file projects with HTML, CSS, JS, React, Vue, Python\n- **Solidity IDE**: Full-featured smart contract development environment\n- **Split-pane layouts** with draggable resize\n- **Device presets** for responsive testing (Desktop/Tablet/Mobile)\n- **Auto-run on change** with live preview\n- **Console panel** with log/warn/error capture\n- **Settings panel**: Theme, font size, Vim mode, auto-save, and more\n\n### 🎮 Interactive Code Playground (`/playground`)\n- **Multi-file editor** with file tabs (HTML, CSS, JS, Solidity, JSON, and more)\n- **Dual-pane layout** with live hot-reload preview\n- **Console capture** — see `console.log/warn/error` from your code in real-time\n- **File management** — create, delete, and switch between files\n- **AI-powered contract generation** from natural language prompts\n- **40+ smart contract templates** ready to deploy\n- **One-click deployment** to any supported blockchain\n\n### 🔧 Solidity Development (NEW!)\n- **Multiple Solidity versions** (0.6.x through 0.8.24)\n- **Real-time compilation** with error/warning highlighting\n- **Deploy to any network** (JS VM, Sepolia, Goerli, Mumbai, Mainnet)\n- **Interactive contract UI** - call functions directly\n- **Transaction history** with gas tracking\n- **Copy ABI/Bytecode** with one click\n- **Keyboard shortcuts** (Ctrl+S to compile)\n\n### �️ Full-Stack Sandbox (`/sandbox`)\n- **File tree navigation** with workspace management\n- **Web preview panel** with live hot-reload for HTML/CSS/JS projects\n- **Console log capture** from preview iframe\n- **Contract interaction panel** for deployed smart contracts\n- **AI Assistant integration** for code suggestions\n- **Innovation Mode** — experimental features like AI Whisperer, Time Machine, Exploit Lab\n- **Export/share** workspaces with one click\n\n### 📚 Smart Contract Templates\n- **40+ ready-to-use templates** across categories:\n - ERC-20, ERC-721, ERC-1155 tokens\n - DeFi (staking, vaults, DEX)\n - NFT marketplaces and minting\n - Governance and DAOs\n - Cross-chain bridges\n\n### 📖 Comprehensive Tutorials\n- **50+ tutorials** from beginner to advanced [in progress]\n- Step-by-step guides with interactive examples\n- Topics: Solidity basics, DeFi mechanics, security patterns, gas optimization\n\n### 🔗 Multi-Chain Support\n- Ethereum, Base, Polygon, Avalanche, BSC, Arbitrum\n- Solana integration\n- Monad testnet support\n\n### 🧹 Token Consolidation Tool\n- Sweep dust tokens across wallets\n- Multi-chain token management\n- Gas-efficient batch operations\n\n### 🎨 Modern UI/UX\n- Dark/light mode\n- Fully responsive design\n- Keyboard shortcuts for power users\n- Mobile-optimized with bottom navigation\n\n### ♿ Accessibility - Beyond WCAG 2.1 AAA (NEW!)\nWe go far beyond standard accessibility. Our system includes futuristic features that make Web3 truly accessible to everyone:\n\n**Quick Profiles** (one-click presets):\n- 👓 Low Vision • 🦯 Blind • 🦻 Deaf • 🖐️ Motor Impaired • 🧠 Cognitive\n\n**Vision Features**:\n- High contrast mode, large text (up to 200%), custom colors\n- **Color blind filters**: Protanopia, Deuteranopia, Tritanopia, and more\n- **Reading guide**: Horizontal line follows your cursor for easier reading\n- **OpenDyslexic font**: Specially designed for dyslexic readers\n\n**Motor Accessibility**:\n- **Dwell Click**: Click by hovering - no mouse button needed\n- Large click targets (up to 64px), sticky keys simulation\n- Full keyboard navigation with `Alt+A` quick access\n\n**Cognitive Support**:\n- Simplified interface mode, focus mode, reduced animations\n- Extended timeouts, reading speed adjustment\n- Clear, consistent layouts\n\n**Screen Reader & Audio**:\n- ARIA live regions announce all actions\n- **Text-to-Speech**: Read content aloud with adjustable speed/pitch\n- **Code-to-Natural-Language**: Translates code to plain English\n\n**Developer-Friendly**:\n- Draggable floating accessibility button\n- Export/import custom settings\n- Full keyboard shortcut support\n\nSee [ACCESSIBILITY.md](docs/ACCESSIBILITY.md) for full documentation\n\n### 🤖 AI-Powered dApp Builder (NEW!)\n- **Natural language** → Full-stack dApp generation\n- Generates **Solidity + HTML + CSS + JavaScript** from prompts\n- **Smart contract templates**: Token, NFT, DAO\n- Interactive tutorial-style editor with step-by-step guidance\n- Deploy directly to testnets\n\n### 🌐 Community Features (NEW!)\n- **Share Projects**: Publish your work with unique shareable links\n- **Explore Gallery**: Discover projects, templates, and tutorials from the community\n- **Like & Comment**: Engage with other developers' work\n- **Fork Projects**: Build on top of others' code\n- **Wallet Authentication**: Connect wallet to access community features\n- **Embed Code**: Embed shared projects in your own websites\n\n### 🌍 Internationalization (NEW!)\n- **10 languages** supported out of the box\n- English, Spanish, Chinese, French, German, Japanese, Korean, Portuguese, Russian, Arabic\n- **RTL support** for Arabic\n- Language selector in navigation\n- Persisted language preference\n\n### 📊 Market Data Integration (NEW!)\n- **Live Crypto Prices**: Real-time data from CoinGecko\n- **DeFi Analytics**: Protocol TVL, yields from DeFiLlama\n- **Chain Statistics**: TVL by chain, trending coins\n- **Markets Page**: Comprehensive market overview at `/markets`\n\n---\n\n## 🚀 Quick Start\n\n### Prerequisites\n- Node.js 18+\n- npm or yarn\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/nirholas/lyra-web3-playground.git\ncd lyra-web3-playground\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser.\n\n### Environment Variables\n\nThe app runs without configuration, but wallet login, the backend API, RPC access\nand Supabase-backed features need credentials. Copy the example file and fill it in:\n\n```bash\ncp .env.example .env\n```\n\n| Variable | Purpose |\n| --- | --- |\n| `VITE_PRIVY_APP_ID` | Privy application ID used for wallet / email login |\n| `VITE_API_URL` | Base URL of the backend API (defaults to `http://localhost:3001`) |\n| `VITE_INFURA_API_KEY` | Infura project ID for read-only RPC calls |\n| `VITE_SUPABASE_URL` | Supabase project URL |\n| `VITE_SUPABASE_ANON_KEY` | Supabase anon (public) key |\n\nEvery `VITE_`-prefixed value is inlined into the client bundle and is therefore\npublic — never put a private key or server secret in `.env`. Server-side secrets\nbelong in `server/.env` (see `server/.env.example`).\n\n### Build for Production\n\n```bash\nnpm run build\nnpm run preview\n```\n\n---\n\n## 🏗️ Project Structure\n\n```\n├── src/\n│ ├── components/ # React components\n│ │ ├── Accessibility/ # Comprehensive a11y system\n│ │ │ ├── AccessibilityButton.tsx # Floating button\n│ │ │ ├── AccessibilityPanel.tsx # Settings panel\n│ │ │ ├── DwellClick.tsx # Click-by-hovering\n│ │ │ ├── ReadingGuide.tsx # Line highlighter\n│ │ │ └── ColorBlindFilters.tsx # Color blind support\n│ │ ├── CodePlayground/ # Monaco editor & compiler\n│ │ ├── Tutorial/ # Tutorial system\n│ │ ├── Sandbox/ # Premium sandbox IDEs\n│ │ │ ├── WebSandbox.tsx # Web dev sandbox\n│ │ │ ├── SoliditySandbox.tsx # Solidity IDE\n│ │ │ ├── UnifiedSandbox.tsx # Generic sandbox wrapper\n│ │ │ └── ShareModal.tsx # Project sharing modal\n│ │ ├── Playground/ # Full-stack dApp playground\n│ │ ├── FullStackPlayground/ # AI dApp builder\n│ │ └── Consolidation/ # Token consolidation\n│ ├── pages/ # Route pages\n│ │ ├── SandboxPage.tsx # Premium IDE selection\n│ │ ├── ExplorePage.tsx # Community project gallery\n│ │ ├── SharedProjectPage.tsx # View shared projects\n│ │ ├── MarketsPage.tsx # Market data dashboard\n│ │ └── ExamplePage.tsx # Example with sandbox toggle\n│ ├── services/ # API services\n│ │ ├── community.ts # Sharing, likes, comments, forks\n│ │ └── marketData.ts # CoinGecko & DeFiLlama integration\n│ ├── hooks/ # Custom React hooks\n│ │ └── useMarketData.ts # Market data hooks\n│ ├── stores/ # Zustand state management\n│ │ ├── accessibilityStore.ts # 40+ a11y settings\n│ │ ├── i18nStore.ts # 10 languages + RTL\n│ │ ├── themeStore.ts # Dark/light mode\n│ │ └── walletStore.ts # Wallet connection\n│ ├── styles/\n│ │ ├── index.css # Main styles\n│ │ └── accessibility.css # 580+ lines a11y CSS\n│ ├── examples/ # Code examples (web3, ai)\n│ └── utils/ # Helper functions\n│ └── contractTemplates.ts # 40+ contract templates\n├── server/ # Backend API (optional)\n├── docs/ # Documentation\n└── public/ # Static assets\n```\n\n---\n\n## 🛠️ Tech Stack\n\n| Category | Technology |\n|----------|------------|\n| Frontend | React 18, TypeScript, Vite |\n| Styling | TailwindCSS |\n| Editor | Monaco Editor |\n| Web3 | ethers.js v6, viem |\n| State | Zustand (with persist) |\n| i18n | Custom store (10 languages + RTL) |\n| Accessibility | Custom a11y system (WCAG 2.1 AAA+) |\n| Database | Supabase |\n| Testing | Vitest |\n| Deployment | Vercel, Netlify, Docker |\n\n---\n\n## 📖 Documentation\n\n| Document | Description |\n|----------|-------------|\n| [Getting Started](docs/GETTING_STARTED.md) | **New to blockchain? Start here!** |\n| [Quick Start Guide](docs/QUICKSTART.md) | Get up and running locally |\n| [IDE Guide](docs/IDE_GUIDE.md) | **All development environments & URLs** |\n| [Sandbox Guide](docs/SANDBOX_GUIDE.md) | Premium sandbox features |\n| [Innovation Lab](docs/INNOVATION_LAB.md) | **AI & experimental features** |\n| [Playgrounds](docs/PLAYGROUNDS.md) | **All playground components** |\n| [Architecture Overview](docs/ARCHITECTURE.md) | System design |\n| [Backend API](docs/BACKEND_API.md) | API reference |\n| [Deployment Guide](docs/DEPLOYMENT.md) | Deploy your own instance |\n| [Security](docs/SECURITY.md) | Security practices |\n| [Accessibility](docs/ACCESSIBILITY.md) | A11y features and usage |\n\n---\n\n## ❓ Frequently Asked Questions\n\n\n If you find this project useful, please consider giving it a ⭐\n
\n\n\n Built with ❤️ by nich\n
\n\n\n## Documentation\n\nFull documentation site: **https://nirholas.github.io/lyra-web3-playground/**\n\n- [Getting started](docs/getting-started.md) covers install and first run.\n- [Examples](docs/examples.md) has copy-paste snippets.\n", "bytes": 20761, "sha": "c3bbac38ea190cd10f13a649df07b0b8b7e525c47e28b98c8a30738768c259ed", "repo_slug": "nirholas/lyra-web3-playground", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/mcp_io_github_nirholas_solidity_compiler_eb427878/readme" }