Project Overview
MindMap brings brainstorming sessions online. Users construct node-based mind maps on infinite canvases. Supabase synchronizes changes, showing team cursor coordinates and text edits as they happen.
Key Features & Scope
Infinite node drawing canvas utilizing React Flow library wrappers
Real-time team cursor coordinates showing presence using Supabase channels
Automatic database saves syncing maps locally before pushing cloud updates
Canvas export utilities outputting high-definition PNG and PDF maps
System Architecture
Next.js App Router project leveraging React Flow for canvas calculations. Collaborative state and locks are managed using Supabase Realtime subscriptions.
Client InterfaceNext.js / React
──────▶
Backend CoreNode.js / Express
──────▶
Database NodePostgreSQL (Supabase)
Database: PostgreSQL (Supabase)
Deployment: Vercel & Supabase Cloud
Performance & Vitals
98
96
99
100
Verified Production Metrics
Technologies Used
Next.jsReact FlowSupabase RealtimeTailwind CSSTypeScript