Skip to content

README.md

Latest commit

 

History

History
69 lines (55 loc) · 2.44 KB

README.md

File metadata and controls

69 lines (55 loc) · 2.44 KB

Collaborative Code Editor

A modern, real-time collaborative code editor built with React, Vite, Node.js, and Socket.IO. This project enables multiple users to join a shared coding room, edit code together, communicate via chat, and collaborate through integrated video calls—all in the browser, with no login required.

🚀 Live Site 👉 [Visit here]https://collaborative-code-editor-0qwj.onrender.com/

🛠️ Tech Stack Node.js React + Vite Socket.io Express.js Render for Deployment

Features

🚀 Real-Time Collaborative Code Editing

  • Multiple users can join the same room and edit code together in real time.
  • Language selection (JavaScript, Python, Java) for syntax highlighting.
  • Live user list showing who is present in the room.
  • Typing indicator to show when someone is editing.

💬 Real-Time Room Chat

  • Integrated chat panel for each code room.
  • Send and receive messages instantly with all room participants.
  • Usernames displayed with each message.
  • No login required—just enter a room ID and your name.

🎥 Video Call Collaboration

  • Floating, draggable video call panel in the editor UI.
  • All users in a room automatically join the call (camera and mic are off by default).
  • Toggle camera and microphone independently at any time.
  • Visual indicators show which users have their camera or mic on/off.
  • Live microphone volume bar for your own video tile, showing speech intensity in real time.
  • Video tiles for all users with camera on; placeholder for those with camera off.

🖥️ Modern UI/UX

  • Responsive, clean interface with sidebar for room info and chat.
  • Editor powered by Monaco (the same editor as VS Code).
  • Floating video call panel can be dragged anywhere in the editor area.

Getting Started

  1. Install dependencies:
    • Backend: npm install in the project root
    • Frontend: npm install in frontend/vite-project
  2. Start the backend: 
    npm run start
  3. Start the frontend: 
    cd frontend/vite-project
npm run dev
  4. Open your browser:
    • Go to http://localhost:5173 (or the port shown in your terminal)

Tech Stack

  • Frontend: React, Vite, Monaco Editor, Socket.IO, Simple-Peer (WebRTC)
  • Backend: Node.js, Express, Socket.IO

Usage

  • Enter a room ID and your name to join a collaborative session.
  • Edit code, chat, and use video call features with other participants in the same room.

Feel free to contribute or suggest new features!