Technische architectuur

Stack

Laag	Technologie	Versie
Backend CMS	Strapi	5.36.0
Database	MySQL	8.0
Media-opslag	DigitalOcean Spaces (S3-compatibel)	—
Frontend	Next.js (App Router)	16.2.6
UI-framework	React	19.2.0
State management	Zustand	5.x
Server state	TanStack Query (React Query)	5.x
Formuliervalidatie	React Hook Form + Zod	—
Styling	Tailwind CSS	4.x
E-mail	Nodemailer (SMTP)	—

Data-flow bij configurator-gebruik

1. Klant bezoekt /configurator/[slug]
2. Next.js haalt compiled flow-data op via /api/configurator-flows/[slug]/compiled
3. Strapi haalt Flow + FlowVersion + Variants + Steps + Options + PricingRules op uit MySQL
4. Klant maakt keuzes → priceEngine.ts berekent real-time prijs in de browser
5. Klant vult contactformulier in
6. Browser POST /api/configurator-leads met: flowSlug, selectedVariantId, selectedOptions, formData, recaptchaToken
7. Next.js proxyt de aanvraag naar Strapi backend
8. Strapi: reCAPTCHA verificatie, rate limit check, honeypot check
9. Strapi berekent prijs server-side opnieuw (anti-manipulatie)
10. Strapi slaat Lead op in MySQL
11. Strapi verstuurt e-mails (non-blocking, via Nodemailer)
12. Response 201 → klant ziet bevestigingsbericht

Admin-flow (Flow Builder)

1. Beheerder opent /admin → FlowBuilderPage component
2. Strapi laadt flows-overzicht via GET /api/configurator-flows
3. Beheerder opent flow → GET /api/configurator-flows/[slug]/compiled?prices=gross
4. Beheerder maakt wijzigingen in de UI
5. Beheerder klikt Opslaan → POST /api/configurator-flows/[slug]/compiled
6. Strapi upsert Flow, FlowVersion, Steps, Options, PricingRules
7. Automatisch versie-snapshot aangemaakt

Directory-structuur backend

src/
├── admin/                    # Strapi admin-extensies
│   ├── app.tsx               # Menu-registratie
│   └── pages/
│       ├── FlowBuilderPage.tsx   # Flow Builder UI
│       └── LeadsPage.tsx         # Leads-tabel
├── api/
│   ├── configurator-flows/   # Gecompileerde flow-API
│   ├── configurator-leads/   # Aanvragen API
│   ├── flow/                 # Flow content type
│   ├── flow-version/         # Versie-snapshots
│   ├── flow-step/            # Stap-definities
│   ├── step-option/          # Opties per stap
│   ├── variant/              # Varianten
│   ├── pricing-rule/         # Prijsregels
│   └── site-setting/         # Globale instellingen
└── services/
    ├── emailService.ts       # E-mailverzending
    └── recaptchaService.ts   # reCAPTCHA verificatie

Directory-structuur frontend

src/
├── app/                      # Next.js App Router
├── components/               # React componenten
├── engine/
│   ├── priceEngine.ts        # Prijsberekening
│   ├── configuratorRules.ts  # Zichtbaarheidslogica
│   └── ruleMatch.ts          # Regel-matching
├── store/
│   └── configuratorStore.ts  # Zustand state
├── domain/
│   └── types.ts              # TypeScript interfaces
└── api/                      # API-clientlaag

Authenticatie

De Strapi admin is beveiligd met JWT-authenticatie. Het frontend admin-gedeelte maakt gebruik van de Strapi Users & Permissions plugin met rollen (Administrator / Editor).

Media-opslag

Alle geüploade afbeeldingen worden opgeslagen in DigitalOcean Spaces (S3-compatibel object storage). De Strapi media library beheert de metadata; de bestanden zelf staan op het CDN.