# How to Vibe Code Your Own Gather (and Stop Paying for It)

> The delightful virtual office for remote teams

- Site: https://gather.town
- Category: Collaboration / Remote Work
- Verdict: **Serious undertaking** (35/100 vibecodeable)
- Estimated effort: 6+ weeks of intensive engineering

## Verdict

Build a scaled-down 2D room with basic WebRTC proximity audio for fun, but pay for the product if you need a reliable daily office.

Replicating a 2D canvas office with basic movement is straightforward with AI tooling, but managing real-time WebRTC proximity audio streams, selective forwarding units (SFUs), and low-latency state synchronization across multiple browsers introduces severe debugging friction. Cross-browser audio policies, echo cancellation, and canvas performance tuning will consume weeks of frustrating trial and error.

### What you can't replicate

- Rock-solid cross-browser WebRTC audio/video stability under poor network conditions
- Extensive library of pre-built 2D map templates and over 200 interactive objects
- Enterprise compliance, custom SSO, and guaranteed uptime for a team

## What it does

Spatial virtual office and remote collaboration platform featuring 2D retro-style pixel maps, proximity audio/video, workspace customization, and embedded collaboration tools.

### Core features

- 2D retro pixel map rendering on HTML5 Canvas/WebGL
- Avatar movement, collision detection, and coordinate sync
- Proximity-based WebRTC audio and video streaming (SFU architecture)
- Persistent team chat and direct messaging channels
- Interactive whiteboards and shared object collaboration
- Workspace customization (objects, walls, floors)

## The business

### Pricing

- Free Trial: Free — 30-day free trial supporting up to 50 teammates with access to all features.
- Essential Plan: $12/mo — Per member/month when billed annually.
- Custom Plan: Custom — For large teams requiring advanced enterprise controls.

### Funding

$77M raised.
- Seed Round (Aug/Sep 2019): ~$125K
- Series A (March 2021): $26M
- Series B (November 2021): $50M
Investors: Sequoia Capital, Index Ventures, Y Combinator, Elad Gil, Dylan Field, Jeff Weiner

Founded 2020.
Team size: 35-78.

## The hard parts

- Real-time SFU-routed WebRTC audio/video scaling dynamically with geometric avatar distance
- Low-latency deterministic state synchronization for avatar movement across multiple connected clients
- Cross-browser audio stability, echo cancellation, and device permission handling
- Tile-map collision logic and pathfinding interpolation under variable network jitter

## How to vibe code Gather

### Prerequisites

- Node.js (free): Required for running the full-stack TypeScript development environment.
- GitHub (free): Source code repository and deployment integration.
- LiveKit Cloud / OSS (free tier): WebRTC SFU infrastructure required for handling multi-user proximity audio and video streams.

### Recommended AI tools

- Claude Code: Best-in-class multi-file agentic coding agent for scaffolding the React canvas app and WebRTC signaling server.
- Cursor: Essential for iterative UI component styling and fine-tuning the HTML5 Canvas event listeners.

### Stack

- Frontend: Next.js with Tailwind CSS and HTML5 Canvas / React Konva
- Backend: Node.js with Socket.io for real-time position sync and LiveKit SFU for WebRTC
- Database: Turso (SQLite at the edge for room layouts and user profiles)
- Auth: better-auth
- Payments: none (personal clone)
- Other: LiveKit for WebRTC spatial audio routing, Zustand for client state management

### Hosting

- Vercel (Hosting the Next.js frontend web application): $0/mo
- Fly.io (Hosting the always-on Node.js WebSocket signaling server and LiveKit SFU backend): $5/mo

### Build guide

1. **Project Scaffolding & Database Schema** — Initialize the Next.js full-stack repository with TypeScript, Tailwind CSS, and Turso database integration using better-auth.

```
Create a new Next.js 16 project with TypeScript and Tailwind CSS v4. Set up better-auth with email/password authentication backed by a Turso SQLite database. Create database migrations and schema files for users, workspaces, room configurations, and avatar customizer attributes. Ensure clean project directory structuring with modular route groups and strict type safety.
```

2. **2D Tile Map Renderer & Canvas Engine** — Implement the HTML5 Canvas viewport rendering engine supporting grid tiles, walkability masks, and custom asset placement.

```
Build an HTML5 Canvas rendering component in React that loads a 2D tile-based retro office map. Implement camera panning and zooming, rendering floor tiles, walls, and decorative objects from JSON layout definitions. Add a local player state tracker with coordinate clamping based on a boolean walkability collision matrix.
```

3. **Real-Time Avatar Movement & WebSocket Sync** — Set up a Node.js WebSocket server to broadcast avatar positions, directions, and states across connected clients in real-time.

```
Create a Node.js WebSocket server using Socket.io that handles client connection rooms. Implement server-side rate-limited position broadcasting when avatars move on the 2D grid. On the client side, interpolate incoming peer positions smoothly using requestAnimationFrame to prevent jitter, rendering remote avatars with name tags and current activity statuses.
```

4. **Proximity WebRTC Audio/Video Integration** — Integrate LiveKit for SFU-routed WebRTC streams, dynamically adjusting audio volume based on Euclidean distance between avatars.

```
Integrate the LiveKit client SDK into the Next.js app to manage WebRTC video and audio rooms connected to the virtual office space. Implement a spatial audio calculation loop that computes the Euclidean distance between the local user's avatar and all other avatars on the map. Dynamically update peer audio output gain and video publication subscription tiers based on proximity thresholds (fade-in when close, mute when far).
```

5. **Interactive Chat & Spatial UI Overlays** — Add persistent team chat channels, nearby proximity chat rooms, and user profile status menus.

```
Develop a chat drawer component supporting global workspace chat, direct messages, and a nearby conversation channel that activates when avatars stand close to each other. Include emoji reactions floating above avatars on the canvas and a status indicator picker (available, busy, in a meeting) synced across the WebSocket server.
```

6. **Workspace Customization & Polish** — Implement a basic map editor mode allowing users to place objects, edit walls, and save layout states to the database.

```
Build a map editor mode toggle that allows users with admin roles to select objects from a sidebar catalog and stamp them onto the 2D grid canvas. Save updated grid matrices and object placements back to the Turso database via server actions. Add keyboard shortcuts (e.g., 'M' to mute, 'E' to interact) and polish UI panels with Tailwind CSS.
```

### Cost vs paying

**Starting costs (one-time):**

- AI Coding Assistant Subscription: $20
- Total: $20 one-time

**Ongoing costs (monthly):**

- Fly.io Node/LiveKit Server Hosting: $5/mo
- Vercel Frontend Hosting: $0/mo
- Total: ~$5/mo

- Paying for the SaaS instead: $12/member/mo
- Build time: 45-60 hours
- AI tool credits: $20 (Claude Pro / Cursor)
- Break-even: N/A (built for learning / custom hobby use)

## Sources

- [Gather Official Website](https://gather.town)
- [Gather Pricing Page](https://gather.town/pricing)
- [Tracxn - Gather Company Profile](https://tracxn.com/d/companies/gather.town)