โจ Built by 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) > **A comprehensive open-source Web3 learning platform.** Professional development environments, AI-assisted tools, security testing, and collaborative features โ all in your browser. > **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`. --- ## ๐ ๏ธ Development Environments ### Professional IDEs | Tool | Description | Link | |------|-------------|------| | **Web Sandbox** | Full-featured web IDE with React, Vue, Python, live preview, Vim mode | `/ide?type=web` | | **Solidity IDE** | Smart contract IDE with multi-version compiler (0.6.x - 0.8.24) | `/ide?type=solidity` | | **Full-Stack Playground** | Build complete dApps with contract + frontend + live preview | `/fullstack-demo` | | **Interactive Sandbox** | IDE with AI assistant, templates, and testnet deployment | `/sandbox` | ### Innovation Lab (Experimental) Open `http://localhost:3000/innovation` or enable "Innovation Mode" in the sandbox: | Feature | Capability | |---------|------------| | **AI Code Whisperer** | Real-time vulnerability detection, voice control, auto-fix suggestions | | **Contract Time Machine** | Version history, branching, state simulation | | **Security Testing Lab** | Test contracts against reentrancy, flash loans, overflow attacks | | **Collaborative Arena** | Code with AI teammates, participate in challenges | | **Neural Gas Oracle** | ML-powered gas prediction and optimization | | **Cross-Chain Deployer** | Deploy to 8+ chains with automated bridge setup | ### โฟ Accessibility (WCAG 2.1 AAA) Comprehensive accessibility support: | Feature | Description | |---------|-------------| | **Dwell Click** | Click by hovering โ no mouse button required | | **Reading Guide** | Horizontal line follows cursor position | | **Color Blind Filters** | Protanopia, Deuteranopia, Tritanopia support | | **Text-to-Speech** | Read content aloud with adjustable speed/pitch | | **Cognitive Support** | Simplified mode, focus mode, extended timeouts | | **Code-to-English** | Translates Solidity to plain English explanations | See [ACCESSIBILITY.md](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/ACCESSIBILITY.md) for complete documentation. --- ## Quick Access to All Tools | Tool | URL | Description | |------|-----|-------------| | **IDE Hub** | `/ide` | Choose Web Sandbox or Solidity IDE | | **Web Sandbox** | `/ide?type=web` | HTML/CSS/JS/React/Vue/Python IDE | | **Solidity IDE** | `/ide?type=solidity` | Smart contract development | | **Interactive Sandbox** | `/sandbox` | Sandbox with AI assistant | | **Contract Playground** | `/playground` | Template-based contract editor | | **Learning Playground** | `/learn` | Interactive tutorials | | **Full-Stack Demo** | `/fullstack-demo` | Contract + Frontend builder | | **Innovation Lab** | `/innovation` | Experimental AI features | | **Markets** | `/markets` | Live crypto prices & DeFi data | | **Explore** | `/explore` | Community projects gallery | --- ## ๐ฏ Who is this for? | You are... | Lyra helps you... | |------------|-------------------| | ๐ฑ **Complete beginner** | Learn Solidity with step-by-step tutorials | | ๐ป **Web developer** | Transition to Web3 with familiar tools | | ๐ **Student** | Practice smart contracts without spending gas | | ๐ง **Builder** | Prototype dApps quickly with templates | | ๐ฉโ๐ซ **Educator** | Teach blockchain with interactive examples | --- ## โก Start in 30 Seconds Run `npm install && npm run dev`, then pick an option below. **Option 1: Browse the tutorials** 1. Open `http://localhost:3000` 2. Click any tutorial or example 3. Start coding immediately **Option 2: Try the Solidity IDE** 1. Open `http://localhost:3000/ide` 2. Write or paste a smart contract 3. Click "Compile" then "Deploy" (uses JavaScript VM - no wallet needed) **Option 3: Follow a tutorial** 1. Open `http://localhost:3000` 2. Scroll to "Learn Web3 Development" 3. Pick a tutorial based on your level --- ## ๐ฎ What can you do here? ### For Learning - ๐ **50+ tutorials** from "What is a blockchain?" to advanced DeFi - ๐ฏ **Interactive examples** - code runs as you read - ๐ก **Instant feedback** - see errors and results immediately - ๐ **Progress tracking** - pick up where you left off ### For Building - โก **Solidity IDE** - compile and deploy in seconds - ๐ **40+ templates** - tokens, NFTs, DAOs, DeFi - ๐ค **AI dApp Builder** - describe what you want, get code - ๐ **Multi-chain** - Ethereum, Polygon, Base, Arbitrum, and more ### For Everyone - ๐ **10 languages** - English, Spanish, Chinese, Arabic, and more - โฟ **Fully accessible** - screen readers, keyboard nav, color blind support - ๐ **Dark mode** - easy on the eyes - ๐ฑ **Mobile friendly** - learn on any device --- ## ๐ Learning Paths ### ๐ฑ I'm new to blockchain 1. Start with the "What is Ethereum?" tutorial on the home page (`/`) 2. Continue with "Your First Smart Contract" (`/`) 3. Try the Hello World example (`/example/hello-world`) ### ๐ป I know JavaScript, teach me Solidity 1. Read "Solidity for JS Developers" on the home page (`/`) 2. Compare JavaScript and Solidity side by side (`/`) 3. Build a Simple Token (`/example/erc20-token`) ### ๐ I want to build a dApp 1. Use the AI dApp Builder on the home page (`/`) and describe your idea 2. Or start from a template in the IDE (`/ide`) 3. Deploy to testnet and share with the community --- ## โจ Features ### ๐ฎ Premium Code Sandbox (NEW!) - **World-class IDE** comparable to CodePen, JSFiddle, and Remix - **Web Sandbox**: Multi-file projects with HTML, CSS, JS, React, Vue, Python - **Solidity IDE**: Full-featured smart contract development environment - **Split-pane layouts** with draggable resize - **Device presets** for responsive testing (Desktop/Tablet/Mobile) - **Auto-run on change** with live preview - **Console panel** with log/warn/error capture - **Settings panel**: Theme, font size, Vim mode, auto-save, and more ### ๐ฎ Interactive Code Playground (`/playground`) - **Multi-file editor** with file tabs (HTML, CSS, JS, Solidity, JSON, and more) - **Dual-pane layout** with live hot-reload preview - **Console capture** โ see `console.log/warn/error` from your code in real-time - **File management** โ create, delete, and switch between files - **AI-powered contract generation** from natural language prompts - **40+ smart contract templates** ready to deploy - **One-click deployment** to any supported blockchain ### ๐ง Solidity Development (NEW!) - **Multiple Solidity versions** (0.6.x through 0.8.24) - **Real-time compilation** with error/warning highlighting - **Deploy to any network** (JS VM, Sepolia, Goerli, Mumbai, Mainnet) - **Interactive contract UI** - call functions directly - **Transaction history** with gas tracking - **Copy ABI/Bytecode** with one click - **Keyboard shortcuts** (Ctrl+S to compile) ### ๏ฟฝ๏ธ Full-Stack Sandbox (`/sandbox`) - **File tree navigation** with workspace management - **Web preview panel** with live hot-reload for HTML/CSS/JS projects - **Console log capture** from preview iframe - **Contract interaction panel** for deployed smart contracts - **AI Assistant integration** for code suggestions - **Innovation Mode** โ experimental features like AI Whisperer, Time Machine, Exploit Lab - **Export/share** workspaces with one click ### ๐ Smart Contract Templates - **40+ ready-to-use templates** across categories: - ERC-20, ERC-721, ERC-1155 tokens - DeFi (staking, vaults, DEX) - NFT marketplaces and minting - Governance and DAOs - Cross-chain bridges ### ๐ Comprehensive Tutorials - **50+ tutorials** from beginner to advanced [in progress] - Step-by-step guides with interactive examples - Topics: Solidity basics, DeFi mechanics, security patterns, gas optimization ### ๐ Multi-Chain Support - Ethereum, Base, Polygon, Avalanche, BSC, Arbitrum - Solana integration - Monad testnet support ### ๐งน Token Consolidation Tool - Sweep dust tokens across wallets - Multi-chain token management - Gas-efficient batch operations ### ๐จ Modern UI/UX - Dark/light mode - Fully responsive design - Keyboard shortcuts for power users - Mobile-optimized with bottom navigation ### โฟ Accessibility - Beyond WCAG 2.1 AAA (NEW!) We go far beyond standard accessibility. Our system includes futuristic features that make Web3 truly accessible to everyone: **Quick Profiles** (one-click presets): - ๐ Low Vision โข ๐ฆฏ Blind โข ๐ฆป Deaf โข ๐๏ธ Motor Impaired โข ๐ง Cognitive **Vision Features**: - High contrast mode, large text (up to 200%), custom colors - **Color blind filters**: Protanopia, Deuteranopia, Tritanopia, and more - **Reading guide**: Horizontal line follows your cursor for easier reading - **OpenDyslexic font**: Specially designed for dyslexic readers **Motor Accessibility**: - **Dwell Click**: Click by hovering - no mouse button needed - Large click targets (up to 64px), sticky keys simulation - Full keyboard navigation with `Alt+A` quick access **Cognitive Support**: - Simplified interface mode, focus mode, reduced animations - Extended timeouts, reading speed adjustment - Clear, consistent layouts **Screen Reader & Audio**: - ARIA live regions announce all actions - **Text-to-Speech**: Read content aloud with adjustable speed/pitch - **Code-to-Natural-Language**: Translates code to plain English **Developer-Friendly**: - Draggable floating accessibility button - Export/import custom settings - Full keyboard shortcut support See [ACCESSIBILITY.md](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/ACCESSIBILITY.md) for full documentation ### ๐ค AI-Powered dApp Builder (NEW!) - **Natural language** โ Full-stack dApp generation - Generates **Solidity + HTML + CSS + JavaScript** from prompts - **Smart contract templates**: Token, NFT, DAO - Interactive tutorial-style editor with step-by-step guidance - Deploy directly to testnets ### ๐ Community Features (NEW!) - **Share Projects**: Publish your work with unique shareable links - **Explore Gallery**: Discover projects, templates, and tutorials from the community - **Like & Comment**: Engage with other developers' work - **Fork Projects**: Build on top of others' code - **Wallet Authentication**: Connect wallet to access community features - **Embed Code**: Embed shared projects in your own websites ### ๐ Internationalization (NEW!) - **10 languages** supported out of the box - English, Spanish, Chinese, French, German, Japanese, Korean, Portuguese, Russian, Arabic - **RTL support** for Arabic - Language selector in navigation - Persisted language preference ### ๐ Market Data Integration (NEW!) - **Live Crypto Prices**: Real-time data from CoinGecko - **DeFi Analytics**: Protocol TVL, yields from DeFiLlama - **Chain Statistics**: TVL by chain, trending coins - **Markets Page**: Comprehensive market overview at `/markets` --- ## ๐ Quick Start ### Prerequisites - Node.js 18+ - npm or yarn ### Installation ```bash # 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 ``` Open [http://localhost:3000](http://localhost:3000) in your browser. ### Environment Variables The app runs without configuration, but wallet login, the backend API, RPC access and Supabase-backed features need credentials. Copy the example file and fill it in: ```bash cp .env.example .env ``` | Variable | Purpose | | --- | --- | | `VITE_PRIVY_APP_ID` | Privy application ID used for wallet / email login | | `VITE_API_URL` | Base URL of the backend API (defaults to `http://localhost:3001`) | | `VITE_INFURA_API_KEY` | Infura project ID for read-only RPC calls | | `VITE_SUPABASE_URL` | Supabase project URL | | `VITE_SUPABASE_ANON_KEY` | Supabase anon (public) key | Every `VITE_`-prefixed value is inlined into the client bundle and is therefore public โ never put a private key or server secret in `.env`. Server-side secrets belong in `server/.env` (see `server/.env.example`). ### Build for Production ```bash npm run build npm run preview ``` --- ## ๐๏ธ Project Structure ``` โโโ 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 ``` --- ## ๐ ๏ธ Tech Stack | Category | Technology | |----------|------------| | Frontend | React 18, TypeScript, Vite | | Styling | TailwindCSS | | Editor | Monaco Editor | | Web3 | ethers.js v6, viem | | State | Zustand (with persist) | | i18n | Custom store (10 languages + RTL) | | Accessibility | Custom a11y system (WCAG 2.1 AAA+) | | Database | Supabase | | Testing | Vitest | | Deployment | Vercel, Netlify, Docker | --- ## ๐ Documentation | Document | Description | |----------|-------------| | [Getting Started](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/GETTING_STARTED.md) | **New to blockchain? Start here!** | | [Quick Start Guide](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/QUICKSTART.md) | Get up and running locally | | [IDE Guide](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/IDE_GUIDE.md) | **All development environments & URLs** | | [Sandbox Guide](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/SANDBOX_GUIDE.md) | Premium sandbox features | | [Innovation Lab](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/INNOVATION_LAB.md) | **AI & experimental features** | | [Playgrounds](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/PLAYGROUNDS.md) | **All playground components** | | [Architecture Overview](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/ARCHITECTURE.md) | System design | | [Backend API](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/BACKEND_API.md) | API reference | | [Deployment Guide](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/DEPLOYMENT.md) | Deploy your own instance | | [Security](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/SECURITY.md) | Security practices | | [Accessibility](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/ACCESSIBILITY.md) | A11y features and usage | --- ## โ Frequently Asked QuestionsIf you find this project useful, please consider giving it a โญ
Built with โค๏ธ by nich
## Documentation Full documentation site: **https://nirholas.github.io/lyra-web3-playground/** - [Getting started](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/getting-started.md) covers install and first run. - [Examples](https://github.com/nirholas/lyra-web3-playground/blob/HEAD/docs/examples.md) has copy-paste snippets.