3D Lego-like Brick Builder Web App

Build and collaborate in real-time on 3D models using rectangular bricks. This multi-user application lets several people create designs together in a shared 3D space using Lego-like bricks.

Fork of bhushan6/lego-builder (MIT — see LICENSE, attribution preserved). The original used the Liveblocks SaaS for real-time collaboration; this fork replaces it with a self-hosted, sovereign WebSocket backend (server/index.js) — no third-party SaaS, no API key.

Features

• 3D Rendering: Utilizes three.js and react-three-fiber for efficient and smooth 3D rendering.
• Real-time Collaboration: Self-hosted WebSocket relay (server/index.js) synchronizes the shared build (bricks, cursorColors) and per-user presence/cursors across everyone in a room.
• Intuitive UI: Built with radix ui.
• State Management: Zustand, with a custom roomSync middleware (src/store/roomSync.js) that exposes the same store surface the components expect.

Technologies Used

• React
• three.js
• react-three-fiber
• radix ui
• zustand
• ws — WebSocket server for the real-time backend
• Vite

Real-time architecture

• server/index.js — a standalone Node WebSocket relay (uses ws, no build step). One server hosts many rooms; per room it keeps the current shared storage snapshot ({ bricks, cursorColors }) plus the connected clients. Clients connect with ws(s)://HOST/?room=<id>. JSON protocol:
  • server → client: init, join, leave, presence, storage, event
  • client → server: presence, storage (last-writer-wins), event (ephemeral cursors, relayed to others only, never persisted)
• src/store/roomSync.js — a Zustand middleware that drops in for @liveblocks/zustand. It exposes state.liveblocks.{enterRoom, leaveRoom, status, others, room} where room has broadcastEvent, subscribe("event", cb) and no-op history.undo/redo stubs — so the existing components work unchanged.

Local Development

Prerequisites

• Node.js (18+; tested on Node 26)
• npm

Setup

1. Clone the repository:

   git clone https://git.saillant.cc/electron-rare/lego-builder.git
   cd lego-builder
   

2. Install dependencies:

   npm install
   

3. (Optional) point the client at a specific realtime server. Create .env:

   echo "VITE_RT_URL=ws://localhost:8090" > .env
   

   If unset, the client falls back to ws://localhost:8090 in dev, or wss://<your-host>/blocs-rt when served over HTTPS in production (that path is routed to the relay by the deployment infra).

4. Start the realtime server (in one terminal):

   npm run server        # listens on $PORT (default 8090)
   

5. Start the dev server (in another terminal):

   npm run dev
   

6. Open the app at the URL Vite prints (note the /blocs-pro/ base path, e.g. http://localhost:5173/blocs-pro/). Open it in two browsers/tabs and join the same Room ID to collaborate.

Build

npm run build         # outputs dist/, served under base /blocs-pro/

Contribution

Feel free to fork the project, open issues, and submit pull requests. Any contribution is highly appreciated!