⚡ CollabX

Next-Generation Collaborative IDE

Stop screen-sharing. Start collaborating.

---

🧬 What is CollabX?

Most technical interviews and pair programming sessions rely on laggy screen-shares. CollabX changes that.

A full-stack collaborative environment that allows high-performance engineering teams to code, execute, draw, and talk together in real-time — all within a stunning, premium interface.

const collabx = {
    mission: "Make remote pair programming frictionless",
    features: ["Live Execution", "Voice Chat", "Whiteboard", "RBAC"],
    stack: ["Next.js", "Spring Boot", "PostgreSQL"],
    integrations: ["Judge0", "Agora WebRTC", "Razorpay"],
    status: "🟢 Live in Production"
};

async function startSession(team) {
    const room = await collabx.createRoom(team);
    return room.executeCode(); // ✨ Magic happens here
}

---

🏗️ Architecture at a Glance

Component	Responsibility	Technology
Client Gateway	Handles all UI rendering, routing, and state	Next.js 14, Tailwind
Sync Engine	Manages real-time keystrokes and cursor tracking	Spring WebSockets
Execution Node	Compiles and runs user code securely	Judge0 API, Docker
Voice Router	Manages low-latency audio streams	Agora WebRTC SDK
Persistence Layer	Stores user profiles, billing, and room history	PostgreSQL, Razorpay

---

📖 How to Use CollabX

Whether you are hosting an interview or pair programming with a friend, using CollabX is incredibly straightforward.

1️⃣ Creating a Workspace

• Sign In: Create a free account or log in via the dashboard.
• Start a Session: Click Start your workspace from the main dashboard.
• Claim your Role: As the creator, you are automatically assigned the Host role. This gives you exclusive rights to manage participants, execute code, and lock the room.

2️⃣ Inviting Collaborators

• Share the Link: Copy your unique Room ID from the top navigation bar.
• Assign Roles: When a user joins, the host can manage them with specific roles:
  • 📝 Editor: Can write code, draw on the whiteboard, and talk in the voice channel.
  • 👁️ Viewer: Can only watch the code execution and listen to the voice channel (Perfect for interview observers).

3️⃣ Writing & Executing Code

• Select Language: Choose between Python, Java, C++, JavaScript, or SQL from the editor dropdown.
• Write Together: Watch your teammates' cursors move in real-time with sub-100ms latency.
• Run: Hit the Run button. The code is instantly sent to our secure Judge0 containers, and the terminal output is broadcasted to everyone in the room simultaneously.

4️⃣ Utilizing the Tools

• 🎙️ Voice Chat: Click the microphone icon to instantly connect via WebRTC. No external Discord or Google Meet call required.
• 🎨 Whiteboard: Switch to the Whiteboard tab to draw system architectures, data flows, or algorithms collaboratively.
• 💾 Session Persistence: Need to leave? Your code and whiteboard state are automatically persisted in the database. Rejoin the URL later to pick up exactly where you left off.

---

✨ Features

	Feature	Description
⚡	Sub-100ms Synchronization	Real-time pair programming powered by WebSockets
💻	Live Code Execution	Compile & run Python, Java, C++, JS, and SQL instantly
🛡️	Role-Based Access	Secure 'Editor' or 'Viewer' permissions for room members
🎙️	Built-in Voice Chat	Peer-to-peer WebRTC voice channels via Agora
🎨	Stunning UI/UX	Premium, glassmorphic dark mode for zero distractions
👑	PRO Tier Access	Unlock unlimited executions & the exclusive Gold dashboard

---

🛠️ Tech Stack

⚡ Frontend

⚙️ Backend

🗄️ Database

🛠️ Integrations

🐳 DevOps

🛠️ Tools

---

🎯 Key Highlights

	Highlight
✅	End-to-end Next.js & Spring Boot microservices architecture
⚡	Optimized WebSocket payload handling for instant keystroke sync
🎨	Clean UI with pixel-perfect responsive design & smooth Framer Motion animations
🔒	Secure environment-based JWT authentication & role validation
🚀	Deployed live with production-grade infrastructure & automated CI/CD

---

🚀 Getting Started

Prerequisites

• Node.js >= 18
• Java JDK >= 17
• PostgreSQL
• API Keys for Judge0, Agora, and Razorpay

Installation

# Clone the repository
git clone https://github.com/Anas-Sd/CollabX.git

# Navigate to the project
cd CollabX

# Setup Backend (Spring Boot)
cd apps/backend
./mvnw clean install
# Add application-dev.yml with your DB credentials
./mvnw spring-boot:run

# Setup Frontend (Next.js)
cd ../frontend
npm install
# Configure .env.local with API endpoints
npm run dev

---

📁 Project Structure

🗂️ Click to expand file structure

CollabX/
├── 📂 apps/
│   ├── 📂 frontend/        # Next.js App Router Application
│   │   ├── 📂 src/app/     # Routes & Layouts
│   │   ├── 📂 src/components/
│   │   └── 📂 src/store/   
│   └── 📂 backend/         # Java Spring Boot Service
│       ├── 📂 src/main/java/
│       │   ├── 📂 controllers/
│       │   ├── 📂 services/
│       │   └── 📂 websocket/
│       └── 📄 pom.xml
├── 📄 docker-compose.yml
└── 📄 README.md

---

🤝 Contributing

Contributions are welcome! Here's how:

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

---

📬 Let's Connect!

📍 India | 🕐 IST (UTC+5:30) | ✅ Open for Opportunities

---

⚖️ License

Distributed under the MIT License. See LICENSE for details.

---

💬 "In the world of code, creativity is my weapon."

⭐ If you found this useful, give it a star!

From SYED ANAS with ❤️