Flownotes
FlowNotes v2 FlowNotes v2 is a React + TypeScript mindmap editor built on React Flow. It combines a draggable canvas, rich node editing, AI-assisted mindmap generation, and local p...
Technical Architecture & Engineering Overview
Detailed system design and core implementation
The core system is split into a Node.js/Express API layer, a React SPA, and a PostgreSQL database. The API exposes REST endpoints for user authentication, mindmap CRUD, and AI generation, all protected by JWT middleware that validates tokens stored in the Authorization header. The frontend communicates exclusively with these endpoints, never touching external AI services directly.
Data ingestion flows through the /api/mindmaps routes: a POST creates a new mindmap record, a GET retrieves a list or single map, and a PUT updates the JSON payload. The AI proxy (/api/ai/generate) accepts a provider field and forwards the request to the chosen backend service (Gemini or Ollama) using the server‑side API key stored in .env. The response, a JSON‑formatted mindmap, is returned to the client for rendering.
Execution begins with the Express router, which delegates to controller functions. Controllers call service modules that encapsulate business logic—e.g., MindmapService handles persistence via Prisma, while AIService orchestrates external calls. Middleware layers perform authentication, error handling, and logging, ensuring a clean separation of concerns.
Security guardrails include JWT authentication, rate limiting per user on AI routes, and environment‑based configuration via Docker and .env files. All secrets (DB URL, JWT secret, AI keys) are injected at container runtime, preventing exposure in the codebase. The deployment stack uses Docker Compose for local development and can be extended to cloud platforms with CI/CD pipelines.
System Diagrams & Flow Visualizations
Interactive Mermaid architecture & execution flows
Core System Features
Key capabilities & architectural features
User registration and login with JWT
User registration and login with JWT
Secure mindmap CRUD operations
Secure mindmap CRUD operations
AI‑powered mindmap generation via proxy
AI‑powered mindmap generation via proxy
Provider selection UI with model options
Provider selection UI with model options
Responsive React Flow canvas for mindmap editing
Responsive React Flow canvas for mindmap editing
Undo/redo history and localStorage persistence
Undo/redo history and localStorage persistence
Import/export mindmaps as JSON
Import/export mindmaps as JSON
Keyboard shortcuts and toast notifications
Keyboard shortcuts and toast notifications
Dark mode support with ThemeProvider
Dark mode support with ThemeProvider
Real‑time collaboration (planned)
Real‑time collaboration (planned)
Engineering Challenges & Solutions
Problem statements & resolution strategies
Integrating multiple AI providers while keeping API keys secure
Integrating multiple AI providers while keeping API keys secure
Implementing rate limiting without blocking legitimate users
Implementing rate limiting without blocking legitimate users
Ensuring consistent JSON schema for mindmaps across AI and frontend
Ensuring consistent JSON schema for mindmaps across AI and frontend
Managing state persistence between localStorage and server DB
Managing state persistence between localStorage and server DB
Balancing performance of AI calls with user experience
Balancing performance of AI calls with user experience
Key Code Modules & Architecture
Core file entrypoints and service responsibilities
srcModule component managing src source logic
src/componentsModule component managing components source logic
src/components/uiModule component managing ui source logic
src/hooksModule component managing hooks source logic
src/libModule component managing lib source logic
src/pagesModule component managing pages source logic
src/servicesModule component managing services source logic
src/storeModule component managing store source logic
src/typesModule component managing types source logic
src/utilsModule component managing utils source logic
User Journey Pipeline
- 1User Access & Preset Selection: User opens client interface and configures request parameters or task workflow presets.
- 2Client Payload Dispatch: Front-end components (React, TailwindCSS) serialize input objects and send HTTP/WebSocket requests to `/api/analyze`.
- 3Middleware & Validation Check: API Gateway evaluates CORS headers, authorization tokens, and input validation schemas.
- 4Service & Inference Execution: Service controllers dispatch request frames to model inference engine (Local Engine) or storage layer.
- 5Response Delivery & State Synchronization: Serialized output payload is returned to the client and rendered in the visual workspace.
Execution Code Flow
- 1Entrypoint Invocation: Request enters network interface layer via `POST /api/analyze`.
- 2Schema & Guardrail Verification: Middleware sanitizes payload parameters and checks rate-limiting limits.
- 3Controller Dispatch: Router delegates validated object to `Src` service controller.
- 4Engine Execution & Storage Operations: Controller executes business logic, queries database models (Persistence), and invokes ML workers.
- 5Response Serialization: Result model is formatted into standard JSON response frame and delivered with HTTP 200 OK.
System FAQ & Technical Specifications
Frequently asked questions and core architecture details
Q: What technologies are used in Flownotes?
Flownotes is engineered using modern full-stack frameworks.
Q: What core engineering problem does Flownotes solve?
FlowNotes v2 FlowNotes v2 is a React + TypeScript mindmap editor built on React Flow. It combines a draggable canvas, rich node editing, AI-assisted mindmap generation, and local p...
Q: How is 'Integrating multiple AI providers while keeping API keys secure' resolved in Flownotes?
Resolved through specialized system architecture and resilient state handling.
Related Systems & Case Studies
Explore similar technical architectures and projects