# Gemini Code Understanding

## Project Overview

This project is a production-ready, multiplayer whiteboarding application built with tldraw. It enables real-time collaboration, allowing multiple users to draw and interact on the same canvas. The application is designed to be highly scalable, leveraging a serverless architecture with Cloudflare Workers and Durable Objects. It also includes functionality for asset uploads (images, videos) and fetching URL previews for bookmarks. The web application is wrapped in an Android app using Capacitor, which also includes integration with Samsung's S-Pen for a more native drawing experience.

## Architecture

The application follows a client-server architecture:

*   **Client**: A React-based single-page application built with Vite. It uses the tldraw SDK for the drawing interface and communicates with the backend via WebSockets for real-time synchronization.
*   **Backend**: A serverless backend built with Cloudflare Workers. Each whiteboard room is managed by a separate Durable Object, which ensures that all users in a room are connected to the same instance and see the same state. This architecture allows for high scalability, as a new Durable Object is spun up for each active room.
*   **Storage**: Whiteboard data and uploaded assets are stored in a Cloudflare R2 bucket.
*   **Mobile**: The web application is wrapped in a native Android application using Capacitor. This allows the app to be installed on Android devices and access native features.

![Architecture Diagram](arch.png)

## Features

*   Real-time multiplayer collaboration on a shared whiteboard.
*   Support for drawing, adding shapes, text, and images.
*   Asset uploads (images and videos).
*   Bookmark unfurling to show previews of URLs.
*   S-Pen integration on Android for a more natural drawing experience.
*   Scalable backend that can handle many simultaneous users and rooms.

## Tech Stack

*   **Frontend**: React, tldraw, Vite
*   **Backend**: Cloudflare Workers, Durable Objects
*   **Storage**: Cloudflare R2
*   **Real-time Sync**: WebSockets
*   **Mobile**: Capacitor (for Android)
*   **Language**: TypeScript

## Project Structure

```
├── client/              # Frontend React application
│   ├── components/      # React components
│   ├── hooks/           # Custom React hooks (e.g., useSPen.ts)
│   ├── pages/           # Main application pages
│   ├── main.tsx         # Entry point of the React app
│   └── ...
├── worker/              # Cloudflare Worker backend
│   ├── TldrawDurableObject.ts # Durable Object for room synchronization
│   ├── worker.ts        # Main worker entrypoint and routing
│   ├── assetUploads.ts  # Logic for handling asset uploads
│   └── ...
├── android/             # Android project generated by Capacitor
├── wrangler.toml        # Configuration for the Cloudflare Worker
├── vite.config.ts       # Configuration for the Vite dev server
├── capacitor.config.ts  # Configuration for the Capacitor mobile app
└── package.json         # Project dependencies and scripts
```

## Getting Started

1.  **Install dependencies**:
    ```bash
    npm install
    ```
2.  **Start the development server**:
    ```bash
    npm run dev
    ```
    This will start both the Vite dev server for the frontend and the Cloudflare Worker for the backend. The application will be available at `http://localhost:5173`.

## Deployment

To deploy the application, you will need a Cloudflare account.

1.  **Create an R2 bucket** in your Cloudflare account.
2.  **Update `wrangler.toml`** with the name of your R2 bucket.
3.  **Build the application**:
    ```bash
    npm run build
    ```
4.  **Deploy to Cloudflare**:
    ```bash
    npx wrangler deploy
    ```
This will deploy the backend worker and the frontend application to Cloudflare.