https://github.com/hack-in-peace/collaborative-code-editor

A real-time collaborative code editor that allows multiple users to write and execute code together in Python, JavaScript, and Java.
https://github.com/hack-in-peace/collaborative-code-editor

express html javascript mongodb nodejs react-icons reactjs socket-io tailwindcss websocket

Last synced: 2 months ago
JSON representation

A real-time collaborative code editor that allows multiple users to write and execute code together in Python, JavaScript, and Java.

• Host: GitHub
• URL: https://github.com/hack-in-peace/collaborative-code-editor
• Owner: Hack-in-Peace
• Created: 2025-07-12T13:06:08.000Z (12 months ago)
• Default Branch: master
• Last Pushed: 2025-07-12T13:41:35.000Z (12 months ago)
• Last Synced: 2025-07-12T15:25:14.126Z (12 months ago)
• Topics: express, html, javascript, mongodb, nodejs, react-icons, reactjs, socket-io, tailwindcss, websocket
• Language: JavaScript
• Homepage:
• Size: 4.25 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Collaborative Code Editor 💻✍️

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)

[![GitHub stars](https://img.shields.io/github/stars/Hack-in-Peace/Collaborative-Code-Editor?style=social)](https://github.com/Hack-in-Peace/Collaborative-Code-Editor/stargazers)

[![Build](https://img.shields.io/badge/build-passing-brightgreen.svg)](#)

A real-time collaborative code editor that allows multiple users to write and execute code together in Python, JavaScript, and Java.

## 🚀 Features

- 🔄 Real-time collaborative editing via Socket.io

- 💻 Code execution in Python, JavaScript, and Java

- 🌙 Dark and Light theme toggle

- 📂 File creation and management per project

- 🧑‍🤝‍🧑 User presence and typing indicators

- ⚡ Fast and responsive UI (Monaco Editor + Tailwind CSS)

## 🏗️ Project Structure

collab-code-editor/

├── collab-code-editor-backend/ # Express backend with code execution

├── collab-code-editor-frontend/ # React frontend with Monaco editor

## ⚙️ Tech Stack

- Frontend: React, Tailwind CSS, Socket.io-client

- Backend: Node.js, Express, MongoDB, Socket.io

- Code Execution: child_process or Judge0/Piston integration

## 📦 Setup Instructions

### 🔃 Clone the Repository

git clone https://github.com/Hack-in-Peace/Collaborative-Code-Editor.git

cd Collaborative-Code-Editor

📦 Install Dependencies

# Backend

cd collab-code-editor-backend

npm install

# Frontend

cd ../collab-code-editor-frontend

npm install

▶️ Run the App

# Start backend

cd collab-code-editor-backend

npm run dev

# Start frontend

cd ../collab-code-editor-frontend

npm start

📸 Screenshots



🧠 Contributors

Rima Majumder