🚀 CODE.co - Real-time Collaborative Code Editor

CODE.co is a modern, real-time collaborative code editor that enables developers to code together seamlessly. Built with cutting-edge technologies, it offers a sleek, responsive interface with powerful collaboration features.

✨ Features

🎨 Modern UI/UX

• Clean White Theme - Professional, eye-friendly design
• Responsive Layout - Works perfectly on desktop, tablet, and mobile
• Smooth Animations - Beautiful loading screens and transitions
• CODE.co Branding - Consistent, modern visual identity

🔄 Real-time Collaboration

• Live Code Editing - See changes as others type
• Real-time Chat - Communicate with your team instantly
• User Presence - See who's online and active in your room
• Synchronized Language Selection - Everyone stays on the same page

🔐 Authentication & Rooms

• Clerk Authentication - Secure, modern auth system
• Room Management - Create or join rooms with unique IDs
• Member Management - See all participants and manage room access
• Persistent Sessions - Your work is saved and synced

💻 Code Execution

• Multi-language Support - Python, JavaScript, Java, C++
• Judge0 Integration - Reliable code execution and testing
• Real-time Results - See output instantly, shared with all users
• Error Handling - Clear error messages and debugging support

🌟 Developer Experience

• Beautiful Page Loaders - Engaging loading experiences
• Mobile-first Design - Optimized for all screen sizes
• Intuitive Navigation - Easy-to-use interface
• Performance Optimized - Fast loading and smooth interactions

🛠️ Tech Stack

Frontend

• React 18 with TypeScript
• Vite for blazing fast development
• Tailwind CSS for modern styling
• Clerk for authentication
• CodeMirror for the code editor
• React Hot Toast for notifications

Backend

• Node.js with Express
• WebSocket for real-time communication
• MongoDB Atlas for data persistence
• Redis for pub/sub and caching

Infrastructure

• Docker containerization
• Judge0 API for code execution
• GitHub for version control

🚀 Quick Start

Using Docker (Recommended)

1. Clone the repository

   git clone https://github.com/ak1606/CODE.co.git
   cd CODE.co

2. Set up environment variables

   Create .env files in each service directory:

   Client/.env

   VITE_REACT_APP_SERVER_URL=http://localhost:8080
   VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key

   Server/.env

   MONGO_URL=your_mongodb_atlas_connection_string
   REDIS_URL=redis://redis:6379

   Worker/.env

   X_RAPID_API_KEY=your_judge0_api_key
   REDIS_URL=redis://redis:6379

3. Build and run the stack of containers

   docker-compose up --build

   🚀 Quick Start: This single command will build and start all services (Client, Server, Worker, Redis)

4. Access the application

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:8080

Manual Setup

1. Install dependencies

   # Server
   cd Server && npm install
   
   # Worker  
   cd ../Worker && npm install
   
   # Client
   cd ../Client && npm install

2. Start services

   # Terminal 1 - Redis
   docker run -p 6379:6379 redis
   
   # Terminal 2 - Server
   cd Server && npm start
   
   # Terminal 3 - Worker
   cd Worker && npm start
   
   # Terminal 4 - Client
   cd Client && npm run dev

📁 Project Structure

CODE.co/
├── Client/                 # React frontend
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   ├── pages/         # Page components
│   │   └── ...
├── Server/                # Express backend
│   ├── src/
│   │   ├── index.ts       # Main server file
│   │   └── utils/         # Utility functions
├── Worker/                # Code execution service
│   ├── src/
│   │   └── index.ts       # Worker process
└── docker-compose.yml     # Docker configuration

🎯 How It Works

1. Authentication - Users sign in through Clerk
2. Room Creation/Joining - Create or join coding rooms
3. Real-time Sync - WebSocket connections enable live collaboration
4. Code Execution - Submit code to Judge0 API via Redis queue
5. Result Broadcasting - Results are shared with all room participants

🛡️ Environment Setup

Required API Keys

• Clerk - Get from clerk.com
• MongoDB Atlas - Get from mongodb.com
• Judge0 - Get from RapidAPI

Docker Services

• Client - React app (Port 5173)
• Server - Express API (Port 8080)
• Worker - Code execution service
• Redis - Pub/sub and caching (Port 6379)

🤝 Contributing

We welcome contributions! Here's how to get started:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes
4. Commit your changes

   git commit -m 'Add amazing feature'

5. Push to the branch

   git push origin feature/amazing-feature

6. Open a Pull Request

🌟 Star this repository if you found it helpful!