📝 NovaDraw – A Collaborative Whiteboard App

NovaDraw is a real-time collaborative whiteboard built with MERN + Yjs.
It allows teams to brainstorm, draw, and collaborate on an infinite canvas — just like in-person whiteboarding sessions.

---

🚀 Tech Stack

Frontend

• React + Vite
• TailwindCSS
• shadcn/ui

Backend

• Node.js + Express
• MongoDB Atlas (Mongoose)
• Yjs + WebSockets (for real-time collaboration)
• Helmet + Morgan + CORS (security & logging)

---

📂 Project Structure

/frontend → React + Vite app (UI) /backend → Express + MongoDB API + WebSocket server

markdown Copy code

---

✨ Features

• 💯 Free & open-source
• 🎨 Infinite, canvas-based whiteboard
• ✍️ Hand-drawn style (smooth, sketch-like drawings)
• 🌓 Dark mode support
• 🏗️ Customizable tools & board management
• 📷 Image upload & support
• 😀 Shape libraries support (rectangles, circles, diamonds, arrows, etc.)
• 🖼️ Export options → PNG, SVG, and clipboard
• 💾 Open format → export/import drawings as .json
• ⚒️ Wide range of tools → free-draw, shapes, arrows, eraser, laser tool, highlighter, text tool
• ➡️ Arrow binding & labeled arrows
• 🔙 Undo / Redo history
• 🔍 Zooming & panning
• 🔐 Authentication (JWT) → secure login/register
• 📊 Board Management → create, list, and manage whiteboards,library to save shapes,workspaces to save your canvas
• 📁 File uploads (basic sharing support)
• 🔗 Real-time collaboration (multi-user sync with Yjs)

---

🛠️ Installation & Setup (Local)

1. Clone the repo

git clone https://github.com/yourusername/NovaDraw.git
cd NovaDraw
2. Backend setup
bash
Copy code
cd backend
npm install
Create a .env file in /backend:

env
Copy code
MONGO_URI=mongodb+srv://<username>:<password>@cluster0.xxxx.mongodb.net/?retryWrites=true&w=majority
PORT=5000
JWT_SECRET=your_jwt_secret
Run server:

bash
Copy code
npm run dev
➡ Backend runs at → http://localhost:5000

3. Frontend setup
bash
Copy code
cd collab-frontend
npm install
Create a .env file in /collab-frontend (or copy from .env.example):


env
Copy code
VITE_API_URL=http://localhost:5000
Run frontend:

bash
Copy code
npm run dev
➡ Frontend runs at → http://localhost:5173

✅ To-Do (Future Enhancements)
.. More whiteboard tools (sticky notes, templates, grids)

.. Role-based access control (RBAC)

.. Persistent file storage (S3 / Cloudinary)

.. User profiles & avatars

.. Whiteboard history & replay mode

..  Laser tool integration is still remain
.. Highlighter tool for better marking

🤝 Contributing
1. Fork the repo

2. Create your feature branch → git checkout -b feature/my-feature

3. Commit changes → git commit -m "Add my feature"

4. Push to your fork → git push origin feature/my-feature

5. Open a Pull Request 🎉

👨‍💻 Author
Built  by Hell1213