Skip to content
Fabla

Top Technology

Stack and languages

This is the production architecture behind Fable, as it actually runs: edge-first, with the SPA and the API served from a single origin. Few technologies, understood deeply.

Languages and frameworks

LANGUAGES & FRAMEWORKS
  • TypeScript v6
  • React v19
  • React Router v8
  • Tailwind CSS v4
  • Vite v8
  • JavaScript ESM
  • HTML5 SPA entry
  • CSS tokens
  • Next.js SSR
  • Node.js server
  • Go backend
  • PHP legacy
  • Python analysis
  • SQL RDB
  • Shell bash
  • Rust CLI / hot paths

Platform and runtime

PLATFORM & OS
  • Ubuntu server OS
  • Linux CI runner
  • Docker container
  • Nginx reverse proxy
  • MySQL RDB
  • PostgreSQL RDB
  • Redis cache / queue
  • Kubernetes orchestration

Backend and edge

BACKEND / EDGE
  • Cloudflare Workers runtime
  • Cloudflare single origin
  • Wrangler deploy
  • Node.js tooling
  • esbuild bundler
  • pnpm workspace
  • Express API
  • GraphQL schema

Data stores

DATA
  • Cloudflare D1 SQLite
  • R2 Storage blob
  • Workers KV cache
  • Redis queue
  • MySQL RDB
  • PostgreSQL RDB
  • BigQuery analytics
  • Prisma ORM

Auth and security

AUTH & SECURITY
  • WebAuthn passkey
  • Cloudflare Access JWT verify
  • Google OAuth 2.0 + PKCE
  • OWASP sanitize
  • Gitleaks secret scan
  • Auth0 IdP
  • Okta SSO
  • Trivy image scan

Integrations

INTEGRATIONS
  • Gmail mail
  • Google Calendar calendar
  • Google Drive files
  • Slack chat
  • Discord chat
  • LINE chat
  • WhatsApp chat
  • Signal chat
  • Telegram chat
  • Instagram DM
  • LinkedIn DM
  • Messenger chat

Developer tooling

DEVELOPER TOOLING
  • GitHub repository
  • Git VCS
  • VS Code editor
  • Claude Code AI agent
  • Docker CI runner
  • Figma design
  • Cursor AI editor
  • ESLint v10

Amazon Web Services

AWS
  • EC2 compute
  • Lambda serverless
  • ECS container
  • S3 storage
  • RDS database
  • CloudFront CDN
  • Route 53 DNS
  • CloudWatch monitor

Google Cloud Platform

GCP
  • Cloud Platform GCP
  • Firebase push / auth
  • BigQuery analytics
  • Cloud Run container
  • Translation API translation
  • Analytics GA4
  • Compute Engine VM
  • Cloud Storage object

CI / CD and observability

CI/CD & OBSERVABILITY
  • GitHub Actions CI
  • Playwright E2E
  • Terraform IaC
  • AWS Lambda CI runner
  • Grafana dashboard
  • Prometheus SLO / alerts
  • Sentry error tracking
  • OpenTelemetry trace

Architecture

Architecture

A single-origin Worker serves both the SPA and the API. There is no CORS, and authentication sits behind both Cloudflare Access and passkeys.

  1. LAYER 01

    Browser (SPA)

    A React 19 SPA built with Vite. Per-route warm start begins before the first paint.

    • React 19
    • Vite
  2. LAYER 02

    Edge Worker

    Static assets and /api/* served from one origin. CORS does not exist here.

    • Workers
    • same-origin
  3. LAYER 03

    Data layer

    Tasks, mail, conversations and settings live in D1. Blobs go to R2, short-lived cache to KV.

    • D1
    • R2
    • KV
  4. LAYER 04

    Integrations

    Each service is an adapter on the shared sync engine, with incremental sync and recovery standardised.

    • OAuth 2.0
    • Sync Engine
  5. LAYER 05

    Authentication boundary

    Cloudflare Access in front of passkey auth. The Worker verifies the Access JWT again itself.

    • WebAuthn
    • Access JWT
  6. LAYER 06

    Observability

    SLOs, alerts and daily reports are defined, with uptime and p95 latency monitored continuously.

    • SLO
    • Alerting

Quality

How quality is enforced

Verification is a fixed exit criterion on every task. What does not pass does not merge.