https://github.com/sahilatahar/code-sync
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
https://github.com/sahilatahar/code-sync
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
Last synced: 6 months ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/sahilatahar/code-sync
- Owner: sahilatahar
- License: mit
- Created: 2024-01-19T09:27:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-23T06:45:49.000Z (over 1 year ago)
- Last Synced: 2024-05-23T07:44:53.884Z (over 1 year ago)
- 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
- Language: JavaScript
- Homepage: https://code-sync-live.vercel.app/
- Size: 7.57 MB
- Stars: 26
- Watchers: 1
- Forks: 20
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
A 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.
## 🔮 Features
- 💻 Real-time collaboration on code editing across multiple files
- 📁 Create, open, edit, save, delete, and organize files and folders
- 💾 Option to download the entire codebase as a zip file
- 🚀 Unique room generation with room ID for collaboration
- 🌍 Comprehensive language support for versatile programming
- 🌈 Syntax highlighting for various file types with auto-language detection
- 🚀 Code Execution: Users can execute the code directly within the collaboration environment
- ⏱️ Instant updates and synchronization of code changes across all files and folders
- 📣 Notifications for user join and leave events
- 👥 User presence list with online/offline status indicators
- 💬 Real-time group chatting functionality
- 🎩 Real-time tooltip displaying users currently editing
- 💡 Auto suggestion based on programming language
- 🔠 Option to change font size and font family
- 🎨 Multiple themes for personalized coding experience
- 🎨 Collaborative Drawing: Enable users to draw and sketch collaboratively in real-time
- 🤖 Copilot: An AI-powered assistant that generates code, allowing you to insert, copy, or replace content seamlessly within your files.
## 🚀 Live Preview
You can view the live preview of the project [here](https://code-sync-live.vercel.app/).
## 💻 Tech Stack
## ⚙️ Installation
### Method 1: Manual Installation
1. **Fork this repository:** Click the Fork button located in the top-right corner of this page.
2. **Clone the repository:**
```bash
git clone https://github.com//Code-Sync.git
```
3. **Create .env file:**
Inside the client and server directories create `.env` and set:
Frontend:
```bash
VITE_BACKEND_URL=
```
Backend:
```bash
PORT=3000
```
4. **Install dependencies:**
```bash
npm install # Run in both client and server directories
```
5. **Start the servers:**
Frontend:
```bash
cd client
npm run dev
```
Backend:
```bash
cd server
npm run dev
```
6. **Access the application:**
```bash
http://localhost:5173/
```
### 🎥 Need help with the setup?
👉 Watch [this video](https://youtu.be/zVHwOmU0aqo) for a step-by-step guide.
### Method 2: Docker Installation
1. **Install Docker Desktop:**
- Download and install **Docker Desktop** from [Docker’s official website](https://www.docker.com/products/docker-desktop/).
- Verify installation:
```bash
docker --version
```
2. **Pull Docker Images:**
```bash
# Pull Backend Image
docker pull sahilatahar/code-sync-server:latest
# Pull Frontend Image
docker pull sahilatahar/code-sync-client:latest
```
3. **Run Docker Containers:**
```bash
# Run Backend Container (Port 3000)
docker run -d -p 3000:3000 --name code-sync-server sahilatahar/code-sync-server:latest
# Run Frontend Container (Port 5173)
docker run -d -p 5173:5173 --name code-sync-client sahilatahar/code-sync-client:latest
```
4. **Access the application:**
```bash
http://localhost:5173/
```
## 🔮 Features for Next Release
- **Admin Permission:** Implement an admin permission system to manage user access levels and control over certain platform features.
## 🤝 Contribute
We welcome contributions to make Code Sync even better! Follow the [contribution guidelines](CONTRIBUTING.md) to get started.
## 🌟 Support Us
If you find this helpful or valuable, please consider 🌟 starring the repository. It helps us gain visibility and encourages further development.
## 🧾 License
This project is licensed under the [MIT License](LICENSE).
## 🌟 Appreciation for Resources
Special thanks to:
- EMKC for providing the Piston API:
- [Piston Repository](https://github.com/engineer-man/piston)
- [Piston Docs](https://piston.readthedocs.io/en/latest/api-v2/)
- Tldraw contributors:
- [Tldraw Repository](https://github.com/tldraw/tldraw)
- [Tldraw Documentation](https://tldraw.dev/)
- Pollinations AI:
- [Pollinations Repository](https://github.com/pollinations/pollinations)
- [Pollinations Docs](https://pollinations.ai/)
## ✍️ About Developer
Sahil Atahar
