CollabX

A real-time collaborative code editor that allows multiple users to code together seamlessly. It provides a platform where users can create or join rooms, share unique room IDs, and collaborate in real-time on various programming languages.

---

🚀 Features

• 💻 Real-time Code Collaboration: Multiple users can edit code simultaneously.
• 📁 File & Folder Management: Create, open, edit, save, and delete files/folders.
• 💾 Download Codebase: Users can download the entire codebase as a ZIP file.
• 🚀 Room-Based Collaboration: Generate unique room IDs for easy sharing.
• 🌍 Multi-Language Support: Supports multiple programming languages.
• 🎨 Syntax Highlighting: Auto-detection and highlighting for various file types.
• ⏱️ Instant Code Synchronization: Immediate updates across all connected users.
• 📣 User Presence & Notifications: Join/leave notifications and user status indicators.
• 💬 Real-time Chat: Chat with collaborators while coding.
• 💡 Code Autocompletion: Smart suggestions based on language.
• 🎨 Customization: Multiple themes, adjustable font size, and font family.
• 📝 Live Preview: Instant preview of rendered HTML/CSS/JS code.

---

💻 Tech Stack

Frontend:

• React.js
• TypeScript
• React Router
• Tailwind CSS

Backend:

• Node.js
• Express.js
• Socket.io

DevOps & Tools:

• Docker
• Git & GitHub
• Vercel

---

⚙️ Installation

Method 1: Manual Installation

1. Fork & Clone the Repository:

   git clone https://github.com/rajanarahul93/CollabX.git
   cd CollabX

2. Setup Environment Variables:

   • Rename .env.example to .env in both client/ and server/ directories and configure the required variables.

3. Install Dependencies:

   cd client && npm install
   cd ../server && npm install

4. Run the Application:

   • Frontend:

     cd client
     npm run dev

   • Backend:

     cd server
     npm run dev

5. Access the App:

   • Open http://localhost:5173 in your browser.

Method 2: Docker Installation

1. Install Docker:

   • Download and install Docker from Docker Official Website.

2. Run Docker Containers:

   docker-compose up --build

3. Access the App:

   • Open http://localhost:5173 in your browser.

---

🛠️ Upcoming Features

• Admin Permissions: Manage user access and control features.
• Code Execution: Directly execute code within the environment.
• Collaborative Drawing: Real-time sketching and diagramming.
• AI-Powered Suggestions: Smarter autocompletion and debugging assistance.

---

🌟 Support

If you like this project, please ⭐️ star the repository to show support and help to improve!

---

✍️ About Developer

Rajana Vara Rahul
📌 GitHub: @rajanarahul93
📌 LinkedIn: Vara Rahul Rajana
📌 Twitter: @rajanarahul7

---

CollabX - Code Together, Anytime, Anywhere!