{"id":30136688,"url":"https://github.com/georgebprice/code-playground-sandbox","last_synced_at":"2026-04-07T07:04:00.000Z","repository":{"id":308970382,"uuid":"1024115972","full_name":"GeorgeBPrice/Code-Playground-Sandbox","owner":"GeorgeBPrice","description":"A web-based code playground for practicing multiple programming languages including JavaScript, C#, and SQL. Built with React, TypeScript, Monaco Editor, and Docker integration for sandboxed code execution.","archived":false,"fork":false,"pushed_at":"2025-08-08T23:45:40.000Z","size":216,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-09T01:15:38.456Z","etag":null,"topics":["docker","docker-compose","express-js","javascript","lucide-icons","monaco-editor","node-js","react","sql-server","tailwindcss","typescript","yaml"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GeorgeBPrice.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-22T07:56:36.000Z","updated_at":"2025-08-08T23:45:44.000Z","dependencies_parsed_at":"2025-08-09T01:15:41.809Z","dependency_job_id":"d06539a3-4fc4-44c1-b40f-81e0048c542b","html_url":"https://github.com/GeorgeBPrice/Code-Playground-Sandbox","commit_stats":null,"previous_names":["georgebprice/code-playground-sandbox"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/GeorgeBPrice/Code-Playground-Sandbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeorgeBPrice%2FCode-Playground-Sandbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeorgeBPrice%2FCode-Playground-Sandbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeorgeBPrice%2FCode-Playground-Sandbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeorgeBPrice%2FCode-Playground-Sandbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GeorgeBPrice","download_url":"https://codeload.github.com/GeorgeBPrice/Code-Playground-Sandbox/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeorgeBPrice%2FCode-Playground-Sandbox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31503394,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","docker-compose","express-js","javascript","lucide-icons","monaco-editor","node-js","react","sql-server","tailwindcss","typescript","yaml"],"created_at":"2025-08-10T23:50:36.146Z","updated_at":"2026-04-07T07:03:59.988Z","avatar_url":"https://github.com/GeorgeBPrice.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Code Playground Sandbox\n\n**(NOT FOR PRODUCTION ENVIRONMENTS)**\n\nThis is a `localhost` web-based code playground for practicing multiple programming languages including JavaScript, C#, and SQL. Built with React, TypeScript, Monaco Editor, and Docker integration for sandboxed code execution with optimized performance. Just run `Docker Compose Up --build` and your off!\n\n\u003cimg width=\"1518\" height=\"1191\" alt=\"image\" src=\"https://github.com/user-attachments/assets/bd3fb6e1-3e72-4cda-b1fd-83f05f821903\" /\u003e\n\n\n## Features\n\n- Multi-language support: JavaScript, C#, and SQL (SQL Server)\n- Monaco Editor: Professional code editor with IntelliSense and error detection\n- Real-time console output: See execution results and errors instantly\n- High-performance code execution: Optimized C# compilation with assembly caching\n- Dedicated database migration system: Version-controlled schema management\n- Modern UI: Dark theme with Tailwind CSS\n- File operations: Upload, download, and reset code\n- Responsive design: Works on desktop and mobile devices\n- SQL Server integration: Comprehensive IT store sales database with 8 tables and 3 views\n- Database schema viewer: Explore table structures interactively in the UI\n- Code block actions: Run, copy, comment, or delete selected code blocks\n- Adjustable layout: Resize editor and console columns with a slider\n- Fixed console output height for consistent experience\n\n## Tech Stack\n\n- Frontend: React 18, TypeScript\n- Editor: Monaco Editor\n- Styling: Tailwind CSS\n- Icons: Lucide React\n- Backend: Node.js (Express) with integrated .NET SDK for C# compilation\n- Database: SQL Server 2022 (containerized)\n- Migrations: Dedicated Node.js migration container with version tracking\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18 or higher\n- Docker and Docker Compose\n- npm or yarn\n\n### Running with Docker Compose\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/GeorgeBPrice/Code-Playground-Sandbox.git\n   ```\n\n2. Start all services (SQL Server, migrations, backend, frontend):\n   ```bash\n   docker-compose up --build\n   ```\n\n3. The system will automatically:\n   - Start SQL Server and wait for it to be healthy\n   - Run database migrations to create the schema\n   - Start the backend API with C# compilation support\n   - Start the frontend web application\n\n4. Open your browser and navigate to:\n   ```\n   http://localhost:80\n   ```\n\n### Database Migrations\n\nThe system uses a dedicated migration container that runs automatically during startup. The migration system:\n\n- Creates the `it_store_sales` database if it doesn't exist\n- Runs versioned SQL migration scripts from `migrations/sql/`\n- Tracks applied migrations in a `schema_migrations` table\n- Only runs new migrations on subsequent startups\n\nTo manually run migrations:\n```bash\n# Run only the migration container\ndocker-compose up --build db-migrations\n\n# Or run migrations in isolation\ndocker-compose run --rm db-migrations\n```\n\nMigration files are located in `migrations/sql/` and should follow the naming pattern: `YYYYMMDDHHMM-description.sql`\n\n\n### Local Development (VSCode or Terminal)\n\n1. Install dependencies:\n   ```bash\n   npm install\n   ```\n2. Start the development server:\n   ```bash\n   npm start\n   ```\n3. The app will be available at:\n   ```\n   http://localhost:3000\n   ```\n\n## Project Structure\n\n```\n├── backend/                    # Backend API server\n│   ├── server.js              # Express server with integrated C# execution\n│   ├── Dockerfile             # Backend container with .NET SDK\n│   └── package.json           # Backend dependencies\n├── migrations/                 # Database migration system\n│   ├── migration-runner.js    # Migration execution engine\n│   ├── Dockerfile             # Migration container\n│   ├── package.json           # Migration dependencies\n│   └── sql/                   # Versioned migration scripts\n│       └── *.sql              # Migration files (YYYYMMDDHHMM-description.sql)\n├── src/                       # Frontend React application\n│   ├── components/            # React components\n│   │   ├── CodeEditor.tsx     # Monaco editor with performance optimizations\n│   │   ├── Console.tsx        # Console output display\n│   │   └── LanguageSelector.tsx # Language selection UI\n│   ├── config/\n│   │   └── languages.ts       # Language configurations\n│   ├── services/\n│   │   ├── api.ts             # API communication layer\n│   │   └── codeExecution.ts   # Code execution service\n│   ├── types/\n│   │   └── index.ts           # TypeScript type definitions\n│   └── App.tsx                # Main application component\n├── docker-compose.yml         # Container orchestration\n└── README.md\n```\n\n## Language Support\n\n### JavaScript\n- ES6+ support\n- Console output capture\n- Array, object, and function examples\n\n### C#\n- .NET 8.0 runtime with optimized compilation\n- Assembly caching for fast repeated execution (~100ms vs 2-3 seconds)\n- Console application support\n- LINQ operations\n- Object-oriented programming examples\n- Integrated compilation in backend (no separate containers)\n\n### SQL\n- SQL Server 2022 with IT store sales database\n- 8 tables: categories, suppliers, products, customers, payment_methods, shipping_methods, orders, order_items\n- 3 views: product_inventory, order_summary, top_products\n- Realistic sample data\n- Advanced queries: JOINs, aggregations, subqueries, window functions\n- Interactive database schema viewer\n\n## Usage\n\n1. Select a language (JavaScript, C#, or SQL)\n2. Write code in the Monaco editor\n3. Run code to see output in the console panel\n4. Use file operations to upload, download, or reset code\n5. For SQL, explore the database schema in the UI\n6. Use the slider to adjust the width of the console and editor\n7. Use code block actions (run, copy, comment, delete) on selected code\n\n## Debugging\n\nIf you encounter issues with the application:\n\n### Container Status\nCheck that all containers are running properly:\n```bash\ndocker ps\n```\n\nYou should see containers for:\n- `sqlserver-it-store` (SQL Server database)\n- `backend-api` (Backend API with C# support)\n- `frontend-app` (React frontend)\n- `db-migrations` (should exit after successful migration)\n\n### Manual Container Startup\nIf the automatic startup fails, you can start containers manually:\n\n```bash\n# Start SQL Server first\ndocker-compose up -d sqlserver-db\n\n# Run migrations manually\ndocker-compose up db-migrations\n\n# Start backend manually\ndocker-compose up -d backend-api\n\n# Start frontend manually  \ndocker-compose up -d frontend-app\n```\n\n### Common Issues\n- **Migration failures**: Check `docker logs db-migrations` for SQL syntax errors\n- **Backend connection issues**: Ensure SQL Server is healthy before backend starts\n- **Frontend not loading**: Verify backend is running on port 5445\n- **C# compilation errors**: Check that .NET SDK is properly installed in backend container\n\n### Logs\nView container logs for troubleshooting:\n```bash\n# View all logs\ndocker-compose logs\n\n# View specific container logs\ndocker logs backend-api\ndocker logs db-migrations\ndocker logs sqlserver-it-store\n```\n\n## Development Phases\n\n### Phase 1: Core Features (Completed)\n- Multi-language code execution (JavaScript, C#, SQL)\n- Monaco Editor integration\n- Real-time console output with error and info messages\n- Sandboxed execution using Docker containers for each language\n- SQL Server 2022 with comprehensive IT store sales schema and sample data\n- Interactive database schema viewer in the UI\n- File upload, download, and reset for code\n- Responsive, modern UI with Tailwind CSS\n- Adjustable layout with slider for editor/console width\n- Code block actions: run, copy, comment, delete\n- Fixed console output height\n\n### Phase 2: Advanced Features (Planned)\n- Production level security (the works!)\n- Support for additional languages and Frameworks (TypeScript, Python, React, Java, Go, yaml, PHP, etc.)\n- Code sharing and templates\n- Advanced debugging tools (breakpoints, step-through)\n- Integration with external APIs for code execution\n- Enhanced database management (import/export, schema editing)\n- Real-time code linting and suggestions\n\n\n### Phase 3: Wishlist\n- Customizable themes and layouts\n- User authentication and profiles\n- Real-time collaboration (multi-user editing)\n- Persistent user workspaces\n- Performance profiling for code execution\n- Integration with cloud IDEs\n\n\n## License\n\nMIT Non-Commercial License\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\", which is this entire solution), to use, copy, modify, and distribute the Software for non-commercial purposes only, subject to the following conditions:\n\n1. The Software is provided \"as is\", without warranty of any kind, express or implied. Use of the Software is at your own risk.\n2. The Software is intended for educational and learning purposes only. You are solely responsible for any use of the Software and any consequences thereof.\n3. You must not use the Software for any illegal or unethical activities.\n4. Commercial use of the Software is strictly prohibited without prior written permission from the author(s).\n\nBy using this Software, you acknowledge and agree to these terms.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeorgebprice%2Fcode-playground-sandbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeorgebprice%2Fcode-playground-sandbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeorgebprice%2Fcode-playground-sandbox/lists"}