Collabryx is a real-time, anonymous digital whiteboard built for teams who want to brainstorm and collaborate instantly. No logins, no friction—just create a board, share the link, and start drawing.
Whether you're sketching out a quick idea, building a flowchart, or just chatting with teammates on a shared canvas, Collabryx keeps everything in sync across everyone's screen with zero lag.
Website is Live! Test here and enjoy: 👉 https://collabryx-frontend.onrender.com
.png)
- Instant Collaboration: Jump straight into a board without signing up.
- Real-time Sync: Sub-50ms latency for drawing, moving elements, and cursors.
- Live Multiplayer: See exactly where your team is working with live cursor tracking.
- Integrated Chat: Communicate directly on the canvas with your collaborators.
- High-Quality Export: Save your work as a high-resolution .PNG or backup the raw data as a .JSON file.
- Ephemeral Boards: For maximum privacy, boards and their data are automatically deleted once the last user leaves.
- Dynamic UI: Beautiful dark/light mode with a professional glassmorphism design.
- Frontend: React.js, Konva (for the canvas), Zustand (state management), Framer Motion.
- Backend: Node.js, Express.
- Real-time: Socket.io.
- Database: MongoDB Atlas.
- Icons: Lucide React.
Collabryx/
├── server/ # Node.js + Express Backend
│ ├── src/
│ │ ├── models/ # Mongoose schemas (Board, Element, Session)
│ │ ├── routes/ # REST API for board management & exports
│ │ ├── socket/ # Real-time orchestration logic (Socket.io)
│ │ └── jobs/ # Cleanup workers for ephemeral boards
│ └── .env # Backend configuration
├── src/ # React + TypeScript Frontend
│ ├── components/
│ │ ├── board/ # Canvas engine, Toolbar, and Sidebar modules
│ │ ├── layout/ # Shared layout & navigation components
│ │ └── ui/ # Reusable atoms (Buttons, Modals, Glows)
│ ├── services/ # API clients & WebSocket handlers
│ ├── stores/ # Global state management (Zustand)
│ ├── lib/ # Style utilities & technical helpers
│ └── pages/ # Main app routes (Landing, Dashboard, Board)
├── public/ # Snapshots, icons, and static assets
├── Deployment.md # Full setup & hosting instructions
└── System_Overview.md # High-level architecture deep-dive
Extract the project files and open your terminal:
Install Frontend:
npm installInstall Backend:
cd server
npm install
cd ..You can use a local MongoDB instance for development or MongoDB Atlas for cloud storage.
- Local: Use
mongodb://localhost:27017/collabryxin your.env. - Atlas (Production):
- Create a free cluster on MongoDB Atlas.
- Allow access from "Anywhere" (IP
0.0.0.0/0) in Network Access. - Create a database user and copy your connection string.
Create a .env file inside the server folder:
PORT=3001
MONGO_URI=your_mongodb_connection_string
CLIENT_URL=http://localhost:5173Open two terminals:
- Terminal 1 (Backend):
cd server && npm start - Terminal 2 (Frontend):
npm run dev
Open http://localhost:5173 and you're ready to go!
For a comprehensive, step-by-step guide on how to host Collabryx in the cloud, please refer to our Detailed Deployment Guide.
- Push your code to GitHub.
- Create a new "Web Service" on Render.
- Set root directory to
server. - Build command:
npm install. - Start command:
node src/index.js. - Add your
.envvariables in the settings.
- Create a new Static Site on Render.
- Select your GitHub repository.
- Settings:
- Build Command:
npm run build - Publish Directory:
dist
- Build Command:
- Environment Variable: Add
VITE_API_URLpointing to your Render backend URL. - CRITICAL (Fix 404s):
- Go to Redirects/Rewrites in the Render sidebar.
- Add: Source:
/*, Destination:/index.html, Action:Rewrite.
- Click Deploy!
- "CORS Error": Make sure the
CLIENT_URLin your backend.envmatches your frontend URL exactly (no trailing slash!). - "Database Timeout": Double-check that you allowed "Access from Anywhere" in your MongoDB Network settings.
- "Blurry Export": We use 2x scaling, so make sure your browser zoom is set to 100% for the best quality.
- AI-Powered Shapes: Turn rough sketches into perfect diagrams automatically.
- Voice Channels: Built-in voice chat for even faster collaboration.
- Version History: A way to see who changed what and when.
- Mobile Apps: Dedicated touch-friendly apps for iPad and tablets.
This project is for educational purposes only. It is a custom-built technical showcase and is not intended for commercial or public personal use. Please see the LICENSE file for more details.
Made with ❤️ for creative teams. Happy collaborating!