🎨 Collabryx

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.

---

📸 Preview

Landing Page	Board Workspace

---

✨ Key Features

• 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.

---

🛠️ The Tech Stack

• 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.

---

📁 Project Structure

Collabryx/
├── server/               # Node.js backend
│   ├── src/
│   │   ├── models/       # Database schemas
│   │   ├── routes/       # API endpoints
│   │   └── socket/       # Real-time logic
├── src/                  # React frontend
│   ├── components/       # UI parts & Canvas
│   ├── services/         # API & Socket handlers
│   ├── stores/           # Global state (Zustand)
│   └── pages/            # App screens
├── public/               # Static assets
└── System_Overview.md    # Detailed technical docs

---

🚀 Getting Started Locally

1. Clone & Install

Extract the project files and open your terminal:

Install Frontend:

npm install

Install Backend:

cd server
npm install
cd ..

2. Set up Database

You can use a local MongoDB instance for development or MongoDB Atlas for cloud storage.

• Local: Use mongodb://localhost:27017/collabryx in your .env.
• Atlas (Production):
  1. Create a free cluster on MongoDB Atlas.
  2. Allow access from "Anywhere" (IP 0.0.0.0/0) in Network Access.
  3. Create a database user and copy your connection string.

3. Environment Variables

Create a .env file inside the server folder:

PORT=3001
MONGO_URI=your_mongodb_connection_string
CLIENT_URL=http://localhost:5173

4. Run the App

Open 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!

---

🌐 Deployment

Backend (Render)

1. Push your code to GitHub.
2. Create a new "Web Service" on Render.
3. Set root directory to server.
4. Build command: npm install.
5. Start command: node src/index.js.
6. Add your .env variables in the settings.

Frontend (Vercel)

1. Import your repo to Vercel.
2. Add an environment variable: VITE_API_URL pointing to your Render URL.
3. Click Deploy!

---

🔧 Common Issues

• "CORS Error": Make sure the CLIENT_URL in your backend .env matches 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.

---

🔮 Future Scope

• 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.

---

⚖️ License

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!