Tahta

Lavescar-dev

Tahta — gerçek zamanlı çoklu kullanıcılı whiteboard (Svelte 5 + Yjs + CF Durable Objects)

Tahta

Gerçek zamanlı çoklu kullanıcılı whiteboard demosu — sınırsız tuval, CRDT tabanlı sync, edge-first latency. Excalidraw + Figma arası dengeli bir takım deneyimi.

▸ Live demo · ▸ Portfolyo · ▸ Diğer demolar

Tahta hero

Genel bakış

Tahta, ekiplerin tek URL ile aynı anda whiteboard üzerinde çalışmasını sağlayan CRDT + edge-first sync demosudur. Mevcut sürüm tek-kullanıcı browser-only çalışır; gerçek deploy'da Yjs awareness + Cloudflare Durable Objects kombinasyonu ile <50ms latency hedeflenir.

Bu demoda CRDT teknik derinliğini ve edge-state mimarisini gösteren statik bir whiteboard sunulur — gerçek zamanlı multi-cursor mock'u (rastgele konumlardaki ekip üyeleri) içerir.

Özellikler

Sınırsız tuval — pan + zoom (100%-200%), grid bg
8 araç — seç, kalem, yazı, sticky note, dikdörtgen, daire, çizgi/ok, silgi (klavye kısayolları V/P/T/N/R/O/L/E)
8 hazır renk paleti — violet/cyan/emerald/amber/pink/orange/yellow/white
Sticky notes — drop-shadow, çoklu satır, renk seçimi
Çizimli akıcılık — hand-drawn font fallback ("Architects Daughter")
Multi-user cursors — ekip üyelerinin canlı imleci, isim etiketi, renk
Otomatik kaydetme — her değişiklik localStorage'a, "snapshot indir" tek tık
Çevrimiçi paneli — kullanıcı avatarları + canlılık göstergesi (yeşil pulsate)
Demo seed — Sprint 24 roadmap board'u (sticky-noteslarla goals/backlog/done + mimari diagram)

Tech stack

Layer	Technology
Framework	Svelte 5 (rune-based reactivity, class-store pattern)
Build	Vite 7
Styling	Tailwind CSS 4
Canvas	SVG (her şape native SVG element, kolay export)
State	`BoardStore` class içinde `$state` field'ları + `localStorage`
Sync (production)	Yjs awareness + Cloudflare Durable Objects + R2 snapshot
Deploy	Cloudflare Pages

Ekran görüntüleri

Hızlı başlangıç

git clone https://github.com/Lavescar-dev/tahta.git
cd tahta

npm install
npm run dev          # → http://localhost:5173

Build:

npm run build        # → dist/
npm run preview

Klavye kısayolları

Kısayol	Aksiyon
`V`	Seç aracı
`P`	Kalem
`T`	Yazı
`N`	Sticky note
`R`	Dikdörtgen
`O`	Daire
`L`	Çizgi (ok)
`E`	Silgi
`Shift+Drag`	Pan (kaydır)
`Scroll`	Zoom

Multi-user (production rehberi)

Demo single-user çalışır. Gerçek multi-user için önerilen mimarı:

┌──────────────────┐  WebSocket  ┌─────────────────────┐  R2 PUT
│  Browser (Yjs)   │────────────▶│ CF Durable Object   │────────▶ R2 snapshot
│  + awareness     │  /ws/:room  │ (Y.Doc state)       │           every 30s
└──────────────────┘             └─────────────────────┘
       ▲ pop-up cursor                  │ broadcast
       │                                ▼ to all clients in room
┌──────────────────┐
│  Other browsers  │
│  (canlı sync)    │
└──────────────────┘

Yjs Doc — Y.Map for shape index, Y.Array for ordered z-index, Y.XmlText for inline text edits
Awareness — cursor + selection + user metadata (ad/renk)
Durable Object — board başına 1 instance (room key = board_id), tüm WS bağlantıları aynı DO'a routed
R2 snapshot — DO her 30s veya disconnect anında Y.encodeStateAsUpdate(doc) → R2 PUT
Auth — Cloudflare Access + Service Token, anon kullanıcılar için time-limited rooms

Demo verisi

Boot anında Sprint 24 Roadmap board'u yüklenir:

Title + alt başlık
3 sticky note: Goals · Backlog · Done
Mimari diagram: Frontend → Worker → R2 (rect + ok)
Hand-drawn note: "Edge ile <50ms latency"
Ellipse "v2: Voice annotations" (gelecek scope, dashed)
Açık sorular listesi
Free-hand stroke örnekleri

Demo verisini sıfırlamak için sağ alt ↻ Reset butonu.

Deploy

Cloudflare Pages için doğrudan repo bağlanır:

Field	Value
Build command	`npm install && npm run build`
Build output directory	`dist`
Node version	`20`

License

_{Built by Lavescar · Portfolyo · [email protected]}

Top categories