Code-Sync

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.
• 🖊 Showing real-time selection of what each user has currently selected.
• 💡 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.

💻 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:

   git clone https://github.com/<your-username>/Code-Sync.git
   

3. Create .env file: Inside the client and server directories create .env and set:

   Frontend:

   VITE_BACKEND_URL=<your_server_url>
   VITE_PISTON_API_URL=<your_piston_instance_api_url>
   

   Backend:

   PORT=3000
   

4. Install dependencies:

   npm install     # Run in both client and server directories
   

5. Start the servers: Frontend:

   cd client
   npm run dev
   

   Backend:

   cd server
   npm run dev
   

6. Access the application:

   http://localhost:5173/
   

🎥 Need help with the setup?

👉 Watch this video for a step-by-step guide.

Method 2: Docker Installation

1. Install Docker Desktop:

   • Download and install Docker Desktop from Docker’s official website.
   • Verify installation:

     docker --version
     

2. Pull Docker Images:

   # Pull Backend Image
   docker pull sahilatahar/code-sync-server:latest
   
   # Pull Frontend Image
   docker pull sahilatahar/code-sync-client:latest
   

3. Run Docker Containers:

   # 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:

   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 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.

🌟 Appreciation for Resources

Special thanks to:

• EMKC for providing the Piston API:

  • Piston Repository
  • Piston Docs

• Tldraw contributors:

  • Tldraw Repository
  • Tldraw Documentation

• Pollinations AI:

  • Pollinations Repository
  • Pollinations Docs

✍️ About Developer

👥 Collaborators