Important

The Website is hosted on Render’s free tier, so it might take a few seconds to load and display the website - but hey, good things take time! 😄

---

🎨 Canvas Mirror

Free and Real-Time collaborative platform 🦄 🚀

🎨 Canvas Mirror - It is a real-time collaborative whiteboard website. It allows multiple users to sketch together on a shared canvas, make notes and a lot more.

canvas-mirror.mp4

Contents

• 🎨 Connect And Doodle With Your Buddies
• 🚀 Features
• 🛠️ Tech Stack
• ⚙️🔧Installation
  • 📋 Manual Installation
    • Clone the Repository
    • 🚧 Backend Setup (FastAPI)
    • 🌅 Frontend Setup (React)
  • 🐳 DOCKER Installation
    • Run Instantly with Docker (Prebuilt Image)
    • Or, run locally with Docker Compose

🎨 Connect And Doodle With Your Buddies:

• Username must be unique because sharing the same name as someone else will cause your movements to overlap!
• Use the same room name, make sure everyone joins the exact same room to collaborate.
• Once you're in, let the creativity flow together, in real-time! 🎨🦄

🚀 Features

• ✏️ Collaborative Drawing - Real time multiuser sketching powered by WebSockets.
• 🖼️ Canvas 2D Integration – Smooth and responsive drawing experience using the Canvas API.
• 📡 Live Sync - All strokes and updates are instantly mirrored to other connected users.
• 🗒️ Sticky Notes – Leave notes or reminders directly on the canvas.

🛠️ Tech Stack

Frontend	Backend	Real-Time	Drawing	Containerization
React.js (Typescript)	FastApi (Python)	Websocket	Canvas 2D API	Docker

⚙️ Installation

• 📋 Manual Installation:

  1. Clone the Repository

  git clone https://github.com/A-ryan-Kalra/canvas_mirror
  
  # Enter the working directory
  cd canvas-mirror
  

  2. 🚧 Backend Setup (FastAPI)

  cd server
  python3 -m venv venv-canvas
  source venv-canvas/bin/activate
  pip install -r requirements.txt
  uvicorn canvas_backend.main:app --reload
  

  3. 🌅 Frontend Setup (React)

  cd ../client
  npm install
  npm run start
  

  Open http://localhost:5173 in your browser to see the result.

• 🐳 DOCKER Installation

  • Run Instantly with Docker (Prebuilt Image)

    # Pull the prebuilt image
    docker pull aryankalra363/canvas_mirror
    
    # Run the app on port 8000
    docker run -p 8000:8000 -e STATIC_PATH=app/client aryankalra363/canvas_mirror
    

    🔗 Open your browser and visit: http://localhost:8000

---

Important

Make sure to include .env file for both server and client directory before the build.

• Or, run locally with Docker Compose

  If you would like to clone the code and run locally:

  1. Clone the repository

  https://github.com/A-ryan-Kalra/canvas_mirror.git
  cd canvas_mirror
  

  2. Run with Docker Compose

  docker compose up --build
  

  🔗 Open your browser and visit: http://localhost:8000

---

You know what's absolutely free?

• Leaving a ⭐ star
• 🍴Forking the repository
• No hidden fees, no subscriptions - just pure open-source love 🥰!

---

Powered by ☕️ & 🎧
Aryan Kalra