System Overview

Ideon is built with a modern stack designed for performance, portability, and self-hosting.

Technology Stack

Backend / Frontend

• Framework: Next.js (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Components: Radix UI (via shadcn/ui)

Database

• Primary (Production): PostgreSQL
• Development: SQLite (via better-sqlite3)
• Query Builder: Kysely
• Migrations: Kysely migrations

Realtime & State

• CRDTs: Yjs for conflict-free realtime collaboration.
• WebSocket: ws + y-websocket custom server implementation.
• Canvas: React Flow (xyflow) for the visual graph.

Architecture

Ideon runs as a single container (monolith) for simplicity.

1. Next.js Server: Handles API requests, SSR pages, and static assets.
2. WebSocket Server: Runs alongside Next.js (custom server entry point) to handle realtime connections for project canvases.
3. Database: PostgreSQL (recommended) or SQLite (dev) stores persistent data.
4. Y-LevelDB: Persists Yjs updates to disk efficiently.

This architecture ensures that Ideon is easy to deploy (just one container) while supporting advanced features like realtime collaboration.