Local-First Stack Demo

Pico.css + UnoCSS + Alpine.js + TinyBase + Yjs + y-webrtc — no build, CDN only

· peer · todo · online
Yalnız çalışıyorsun
Room:
⚠ Çevrimdışısınız — değişiklikleriniz yerel olarak kaydedilir, online olduğunuzda diğer cihazlarla otomatik senkronlanır.

📝 1. Stack Kalbi — Todo (TinyBase + Yjs + Alpine)

Bu tek uygulama stack'in tüm katmanlarını gösterir. Başka bir sekmede/cihazda aynı sayfayı açarsan todo'lar anında senkron olur.

  • Henüz todo yok. Yukarıdan ekleyin veya başka sekmede açın.
🔍 Bu nasıl çalışıyor?

store.setRow() çağrısı TinyBase RAM store'unu günceller → persister-browser LocalStorage'a yazar → persister-yjs Y.Doc'a CRDT delta'sı ekler → y-webrtc aynı room'daki tüm cihazlara WebRTC data channel üzerinden gönderir. Alpine, store.addTableListener('todos', syncFromStore) ile reaktif kalır.

🎨 2. UI Komponentler (Alpine + Pico)

Modal / Dialog

Native <dialog> + Pico stilleri. ESC ile kapanır.

Burası modal içeriği. Erişilebilir, ESC ile kapatılır.

Autocomplete

↓ ↑ ile gezilir, Enter seçer

Tabs (ARIA)

Datagrid (sort + filter + page)

İsim Durum Skor

Theme Switcher

FOWT önleme: tema inline script ile DOM yüklenmeden uygulanır.

📋 3. Forms

Form Validation

✓ Kaydedildi

Multi-Step Wizard

/

Adım 1: Hesap

Adım 2: Profil

Adım 3: Tercihler

Tema seçimi:

File Upload (drag-drop)

📁 Sürükle veya tıkla

Demo: gerçek upload yok, sadece UI

Live Search

🔄 4. CRDT / Sync UI

Awareness — Online Kullanıcılar

Aynı room'daki diğer cihazları gösterir.

Yalnız çalışıyorsun

Birden fazla sekmede açıp test edin — aynı room'da birbirinizi görürsünüz.

Conflict History

Son değişikliklerin kaydı (modifiedBy/modifiedAt).

Son aktivite
  • Henüz aktivite yok

Sync Status

WebRTC peer sayısı
Aktif kullanıcı
Todo sayısı
Room
Çevrimiçi
Son sync

🚀 5. Phase 2 Preview — HTMX + PocketBase

Bu demo şu anda Phase 1'de (P2P + LocalStorage). Phase 2'ye geçiş için usePocketBaseBackend = true flag'i açılır.

HTMX SSR Partial (Phase 2'de)

⏸ Phase 1 modunda: bu alan usePocketBaseBackend = true ile aktif olur.

Phase 2'de PocketBase'den gelen $template SSR HTML'i ile doldurulur. CRDT sync arka planda çalışmaya devam eder.

🔧 6. Mimari Akış

addTodo()
  └─> store.setRow('todos', id, {…})
        ├─> persister-browser  → LocalStorage (offline cache)
        └─> persister-yjs      → Y.Doc
                                  └─> y-webrtc → diğer cihazlar (P2P)

store.addTableListener('todos', syncFromStore)
  └─> Alpine this.todos = [...]
        └─> DOM x-for ile render

Katmanlar

  1. Pico.css — semantik HTML stilleri
  2. UnoCSS — runtime utility class'ları
  3. HTMX — Phase 2 SSR partial swap
  4. Alpine.js — reaktif UI bindings
  5. TinyBase — RAM store + LocalStorage + Yjs persister
  6. Yjs — CRDT doc
  7. y-webrtc — P2P transport + awareness