Docs/Architecture/System Architecture & Data Flow
3 min readv1.0.68

System Architecture & Data Flow

Deep dive into the monorepo architecture, Flutter core, Drift SQLite database, and Supabase integration.

Monorepo Structure#

LaterBox is organized as a unified monorepo containing the Flutter core, Next.js web application, browser extensions, and Supabase edge backend:

text
laterbox/
├── lib/                   # Flutter cross-platform core application
│   ├── core/              # Database (Drift), theme, network, auth, desktop windowing
│   ├── features/          # Feature slices: auth, inbox, quick_capture, reader, search
│   └── main.dart          # App entry point with platform-adaptive initialization
├── laterbox-web/          # Next.js 16 web app, landing page, download hub & docs reader
│   ├── src/app/           # App Router routes (/inbox, /download, /docs, /guide, API proxy)
│   ├── src/components/    # UI design system components
│   └── src/lib/           # Store context, Supabase client, versioning, docs data
├── extension/             # Manifest V3 browser extension suite
│   ├── src/               # Background service worker, popup UI, sidepanel reader
│   └── manifests/         # Chromium, Firefox, and Safari extension manifests
├── supabase/              # Supabase infrastructure
│   ├── migrations/        # SQL schema, RLS policies, indexes, and cascades
│   └── functions/         # Deno Edge Functions (enrich-url with YouTube oEmbed)
└── docs/                  # Markdown documentation & architectural specifications

Data Flow & Synchronization#

The data lifecycle in LaterBox follows a strict optimistic local-first pattern:

  1. Capture Event: User saves a link via Quick Capture bar, Share Sheet, or Web App.
  2. Local Write: The item is written immediately to the local Drift SQLite database with a temporary UUID and sync_status = 'pending'.
  3. Instant UI Update: The UI stream receives the updated SQLite entity and renders it in < 10ms.
  4. Edge Enrichment: A background worker dispatches a request to the enrich-url Supabase Edge Function to extract OpenGraph tags, title, favicons, and video thumbnails.
  5. Bidirectional Sync: When online, the sync manager pushes local changes to Supabase PostgreSQL and pulls remote updates.

Database Engine: Drift & SQLite#

The mobile and desktop applications utilize [Drift](https://drift.simonbinder.eu/) (formerly Moor), a reactive persistence library for Dart & SQLite.

  • Reactive Queries: UI components subscribe to Dart Streams that automatically emit fresh state whenever SQLite tables change.
  • Optimized FTS5 Indexing: Full-text search queries execute directly against SQLite's native FTS5 engine, providing instant fuzzy matching across thousands of saved items without network latency.
Questions or suggestions for this documentation?