Code Together

A real-time collaborative coding platform for pair programming, technical interviews, and coding practice sessions.

🚀 Live Demo

• Frontend: pair-code-fe.vercel.app
• Backend: pair-code-be-t953.onrender.com

System Design

Video Demo

video1450339436.mp4

✨ Features

• Real-time Code Collaboration - Write code together with live synchronization using Yjs CRDT
• Monaco Editor - VS Code-like editing experience with syntax highlighting and IntelliSense
• Video Chat - Face-to-face communication powered by LiveKit
• AI-Powered Questions - Generate coding challenges using Google Gemini AI
• Solution Reviews - AI-assisted code review and feedback
• Infinite Rooms - Create unlimited collaborative sessions
• Dark/Light Mode - Theme switching for comfortable coding

🛠️ Tech Stack

Frontend

• Framework: Next.js 16 (React 19)
• Editor: Monaco Editor (@monaco-editor/react)
• Real-time Sync: Yjs + y-websocket + y-monaco
• Video: LiveKit (@livekit/components-react)
• Styling: Tailwind CSS 4
• UI Components: Radix UI, shadcn/ui

Backend

• Runtime: Node.js with Express 5
• WebSocket: ws library with @y/websocket-server
• Database: MongoDB with Mongoose
• Auth: JWT (jsonwebtoken + bcryptjs)
• AI: OpenAI (@openai/openai)
• Video: LiveKit Server SDK

📁 Project Structure

p2p-program/
├── frontend/           # Next.js frontend application
│   ├── app/           # App router pages
│   ├── components/    # React components
│   ├── lib/           # Utilities and API functions
│   └── hooks/         # Custom React hooks
│
├── backend/           # Node.js backend server
│   ├── src/
│   │   ├── http/      # Express routes
│   │   ├── ws/        # WebSocket handlers
│   │   ├── config/    # Configuration files
│   │   ├── utils/     # Helper functions
│   │   └── types/     # TypeScript types
│   └── dist/          # Compiled JavaScript
│
└── README.md

🚀 Getting Started

Prerequisites

• Node.js 18+
• MongoDB instance
• LiveKit account (for video chat)
• OpenAI API key (for AI features)

Backend Setup

cd backend

# Install dependencies
npm install

# Create .env file with required variables
cp .env.example .env

# Build TypeScript
npm run build

# Start development server
npm run dev

Environment Variables (backend/.env):

PORT=8000
MONGO_URI=mongodb://localhost:27017/codetogether
JWT_SECRET=your-jwt-secret
OPENAI_API_KEY=your-openai-key
LIVEKIT_API_KEY=your-livekit-key
LIVEKIT_API_SECRET=your-livekit-secret

Frontend Setup

cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

Environment Variables (frontend/.env.local):

NEXT_PUBLIC_ENVIRONMENT=DEVELOPMENT

🌐 Deployment

Backend (Render)

1. Create a new Web Service on Render
2. Connect your GitHub repository
3. Set build command: npm install && npm run build
4. Set start command: npm run start
5. Add environment variables

Frontend (Vercel)

1. Import project from GitHub
2. Set root directory to frontend
3. Add environment variable: NEXT_PUBLIC_ENVIRONMENT=PRODUCTION
4. Deploy

🔧 WebSocket Architecture

The application uses a single WebSocket endpoint (/ws) with query parameter routing:

• Room connections: /ws?room=<roomId>&type=room
• Yjs sync connections: /ws?room=<roomId>&type=yjs

Features:

• noServer mode for manual upgrade handling
• Ping/pong keepalive (30s interval) for proxy compatibility
• Compatible with Render, Vercel, and other reverse proxies

📝 API Endpoints

Endpoint	Method	Description
/auth/signup	POST	User registration
/auth/signin	POST	User login
/api/chat/question	GET	Generate AI coding question
/api/chat/answer	POST	Submit solution for AI review
/livekit/getToken	GET	Get LiveKit room token
/code/run	POST	Execute code
/code/submit	POST	Submit code solution

👤 Author

Trishit Bhowmik

• GitHub: @trishit78
• LinkedIn: trishit-bhowmik
• Email: trishit456@gmail.com

📄 License

This project is licensed under the ISC License.