LetsDoodleTogether 🎨

A real-time collaborative whiteboard application that enables multiple users to draw, sketch, and brainstorm together in real-time. Perfect for remote teams, online teaching, or creative collaboration.

✨ Features

• Real-time Collaboration: Draw simultaneously with multiple users
• Live Cursor Tracking: See where other users are working with labeled cursors
• Drawing Tools: Freehand drawing, erasing, and shape manipulation
• Board Management: Create, share, and manage multiple whiteboards
• User Authentication: Secure JWT-based authentication system
• Presence Indicators: Know who's currently active on your board
• Instant Sync: All changes propagate in real-time across all connected clients

🚀 Tech Stack

Backend

• Node.js & Express.js - Server framework
• Socket.IO - Real-time bidirectional communication
• MongoDB & Mongoose - Data persistence
• JWT - Secure authentication
• CORS - Cross-origin resource sharing

Frontend

• React - UI library with Hooks & Context API
• TailwindCSS - Utility-first CSS framework
• Socket.IO Client - Real-time updates
• Axios - HTTP client
• React Router - Navigation

📦 Project Structure

letsdoodletogether/
├── backend/              # Express + Socket.IO server
│   ├── config/          # Database configuration
│   ├── controllers/     # Request handlers
│   ├── middleware/      # Authentication middleware
│   ├── models/          # MongoDB schemas
│   ├── routes/          # API routes
│   ├── services/        # Business logic
│   └── index.js         # Server entry point
│
└── frontend/            # React application
    ├── src/
    │   ├── components/  # Reusable UI components
    │   ├── store/       # Context providers
    │   ├── pages/       # Page components
    │   └── utils/       # Helper functions
    └── public/          # Static assets

🔧 Installation & Setup

Prerequisites

• Node.js (v16 or higher)
• MongoDB (local or Atlas)
• npm or yarn

Backend Setup

1. Navigate to backend directory:

cd backend

2. Install dependencies:

npm install

3. Create .env file:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key
PORT=5000

4. Start the server:

npm run dev
# or
node index.js

Server will run on http://localhost:5000

Frontend Setup

1. Navigate to frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Create .env file:

VITE_BACKEND_URL=http://localhost:5000

4. Start the development server:

npm run dev

Frontend will run on http://localhost:5173 (Vite default)

📡 API Endpoints

Authentication

• POST /api/user/signup - Register new user
• POST /api/user/signin - Login user
• GET /api/user/me - Get current user (protected)

Board Operations

• POST /api/board/create - Create new board
• GET /api/board/load/:id - Load board data
• PUT /api/board/update/:id - Update board
• PUT /api/board/share/:id - Share board with users
• PUT /api/board/unshare/:id - Revoke board access
• DELETE /api/board/delete/:id - Delete board

🔌 Socket Events

Connection & Presence

• board:join - Join a board room
• board:leave - Leave a board room
• presence:join - User joins board
• presence:leave - User leaves board

Cursor & Drawing

• cursor - Broadcast cursor position
• element:start - Begin new drawing element
• element:points - Stream drawing points
• element:update - Update element properties
• element:commit - Finalize and persist element
• element:erase - Delete element

🚢 Deployment

Backend Deployment (Vercel/Railway/Render)

For Vercel:

// vercel.json
{
  "version": 2,
  "builds": [
    {
      "src": "index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "index.js"
    }
  ]
}

Frontend Deployment (Vercel/Netlify)

Update the backend URL in your .env:

VITE_BACKEND_URL=https://your-backend-url.vercel.app

Then deploy:

npm run build
# Deploy the dist/ folder

🔐 Environment Variables

Backend

Variable	Description	Example
MONGO_URI	MongoDB connection string	mongodb+srv://user:pass@cluster.mongodb.net/db
JWT_SECRET	Secret for JWT signing	your_super_secret_key
PORT	Server port	5000

Frontend

Variable	Description	Example
VITE_BACKEND_URL	Backend API URL	http://localhost:5000

🎯 Usage

1. Sign Up / Sign In: Create an account or log in
2. Create Board: Click "New Board" to create a whiteboard
3. Share Board: Invite collaborators via board settings
4. Start Drawing: Use the toolbar to select drawing tools
5. Real-time Collaboration: Watch as others draw in real-time!

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with ❤️ for seamless remote collaboration

---

Happy Doodling Together! 🎨✨