Hybride architectuur : Het beste van twee werelden met Supabase en Spring Boot

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "Traditionele architectuur" {
  actor Utilisateur as user
  component "Frontend" as frontend #LightBlue
  component "Monolithische backend" as backend #LightCoral {
    [Authentification]
    [CRUD]
    [Logique Métier]
    [Jobs]
    [APIs Tierces]
  }
  database "Database" as db #LightGray

  user --> frontend
  frontend --> backend : Alle aanvragen
  backend --> db
}

note right of backend
Alles gaat via de backend
Zelfs de eenvoudige operaties
⚠️ Uniek congestiepunt
⚠️ Complexiteit vanaf het begin
⚠️ Sterke koppeling
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "Architectuur BaaS Puur" {
  actor Utilisateur as user
  component "Frontend" as frontend #LightBlue
  cloud "Supabase / Firebase" as baas #LightGreen {
    [Auth]
    [Database]
    [Storage]
    [Edge Functions]
  }

  user --> frontend
  frontend --> baas : Alle operaties
}

note right of baas
Snelle ontwikkeling
Geen server om te beheren
⚠️ Beperkt voor complexe logica
⚠️ Leveranciersbinding
⚠️ Edge Functions beperkingen
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

actor Utilisateur as user #LightBlue

package "Frontend-laag" {
  component "Statische site JBake" as frontend #SkyBlue
}

package "Eenvoudige laag (Supabase)" #LightGreen {
  component "Authenticatie" as auth
  component "CRUD Basis" as crud
  component "Bestandsopslag" as storage
  component "Realtijd" as realtime
}

package "Bedrijfslaag (Spring Boot)" #Coral {
  component "Gecompliceerde logica" as logic
  component "Orchestratie" as orchestration
  component "Geplande taken" as jobs
  component "Integraties" as integrations
}

database "PostgreSQL gedeeld" as db #LightGray

user --> frontend

frontend --> auth : OAuth2, JWT
frontend --> crud : Artikelen, Profielen
frontend --> storage : Afbeeldingen, Bestanden
frontend --> realtime : Meldingen

frontend --> logic : Berekeningen, Rapporten
frontend --> orchestration : Werkstromen
logic --> integrations : Stripe, APIs
orchestration --> db
jobs --> db

crud --> db
auth --> db

note bottom of db
**Één enkele bron van waarheid**
Gedeeld tussen Supabase en Spring Boot
end note

note right of auth
Gratis tot 50k gebruikers
Configuratie in een paar klikken
OAuth2 meerdere providers
end note

note right of logic
Ingeschakeld alleen wanneer nodig
Kotlin + Coroutines
Complexe transacties
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

rectangle "**Fase 1 : MVP**" #LightGreen {
  component "JBake + Supabase" as mvp
  note right
✓ Ontwikkeling in dagen
✓ Kost : 0€
✓ Conceptvalidatie
  end note
}

rectangle "**Fase 2 : Groei**" #LightYellow {
  component "JBake + Supabase\n+ Spring Boot (optioneel)" as growth
  note right
✓ Zakelijke logica ontstaat
✓ Eerste geplande taken
✓ Externe integraties
  end note
}

rectangle "**Fase 3 : Schaal**" #LightCoral {
  component "Volledige architectuur" as scale
  note right
✓ Complexe orkestratie
✓ Geoptimaliseerde prestaties
✓ Gedistribueerde cache
  end note
}

mvp -down-> growth : Wanneer de complexité\nle rechtvaardigt
growth -down-> scale : Optimalisatie\nvervolg
@enduml

@startmindmap
skinparam backgroundColor #FEFEFE
* Bewerkingen\nApplicatieve

left side

** eenvoudige operaties\n(Supabase)
***_ CRUD Standaard
****_ lezing
****_ Creatie
****_ Update
****_Onderdrukking_
***_ Authenticatie
****_ Inloggen/Logout
****_ OAuth2
****_Sessiebeheer
***_Opslag
****_ Upload bestanden
****_ CDN automatisch
***_ Realtime
****_ WebSocket
****_ Meldingen

right side

** Complexe operaties\n(Spring Boot)
***_ Bedrijfslogica
****Complexe berekeningen
****_ Vakregels
****_ Geavanceerde validaties
***_ Orkestratie
****Meervoudige diensten
****_Gedistribueerde transacties
****_ Saga-patronen
***_ Geplande taken
****_ Periodieke rapporten
****_ Synchronisaties
****_ Reinigingen
***_ Integraties
****Betalingen (Stripe)
****_ APIs derden
****_ Diensten ML/AI

@endmindmap

@startuml
skinparam backgroundColor #FEFEFE

database "PostgreSQL" as db #LightGray {
  package "Schema: auth (Supabase)" #LightGreen {
    [users]
    [sessions]
    [identities]
  }

  package "Schema: public (Gedeeld)" #SkyBlue {
    [articles]
    [comments]
    [profiles]
  }

  package "Schema: business (Spring Boot)" #Coral {
    [orders]
    [payments]
    [reports]
  }
}

component "Supabase" as supabase #LightGreen
component "Spring Boot" as spring #Coral

supabase -down-> users : Gère
supabase -down-> sessions : Gère
supabase -down-> articles : Accède
supabase -down-> comments : Accède
supabase -down-> profiles : Accède

spring -down-> articles : Accède
spring -down-> profiles : Accède
spring -down-> orders : Gère
spring -down-> payments : Gère
spring -down-> reports : Gère

note right of db
**Voordelen:**
• Geen complexe synchronisatie
• JOINs mogelijk tussen tabellen
• Consistentie gegarandeerd
• Geünificeerde migraties
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
autonumber

actor "Gebruiker" as user
participant "JBake" as jbake
participant "Supabase Auth" as auth
participant "Spring Boot" as spring
database "PostgreSQL" as db

== Authentification ==
user -> jbake : Clique "Inloggen"
jbake -> auth : Verwijzen OAuth2 (Google/GitHub)
auth -> user : Toestemmingscherm
user -> auth : Toestaan
auth -> auth : Genereer JWT
auth -> jbake : Geeft JWT + Refresh Token
jbake -> jbake : Bewaar tokens (sessionStorage)

== Accès aux Ressources ==
group Opération Simple (CRUD)
  user -> jbake : Maak een artikel
  jbake -> db : POST met JWT
  note right: Supabase Beveiliging op rijniveau\n controleert het JWT automatisch
  db -> jbake : Artikel aangemaakt
end

group Opération Complexe (Métier)
  user -> jbake : Genereer een rapport
  jbake -> spring : POST /api/reports\nmet JWT
  spring -> spring : Valideer JWT Supabase
  spring -> spring : Uittreksel eisen (user_id, rollen)
  spring -> db : complexe queries
  spring -> jbake : Gegenereerd rapport
end

note over auth, spring
De JWT is universeel
Geldig door Supabase EN Spring Boot
Geen double authenticatie
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
autonumber

actor "Klant" as user
participant "JBake" as jbake
participant "Spring Boot" as spring
participant "Supabase DB" as supadb
participant "Stripe API" as stripe
participant "Voorraadservice" as inventory
participant "E‑maildienst" as email
database "PostgreSQL" as db

user -> jbake : Plaats een bestelling
jbake -> spring : POST /api/orders/create

== Orchestration Spring Boot ==
spring -> db : BEGIN TRANSACTION

par Vérifications Parallèles
  spring -> inventory : Controleer voorraad
  inventory -> spring : Voorraad OK
else
  spring -> db : Controleer klantprofiel
  db -> spring : Geverifieerde klant
end

spring -> stripe : Betaalintentie maken
stripe -> spring : Intentie aangemaakt (ID: pi_xxx)

spring -> db : Maak Order (status: PENDING)
db -> spring : Bestelling aangemaakt

spring -> stripe : Betaling bevestigen
stripe -> spring : Betaling bevestigd

spring -> db : Bestelling bijwerken (status: PAID)
spring -> inventory : Voorraad verminderen
spring -> db : COMMIT TRANSACTION

par Notifications Asynchrones
  spring -> email : E‑mailbevestiging
else
  spring -> supadb : Notificatie Invoegen
  note right: Notificatie realtime\nvia Supabase Realtime
end

spring -> jbake : Bestelling bevestigd
jbake -> user : Toon bevestiging

note over spring
**Verantwoordelijkheden Spring Boot :**
• Transactie ACID
• Multiservice-orchestratie
• Automatische rollback bij fout
• Beheer van randgevallen
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

participant "Scheduler\n(Spring Boot)" as scheduler
participant "Rapport service" as report
participant "PostgreSQL" as db
participant "extern API" as api
participant "E-mail service" as email
participant "Supabase Opslag" as storage

== Job Quotidien : 2u00
activate scheduler
scheduler -> report : Rapportgeneratie starten

activate report
report -> db : Haal de gegevens\nop van de laatste 24 uur
db -> report : Dataset

report -> report : Berekeningen & Aggregaties
report -> report : Generatie PDF

report -> storage : Uploaden PDF
storage -> report : URL publique

report -> email : Stuur naar de admins\n met link PDF
deactivate report

== Job Hebdomadaire : Zondag 3h00 ==
scheduler -> report : Externe synchronisatie

activate report
report -> api : Fetch externe gegevens
api -> report : Nieuwe gegevens

report -> db : Tabellen bijwerken
report -> db : Opschonen verouderde gegevens
deactivate report

== Job Mensuel : 1ste van de maand ==
scheduler -> report : Facturatie

activate report
report -> db : Lijst actieve klanten
report -> report : Berekening bedragen
report -> api : Factuurgeneratie (Stripe)
report -> email : Facturen verzenden
deactivate report

deactivate scheduler

note right of scheduler
Onmogelijk met alleen Supabase
Edge-functies niet geschikt voor lange en terugkerende taken
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

start

:Nouvelle fonctionnalité à implémenter;

if (CRUD simple ?) then (oui)
  :✅ **Supabase**;
  stop
else (non)
  if (Authentification ?) then (oui)
    :✅ **Supabase Auth**;
    stop
  else (non)
    if (Upload fichiers ?) then (oui)
      :✅ **Supabase Storage**;
      stop
    else (non)
      if (Temps réel ?) then (oui)
        :✅ **Supabase Realtime**;
        stop
      else (non)
        if (Row Level Security\nsuffisante ?) then (oui)
          :✅ **Supabase + Policies**;
          stop
        else (non)
          :⚠️ **Considérer Spring Boot**;
          #Coral:Passer à l'arbre\nde décision Spring Boot;
          stop
        endif
      endif
    endif
  endif
endif

@enduml

@startuml
skinparam backgroundColor #FEFEFE

start

:Nouvelle fonctionnalité complexe;

if (Orchestration\nmulti-services ?) then (oui)
  :✅ **Spring Boot**;
  stop
else (non)
  if (Transaction ACID\ncritique ?) then (oui)
    :✅ **Spring Boot**;
    stop
  else (non)
    if (Job planifié ?) then (oui)
      :✅ **Spring Boot Scheduler**;
      stop
    else (non)
      if (Intégration API\ntierce complexe ?) then (oui)
        :✅ **Spring Boot**;
        stop
      else (non)
        if (Calculs lourds\n> 10 secondes ?) then (oui)
          :✅ **Spring Boot**;
          stop
        else (non)
          if (Cache distribué\nnécessaire ?) then (oui)
            :✅ **Spring Boot + Redis**;
            stop
          else (non)
            :⚠️ **Probablement Supabase**;
            #LightGreen:Revenir à l'arbre\nde décision Supabase;
            stop
          endif
        endif
      endif
    endif
  endif
endif

@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "Persoonlijke Blog - 95% Supabase" {
  component "JBake" as jbake #SkyBlue

  package "Supabase (Gratis)" #LightGreen {
    [Auth: OAuth2 Google]
    [Articles (CRUD)]
    [Commentaires]
    [Images (Storage)]
    [Notifications Realtime]
  }

  package "Spring Boot (Optioneel)" #LightCoral {
    [Newsletter Mensuelle]
    note bottom: Alleen geplande taak
  }

  database "PostgreSQL" as db

  jbake --> [Auth: OAuth2 Google]
  jbake --> [Articles (CRUD)]
  jbake --> [Commentaires]
  jbake --> [Images (Storage)]
  jbake --> [Notifications Realtime]

  [Articles (CRUD)] --> db
  [Commentaires] --> db
  [Newsletter Mensuelle] --> db
}

note bottom of "Spring Boot (Optioneel)"
**Spring Boot niet verplicht**
Nieuwsbrief kan worden beheerd
door een externe dienst (Mailchimp)
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "SaaS-applicatie - Hybride Architectuur" {
  component "JBake / React" as frontend #SkyBlue

  package "Supabase" #LightGreen {
    [Auth Multi-tenant]
    [Profils Utilisateurs]
    [Données Simples]
    [Storage Documents]
  }

  package "Spring Boot" #Coral {
    [Facturation (Stripe)]
    [Analytics Avancées]
    [Rapports Mensuels]
    [Quotas & Limites]
    [Webhooks Stripe]
  }

  cloud "Externe Diensten" {
    [Stripe API]
    [SendGrid Email]
  }

  database "Gedeelde PostgreSQL" as db

  frontend --> [Auth Multi-tenant]
  frontend --> [Profils Utilisateurs]
  frontend --> [Données Simples]
  frontend --> [Facturation (Stripe)]
  frontend --> [Analytics Avancées]

  [Auth Multi-tenant] --> db
  [Profils Utilisateurs] --> db
  [Données Simples] --> db

  [Facturation (Stripe)] --> db
  [Facturation (Stripe)] --> [Stripe API]
  [Analytics Avancées] --> db
  [Rapports Mensuels] --> db
  [Rapports Mensuels] --> [SendGrid Email]
  [Webhooks Stripe] ..> [Stripe API] : Écoute
}

note right of "Spring Boot"
**Nodig voor:**
• Abonnementbeheer
• Recurrente facturatie
• Dynamische quota's
• Complexe analytics
• Betrouwbare webhooks
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "E-commerce - 70% Spring Boot" {
  component "Storefront (JBake/React)" as frontend #SkyBlue

  package "Supabase" #LightGreen {
    [Auth Clients]
    [Catalogue Produits\n(lecture seule)]
    [Images Produits]
  }

  package "Spring Boot (Business Logica)" #Coral {
    [Gestion Commandes]
    [Paiements Stripe]
    [Gestion Stock]
    [Calcul Frais Port]
    [Génération Factures]
    [Synchronisation ERP]
    [Emails Transactionnels]
  }

  cloud "Integraties" {
    [Stripe]
    [Transporteur API]
    [ERP Externe]
  }

  database "PostgreSQL" as db

  frontend --> [Auth Clients]
  frontend --> [Catalogue Produits\n(lecture seule)]
  frontend --> [Gestion Commandes]

  [Auth Clients] --> db
  [Catalogue Produits\n(lecture seule)] --> db

  [Gestion Commandes] --> db
  [Paiements Stripe] --> [Stripe]
  [Gestion Stock] --> db
  [Calcul Frais Port] --> [Transporteur API]
  [Génération Factures] --> db
  [Synchronisation ERP] --> [ERP Externe]
  [Synchronisation ERP] --> db
}

note right of "Spring Boot (Business Logica)"
**Spring Boot onmisbaar:**
• Kritieke transacties
• Complexe orchestratie
• Meerdere integraties
• Wettelijke naleving
• Synchronisatiejobs
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "Geschatte maandelijkse kosten" {

  rectangle "Fase MVP\n(0-1000 users)" #LightGreen {
    [JBake (GitHub Pages): 0€]
    [Supabase: 0€]
    [Spring Boot: N/A]
    note bottom: **Totaal: 0€/mois**
  }

  rectangle "Fase Groei\n(1k-10k gebruikers)" #LightYellow {
    [JBake (GitHub Pages): 0€]
    [Supabase: 0€]
    [Spring Boot (Cloud Run): 20-50€]
    [PostgreSQL (si séparé): 0-30€]
    note bottom: Totaal: 20-80€/mois
  }

  rectangle "Fase Scale\n(10k-100k gebruikers)" #LightCoral {
    [JBake (Netlify Pro): 19€]
    [Supabase Pro: 25€]
    [Spring Boot (instances multiples): 100-300€]
    [Redis Cache: 20-50€]
    [Monitoring: 20€]
    note bottom: Totaal: 184-414€/mois
  }
}

note right of "Fase Scale\n(10k-100k gebruikers)"
Op dit moment, de inkomsten
rechtvaardigen de kosten ruimschoots
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "Wie beheert wat?" {

  rectangle "Beheerd door Supabase (0 inspanning)" #LightGreen {
    [Authentification]
    [Base de données]
    [Backups automatiques]
    [Scaling automatique]
    [Monitoring DB]
    [Sécurité DB]
  }

  rectangle "Beheerd door GitHub (0 inspanning)" #SkyBlue {
    [Hébergement site statique]
    [HTTPS/SSL]
    [CDN global]
    [Déploiement automatique]
  }

  rectangle "Te beheren (Spring Boot)" #LightCoral {
    [Déploiement application]
    [Monitoring APM]
    [Logs centralisés]
    [Scaling horizontal]
    [Mises à jour sécurité]
  }
}

note bottom of "Te beheren (Spring Boot)"
**Minimaliseerbaar met:**
• Cloud Run (serverless)
• Kubernetes (indien nodig)
• Managed services (RDS, etc.)
end note
@enduml

@startmindmap
skinparam backgroundColor #FEFEFE
* Architectuur\nHybride

** Begin simpel
***_ MVP met Supabase
***_ 0€ van initiële kosten
***_ Snelle validatie

** Slim Ontwikkelen
***_ Voeg Spring Boot\nindien nodig
***_progressieve migratie
***_ Geen volledige herziening

** Krachten benutten
***_ Supabase: Eenvoud
***_ Spring Boot: Kracht
***_ PostgreSQL: Unieke bron

** Complexiteit minimaliseren
***_ Geen synchronisatie
***_ Geen duplicatie
***_ Duidelijke architectuur

** Kosten optimaliseren
***_Gratis bij de start
***_ Schaalbaar progressief
***_ ROI duidelijk

@endmindmap

@startuml
skinparam backgroundColor #FEFEFE

package "Volledige Hybride Architectuur" {

  actor "Gebruikers" as users

  rectangle "Frontend (Statisch)" #SkyBlue {
    [JBake / GitHub Pages]
    note right: Gratis, globaal CDN
  }

  rectangle "Eenvoudige Backend (Supabase)" #LightGreen {
    [Auth OAuth2]
    [CRUD APIs]
    [Storage]
    [Realtime]
    note right
Gratis tot 50k users
Nul serverconfiguratie
    end note
  }

  rectangle "Business Backend (Spring Boot)" #Coral {
    [Orchestration]
    [Jobs Planifiés]
    [Intégrations]
    [Transactions]
    note right
Alleen ingeschakeld
indien nodig
    end note
  }

  database "PostgreSQL\nUnique Source of Truth" as db #LightGray

  users --> [JBake / GitHub Pages]

  [JBake / GitHub Pages] --> [Auth OAuth2]
  [JBake / GitHub Pages] --> [CRUD APIs]
  [JBake / GitHub Pages] --> [Storage]
  [JBake / GitHub Pages] --> [Realtime]
  [JBake / GitHub Pages] --> [Orchestration]

  [Auth OAuth2] --> db
  [CRUD APIs] --> db
  [Orchestration] --> db
  [Jobs Planifiés] --> db
  [Intégrations] --> db
}

note bottom of db
**Eén enkele basis, twee consumenten**
• Supabase voor het eenvoudige
• Spring Boot voor het complexe
• Geen synchronisatie vereist
end note

@enduml

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Huidige Architectuur" #SkyBlue {
  [JBake]
  [Supabase]
  [Spring Boot]
}

rectangle "Mogelijke Evoluties" #LightYellow {

  package "Performance" {
    [Redis Cache]
    [CDN pour Assets]
    [PostgreSQL Replicas]
  }

  package "Monitoring" {
    [Grafana]
    [Prometheus]
    [Sentry]
  }

  package "CI/CD" {
    [GitHub Actions]
    [Tests Automatisés]
    [Déploiement Continu]
  }

  package "Functionaliteiten" {
    [Search (ElasticSearch)]
    [Queue (RabbitMQ)]
    [Event Sourcing]
  }
}

[Spring Boot] .down.> [Redis Cache] : Peut ajouter
[Spring Boot] .down.> [Queue (RabbitMQ)] : Peut ajouter
[Spring Boot] .down.> [Search (ElasticSearch)] : Peut ajouter

[Supabase] .down.> [PostgreSQL Replicas] : Peut ajouter

note bottom
**Uitbreidbare architectuur**
Elke toevoeging is onafhankelijk
Geen globale herziening nodig
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "Distributie van Operaties" {

  rectangle "80% - Standaard Operaties" #LightGreen {
    [Lecture de données]
    [Création d'entités]
    [Mise à jour simple]
    [Suppression]
    [Upload fichiers]
    [Authentification]

    note bottom: **Beheerd door Supabase**
  }

  rectangle "20% - Business Logica" #Coral {
    [Calculs complexes]
    [Workflows multi-étapes]
    [Transactions critiques]
    [Intégrations tierces]
    [Jobs planifiés]

    note bottom: **Beheerd door Spring Boot**
  }
}

note right
**Optimale focus :**
Uw ontwikkeltijd
geconcentreerd op de 20% die
uw product onderscheidt
end note
@enduml