{"id":14155360,"url":"https://github.com/theanujdev/code-playground-frontend","last_synced_at":"2025-04-13T18:52:10.810Z","repository":{"id":239346050,"uuid":"375441633","full_name":"theanujdev/code-playground-frontend","owner":"theanujdev","description":"Code Playground Frontend built with xternjs terminal and monoco editor.","archived":false,"fork":false,"pushed_at":"2022-06-08T12:29:46.000Z","size":11299,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T09:41:05.162Z","etag":null,"topics":["code-editor","code-playground","frontend","monoco-editor","react","reactjs","socket-io","theanujdev","typescript","usecontext","webapp","xtern"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theanujdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2021-06-09T17:43:02.000Z","updated_at":"2024-05-08T17:18:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"d34a2333-4565-4be6-9356-cc8bb201ef57","html_url":"https://github.com/theanujdev/code-playground-frontend","commit_stats":null,"previous_names":["theanujdev/code-playground-frontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theanujdev%2Fcode-playground-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theanujdev%2Fcode-playground-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theanujdev%2Fcode-playground-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theanujdev%2Fcode-playground-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theanujdev","download_url":"https://codeload.github.com/theanujdev/code-playground-frontend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248765987,"owners_count":21158296,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["code-editor","code-playground","frontend","monoco-editor","react","reactjs","socket-io","theanujdev","typescript","usecontext","webapp","xtern"],"created_at":"2024-08-17T08:02:58.089Z","updated_at":"2025-04-13T18:52:10.783Z","avatar_url":"https://github.com/theanujdev.png","language":"TypeScript","readme":"# Code Playground (Frontend)\n\n![Code Playground Demo](https://raw.githubusercontent.com/theanujdev/code-playground-frontend/master/img/code-playground.gif)\n\n## Overview\n\nThis project provides a real-time cloud-based code sync and editing and website developing platform where you can create any code file. It will provide linting in editor and a basic terminal. Edit HTML, CSS and JS and preview your website in built-in web-renderer.\n\n## Tech Stack\n\n**Client:** React, Typescript, Monoco-editor, Socket.io-client, Xtermjs, React reflex\n\n**Server:** Node, Express, Typescript, Mongoose, Cookie-parser, Socketio\n\n## Features\n\n- Multiple resizable windows\n- Featured code editor\n- Create, update, delete files\n- Realtime cloud sync of code\n- Preview webpage\n- Built-in terminal with syntax-highlighting\n- Flexible and auto resizable components and clean user interface\n\n## Run Locally\n\n- Clone the project\n\n```bash\ngit clone https://github.com/theanujdev/code-playground-frontend.git\n```\n\n- Go to the project directory\n\n```bash\ncd code-playground-frontend\n```\n\n- Install dependencies\n\n```bash\nnpm install\n```\n\n- Update constants in _src/config/index.ts_ file :\n\n  `SERVER_URL`, `SOCKET_URL`\n\n  (which are going to be same in most cases)\n\n- Start the server\n\n```bash\nnpm start\n```\n\n\u003e **Note:** You need to run [Code Playground Backend](https://github.com/theanujdev/code-playground-backend) server in the background.\n\n## Optimizations\n\nCode is refactored and project structure is optimized for scalability. Along with react components and pages, context hook for global state and _debounce_ function have also been used.\n\n## Screenshots\n\n![App Screenshot](https://raw.githubusercontent.com/theanujdev/code-playground-frontend/master/img/code-playground.png)\n\n## Feedback\n\nIf you have any feedback, please reach out at [@theanujdev](https://twitter.com/theanujdev)\n\n## Authors\n\n- [@theanujdev](https://www.github.com/theanujdev)\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","funding_links":[],"categories":["webapp"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheanujdev%2Fcode-playground-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheanujdev%2Fcode-playground-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheanujdev%2Fcode-playground-frontend/lists"}