Kinova adalah workspace kanvas silsilah keluarga (family tree) interaktif dan kolaboratif. Platform ini memungkinkan keluarga besar untuk menelusuri garis keturunan, mencatat riwayat hubungan antar-generasi, dan berkolaborasi secara real-time dalam satu kanvas visual yang dinamis.

Tampilan Utama Kanvas Silsilah Keluarga Kinova

1. Arsitektur Sistem & Realtime Synchronization

Sistem dibangun dengan arsitektur decoupled: Frontend React SPA yang ringan dan responsif berkomunikasi dengan backend Laravel melalui REST API serta jalur WebSocket dua arah (Laravel Reverb) untuk sinkronisasi perpindahan node kanvas secara instan.

graph TD
    %% Frontend Layer
    CF[Vite React + TypeScript SPA] -->|HTTPS REST API| NG[Nginx Reverse Proxy on VPS]
    CF -->|WSS Real-Time Canvas Events| NG

    %% Reverse Proxy SSL Termination
    NG -->|HTTP Port 8000| LV[Laravel REST API Container]
    NG -->|WS Port 8080| RV[Laravel Reverb WebSocket Server]

    %% Internal Stack Layer
    LV -->|Read/Write SQL| PG[(PostgreSQL 16 Database)]
    LV -->|Cache & Jobs dispatch| RD[(Redis Container)]
    RV -->|Whisper events| RD
    QW[Laravel Queue Listener] -->|Listen jobs| RD
    QW -->|Process async actions| PG

2. Fitur Utama & Keunggulan Teknis

  • Infinite Canvas Engine: Memanfaatkan React Flow yang dikustomisasi khusus untuk merender node silsilah multi-generasi, relasi pernikahan (spouses), dan garis keturunan anak dengan tata letak otomatis yang rapi (tree auto-layout).
  • Live Collaboration & Whispering: Menggunakan Laravel Reverb untuk menyiarkan perpindahan posisi node dan kursor antar-pengguna secara low-latency tanpa membebani database utama.
  • Relasi Silsilah Kompleks di PostgreSQL: Skema database dirancang untuk menangani pohon keluarga yang rumit, termasuk pernikahan ganda, adopsi, dan relasi silang antar-keluarga.

Detail Informasi dan Pencatatan Riwayat Anggota Keluarga

3. Navigasi & Eksplorasi Visual Multi-Generasi

Kanvas mendukung kontrol navigasi fluid (pan, multi-level zoom, minimap, dan focus on node) untuk memudahkan penelusuran hubungan kekeluargaan yang luas dengan ratusan anggota keluarga tanpa degradasi performa render.

Eksplorasi Kanvas dan Hirarki Silsilah Multi-Generasi

4. Deployment & Infrastruktur

  • Frontend di-deploy sebagai static bundle berkinerja tinggi.
  • Backend, database PostgreSQL 16, Redis, dan Reverb WebSocket di-containerize menggunakan Docker Compose di balik Nginx Reverse Proxy dengan wildcard SSL.