CANVuS

A real-time collaborative drawing canvas where multiple users can draw, erase, and interact simultaneously. Designed for lightweight usage with minimal UX for smooth collaboration!

Features

• Real-time collaboration: Multiple users can draw on the canvas simultaneously.

• Canvas types:

  • Private: Only accessible by the creator.
  • Public: Anyone can join and draw.
  • Shared: Collaborators can be allowed to join via email.

• Drawing tools: Pen, Eraser, A Color picker

• Canvas sizes: Create canvases of different sizes based on your needs.

• Session management: Users can join a session via a unique link.

• Authentication: OAuth2 + JWT

• Persistent state: Canvas updates are synced, and cached using Redis.

• Firebase integration: Stores user and session data.

Prerequisites

• Node.js (v18+ recommended)

• Redis Install Redis locally or use a hosted instance. For local installation:

  • On macOS: brew install redis
  • On Ubuntu: sudo apt install redis-server
  • On Windows: Download from Redis official site

• Firebase Service Account JSON (see SERVICE_ACCOUNT_CREDS below)

Installation

1. Clone the repository:

   git clone <repo-url>
   cd CANVuS

2. Install dependencies:

   npm install

3. Configure environment variables in .env:

   JWT_SECRET=<your-jwt-secret>
   SERVICE_ACCOUNT_CREDS=/path/to/serviceAccountKey.json
   REDIS_URL=<your-redis-url>

4. Start the server:

   node server.js

5. Open the front-end in your browser to access the canvas.

Set up Firebase project

1. Go to https://console.firebase.google.com/
2. Create a new project.
3. Add a web app and generate a Service Account JSON for Admin SDK.
4. Save the JSON locally and set the path in your .env as SERVICE_ACCOUNT_CREDS.

SERVICE_ACCOUNT_CREDS

Path to your Firebase Service Account JSON file, which contains:

• project_id
• private_key
• client_email
• Other credentials required for Firebase Admin SDK access

Usage

• Log in using Google OAuth2.
• Create a new canvas: select type (private, public, or shared) and size.
• Manage your canvas in your dashboard
• For shared canvases, invite collaborators by entering their email addresses.
• Owners of shared canvases have control over session management.

Tech Stack

• Backend: Node.js, Express
• Real-time updates: WebSockets (Socket.IO)
• Caching: Redis
• Authentication: OAuth2 + JWT
• Database: Firebase for session and canvas state
• Front-end: HTML, CSS, JS (Canvas API)

Contribution

• Contributions are welcome.