CodeSync Project

CodeSync is a comprehensive project that includes a feature-rich code editor, designed to offer functionalities similar to VS Code with collaborative editing. The project encompasses a robust set of features, including editing, opening, listing, creating, managing, and saving files and folders. Additionally, it integrates a basic terminal. The standout feature of CodeCollab is its collaborative editing capability, which leverages socket.io for real-time communication, allowing multiple users to work on the same codebase simultaneously.

DeskTop Application

🧐 Features

• Open Files: Easily open existing files for viewing and editing.
• List Files and Folders: Browse and navigate your project directory structure seamlessly.
• Create Files and Folders: Quickly create new files and folders within your project.
• Edit Files: Provides a rich text editor for coding with syntax highlighting and code completion.
• Save Files: Save your work with a simple keystroke or button click.
• Manage Files and Folders: Rename, move, and delete files and folders as needed.
• Basic Terminal: Includes a basic terminal for running commands within the editor.
• Collaborative Editing: Real-time collaborative editing using socket.io, allowing multiple users to work on the same codebase simultaneously.

📁 Project Structure

This repository consists of four main components:

Backend: Built with Ruby on Rails (user authentication and management)
Websocket: Built with Socket.io (for real time communication)
Desktop: Built with Next.js and Tauri
Website: Built with Next.js

🛠️ Built With

Technologies used in the project:

Backend: Ruby on Rails, PostgreSQL
Frontend: Next.js, Tailwind CSS, Next UI , monaco-editor , primereact terminal
Desktop: Tauri
websocket: Socket.io

💻 Installation Steps:

Desktop:

1. Clone the repository

https://github.com/kasi-sj/code-sync

2. Navigate to the project directory

cd code-sync-desktop

3. Install dependencies

npm i

4. Start the development server

npm run tauri dev

Website:

1. Clone the repository

https://github.com/kasi-sj/code-sync

2. Navigate to the project directory

cd code-sync-website

3. Install dependencies

npm i

4. Start the development server

npm run dev

Websocket:

1. Clone the repository

https://github.com/kasi-sj/code-sync

2. Navigate to the project directory

cd code-sync-backend

3. Install dependencies

npm i

4. Start the development server

npm start

Backend:

The backend for user management in CodeCollab is reused from another project. For detailed information about the backend implementation, please refer to the Backend README of the original project.

🔧 Implementation

• Operation Transformation: Ensures consistency of edits made by multiple users in real-time using server_version and client_version, allowing for smooth collaborative editing.
• Cursor Management: Tracks and updates cursor positions for all users, providing a seamless collaborative experience.
• Socket Channel: Utilizes socket channels for sending and receiving updates efficiently.
• Architecture:
  • Multiple users connect to a single server (root server) that acts as the single source of truth.
  • The root server sends updates to all connected users, ensuring consistency.
  • Socket.io is used for managing connections and real-time communication.
• File Management Channels:
  • A single channel is created by the host (root server) for overall file management.
  • Separate channels are created by the host for each file that is in editing mode, allowing for focused updates and edits.
• Terminal Integration: The terminal is connected by running system commands through a Rust(tauri) API. Input and output streams are transferred from the frontend to the backend, enabling seamless command execution.

📥 Download

You can download the latest version of CodeCollab from the releases page.

💖 Like My Work?

Give this repo a star ⭐