EERP Suite

Architecture Overview

System Design Philosophy

The MarlinJai ERP Suite follows these principles:

  1. Modular & Composable - Each component is a standalone package that can be used independently
  2. Storage Agnostic - Adapter pattern allows swapping databases and file storage
  3. Type Safe - Full TypeScript across all packages
  4. Edge Ready - Designed for Cloudflare Workers and edge deployment

Core Components

1. Storage Brain (File Processing Service)

Repository: storage-brain (monorepo with API, SDK, and shared types)

A file upload and processing service with AI capabilities.

graph LR
Upload["Upload Handler"] --> Process["Process Pipeline"] --> Store["Store (R2)"]
Process --> OCR["OCR (Claude)"]
Process --> Thumb["Thumbnail Generate"]

View full diagram

Key Features:

  • Multi-context processing (receipt, invoice, document, image)
  • AI-powered OCR with structured data extraction
  • Automatic thumbnail generation
  • Webhook notifications
  • R2 storage with signed URLs

SDK Usage:

import { StorageBrain } from '@marlinjai/storage-brain-sdk';

const client = new StorageBrain({ apiKey: 'xxx' });
const result = await client.upload(file, { context: 'receipt' });
// Returns: { id, url, metadata: { ocrData, thumbnails } }

Storage Brain docs | SDK docs

2. Data Table (Notion-like Database)

Repository: data-table (monorepo)

A reusable, storage-agnostic Notion-like database component.

graph TD
subgraph Components["React Components"]
TableView
BoardView
CalendarView
end

subgraph Hooks["React Hooks"]
useTable
useRows
useColumns
useViews
end

subgraph Core["Core Package"]
Types
DatabaseAdapter
FileAdapter
end

subgraph Adapters["Adapters"]
D1["D1 Adapter"]
Memory["Memory Adapter"]
Supabase["Supabase Adapter"]
SBFile["Storage Brain File"]
end

Components --> Hooks
Hooks --> Core
Core --> Adapters

View full diagram

Packages:

  • @marlinjai/data-table-core - Types, interfaces, adapters
  • @marlinjai/data-table-react - React components & hooks
  • @marlinjai/data-table-adapter-d1 - Cloudflare D1 adapter
  • @marlinjai/data-table-adapter-memory - In-memory adapter (testing)
  • @marlinjai/data-table-file-adapter-storage-brain - Storage Brain integration

Column Types:

  • text, number, date, boolean
  • select, multi_select
  • url, file
  • formula, relation, rollup

Data Table docs

3. Email Editor

Repository: email-editor (monorepo)

A visual drag-and-drop email template editor built on MST (MobX State Tree) with MJML export.

graph TB
subgraph "Convenience Layer"
EDITOR["@marlinjai/email-editor"]
end

subgraph "Implementation Layer"
UI["@marlinjai/email-editor-ui<br/>(React)"]
BLOCKS["@marlinjai/email-editor-blocks"]
end

subgraph "Foundation Layer"
CORE["@marlinjai/email-editor-core<br/>(Framework-Agnostic)"]
end

EDITOR --> UI
EDITOR --> BLOCKS
UI --> CORE
BLOCKS --> CORE

View full diagram

Key Architecture Decisions:

  • MST for state — fine-grained reactivity, undo/redo via snapshots, type-safe actions
  • MJML on export only — no compilation during editing = instant (<16ms) visual feedback
  • Framework-agnostic core — core package has zero React dependencies
  • Two entry points — client-safe (no MJML) and server-only (with MJML compiler)

Email Editor Architecture | Quickstart guide

4. Framer Clone

Repository: framer-clone

A visual website builder with an infinite canvas, responsive breakpoint system, and Framer-inspired ground wrapper architecture.

graph LR
Canvas["Infinite Canvas<br/>60fps pan/zoom"]
Canvas --> GW["Ground Wrappers<br/>per-element positioning"]
GW --> VP["Viewport Nodes<br/>Desktop/Tablet/Mobile"]
GW --> FE["Floating Elements<br/>images, text, shapes"]

View full diagram

Key Architecture Decisions:

  • Ground wrappers — each element has independent transform positioning (Framer's approach)
  • Zero-render transforms — pan/zoom stored in useRef, updated via direct DOM manipulation
  • Subscription pattern — overlays subscribe to transform changes for 60fps synchronization
  • MST for state — ProjectStore (domain) + EditorUIStore (UI) split

Framer Clone overview

5. Receipt OCR App

Expense tracking with AI-powered receipt scanning. Integrates Storage Brain (OCR) and Data Table (display).

graph LR
User["User uploads receipt"] --> Next["Next.js App"] --> SB["Storage Brain (OCR)"] --> DT["Data Table (Storage)"]

View full diagram | Receipt OCR docs

6. Clearify

Documentation site generator. Zero-config by default, with MDX support, Mermaid diagrams, built-in search, and dark mode. This documentation site is built with Clearify.

Clearify docs | Setup guide

Shared Patterns

MobX State Tree (MST)

Both Email Editor and Framer Clone use MST for state management:

  • Predictable state with snapshots and patches
  • Fine-grained reactivity via MobX observers — only affected components re-render
  • Undo/redo via snapshot history
  • Type-safe models with runtime validation

Adapter Pattern

Data Table and Storage Brain both use the adapter pattern for storage abstraction:

  • Data Table: DatabaseAdapter interface (D1, Memory, Supabase)
  • Data Table: FileAdapter interface (Storage Brain integration)
  • Storage Brain SDK: Consistent API regardless of backend configuration

@marlinjai/ Package Scope

All published packages use the @marlinjai/ npm scope.

Data Flow

graph TD
User["User Action"] --> App

subgraph App["React Application"]
TableView
BoardView
Custom["Custom Components"]
end

App --> Provider

subgraph Provider["DataTableProvider"]
DbAdapter["DatabaseAdapter (D1/Supabase)"]
FileAdapter["FileAdapter (Storage Brain)"]
end

DbAdapter --> D1["Cloudflare D1 (Structured Data)"]
FileAdapter --> SB["Storage Brain (Files + Processing)"]

View full diagram

Deployment Architecture

graph TD
subgraph CF["Cloudflare"]
Pages["Pages (Next.js)"]
Workers["Workers (Storage Brain)"]
R2["R2 (File Storage)"]
D1["D1 (Database)"]
KV["KV (Cache)"]
end

Pages --> Workers
Workers --> R2
Workers --> D1
Workers --> KV

View full diagram

Future Roadmap

  1. Auth Integration - Clerk for multi-tenant SSO
  2. Real-time Sync - Durable Objects for live collaboration
  3. API Gateway - Unified API for all services
  4. Analytics Dashboard - Business intelligence views
  5. Email Editor templates marketplace - Shareable email templates
  6. Framer Clone code export - Generate clean React components from designs