{"id":29544559,"url":"https://github.com/mrmuhammadhussain/real-time-code-editor","last_synced_at":"2026-04-09T23:11:46.531Z","repository":{"id":302235721,"uuid":"1011644321","full_name":"MrMuhammadHussain/real-time-code-editor","owner":"MrMuhammadHussain","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-15T18:26:00.000Z","size":375,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-16T16:03:30.454Z","etag":null,"topics":["avvvatars","codemirror","codemirror-editor","deployed","expressjs","railway-app","reactjs","realtime","server","socket-io","synchronized"],"latest_commit_sha":null,"homepage":"https://realtime-codeeditor.up.railway.app/","language":"JavaScript","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/MrMuhammadHussain.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-01T06:16:02.000Z","updated_at":"2025-07-15T18:26:03.000Z","dependencies_parsed_at":"2025-07-01T09:46:44.720Z","dependency_job_id":null,"html_url":"https://github.com/MrMuhammadHussain/real-time-code-editor","commit_stats":null,"previous_names":["mrmuhammadhussain/real-time-code-editor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MrMuhammadHussain/real-time-code-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrMuhammadHussain%2Freal-time-code-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrMuhammadHussain%2Freal-time-code-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrMuhammadHussain%2Freal-time-code-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrMuhammadHussain%2Freal-time-code-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MrMuhammadHussain","download_url":"https://codeload.github.com/MrMuhammadHussain/real-time-code-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrMuhammadHussain%2Freal-time-code-editor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265619519,"owners_count":23799443,"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":["avvvatars","codemirror","codemirror-editor","deployed","expressjs","railway-app","reactjs","realtime","server","socket-io","synchronized"],"created_at":"2025-07-17T15:02:27.682Z","updated_at":"2026-04-09T23:11:46.519Z","avatar_url":"https://github.com/MrMuhammadHussain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧑‍💻 Real-Time Collaborative JavaScripts Code Editor \n\nA real-time collaborative code editor built with **React**, **Socket.IO**, **Node.js**, and **Express**. Users can write and run JavaScript code together, see who is typing, get code output in real-time, and even receive AI code suggestions.\n\n---\n\n## 🚀 Features\n\n* 🧑‍🥝 Real-time collaboration\n* ✨ See who is typing\n* 🧠 AI-based code suggestion (free, no API key needed)//Temporary Disable or under Development\n* 📄 Instant code sync\n* 💻 Terminal-style code output\n* 👥 Show connected users\n* 🗌 Copy Room ID \u0026 share with others\n* ⚡ Smooth UI with CodeMirror\n* 👨‍💻 Instant code output for all users real-time\n* ⌨️ Press \"Ctrl+Space\" together to get hints\n* ⌨️ Press \"Shift+Enter\" together to Run Code\n* 👥 All connected users notified when someone Join or Leave the Room\n\n---\n\n## 🖼️ Preview\n\n![App Preview](./public/AppPreview_1.png)\n![App Preview](./public/AppPreview_2.png)\n\n---\n\n## 🛠️ Technologies Used\n\n* React\n* CodeMirror\n* Node.js\n* Express\n* Socket.IO\n* Railway (for deployment)\n\n---\n\n## 📁 Project Structure\n\n```\n├── .gitignore\n├── README.md\n├── package-lock.json\n├── package.json\n├── public\n    ├── AppPreview_1.png\n    ├── AppPreview_2.png\n    ├── code-sync.png\n    ├── favicon.ico\n    ├── index.html\n    ├── logo192.png\n    ├── logo512.png\n    ├── manifest.json\n    └── robots.txt\n├── server.mjs\n└── src\n    ├── Actions.js\n    ├── App.css\n    ├── App.js\n    ├── App.test.js\n    ├── Pages\n        ├── EditorPage.js\n        └── Home.js\n    ├── components\n        ├── Client.js\n        └── Editor.js\n    ├── index.css\n    ├── index.js\n    ├── logo.svg\n    ├── reportWebVitals.js\n    ├── setupTests.js\n    └── socket.js\n```\n\n---\n\n## 🔧 Setup Instructions\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/MrMuhammadHussain/real-time-code-editor.git\ncd real-time-code-editor\n```\n\n### 2. Install Dependencies\n\n```bash\nnpm install\n```\n\nOr if using Yarn:\n\n```bash\nyarn\n```\n\n### 3. Set Environment Variable\n\nCreate a `.env` file at root Folder:\n\n```env\nREACT_APP_BACKEND_URL=\"http://localhost:5080/\"\n```\n\n### 4. Run the App (Development)\n\n```bash\n# For frontend\n\nnpm run fornt\n\n# For backend\n\nnpm run server:dev\n```\n---\n\n## 🌍 Live App\n\n🔗 [https://realtime-codeeditor.up.railway.app/](https://realtime-codeeditor.up.railway.app/)\n\n---\n\n## ⚠️ Known Issues\n\n* `eval()` is used to run code (JavaScript only). Avoid running unsafe code.\n* React 19+ may conflict with some libraries like `react-avatar`. Use alternatives like `avvvatars-react`.\n* 🖥️ It's compatible with desktop\n* 📱 to use in mobile rotate the phone or use desktop site version\n\n---\n\n## 🙌 Credits\n\nThis project was made by **Me** based on a tutorial, with additional features added manually (AI suggestions, typing status, code output, how many users are connected, code hints, etc.).\n\n---\n\n## 📄 License\n\nThis project is open-source and available under the MIT License\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrmuhammadhussain%2Freal-time-code-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrmuhammadhussain%2Freal-time-code-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrmuhammadhussain%2Freal-time-code-editor/lists"}