Hey everyone, I recently spent 9 months building a complex visual
SaaS platform and I've decided to open-source the entire 1,514-commit
codebase as a reference architecture.
It's an AI-powered infinite canvas where users type a prompt and the
AI generates structured, interactive diagrams.
Tech Stack:
- Next.js 14 App Router
- React Flow (canvas engine)
- Zustand (split into 4 domain stores for performance)
- Supabase (PostgreSQL + RLS)
- Stripe (Billing + Webhooks)
- OpenAI / Claude API integration on Vercel Edge functions
The tricky parts I had to solve (which might save you time if you're building something similar):
Optimizing React Flow re-renders across hundreds of nodes using domain-split Zustand stores.
Forcing LLMs to output strict, structured JSON that maps instantly to draggable React components.
Embedding heavy components (AG Grid, Quill.js, Canvas drawing) inside draggable React Flow nodes without breaking event propagation.
Repository: https://github.com/jayasth/MindPlexa
Feel free to fork it, use it as a boilerplate, or let me know if you have any questions about the architecture!
The user is open-sourcing a complex AI-powered visual SaaS platform built with Next.js, React Flow, and Supabase. The platform allows users to generate interactive diagrams using AI prompts. The user shares the repository link and invites others to use it as a reference architecture or boilerplate.