Skip to content

A full-stack, real-time collaborative IDE designed for remote pair programming, technical interviews, and educational purposes. Code together, ship faster.

Notifications You must be signed in to change notification settings

ShivKnp/SyncForge-IDE-V2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

42 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

SyncForge - Real-time Collaborative IDE

A full-stack, real-time collaborative IDE designed for remote pair programming, technical interviews, and educational purposes. Code together, ship faster.

React Node.js Express.js WebSockets WebRTC Docker License: MIT

Table of Contents

Introduction

SyncForge is a powerful, web-based Integrated Development Environment (IDE) that eliminates the friction of remote collaboration. It provides a seamless, all-in-one platform where developers can code, communicate, and create together in real-time, without needing multiple tools. Whether for a high-stakes technical interview, a pair programming session, or an interactive classroom, SyncForge provides the tools for effective collaboration.

Live Demo

https://sync-forge-ide-v2.vercel.app/

Screenshot 2025-09-30 012333 image image Screenshot 2025-09-30 012543 image image Screenshot 2025-09-30 012609 image image

Key Features

  • πŸ‘¨β€πŸ’» Real-time Collaborative Editor: A multi-file Monaco Editor instance synchronized using Operational Transformation (OT) via ShareDB, ensuring conflict-free, low-latency collaborative coding with shared cursors.
  • πŸ“Ή Integrated Communication Suite: Built-in WebRTC for multi-party video/audio conferencing and screen sharing, plus a real-time chat with file-sharing capabilities, powered by WebSockets.
  • βš™οΈ Multi-Language Code Execution: A secure backend engine to compile and run C++, Java, and Python code, with shared stdin and stdout streamed to all participants.
  • πŸ–₯️ Shared Interactive Terminal: An integrated, fully-functional terminal using Xterm.js on the frontend and node-pty on the backend, giving all users access to a shared shell environment within the project's workspace.
  • πŸ€– AI-Powered Assistant: Leverages the Google Gemini API to provide an intelligent chatbot for explaining concepts and a context-aware, in-editor code completion feature that suggests "ghost text" as you type.
  • 🎨 Collaborative Whiteboard: A real-time whiteboard powered by Tldraw, allowing for shared diagramming and visual planning. Includes advanced functionality to import, annotate, and export multi-page PDF documents.
  • πŸ—‚οΈ Workspace & File Management: A complete file tree explorer that supports creating, renaming, and deleting files/folders, along with drag-and-drop uploads for single files and entire .zip projects.
  • πŸ‘‘ Host Controls & Permissions: Robust role-based access control (RBAC) allowing session hosts to manage participants, toggle features (like code execution or AI), and switch between open and host-only editing modes.

Technology Stack

Frontend

  • Framework: React.js
  • UI Library: Ant Design
  • State Management: React Hooks (useState, useEffect, useReducer, useCallback)
  • Code Editor: Monaco Editor
  • Terminal: Xterm.js
  • Whiteboard: Tldraw
  • Styling: Tailwind CSS
  • Animations: Framer Motion

Backend

  • Runtime: Node.js
  • Framework: Express.js
  • API: REST for session management & file operations

Real-time & Collaboration

  • Editor Sync: ShareDB (for Operational Transformation)
  • Signaling & Chat: Custom WebSocket Server
  • Video/Audio: WebRTC
  • Terminal Sync: Custom WebSocket Server

AI Integration

  • LLM Provider: Google Gemini API (@google/genai) for chat and code completion.

DevOps

  • Containerization: Docker

Getting Started

Follow these instructions to get a local copy of SyncForge up and running for development and testing purposes.

Prerequisites

  • Node.js (v18.x or later)
  • npm (v8.x or later)
  • Docker (for running the complete environment with the code execution engine)

Backend Setup

  1. Navigate to the backend directory:
    cd editor-backend
  2. Install dependencies:
    npm install
  3. Create an environment file: Create a .env file in the editor-backend directory and add your Google Gemini API key.
    # .env
    GEMINI_API_KEY='AIzaSy...'
  4. Start the backend server:
    npm run dev
    The server will start on http://localhost:8080.

Frontend Setup

  1. Navigate to the frontend directory in a new terminal:
    cd editor-frontend
  2. Install dependencies:
    npm install
  3. Start the React development server:
    npm start
    The application will be available at http://localhost:3000.

Docker Deployment

The provided Dockerfile sets up the backend server and its dependencies for the code execution environment.

  1. Build the Docker image from the root directory:
    docker build -t syncforge .
  2. Run the Docker container: This command maps the container's port 8080 to your local machine's port 8080.
    docker run -p 8080:8080 --name syncforge-app syncforge
    Note: For this setup, you still need to run the React frontend separately on localhost:3000 which will connect to the backend running inside the Docker container.

Environment Variables

The following environment variables are required for the application to run correctly:

  • GEMINI_API_KEY: Your API key for the Google Gemini AI services.

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.


About

A full-stack, real-time collaborative IDE designed for remote pair programming, technical interviews, and educational purposes. Code together, ship faster.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages