Technische Stack
Diagram
Section titled “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
Section titled “Stack per laag”Frontend (App)
Section titled “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 |
| Component | Keuze |
|---|---|
| Framework | Hono op Cloudflare Workers |
| Validatie | Zod |
| Auth | Supabase JWT verificatie |
| PDF generatie | Forme PDF (WASM) |
Backend / Data
Section titled “Backend / Data”| Component | Keuze |
|---|---|
| Database | Supabase (PostgreSQL) |
| Auth | Supabase Auth |
| Scheduled jobs | Supabase pg_cron |
| Bestandsopslag | Supabase Storage |
Integraties
Section titled “Integraties”| Component | Keuze |
|---|---|
| Betalen (lokaal) | Sentoo A2A |
| Betalen (kaart) | Sentoo Cards |
| Resend + React Email | |
| Nader te bepalen (v1.1) |
Infrastructuur
Section titled “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
Section titled “Documentatie”| Component | Keuze |
|---|---|
| Docs platform | Astro Starlight |
| Docs hosting | Cloudflare Pages |
Waarom deze keuzes
Section titled “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 met Resend.
Supabase. Volledig geintegreerde 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. Een 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.