Skip to content

Architecture ​

Overview ​

The scaffolded project is a single Cloudflare Worker that serves both the API and the SPA. In development, Vite proxies /api/* requests to the Worker.

┌─────────────┐     /api/rpc/*     ┌──────────────┐
│  React SPA  │ ──────────────────→ │  Hono Worker │
│  (Vite)     │                     │  (Wrangler)  │
│             │ ←────────────────── │              │
│  :5173      │     JSON/superjson  │  :8787       │
└─────────────┘                     └──────┬───────┘
                                           │
                                    ┌──────┴───────┐
                                    │   D1 (SQLite) │
                                    │   R2 (Storage)│
                                    │   Images      │
                                    └──────────────┘

Monorepo layout ​

apps/
├── api/          # Hono API — routes, lib, tests
└── web/          # React SPA — pages, components, hooks
packages/
├── core/         # Shared DB schema, auth, utilities, services
└── ui/           # Radix UI components (Button, Card, Badge, etc.)

Key decisions ​

ConcernChoice
API frameworkHono — lightweight, fast, CF Worker-native
FrontendReact 19 + react-router-dom v7
StylingTailwind CSS v4 + tw-animate-css
DatabaseDrizzle ORM + Cloudflare D1
AuthBetter Auth — Drizzle adapter, email/password
UI componentsRadix primitives + class-variance-authority
Data fetchingTanStack Query
SerializationSuperjson — Date, Map, Set survive RPC
MonorepoTurborepo
Lint/formatBiome
TestingVitest
DeploymentCloudflare Workers — single Worker, API + SPA