{"id":25689758,"url":"https://github.com/sahilatahar/code-sync","last_synced_at":"2025-04-24T02:27:50.820Z","repository":{"id":219581119,"uuid":"745411638","full_name":"sahilatahar/Code-Sync","owner":"sahilatahar","description":"Code Sync offers a real-time collaborative code editor featuring unique room generation, syntax highlighting, and auto-suggestions. Users can seamlessly edit, save, and download files while communicating through group chat","archived":false,"fork":false,"pushed_at":"2024-05-23T06:45:49.000Z","size":7938,"stargazers_count":26,"open_issues_count":1,"forks_count":20,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-23T07:44:53.884Z","etag":null,"topics":["code-editor","code-editor-online","code-sync","editor","live-code-editor","mern-project","nodejs","reactjs","reactjs-project","realtime-collaboration","realtime-collobarative-editor","socket-io","tailwindcss"],"latest_commit_sha":null,"homepage":"https://code-sync-live.vercel.app/","language":"JavaScript","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/sahilatahar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2024-01-19T09:27:28.000Z","updated_at":"2024-05-27T12:23:33.980Z","dependencies_parsed_at":"2024-02-10T10:29:37.464Z","dependency_job_id":"d3fc839c-164e-4fd5-b22c-2cf0a8e87895","html_url":"https://github.com/sahilatahar/Code-Sync","commit_stats":null,"previous_names":["sahilatahar/code-sync"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahilatahar%2FCode-Sync","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahilatahar%2FCode-Sync/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahilatahar%2FCode-Sync/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahilatahar%2FCode-Sync/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sahilatahar","download_url":"https://codeload.github.com/sahilatahar/Code-Sync/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250547362,"owners_count":21448477,"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-editor-online","code-sync","editor","live-code-editor","mern-project","nodejs","reactjs","reactjs-project","realtime-collaboration","realtime-collobarative-editor","socket-io","tailwindcss"],"created_at":"2025-02-24T22:01:53.106Z","updated_at":"2025-04-24T02:27:50.813Z","avatar_url":"https://github.com/sahilatahar.png","language":"JavaScript","readme":"![logo](https://github.com/sahilatahar/Code-Sync/assets/100127570/d1ff7f52-a692-4d51-b281-358aeab9156e)\n\nA collaborative, real-time code editor where users can seamlessly code together. It provides a platform for multiple users to enter a room, share a unique room ID, and collaborate on code simultaneously.\n\n![GitHub contributors](https://img.shields.io/github/contributors/sahilatahar/Code-Sync?style=for-the-badge\u0026color=48bf21)\n![GitHub Repo stars](https://img.shields.io/github/stars/sahilatahar/Code-Sync?style=for-the-badge)\n![GitHub issues](https://img.shields.io/github/issues/sahilatahar/Code-Sync?style=for-the-badge\u0026color=d7af2d)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/sahilatahar/Code-Sync?style=for-the-badge\u0026color=f47373)\n![GitHub License](https://img.shields.io/github/license/sahilatahar/Code-Sync?style=for-the-badge\u0026color=e67234)\n![Visitors](https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2Fsahilatahar%2FCode-Sync\u0026label=Repo%20Views\u0026countColor=%2337d67a\u0026labelStyle=upper)\n\n## 🔮 Features\n\n- 💻 Real-time collaboration on code editing across multiple files\n- 📁 Create, open, edit, save, delete, and organize files and folders\n- 💾 Option to download the entire codebase as a zip file\n- 🚀 Unique room generation with room ID for collaboration\n- 🌍 Comprehensive language support for versatile programming\n- 🌈 Syntax highlighting for various file types with auto-language detection\n- 🚀 Code Execution: Users can execute the code directly within the collaboration environment\n- ⏱️ Instant updates and synchronization of code changes across all files and folders\n- 📣 Notifications for user join and leave events\n- 👥 User presence list with online/offline status indicators\n- 💬 Real-time group chatting functionality\n- 🎩 Real-time tooltip displaying users currently editing\n- 💡 Auto suggestion based on programming language\n- 🔠 Option to change font size and font family\n- 🎨 Multiple themes for personalized coding experience\n- 🎨 Collaborative Drawing: Enable users to draw and sketch collaboratively in real-time\n- 🤖 Copilot: An AI-powered assistant that generates code, allowing you to insert, copy, or replace content seamlessly within your files.\n\n## 🚀 Live Preview\n\nYou can view the live preview of the project [here](https://code-sync-live.vercel.app/).\n\n## 💻 Tech Stack\n\n![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge\u0026logo=react-router\u0026logoColor=white)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n![NodeJS](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge\u0026logo=node.js\u0026logoColor=white)\n![ExpressJS](https://img.shields.io/badge/Express.js-404D59?style=for-the-badge)\n![Socket io](https://img.shields.io/badge/Socket.io-ffffff?style=for-the-badge)\n![Git](https://img.shields.io/badge/GIT-E44C30?style=for-the-badge\u0026logo=git\u0026logoColor=white)\n![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge\u0026logo=github\u0026logoColor=white)\n![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge\u0026logo=vercel\u0026logoColor=white)\n![Docker](https://img.shields.io/badge/Docker-2496ED?style=for-the-badge\u0026logo=docker\u0026logoColor=white)\n\n## ⚙️ Installation\n\n### Method 1: Manual Installation\n\n1. **Fork this repository:** Click the Fork button located in the top-right corner of this page.\n2. **Clone the repository:**\n   ```bash\n   git clone https://github.com/\u003cyour-username\u003e/Code-Sync.git\n   ```\n3. **Create .env file:**\n   Inside the client and server directories create `.env` and set:\n\n   Frontend:\n\n   ```bash\n   VITE_BACKEND_URL=\u003cyour_server_url\u003e\n   ```\n\n   Backend:\n\n   ```bash\n   PORT=3000\n   ```\n\n4. **Install dependencies:**\n   ```bash\n   npm install     # Run in both client and server directories\n   ```\n5. **Start the servers:**\n   Frontend:\n   ```bash\n   cd client\n   npm run dev\n   ```\n   Backend:\n   ```bash\n   cd server\n   npm run dev\n   ```\n6. **Access the application:**\n   ```bash\n   http://localhost:5173/\n   ```\n### 🎥 Need help with the setup?\n👉 Watch [this video](https://youtu.be/zVHwOmU0aqo) for a step-by-step guide.\n### Method 2: Docker Installation\n\n1. **Install Docker Desktop:**\n\n   - Download and install **Docker Desktop** from [Docker’s official website](https://www.docker.com/products/docker-desktop/).\n   - Verify installation:\n     ```bash\n     docker --version\n     ```\n\n2. **Pull Docker Images:**\n\n   ```bash\n   # Pull Backend Image\n   docker pull sahilatahar/code-sync-server:latest\n\n   # Pull Frontend Image\n   docker pull sahilatahar/code-sync-client:latest\n   ```\n\n3. **Run Docker Containers:**\n\n   ```bash\n   # Run Backend Container (Port 3000)\n   docker run -d -p 3000:3000 --name code-sync-server sahilatahar/code-sync-server:latest\n\n   # Run Frontend Container (Port 5173)\n   docker run -d -p 5173:5173 --name code-sync-client sahilatahar/code-sync-client:latest\n   ```\n\n4. **Access the application:**\n   ```bash\n   http://localhost:5173/\n   ```\n\n## 🔮 Features for Next Release\n\n- **Admin Permission:** Implement an admin permission system to manage user access levels and control over certain platform features.\n\n## 🤝 Contribute\n\nWe welcome contributions to make Code Sync even better! Follow the [contribution guidelines](CONTRIBUTING.md) to get started.\n\n## 🌟 Support Us\n\nIf you find this helpful or valuable, please consider 🌟 starring the repository. It helps us gain visibility and encourages further development.\n\n## 🧾 License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n## 🌟 Appreciation for Resources\n\nSpecial thanks to:\n\n- EMKC for providing the Piston API:\n\n  - [Piston Repository](https://github.com/engineer-man/piston)\n  - [Piston Docs](https://piston.readthedocs.io/en/latest/api-v2/)\n\n- Tldraw contributors:\n  - [Tldraw Repository](https://github.com/tldraw/tldraw)\n  - [Tldraw Documentation](https://tldraw.dev/)\n\n- Pollinations AI:\n  - [Pollinations Repository](https://github.com/pollinations/pollinations)\n  - [Pollinations Docs](https://pollinations.ai/)\n\n## ✍️ About Developer\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\"\u003e\n        \u003cimg src=\"https://github.com/sahilatahar.png\" width=\"120px;\" alt=\"Sahil Atahar\"/\u003e\n        \u003cbr /\u003e\n        \u003cb\u003eSahil Atahar\u003c/b\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"center\"\u003e\n            \u003ca href=\"https://github.com/sahilatahar\"\u003e\n            \u003cimg src=\"https://img.shields.io/badge/GitHub-100000.svg?style=for-the-badge\u0026logo=github\u0026logoColor=white\"/\u003e\n            \u003c/a\u003e\n            \u003cbr/\u003e\n            \u003ca href=\"https://linkedin.com/in/sahilatahar\"\u003e\n            \u003cimg src=\"https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\"/\u003e\n            \u003c/a\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsahilatahar%2Fcode-sync","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsahilatahar%2Fcode-sync","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsahilatahar%2Fcode-sync/lists"}