Kinova is a collaborative family tree canvas workspace. It enables families to trace their ancestral heritage, document multi-generational milestones, and collaborate in real-time on a single dynamic visual canvas.

Kinova Family Tree Canvas Main Workspace

1. System Architecture & Real-Time Synchronization

The platform utilizes a decoupled architecture: a high-performance React SPA communicates with the Laravel backend via standard REST APIs for persistent data, while bidirectional WebSocket channels (Laravel Reverb) handle real-time canvas node dragging and cursor movements.

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. Key Features & Technical Highlights

  • Infinite Canvas Engine: Powered by a heavily customized React Flow implementation supporting complex multi-generational kinship, spousal linkages, and automatic tree layout calculation.
  • Low-Latency Multiplayer Whispering: Leverages Laravel Reverb for broadcasting client-to-client drag coordinates without overloading database connections.
  • Relational Lineage Modeling in PostgreSQL: Engineered relational schemas to represent complex genealogical structures including multiple marriages, adoptions, and cross-family linkages.

Family Member Detail Drawer and Biographical Logs

3. Fluid Navigation & Multi-Generational Exploration

The canvas workspace features smooth navigation controls (panning, multi-level zooming, minimap orientation, and focus-on-node animations) to ensure seamless exploration across hundreds of family tree nodes without rendering lag.

Multi-Generational Tree Hierarchy and Canvas Exploration

4. Infrastructure & Deployment

  • Frontend deployed as an optimized static SPA.
  • Backend API, PostgreSQL 16, Redis queue broker, and Laravel Reverb WebSocket server containerized with Docker Compose behind an Nginx Reverse Proxy with wildcard SSL.