Light
Dark
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.

Candid Leap · Algolia Search and Sync for Webflow
Presentation set
A
Data Flow
The one-line story with product logos: publish in Webflow → edge queue → sync engine → Algolia → instant search on the live site.
B
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
1
Backend
Express internals: rate limits, auth, route groups, the full services layer, MongoDB models, and the guarantees (idempotency, fail-fast env).
2
Sync Lifecycle & Reliability
The SyncJob state machine, every way a job starts, failure classification, and the two dead-letter layers explained side by side.
3
Designer Extension
Session bootstrap, screen map, TanStack Query server state, the health model, and the Build Mode v2 insertion pipeline.
4
CDN Search Script
Boot sequence, the 4-tier attribute cascade, all ten experiences, the filter system, public API, and the zero-telemetry security model.
5
Security & Infrastructure
Every trust boundary with its exact mechanism, secrets at rest, production topology, and the CI/CD pipeline.
Every number on these pages — cadences, limits, timeouts, retention — is taken directly from the production codebase.