MindGrid

About this project

MindGrid is a spatial node-based canvas for interactive mind mapping and brainstorming, equipped with GPT-4 text expansion suggestions and inline DALL-E 3 image nodes.

The Challenge

Visual brainstorming platforms are often static, requiring manual layout adjustments and text entry. Users struggle to turn abstract mind maps into concrete plans or visualize concepts quickly during brainstorming sessions.

The Solution

We built a spatial canvas utilizing React Flow and Zustand for smooth node management. The canvas features inline AI expansion: clicking a node generates related ideas using GPT-4 and displays them as branch nodes. Users can also input prompts to generate custom icons and concept illustrations via DALL-E 3 directly inside canvas nodes.

Interactive spatial canvas supporting drag-and-drop

Interactive spatial canvas supporting drag-and-drop node organization.

Asynchronous AI text suggestion engine

Asynchronous AI text suggestion engine generating conceptual branches.

Inline DALL-E 3 image generation

Inline DALL-E 3 image generation nodes rendering visuals on the canvas.

Real-time multiplayer collaboration canvas with

Real-time multiplayer collaboration canvas with state synchronization.

AI Intelligence

Generative text brainstorming expansion powered by GPT-4 and custom image synthesis via DALL-E 3 nodes.

System Architecture

Next.js 15 App Router using React Flow and Zustand for frontend rendering, with Supabase handling state sync.

Database & Caching

Supabase PostgreSQL handles real-time node positions, with local storage caching for immediate recovery during disconnections.

Messaging

WebSockets handle instant cursor and node updates between collaborative users.

Frontend

Backend

Deployment

Frontend and API nodes deployed on Vercel for maximum edge performance.