Technische Stack — Overzicht

Diagram

┌─────────────────────────────────────────┐
│              Gebruiker                  │
│         (browser / mobiel)              │
└──────────────┬──────────────────────────┘
               │
┌──────────────▼──────────────────────────┐
│           Frontend App                  │
│     Vite + React 19 + Zustand 5         │
│         Cloudflare Pages                │
└──────────┬──────────────┬───────────────┘
           │              │
┌──────────▼──────┐  ┌────▼──────────────┐
│   Hono API      │  │  Externe APIs     │
│   CF Workers    │  │  - Sentoo         │
│                 │  │  - Resend         │
│   Supabase      │  │  - WhatsApp (v1.1)│
│  - PostgreSQL   │  └───────────────────┘
│  - Auth         │
│  - Storage      │
│  - pg_cron      │
└─────────────────┘

Stack per laag

Frontend (App)

Component	Keuze
Framework	Vite 6 + React 19
Data fetching	Tanstack Query
State management	Zustand 5
Formulieren	React Hook Form + Zod
UI componenten	shadcn/ui
Datums	date-fns
Hosting	Cloudflare Pages
i18n	react-i18next
Styling	Tailwind CSS

API

Component	Keuze
Framework	Hono op Cloudflare Workers
Validatie	Zod
Auth	Supabase JWT verificatie
PDF generatie	Forme PDF (WASM)

Backend / Data

Component	Keuze
Database	Supabase (PostgreSQL)
Auth	Supabase Auth
Scheduled jobs	Supabase pg_cron
Bestandsopslag	Supabase Storage

Integraties

Component	Keuze
Betalen (lokaal)	Sentoo A2A
Betalen (kaart)	Sentoo Cards
Email	Resend + React Email
WhatsApp	Nader te bepalen (v1.1)

Infrastructuur

Component	Keuze
App hosting	Cloudflare Pages
API hosting	Cloudflare Workers
CDN	Cloudflare (ingebouwd)
DNS	Cloudflare
Source control	GitHub
CI/CD	GitHub Actions
Monorepo	pnpm workspaces
Error monitoring	Sentry

Documentatie

Component	Keuze
Docs platform	Astro Starlight
Docs hosting	Cloudflare Pages

Waarom deze keuzes

Vite + React — Snelle development (HMR < 50ms), groot ecosysteem, SPA-model past bij een ingelogde applicatie waar SSR geen meerwaarde biedt.

Hono op Cloudflare Workers — Lichtgewicht, type-safe API framework. Draait op de edge met lage latency. Scheidt business logic van de frontend. Handelt webhooks (Sentoo), facturen en notificaties server-side af.

Forme PDF — Rust/WASM PDF engine die native draait op Cloudflare Workers. React-gebaseerde templates met Hono integratie (@formepdf/hono). Geen headless browser nodig, rendering in milliseconden. Gebruikt voor factuur-PDFs en concept-facturen.

Tanstack Query — Data fetching met ingebouwde caching, optimistic updates en devtools. Beter dan SWR voor apps met veel CRUD-operaties (boekingen, honden, facturen). Mutations met optimistic UI maken de boekingsflow sneller aanvoelen.

Zustand — Minimale state management zonder boilerplate voor client-side UI state (formulierstappen, modals). Server state wordt afgehandeld door Tanstack Query.

React Hook Form + Zod — De facto standaard voor React formulieren. shadcn/ui is erop gebouwd. Zod resolver voor type-safe validatie die gedeeld wordt met de API. Essentieel voor de complexe onboarding (3 stappen) en boekingsflow (5 stappen).

shadcn/ui — Copy-paste component library op Tailwind. Geeft forms, tables, dialogs, calendars en date pickers zonder externe dependency. Ideaal voor admin panel en klantportaal.

date-fns — Lichtgewicht, tree-shakeable date library. Importeer alleen de functies die je gebruikt. Heeft NL, EN en ES locales ingebouwd. Nodig voor openingstijden validatie, boarding dagentelling, vaccinatie-expiry en factuurdata.

React Email — React componenten voor email templates. Zelfde technologie als de app, herbruikbaar voor factuur-templates en notificaties. Integreert naadloos met Resend.

Supabase — Volledig geïntegreerde backend met database, auth, storage en realtime. RLS policies zorgen voor veilige data-isolatie per gebruiker. pg_cron voor geplande taken (maandfacturen).

Cloudflare Pages + Workers — Snelle global deployment, gratis SSL, ingebouwde CDN. App op Pages, API op Workers. Aruba valt buiten EU maar Cloudflare biedt lage latency via Caribbean PoPs.

Sentry — Error monitoring en performance tracking. Essentieel voor een app die betalingen verwerkt — als een Sentoo webhook faalt of een factuur niet gegenereerd wordt, moet je dat direct weten. Gratis tier: 5K events/maand.

pnpm workspaces — Monorepo met gedeelde types en utilities tussen app, API en docs. Eén repo, consistente tooling.

Sentoo — De enige volledige betaaloplossing voor lokale Arubaanse banken. 1% transactiekosten met max AWG 1,50. REST API met webhooks.

Resend + React Email — Developer-vriendelijke email API met React-based templates. Zelfde componenten herbruikbaar voor factuur-PDFs en email-notificaties.