Code Collab

Code Collab is a web-based development environment that allows users to create, manage, and work on projects in isolated Docker-based workspaces. It provides a file explorer, a code editor, and a terminal for a seamless development experience.

Demo

code-collab-demo.mp4

Features

User Authentication: Secure user authentication is handled using better-auth.
Workspace Management: Users can create, list, and manage their workspaces. Workspaces are isolated in Docker containers, ensuring a clean and reproducible environment.
File Explorer: A tree-view file explorer to navigate the workspace file system.
Collaborative Code Editor: A Monaco-based code editor for real-time collaboration.
Integrated Terminal: An xterm.js-based terminal connected to the workspace container.
Persistent Storage: Workspaces are persisted to an S3-compatible storage, allowing users to resume their work later.

Tech Stack

Frontend

Framework: React with Vite
Language: TypeScript
UI Components: Shadcn UI, Radix UI
Routing: React Router
Code Editor: Monaco Editor
Terminal: xterm.js
Authentication: better-auth client

Backend

Framework: Express.js
Language: TypeScript
Database: Prisma with PostgreSQL
Authentication: better-auth
Containerization: Dockerode to interact with Docker Engine
WebSockets: ws for terminal streaming

Project Structure

The project is a monorepo with two main packages: frontend and backend.

frontend/: Contains the React application, including all UI components, pages, and client-side logic.
backend/: Contains the Express.js server, which handles API requests, user authentication, workspace management, and WebSocket connections.
traefik-setup/: Contains the configuration for Traefik, a reverse proxy and load balancer.
workspace-storage/: This directory is likely used for local workspace storage before it's synced to S3.

Getting Started

Prerequisites

Node.js and pnpm
Docker
An S3-compatible object storage service

Installation

Clone the repository:

git clone <repository-url>
cd code-collab

Install dependencies for both frontend and backend:

pnpm install
cd frontend && pnpm install && cd ..
cd backend && pnpm install && cd ..

Set up environment variables:
- Create a .env file in the backend directory by copying .env.example.
- Create a .env file in the frontend directory by copying .env.example.
- Fill in the required environment variables, such as database credentials, S3 credentials, and authentication secrets.
Set up the database:
- Run prisma migrations to create the necessary tables:
```
cd backend
pnpm prisma migrate dev
```

Running the Application

You can run the frontend and backend concurrently using the root package.json script:

pnpm run dev

This will start the frontend on http://localhost:5173 and the backend on http://localhost:3000.

Shreehari-Acharya / code-collab