The Interactive Multilingual Whiteboard

Summary • Features • Installation • Development Workflow • Architecture • Project Structure

Summary

Polyboard is a real-time collaborative whiteboard application that combines interactive drawing capabilities with multilingual communication features. Built with a React TypeScript frontend and FastAPI Python backend, it enables teams to collaborate seamlessly across language barriers by providing comprehensive drawing tools, live synchronization, and a chat system with real-time translation. It's an ideal solution for international teams, educational environments, and remote collaboration scenarios where visual communication and language diversity intersect. It currently features the following:

• A variety of Brushes and Tools
• Complete Undo/Redo Functionality
• Brush Stroke Selection/Manipulation
• Real Time Text OCR and Multilingual Translation

Features

Drawing Tools

• Pen Tool: Freehand drawing with customizable colors and brush sizes.
• Text Tool: Add typed text to your whiteboard.
• Shape Tools: Draw lines, rectangles, and ellipses.
• Selection Tool: Select and focus on specific strokes.
• Mathematical Symbols: Quick access to common mathematical notation.

Real-time Collaboration

• Live Synchronization: Changes appear instantly for all connected users.
• WebSocket Communication: Efficient real-time data transfer.
• Conflict Resolution: Smart merging of simultaneous edits.
• Connection Status: Visual indicators for connection health.

Multilingual Chat

• Live Translation: Real-time message translation between languages
• Language Detection: Automatic detection of input language
• Original Message Preservation: View both original and translated text
• User Identification: Clear attribution of messages with language badges

User Experience

• Undo/Redo: Full history management with visual feedback
• Grid System: Precise alignment with customizable grid overlay
• Responsive Design: Optimized for various screen sizes
• Keyboard Shortcuts: Efficient workflow with hotkey support

Installation

Prerequisites

• Python 3.13+
• NPM (Docs here) - Node.js package manager
• UV (Docs here) - Python package installer and resolver
• Clone the Github Repository using SSH

Frontend Setup

Requires NPM to be properly installed.

1. Navigate to frontend directory

   cd frontend

2. Install Node.js dependencies

   npm install

3. Start the development server

   npm run dev

The frontend will be available at http://localhost:5173

Backend Setup

Requires Python UV to be properly installed.

1. Navigate to backend directory

   cd backend

2. Install Python dependencies

   uv sync

3. Start the FastAPI server

   uv run main.py

The backend will be available at http://localhost:8000

Development Workflow

1. Follow the installation guide above for the React Client and the FastAPI Server.
2. Create and checkout a feature branch:

   git branch [your_name]/your-feature-branch-name
   git switch [your_name]/your-feature-branch-name

3. Make your changes with good code style, linting with Black and Prettier.
4. Test thoroughly checking manually to ensure proper stroke rendering and saving.
5. Commit with clear messages:

   git stage .
   git commit -m "feat: Added circle drawing tool"

6. Push and create a Pull Request, Main is protected and requires PRs for modification.

Architecture

Frontend Stack

• React 19 with TypeScript for component architecture.
• Zustand for state management (board, editor, chat, cursor stores).
• WebSockets for real-time communication.

Backend Stack

• FastAPI with Python 3.13 for high-performance API.
• Pydantic for data validation and serialization.
• WebSocket for real-time bidirectional communication.

Project File Structure

polyboard/
├── frontend/                 # React TypeScript frontend
│   ├── src/
│   │   ├── components/      # UI components
│   │   │   ├── whiteboard/  # Main drawing canvas
│   │   │   ├── toolspanel/  # Drawing tools sidebar
│   │   │   ├── chatpanel/   # Live chat interface
│   │   │   └── ...
│   │   ├── stores/          # Zustand state stores
│   │   ├── hooks/           # Custom React hooks
│   │   ├── strokes.ts       # Drawing stroke definitions
│   │   ├── rendering.ts     # Canvas rendering functions
│   │   └── geometry.ts      # Geometric calculations
│   └── package.json
├── backend/                 # FastAPI Python backend
│   ├── main.py              # FastAPI application entry
│   ├── board_store.py       # Board state models
│   ├── chat_store.py        # Chat state models
│   └── pyproject.toml       # Backend Project Configs
└── README.md

Made with ❤️ by the Polyboard team