CodeCollab

CodeCollab is a powerful, real-time collaborative code editor designed to provide a premium, efficient, and seamless coding experience. Built with a "Deep Tech" aesthetic, it allows developers to pair program, teach, or interview in real-time with synchronized cursors, live chat, and instant code execution.

🚀 Features

• ⚡ Real-Time Collaboration: Changes made by one user are instantly reflected for everyone in the room using Socket.io.
• 👨‍💻 Multi-Language Support: Full syntax highlighting and execution support for Python, JavaScript, Java, and C++.
• ▶️ Live Code Execution: Compile and run code directly within the browser, powered by the Piston API.
• 🔒 Secure Rooms: Create private rooms protected by passwords and unique 8-character alphanumeric codes.
• 💬 Integrated Chat: Real-time messaging system allowing users to communicate without leaving the editor.
• 🎨 Premium UI/UX: A dark-themed, glassmorphism-inspired interface with smooth animations and responsive design.
• 🔐 Authentication: Secure user accounts with JWT-based authentication and Bcrypt password hashing.
• 👥 Room Management: Dashboard to track joined rooms, create new ones, and manage session history.

🛠️ Tech Stack

Frontend

• React (Vite): Fast, modern frontend framework.
• Tailwind CSS: Utility-first CSS framework for custom, responsive design.
• CodeMirror: Extensible code editor component for the core editing experience.
• Socket.io-client: Client-side library for real-time bidirectional event-based communication.
• React Router: For handling client-side routing.
• Framer Motion: For smooth UI animations (implied).

Backend

• Node.js: JavaScript runtime environment.
• Express: Minimalist web framework for API routes.
• Socket.io: Server-side library for handling real-time connections.
• MongoDB: NoSQL database for storing users, rooms, and chat history.
• Mongoose: ODM library for MongoDB.

📋 Prerequisites

Ensure you have the following installed on your local machine:

• Node.js (v16 or higher)
• npm (Node Package Manager)
• MongoDB (Local instance or Atlas connection string)

🔧 Installation & Setup

1. Clone the Repository

   git clone https://github.com/utkarshhxd/CodeCollab.git
   cd CodeCollab

2. Install Frontend Dependencies

   cd frontend
   npm install

3. Install Backend Dependencies

   cd ../backend
   npm install

4. Environment Configuration

   Create a .env file in the backend directory with the following variables:

   PORT=4000
   MONGODB_URI=mongodb://localhost:27017/codecollab
   JWT_SECRET=your_super_secret_development_key
   CORS_ORIGIN=http://localhost:5173

🏃‍♂️ Running the Project

To run the application locally, you need to start both the backend server and the frontend development server.

1. Start the Backend

Open a terminal in the backend directory:

npm run dev

The server will start on http://localhost:4000.

2. Start the Frontend

Open a new terminal in the frontend directory:

npm run dev

The application will start on http://localhost:5173.

📂 Project Structure

CodeCollab/
├── backend/                # Server-side logic
│   ├── src/
│   │   ├── index.js       # Main entry point, Socket.io setup, API routes
│   │   ├── db.js          # MongoDB connection and Mongoose models (User, Room, Chat)
│   └── package.json       # Backend dependencies and scripts
│
├── frontend/               # Client-side application
│   ├── src/
│   │   ├── routes/        # Page components
│   │   │   ├── Dashboard.jsx   # User dashboard (Create/Join rooms)
│   │   │   ├── RoomEditor.jsx  # Main editor view
│   │   │   ├── Auth.jsx        # Authentication wrapper
│   │   │   ├── Login.jsx       # Login form
│   │   │   └── Signup.jsx      # Signup form
│   │   ├── assets/        # Static assets
│   │   ├── App.jsx        # Main app component and routing
│   │   └── styles.css     # Global styles
│   ├── index.html         # HTML entry point
│   ├── tailwind.config.js # Tailwind configuration
│   └── package.json       # Frontend dependencies and scripts
│
└── package.json           # Root configuration

🔌 API Endpoints

Authentication

• POST /api/auth/signup: Register a new user.
• POST /api/auth/login: Authenticate an existing user.

Rooms

• POST /api/rooms: Create a new room. Requires Auth.
• POST /api/rooms/join: Verify room existence and password. Requires Auth.

Execution

• POST /api/execute: Proxy to Piston API for code execution.

🤝 Contributing

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.

📄 License

This project is licensed under the MIT License.