Skip to content

building-webmail-series.md

Latest commit

 

History

History
66 lines (51 loc) · 3.18 KB

building-webmail-series.md

File metadata and controls

66 lines (51 loc) · 3.18 KB

Building Webmail

A technical deep-dive into how we built a privacy-first, offline-capable webmail PWA that runs entirely in the browser.

flowchart TD
    A["Read Mail"] --> E["Forward Email<br/>Webmail PWA"]
    B["Search Instant"] --> E
    C["Compose Rich"] --> E
    D["Offline First"] --> E
Loading

The Series

flowchart TD
    START["START HERE"] --> A

    A["1. Vision & Architecture<br/>Why client-only? Why offline-first?<br/>The constraints that drive everything."]
    A --> B["2. Technology Stack<br/>Svelte 5 + Vite + Dexie + Workers.<br/>Every choice, why it was made."]

    B --> C["3. Worker Mesh<br/>3 workers, 1 owner, 0 UI jank"]
    B --> D["4. Data Layer<br/>IndexedDB as product memory"]
    B --> E["5. Search Engine<br/>FlexSearch, local-first, instant results"]

    C --> F
    D --> F
    E --> F

    F["6. Service Worker & Offline Patterns<br/>Cache the shell, not the mail.<br/>Mutation queues, optimistic updates, sync."]
    F --> G["7. Deployment<br/>Cloudflare R2 + Workers, CI/CD, go live."]
Loading

Reading Guide

You want to... Start here
Understand the big picture Vision & Architecture
Know why we picked Svelte/Dexie/etc Technology Stack
Understand off-main-thread design Worker Mesh
Debug cache or IndexedDB issues Data Layer
Trace a search query end-to-end Search Engine
Understand offline and sync patterns Service Worker & Offline Patterns
Ship to production Deployment

Detailed References

These go deeper than the series articles:

Document Scope
Worker Architecture Message contracts, data flows, fallback paths
Cache & Indexing Architecture Storage layers, eviction, reconciliation
Mailbox Loading Flow Full request lifecycle with timeline visualization

Quick Stats

flowchart LR
    subgraph Quick Stats
        direction LR
        A["Framework: Svelte 5 (runes)<br/>Build: Vite 5<br/>Storage: Dexie 4 (IndexedDB)<br/>Search: FlexSearch 0.7<br/>Workers: 3 dedicated + service worker<br/>Encryption: OpenPGP 6.2<br/>Editor: TipTap 2<br/>Hosting: Cloudflare R2 + Workers"]
        B["Tables: 13 IndexedDB tables<br/>Source: 190+ files<br/>Bundle: Vendor-chunked, code-split<br/>Target: Lighthouse 90+"]
    end
Loading