Rotating Canvas — Technical Design Document

1) Project Overview

Rotating Canvas is a real-time, multiplayer drawing platform that showcases proficiency in full-stack development and real-time communication.

Key features include:

• Collaborative Mode: All participants can draw simultaneously on a shared canvas.
• Rotating Mode: Users take turns drawing, with control of the canvas rotating based on a timer.

In addition to drawing, the platform integrates real-time chat and group audio calls, enabling rich communication among users. Guests can join instantly without registration, while authenticated users can create accounts to save and share their final drawing

2) System Architecture

graph LR
    %% Frontend
    subgraph Frontend
        client([Client - Flutter])
    end

    %% Backend
    subgraph Backend
        server[Server - Node.js]
    end

    %% Data Stores
    subgraph Data_Stores
        db[(Database - MongoDB)]
        cloud[/Cloud Storage - Cloudinary/]
    end

    %% Connections
    client -- HTTP API (Auth, Rooms, Save) --> server
    client -- WebSocket (Drawing & Chat) --> server
    server -- DB Connection --> db
    server -- Upload Final Drawing --> cloud
    client -- WebRTC (P2P Voice) --- client

The platform is built on a standard client-server architecture. A Flutter client communicates with a Node.js backend. The system leverages three distinct communication channels to achieve a seamless real-time experience.

• HTTP API: Used for initial setup and persistent data management (e.g., user authentication, creating rooms, saving drawings).
• WebSockets: Provides a persistent, low-latency connection for real-time data like drawing strokes and chat messages. The server acts as a hub, broadcasting data to all clients in a room.
• WebRTC: Enables efficient, peer-to-peer group voice calls that bypass the central server, keeping audio latency to a minimum.

All user and game data is persisted in a database, while final drawings are uploaded to a separate cloud storage service for efficiency.

3) Technology Stack

• Frontend:
  • Flutter: Used for building a single, performant application from a single codebase.
• Backend:
  • Node.js: Chosen for its non-blocking, event-driven architecture, making it ideal for handling a large number of concurrent real-time connections.
• Real-Time Communication:
  • WebSockets: Provides a persistent, low-latency connection for bidirectional communication of drawing strokes and chat messages.
  • WebRTC: Enables efficient peer-to-peer connections for live group voice calls.