🚀 CodeCollab

CodeCollab is a collaborative coding platform built with the MERN stack (MongoDB, Express, React, Node.js). It enables users to create projects, collaborate in real-time, chat, and run code securely in the browser using WebContainer. Key features include user authentication, project management, AI-powered assistance, and live code execution.

---

✨ Features

• 🔐 User Authentication: Register, login, and logout with JWT-based authentication.
• 🗂️ Project Management: Create, view, and delete projects. Supports multiple collaborators per project.
• 👥 Collaborators: Add/remove users as collaborators in a project.
• 💬 Real-Time Chat: Chat with project collaborators using Socket.IO.
• 🤖 AI Assistant: Mention @ai in chat to get code suggestions powered by Google Gemini AI.
• 🧾 File Tree & Editor: View and edit project files with a syntax-highlighted code editor.
• 🧪 Live Code Execution: Secure, browser-based code execution via WebContainer.
• 🔐 Cross-Origin Isolation: Configured for secure use of SharedArrayBuffer and WebContainer.
• 📱 Responsive UI: Built with React and Tailwind CSS for modern, responsive design.

---

🛠️ Tech Stack

Frontend:

• React
• Vite
• Tailwind CSS
• Socket.IO Client
• Axios
• Markdown-to-JSX
• Highlight.js

Backend:

• Node.js
• Express
• MongoDB (Mongoose)
• Socket.IO
• JWT
• Redis (for token blacklisting)
• Google Generative AI

Other:

• WebContainer (for secure code execution)
• HTTPS (required for WebContainer and cross-origin isolation)

---

⚙️ Getting Started

✅ Prerequisites

• Node.js (v18+ recommended)
• MongoDB instance (local or cloud)
• Redis instance (local or cloud)
• mkcert (for local HTTPS certificates)
• Google Gemini AI API Key

---

🔧 1. Clone the Repository

git clone https://github.com/yourusername/codecollab.git
cd codecollab

---

🔙 2. Backend Setup

a. Install Dependencies

cd backend
npm install

b. Create .env File

PORT=3000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_PASSWORD=your_redis_password_if_any
GOOGLE_AI_KEY=your_google_gemini_api_key

c. Generate HTTPS Certificates (for local dev)

mkcert -key-file key.pem -cert-file cert.pem localhost

Place key.pem and cert.pem in the backend directory.

d. Update server.js for HTTPS

import https from 'https';
import fs from 'fs';
// ...other imports

const sslOptions = {
  key: fs.readFileSync('./key.pem'),
  cert: fs.readFileSync('./cert.pem'),
};

const server = https.createServer(sslOptions, app);
// ...rest of the code

e. Start the Backend Server

npm start

---

💻 3. Frontend Setup

a. Install Dependencies

cd frontend
npm install

b. Create .env File

VITE_API_URL=https://localhost:3000

c. Optional: Enable HTTPS for Vite (local dev)

Edit vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import fs from 'fs'

export default defineConfig({
  plugins: [react()],
  server: {
    https: {
      key: fs.readFileSync('../backend/key.pem'),
      cert: fs.readFileSync('../backend/cert.pem'),
    },
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp"
    }
  }
})

d. Start the Frontend

npm run dev

---

🚀 Deployment

• Production HTTPS: Use trusted SSL (e.g., Let’s Encrypt) for backend and frontend.
• Cross-Origin Isolation Headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

• Environment Variables: Use secure, production-level values.

---

⚠️ Deployment Environment Notice

Note:
Real-time code execution using WebContainers is fully supported in local development.
On deployed platforms, this feature may be restricted or non-functional due to browser sandboxing and cross-origin isolation requirements.

✅ To experience full functionality:

• Clone the repository and run the project locally using npm start
• Use a Chromium-based browser (like Chrome or Edge)

❌ May not work as expected on:

• Hosted platforms without proper cross-origin headers
• Browsers like Firefox or Safari

📚 For technical details, refer to WebContainer documentation

---

🧑‍💻 Usage

1. Register or login.
2. Create a new project.
3. Add collaborators.
4. Chat in real-time and use @ai for help.
5. Edit code and run it directly in the browser.

---

🐛 Troubleshooting

• WebContainer Errors: Ensure HTTPS and isolation headers are properly set.
• Socket.IO Issues: Use wss:// and run backend with HTTPS.
• AI Assistant Not Responding: Verify your Google Gemini API key and network settings.

---

📄 License

MIT License

---

🙌 Credits

• WebContainer
• Google Generative AI
• React
• Socket.IO
• Vite
• Tailwind CSS