Candid Leap · WF-Algolia

System Design Diagrams

Interactive architecture diagrams generated from the live codebase — a two-page presentation set, plus component deep dives for when the conversation goes technical. Every page: drag to pan, scroll to zoom, double-click to re-center, light/dark toggle.

Verified against the codebase 2026-08-12 · branch design/system-diagrams

Presentation set

Data Flow

The one-line story with product logos: publish in Webflow → edge queue → sync engine → Algolia → instant search on the live site.

Technical Architecture

The full system on one canvas: swimlanes for Webflow, Cloudflare, the Railway application and data stores, with every trust boundary labeled.

Component deep dives

Backend

Express internals: rate limits, auth, route groups, the full services layer, MongoDB models, and the guarantees (idempotency, fail-fast env).

Sync Lifecycle & Reliability

The SyncJob state machine, every way a job starts, failure classification, and the two dead-letter layers explained side by side.

Designer Extension

Session bootstrap, screen map, TanStack Query server state, the health model, and the Build Mode v2 insertion pipeline.

CDN Search Script

Boot sequence, the 4-tier attribute cascade, all ten experiences, the filter system, public API, and the zero-telemetry security model.

Security & Infrastructure

Every trust boundary with its exact mechanism, secrets at rest, staging/production topology, and the four CI/CD workflows.

Suggested flows

Product / business: A → B (what it is, how it's built)

Engineering deep-dive: A → B → 1 → 2, then 3 / 4 by team

Reliability review: A → 2 → 5

Facts on every page were verified against the codebase on 2026-08-12 (constants, cadences, endpoints, and limits cited from source). For static export, use the browser's print-to-PDF per page.