S
Web App2026CompletedFeatured Project

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...

RoleSole Developer
Classificationhigh
Client / ContextOpen Source Project
Development TimelineCompleted

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

Architectural Visualizer · System Architecture

Core System Features

Key capabilities & architectural features

FEATURE 01

User registration and login with JWT

User registration and login with JWT

FEATURE 02

Secure mindmap CRUD operations

Secure mindmap CRUD operations

FEATURE 03

AI‑powered mindmap generation via proxy

AI‑powered mindmap generation via proxy

FEATURE 04

Provider selection UI with model options

Provider selection UI with model options

FEATURE 05

Responsive React Flow canvas for mindmap editing

Responsive React Flow canvas for mindmap editing

FEATURE 06

Undo/redo history and localStorage persistence

Undo/redo history and localStorage persistence

FEATURE 07

Import/export mindmaps as JSON

Import/export mindmaps as JSON

FEATURE 08

Keyboard shortcuts and toast notifications

Keyboard shortcuts and toast notifications

FEATURE 09

Dark mode support with ThemeProvider

Dark mode support with ThemeProvider

FEATURE 010

Real‑time collaboration (planned)

Real‑time collaboration (planned)

Engineering Challenges & Solutions

Problem statements & resolution strategies

Challenge #1

Integrating multiple AI providers while keeping API keys secure

Integrating multiple AI providers while keeping API keys secure

Challenge #2

Implementing rate limiting without blocking legitimate users

Implementing rate limiting without blocking legitimate users

Challenge #3

Ensuring consistent JSON schema for mindmaps across AI and frontend

Ensuring consistent JSON schema for mindmaps across AI and frontend

Challenge #4

Managing state persistence between localStorage and server DB

Managing state persistence between localStorage and server DB

Challenge #5

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 01
src

Module component managing src source logic

ComponentsMODULE 02
src/components

Module component managing components source logic

UiMODULE 03
src/components/ui

Module component managing ui source logic

HooksMODULE 04
src/hooks

Module component managing hooks source logic

LibMODULE 05
src/lib

Module component managing lib source logic

PagesMODULE 06
src/pages

Module component managing pages source logic

ServicesMODULE 07
src/services

Module component managing services source logic

StoreMODULE 08
src/store

Module component managing store source logic

TypesMODULE 09
src/types

Module component managing types source logic

UtilsMODULE 010
src/utils

Module component managing utils source logic

User Journey Pipeline

  1. 1User Access & Preset Selection: User opens client interface and configures request parameters or task workflow presets.
  2. 2Client Payload Dispatch: Front-end components (React, TailwindCSS) serialize input objects and send HTTP/WebSocket requests to `/api/analyze`.
  3. 3Middleware & Validation Check: API Gateway evaluates CORS headers, authorization tokens, and input validation schemas.
  4. 4Service & Inference Execution: Service controllers dispatch request frames to model inference engine (Local Engine) or storage layer.
  5. 5Response Delivery & State Synchronization: Serialized output payload is returned to the client and rendered in the visual workspace.

Execution Code Flow

  1. 1Entrypoint Invocation: Request enters network interface layer via `POST /api/analyze`.
  2. 2Schema & Guardrail Verification: Middleware sanitizes payload parameters and checks rate-limiting limits.
  3. 3Controller Dispatch: Router delegates validated object to `Src` service controller.
  4. 4Engine Execution & Storage Operations: Controller executes business logic, queries database models (Persistence), and invokes ML workers.
  5. 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

View All Systems