Collaborative Drawing Platform

Real-time collaborative drawing for teams

---

Built for creatives and collaborators

---

📖 Overview

DrawBetter is a collaborative drawing application built with modern web technologies. It allows users to create, share, and organize drawings within organizations, with real-time collaboration powered by Convex and Liveblocks.

🚀 Getting Started

1. Clone Repository

git clone https://github.com/ARYPROGRAMMER/DrawBetter.git
cd draw-better

2. Install Dependencies

npm install

3. Set Up Convex

npx convex dev --once

4. Environment Setup

Create .env.local file:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CONVEX_URL=your_convex_deployment_url
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=your_liveblocks_public_key

5. Start Development

npm run dev

📖 Usage

1. Sign In: Authenticate with Clerk
2. Create/Join Organization: Set up workspace
3. Create Drawings: Use drawing tools
4. Collaborate: Share with team members
5. Organize: Use favorites and search
6. Manage: Access dashboard

📜 Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint

📁 Project Structure

draw-better/
├── app/                    # Next.js app directory
│   ├── (dashboard)/       # Dashboard pages
│   ├── layout.tsx         # Root layout
│   └── globals.css        # Global styles
├── components/            # UI components
│   ├── ui/               # Base components (Shadcn/ui)
│   ├── auth/             # Auth components
│   └── modals/           # Modal dialogs
├── convex/               # Backend functions & schema
├── hooks/                # Custom React hooks
├── lib/                  # Utilities
├── providers/            # Context providers
├── store/                # Zustand state management
└── public/               # Static assets

🏗️ System Architecture

Core Components

┌─────────────────────────────────────────────────────────────┐
│                    DrawBetter Platform                      │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │   Frontend  │  │   Backend   │  │  Database   │         │
│  │             │  │             │  │             │         │
│  │ • Next.js   │  │ • Convex    │  │ • Convex DB │         │
│  │ • React     │  │ • API       │  │ • Real-time │         │
│  │ • TypeScript│  │ • Auth      │  │ • Schema    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  Security   │  │ Monitoring  │  │   CDN      │         │
│  │             │  │             │  │             │         │
│  │ • Clerk     │  │ • Analytics │  │ • Vercel    │         │
│  │ • Encryption│  │ • Logging   │  │ • Assets    │         │
│  │ • RBAC      │  │ • Metrics   │  │ • Caching   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

🚀 Features

Feature	Description
🎨 Collaborative Drawing	Create and edit drawings with real-time collaboration
🏢 Organization Management	Organize drawings within workspaces
⭐ Favorites System	Save and quickly access favorite creations
🔍 Search Functionality	Find drawings by title within organizations
⚡ Live Updates	Real-time synchronization via Convex
🔐 Authentication	Secure login with Clerk
📱 Responsive Design	Works on desktop, tablet, and mobile

🛠️ Technology Stack

Frontend

Component	Technology	Version
Framework	Next.js	15.5.3
Runtime	React	19.1.0
Language	TypeScript	5.0
Styling	Tailwind CSS	4.0
UI Components	Radix UI	Latest
Animations	Framer Motion	12.23.22
Icons	Lucide React	0.544.0

Backend & Database

Component	Technology	Version
Database	Convex	1.27.3
Authentication	Clerk	6.32.2
State Management	Zustand	5.0.8

Development Tools

Component	Technology	Version
Linting	ESLint	9.x
Build Tool	Next.js	15.5.3

Performance Optimization

Build Optimizations

• Code Splitting: Automatic route-based splitting
• Image Optimization: Next.js Image component with WebP
• Bundle Analysis: Webpack bundle analyzer integration
• Caching Strategy: Aggressive caching with CDN

Runtime Optimizations

• Server-Side Rendering: ISR for dynamic content
• Edge Computing: Global CDN distribution
• Database Indexing: Optimized Convex queries
• Connection Pooling: Efficient resource management

🔒 Security & Compliance

Authentication & Authorization

• OAuth 2.0 Integration: Industry-standard authentication
• Role-Based Access Control: Granular permission management
• Multi-Factor Authentication: Enhanced security option
• Session Management: Secure token handling

Data Protection

• Encryption at Rest: AES-256 encryption for stored data
• TLS 1.3: End-to-end encrypted communications
• Data Sanitization: Input validation and XSS prevention
• Audit Logging: Comprehensive activity tracking

🤝 Contributing Guidelines

We welcome contributions from the community! Please see our Contributing Guide for detailed information on how to get started.

Code of Conduct

Please review our Code of Conduct to understand our community standards and expectations.

📄 License & Legal

License Information

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

🗺️ Roadmap & Vision

Future Enhancements

• Advanced drawing tools (brushes, layers, effects)
• Voice/video collaboration features
• Advanced permission management
• Mobile native applications
• AI-powered drawing assistance
• Smart canvas analysis
• Multi-region deployment
• Advanced analytics dashboard

📞 Support & Contact

Contact Information

• Primary Contact: Arya Singh
• Email: arya.2023ug1104@iiitranchi.ac.in
• Issue Tracking: GitHub Issues

---

DrawBetter™ - Where Creativity Meets Collaboration

Licensed under MIT