Dentrite: Real-Time Collaborative Whiteboard

Dentrite is a high-performance, real-time collaborative workspace. It allows remote teams to brainstorm, design, and plan together on an infinite canvas with zero-latency synchronization.

View Live Demo ## ✨ Key Features

• Zero-Latency Sync: Powered by WebSockets, every brush stroke appears on your teammates' screens the exact millisecond you draw it.
• Multiplayer Cursors: See exactly where your collaborators are pointing with real-time, name-tagged remote cursors.
• Secure Authentication: Enterprise-grade user login and session management handled via Clerk.
• Advanced Canvas Engine: Built on Fabric.js to treat every stroke as a manipulatable object, allowing for robust Undo/Redo functionality.
• Export Options: Instantly export your team's whiteboard sessions as high-quality PNGs or PDFs.
• Premium UI/UX: A sleek, glassmorphic interface built entirely with Tailwind CSS.

🛠️ Tech Stack

Frontend:

• React.js (Vite)
• Tailwind CSS (Styling)
• Fabric.js (Canvas Engine)
• Clerk (Authentication)

Backend:

• Node.js & Express
• Socket.io (WebSocket Communication)
• TypeScript

Deployment:

• Vercel (Frontend Hosting)
• Render (Backend WebSocket Server)

💻 Running Locally

Want to run Dentrite on your own machine? Follow these steps:

1. Clone the repository

git clone [https://github.com/Om-Mishra09/collaborative-whiteboard.git](https://github.com/Om-Mishra09/collaborative-whiteboard.git)
cd collaborative-whiteboard

2. Set up the Backend (WebSockets)

cd backend
npm install
npm start

The WebSocket server will start running on http://localhost:4000.

3. Set up the Frontend (React)

Open a new terminal window and navigate to the frontend directory:

cd whiteboard
npm install

Create a .env file in the whiteboard directory and add your Clerk Publishable Key:

VITE_CLERK_PUBLISHABLE_KEY=pk_test_your_clerk_key_here
VITE_BACKEND_URL=http://localhost:4000

Start the React development server:

npm run dev