🌌 Void Draw

A high-performance, real-time collaborative drawing application built with React 19, Convex, and Tailwind CSS 4. Draw, collaborate, and export your ideas seamlessly.

The modern, minimalist drawing interface with real-time sync.

✨ Features

• 🚀 Real-time Collaboration: Powered by Convex, every stroke and shape is synchronized instantly across all connected clients.
• 🎨 Advanced Canvas Engine: Custom canvas implementation supporting various shapes, freehand drawing, and complex elements.
• 🔳 Smart Grid System: Adjustable grid sizes, "Snap to Grid" functionality, and toggleable visibility for precision.
• 🔐 Seamless Authentication: Built-in support for Anonymous and OAuth sessions via Convex Auth.
• 📄 PDF Export: Save your masterpieces directly to high-quality PDF files using jspdf.
• 🌙 Modern UI/UX: A sleek, dark-themed interface built with Tailwind CSS 4, Phosphor Icons, and Framer Motion for smooth transitions.
• 🛠️ Persistent Preferences: Your grid settings, font choices, and drawing styles are saved per drawing.

🛠️ Tech Stack

Frontend

• Framework: React 19 (Vite)
• Styling: Tailwind CSS 4.0
• Animations: Framer Motion
• Icons: Phosphor Icons
• State Management: Convex React Hooks

Backend

• Database & Serverless: Convex
• Authentication: Convex Auth
• Language: TypeScript

---

📸 Screenshots

Clean Workspace	Creative Tools
Minimalist interface for focused drawing	Rich set of shapes, styles, and freehand tools

---

🚀 Getting Started

Prerequisites

• Bun (Recommended) or Node.js
• Convex Account

Installation

1. Clone the repository:

   git clone https://github.com/your-username/void-draw.git
   cd void-draw

2. Install dependencies:

   bun install

3. Initialize Convex:

   bun x convex dev

   This will prompt you to log in and create a new project. It will also generate your .env.local file.

4. Start the development server:

   bun dev

The application will be available at http://localhost:5173.

⚙️ Environment Variables

Ensure your .env.local (created by convex dev) contains:

CONVEX_DEPLOYMENT=your_deployment_name
VITE_CONVEX_URL=your_convex_url

For Auth configuration, refer to convex/auth.config.ts.

📂 Project Structure

├── convex/             # Backend: Schema, mutations, and queries
│   ├── auth.ts         # Authentication configuration
│   ├── schema.ts       # Database table definitions
│   └── drawings.ts     # Drawing-related server logic
├── src/
│   ├── canvas/         # Canvas engine and drawing components
│   │   ├── Canvas.tsx  # Main drawing area
│   │   └── Toolbar.tsx # Tool selection and settings
│   ├── lib/            # Utility functions (Tailwind merge, etc.)
│   └── App.tsx         # Root application component
├── public/             # Static assets
└── tailwind.config.js  # Tailwind CSS configuration

🚢 Deployment

1. Backend (Convex)

Configure your production environment in the Convex Dashboard.

2. Frontend (Vercel)

The easiest way to deploy is using the Vercel integration:

1. Push your code to GitHub.
2. Connect your repository to Vercel.
3. Add your VITE_CONVEX_URL environment variable.

---

📜 License

Distributed under the MIT License. See LICENSE for more information.

---

Built with ❤️ using Convex and React.