A Vite-powered drawing application with multiple modes for testing, collaboration, and real-time interaction. Built with React Router for seamless navigation and powered by Supabase for real-time collaboration and data persistence.
The application is deployed on Vercel. Visit the live demo to explore all features. https://drawing-board-azure.vercel.app
- Interactive Drawing Canvas: Full-featured drawing board with multiple tools and brushes
- Test Mode: Default landing page for testing drawing functionality offline
- Collaboration Mode: Real-time collaborative drawing with room-based sessions
- Real-Time Mode: Live drawing sessions with instant synchronization across users
- Room Management: Create and join drawing rooms for collaborative sessions
- Cloud Synchronization: Powered by Supabase for seamless data persistence and real-time updates
- Real-time Updates: Supabase Realtime for instant drawing synchronization across all connected users
- Data Persistence: All drawings and room data stored securely in Supabase database
The application uses React Router for navigation. Here are the available routes:
| Route | Component | Description |
|---|---|---|
/ |
TestMode | Default drawing board - Offline testing mode |
/realtime-mode |
JoinRoom | Join or create a real-time drawing room |
/realtime-mode/:roomId |
RealTimeMode | Live collaborative drawing session |
/collab-mode/:roomId |
CollabMode | Collaborative drawing mode with room ID |
https://drawing-board-azure.vercel.app/
- Opens directly when visiting the root URL
- Offline drawing board for testing and practice
- No real-time features - perfect for individual use
https://drawing-board-azure.vercel.app/realtime-mode
- Opens the room joining interface
- Create or join live drawing sessions
- Real-time collaboration with other users
https://drawing-board-azure.vercel.app/collab-mode
- Opens the room joining interface
- Create or join live drawing sessions
- collaboration with other users
- Node.js (version 14 or higher)
- npm or yarn package manager
- Clone the repository:
git clone <your-repository-url>
cd <your-project-name>- Install dependencies:
npm install
# or
yarn install- Start the development server:
npm run dev
# or
yarn dev- Open http://localhost:5173 to view it in the browser.
src/
├── App.jsx # Main routing configuration
├── pages/
│ ├── TestMode.jsx # Offline drawing board component
│ ├── CollabMode.jsx # Collaborative drawing mode component
│ ├── RealTimeMode.jsx # Real-time drawing session component
│ └── JoinRoom.jsx # Room joining interface
├── components/ # Reusable UI components
├── hooks/ # Custom React hooks for drawing and real-time features
├── utils/ # Utility functions and Supabase configurations
│ └── supabase.js # Supabase client configuration
└── ...
-
Vite: Fast build tool and development server
-
React: Frontend framework for interactive UI
-
React Router: Client-side routing for seamless navigation
-
Canvas API: HTML5 Canvas for drawing functionality
-
Supabase: Backend as a Service (BaaS) for database, and collab features
-
PostgreSQL: Robust database backend via Supabase
-
Vercel: Deployment and hosting platform
-
Solo Drawing: Start at the root URL (
/) to access offline drawing mode -
Quick Collaboration: Use
/collab-mode/[room-name]to jump directly into a drawing room -
Real-time Sessions:
- Go to
/realtime-modeto see available rooms or create new ones - Share
/realtime-mode/[room-name]links with others for instant collaboration
- Go to
-
Room IDs: Can be any string - use descriptive names like
team-meeting-2024orart-class-101 -
Drawing Tools: Each mode supports full drawing capabilities with brushes, colors, and shapes
-
Real-time Sync: All drawing actions are instantly synchronized via Supabase Realtime
- Multiple Brush Types: Pencil, marker, highlighter, and more
- Color Palette: Full color picker with custom colors
- Shape Tools: Rectangle, circle, line, and freehand drawing
- Undo/Redo: Full history management for all drawing actions
- Real-time Cursors: See other users' mouse positions in collaborative modes via Supabase Realtime
- Export Options: Save your drawings as images
This application leverages Supabase for its backend infrastructure:
- Database: PostgreSQL database for storing drawing data, room information, and user sessions
- Storage: Secure storage for exported drawings and assets
To run this project locally, you'll need to set up your Supabase credentials:
VITE_SUPABASE_API_KEY=your_supabase_project_API
This project is configured for Vercel deployment. The routing is handled client-side, so make sure your deployment platform supports SPA (Single Page Application) routing.
Quick Start Links: