🧠 SYNAPSE

An infinite spatial canvas where ideas become structured, tasks become visual, and complexity becomes clarity.

Synapse is a modern, real-time visual workspace built with React 19 + Vite and powered by Supabase. It provides an infinite, interactive canvas designed to map, connect, and manage any kind of knowledge—from research and product roadmaps to system architecture diagrams and collaborative brainstorms.

---

✨ Key Features

• 🖼️ Infinite Spatial Canvas: Pan freely in any direction, zoom anchored to your mouse cursor (0.1x to 5.0x), and navigate with an interactive grid.
• 🟦 Customizable Nodes: Double-click to instantly create nodes. Customize node headers, descriptions, and task lists, and track completion via integrated circular progress rings.
• 🔗 Interactive Connections: Draw animated dashed Bézier curves by dragging connection handles between nodes. Customize relationships and prevent duplicate/self-connections.
• ⚡ Real-Time Cloud Sync: Canvas states are automatically debounced (400ms) and synchronized to a Supabase database.
• ↩️ State History: In-memory undo/redo stack for all major canvas alterations.
• 🛠️ Control Panel: Toolbar for instant zoom controls, node creation, history navigation, and resetting views.

---

🛠️ Tech Stack

• Frontend: React 19 (Hooks, Context, Reducers), React Router DOM v7
• Build Tool: Vite 8
• Database & Auth: Supabase (PostgreSQL & Row-Level Security)
• Icons: Lucide React
• Styling: Vanilla CSS (Custom Properties / Design Tokens)

---

🚀 Getting Started

1. Clone & Install

# Clone the repository
git clone https://github.com/Aaron-Garvin/synapse-workspace.git
cd synapse-workspace

# Install dependencies
npm install

2. Environment Configuration

Create a .env file in the project root:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

3. Database Setup (Supabase SQL)

Run the following query in your Supabase SQL Editor to create the schema and enable Row-Level Security (RLS):

create table files (
  id         uuid primary key default gen_random_uuid(),
  user_id    uuid references auth.users(id) on delete cascade not null,
  name       text not null,
  state_data jsonb,
  created_at timestamptz default now()
);

alter table files enable row level security;

create policy "Users can manage their own files"
  on files
  for all
  using (auth.uid() = user_id)
  with check (auth.uid() = user_id);

4. Run Locally

npm run dev

Open http://localhost:5173 to access the application.

---

🎮 Navigation & Controls

Action	Control
Create Node	Double-click canvas or click ＋ Add Node
Select Node	Click node header
Move Node	Drag node by its header handle
Pan Canvas	Hold and drag canvas background
Zoom Canvas	Scroll wheel (anchored to cursor) or ＋/－ buttons
Connect Nodes	Drag from the right-side handle of a node to a target node
Context Menu	Right-click node to edit theme, duplicate, or delete

---

🗺️ Roadmap

• Keyboard shortcuts (Ctrl+Z, Delete, Space to pan)
• Node resizing handles
• Editable connection labels
• Canvas minimap overlay
• Export canvas as PNG/SVG
• Real-time multi-user collaboration (Supabase Channels)

---

📄 License

Distributed under the MIT License. See LICENSE for more information.