🚀 CollabCode - Real-Time Collaborative Code Editor

Welcome to CollabCode, a real-time collaborative code editor that allows multiple users to join a room and code together simultaneously. This application is perfect for pair programming, technical interviews, and teaching, providing a seamless and intuitive coding experience.

(You can replace the placeholder link above with the actual link to your GIF once you upload it)

✨ Features

• Real-Time Collaboration: Code with multiple users in the same room, with changes appearing instantly for everyone.
• Live Chat: Communicate with your collaborators directly in the application with a built-in chatbox.
• Code Execution: Run your code directly in the editor and see the output in real-time for various languages (C++, Java, Python, JavaScript, etc.).
• Active User Avatars: See who is currently in the room and who is actively coding.
• Simple Room Management: Create a room with a single click and share the unique Room ID to invite others.
• Notifications: Get real-time toast notifications when users join or leave the room.

🛠️ Tech Stack

This project is built with a modern tech stack, ensuring a fast and reliable experience.

Frontend:

• React.js: For building the user interface.
• Socket.IO Client: To manage the real-time WebSocket connection.
• React Ace: A powerful code editor component for React.
• Axios: For making API requests to the code execution endpoint.
• React Hot Toast: For user-friendly notifications.

Backend:

• Node.js & Express.js: To build the server-side logic.
• Socket.IO: For enabling real-time, bidirectional communication.
• Nodemon: To automatically restart the server during development.

Services:

• Judge0: A robust API for securely executing code in multiple languages.
• UUID: For generating unique and random Room IDs.

🏁 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

Make sure you have Node.js and npm installed on your machine.

Installation & Setup

1. Clone the repository:

   git clone [https://github.com/your-username/CollabCode.git](https://github.com/your-username/CollabCode.git)
   cd CollabCode

2. Set up the server:

   • Navigate to the server directory.

     cd server

   • Install the necessary packages.

     npm install

   • Create a .env file in the server directory and add your Judge0 API key. You can get a free key from RapidAPI.

     # server/.env
     JUDGE0_API_KEY=YOUR_API_KEY_HERE
     

3. Set up the client:

   • Navigate to the client directory from the root folder.

     cd ../client

   • Install the necessary packages.

     npm install

Running the Application

You'll need two terminals open to run both the client and the server.

1. In your first terminal, start the server:

   • Make sure you are in the server directory.

     npm run server

   • Your server should now be running on http://localhost:5001.

2. In your second terminal, start the client:

   • Make sure you are in the client directory.

     npm start

   • Your application will automatically open in your browser at http://localhost:3000.

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

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