/Code-Sync

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

Primary LanguageTypeScriptMIT LicenseMIT

logo

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.

GitHub contributors GitHub Repo stars GitHub issues GitHub pull requests GitHub License Visitors

🔮 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, providing instant feedback and results.
  • ⏱️ Instant updates and synchronization of code changes across all files and folders
  • 📣 Notifications for user join and leave events
  • 👥 User presence list of users currently in the collaboration session, including online/offline status indicators
  • 💬 Group chatting allows users to communicate in real-time while working on code.
  • 🎩 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, enhancing the interactive experience of your project.

🚀 Live Preview

You can view the live preview of the project here.

💻 Tech Stack

React TypeScript React Router Tailwind CSS NodeJS ExpressJS Socket io Git GitHub Vercel

⚙️ Installation

  1. Fork this repository: Click the Fork button located in the top-right corner of this page to fork the repository.

  2. Clone the repository:

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

  3. Set .env file: Inside the client and server directories rename the .env.example file to .env and set the following environment variables:

    Frontend:

    VITE_BACKEND_URL=<your_server_url>

    Backend:

    PORT=3000

  4. Install dependencies: Navigate to the frontend and backend directories separately and run:

     npm install

  5. Start the frontend and backend servers:
    Frontend:

    cd client
npm run dev

    Backend:

    cd server
npm run dev

  6. Access the application: Open a browser and enter the following URL:

    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! Whether you're reporting a bug, suggesting a new feature, or fixing a typo, your input is valuable to us. 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. We appreciate your support!

🧾 License

This project is licensed under the MIT License.

🌟 Appreciation for Resources

Special thanks to EMKC for providing the Piston API, enabling code execution. For more information, visit the following links:

Also, huge gratitude to Tldraw contributors for their amazing library. For more information about Tldraw, please visit:

✍️ About Developer

Sahil Atahar
Sahil Atahar