ufumzy/flownoteapp

FlowNote is a desktop note-taking app built as an Electron application with a clear three-process boundary: Electron main process, preload bridge, and React renderer UI. The architecture is optimized around local note editing and window chrome control rather than a client/server backend.

1. Top-level runtime split

• Main process: app lifecycle, native window creation, packaging, and Electron-specific system integration.

• Preload layer: the only intended bridge between Node/Electron capabilities and the browser-like UI.

• Renderer process: the full user-facing application, implemented as a React single-page app.

2. Main process responsibilities

• src/main/index.ts is the entrypoint for Electron startup.

• src/main/lib likely holds window/setup helpers and any main-process utilities.

• This layer is the boundary for native behavior such as BrowserWindow setup, app events, splash/welcome handling, and packaging hooks.

3. Preload as the security boundary

• src/preload/index.ts exposes a limited API surface to the renderer.

• src/preload/index.d.ts provides TypeScript typing for that exposed API.

• This is the architectural boundary preventing direct renderer access to Node/Electron internals.

4. Renderer as the product UI

• src/renderer contains the React application and all note-taking UI.

• src/renderer/src/App.tsx and main.tsx bootstrap the app shell.

• The UI is organized around a custom layout, floating title area, window controls, note list sidebar, editor pane, search, and settings modal.

5. Core note workflow

• The primary interaction flow is: select or create a note, preview it in the sidebar, edit its Markdown/MDX content, and manage it through action buttons.

• MarkdownEditor.tsx is the central editing surface and likely wraps @mdxeditor/editor.

• NotePreviewList.tsx, NotePreview.tsx, SearchInput.tsx, NewNoteButton.tsx, and DeleteNoteButton.tsx form the note-management surface.

6. State management

• The app uses Jotai (src/renderer/src/store) for atomic state.

• src/renderer/src/hooks/useNotesList.tsx and useMarkdownEditor.tsx suggest stateful UI orchestration lives in hooks, not inside individual components.

• store/mocks indicates mocked store data or a development/test fallback path for rendering without real note data.

7. Shared domain layer

• src/shared/constants.ts, models.ts, and types.ts define cross-process contracts and app-wide data shapes.

• This shared layer is important because Electron apps often need consistent types between main, preload, and renderer.

• It likely contains note models, UI constants, and IPC-related types or enums.

8. UI composition and layout

• AppLayout.tsx, DraggableTopBar.tsx, FloatingNoteTitle.tsx, and WindowControls.tsx define the desktop-native shell.

• The app intentionally uses a custom draggable top bar instead of relying on default OS chrome.

• This is a key architectural feature because it changes how the window is drawn and how users interact with the app frame.

9. Settings and customization

• SettingsModal.tsx supports personalization, matching the README’s emphasis on background opacity, font colors, and sizes.

• Styling is handled with Tailwind and local CSS (src/renderer/src/assets/index.css), so visual customization is primarily renderer-side and theme-driven.

10. Static resources and onboarding

• resources/splash.html is a packaging/runtime asset for startup presentation.

• resources/welcomeNote.md suggests the app ships with a starter note or onboarding content.

• These resources support first-run and branding behavior without needing a backend.

11. Build and packaging boundary

• The repo uses Vite for the renderer and Electron tooling for multi-process builds.

• electron.vite.config.ts and electron-builder.yml indicate separate build orchestration for main, preload, and renderer, plus packaged app output for Windows/macOS/Linux.

• This is a desktop-distribution architecture, not a web deployment architecture.

12. What is not present

• There is no server, API layer, or database service visible in the tree.

• The app appears to be a self-contained local desktop client, with all product logic happening inside Electron and the renderer state layer.

For an architecture diagram, the main boxes should be: Electron main process, preload bridge, React renderer shell, note editor/listing UI, Jotai state/hooks, and shared types/constants, with packaging/build tooling as a separate supporting lane.