Hybrid Architecture: The Best of Both Worlds with Supabase and Spring Boot

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

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

  user --> frontend
  frontend --> backend : All requests
  backend --> db
}

note right of backend
Everything goes through the backend
even simple operations
⚠️ Single point of congestion
⚠️ Complexity from the start
⚠️ Tight coupling
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

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

  user --> frontend
  frontend --> baas : All operations
}

note right of baas
Rapid development
No server to manage
⚠️ Limited for complex logic
⚠️ Vendor lock-in
⚠️ Constrained Edge Functions
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

actor Utilisateur as user #LightBlue

package "Frontend Layer" {
  component "Static Site JBake" as frontend #SkyBlue
}

package "Simple Layer (Supabase)" #LightGreen {
  component "Authentication" as auth
  component "Basic CRUD" as crud
  component "File Storage" as storage
  component "Real-Time" as realtime
}

package "Business Layer (Spring Boot)" #Coral {
  component "Complex Logic" as logic
  component "Orchestration" as orchestration
  component "Scheduled Jobs" as jobs
  component "Integrations" as integrations
}

database "Shared PostgreSQL" as db #LightGray

user --> frontend

frontend --> auth : OAuth2, JWT
frontend --> crud : Articles, Profiles
frontend --> storage : Images, Files
frontend --> realtime : Notifications

frontend --> logic : Calculations, Reports
frontend --> orchestration : Workflows
logic --> integrations : Stripe, APIs
orchestration --> db
jobs --> db

crud --> db
auth --> db

note bottom of db
**A single source of truth**
Shared between Supabase and Spring Boot
end note

note right of auth
**Free up to 50k users**
Configuration in a few clicks
OAuth2 multi-providers
end note

note right of logic
**Enabled only if necessary**
Kotlin + Coroutines
Complex transactions
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

rectangle "**Phase 1: MVP**" #LightGreen {
  component "JBake + Supabase" as mvp
  note right
✓ Development in days
✓ Cost: €0
✓ Concept validation
  end note
}

rectangle "**Phase 2: Growth**" #LightYellow {
  component "JBake + Supabase\n+ Spring Boot (optional)" as growth
  note right
✓ Business logic emerges
✓ First scheduled jobs
✓ Third-party integrations
  end note
}

rectangle "**Phase 3: Scale**" #LightCoral {
  component "Complete Architecture" as scale
  note right
✓ Complex orchestration
✓ Optimized performance
✓ Distributed cache
  end note
}

mvp -down-> growth : When complexity\njustifies it
growth -down-> scale : Optimization\ncontinuous
@enduml

@startmindmap
skinparam backgroundColor #FEFEFE
* Operations\nApplicative

left side

** Simple Operations\n(Supabase)
***_ CRUD Standard
****_ Reading
****_ Creation
****_ Update
****_ Deletion
***_ Authentication
****_ Login/Logout
****_ OAuth2
****_ Session management
***_ Storage
****_ Upload files
****_ CDN automatic
***_ Real Time
****_ WebSocket
****_ Notifications

right side

** Complex Operations\n(Spring Boot)
***_ Business Logic
****_ Complex calculations
****_ Business rules
****_ Advanced validations
***_ Orchestration
****_ Multi-services
****_ Distributed transactions
****_ Saga patterns
***_ Scheduled Tasks
****_ Periodic reports
****_ Synchronizations
****_ Cleanings
***_ Integrations
****_ Payments (Stripe)
****_ APIs third parties
****_ Services ML/AI

@endmindmap

@startuml
skinparam backgroundColor #FEFEFE

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

  package "Schema: public (Shared)" #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 : Manage
supabase -down-> sessions : Manage
supabase -down-> articles : Access
supabase -down-> comments : Access
supabase -down-> profiles : Accesses

spring -down-> articles : Access
spring -down-> profiles : Access
spring -down-> orders : Manage
spring -down-> payments : Manage
spring -down-> reports : Manage

note right of db
**Advantages:**
• No complex synchronization
• JOINs possible between tables
• Guaranteed consistency
• Unified migrations
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
autonumber

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

== Authentification ==
user -> jbake : Clique "Log in"
jbake -> auth : Redirect OAuth2 (Google/GitHub)
auth -> user : Consent screen
user -> auth : Authorize
auth -> auth : Generate JWT
auth -> jbake : Returns `JWT` + Refresh Token
jbake -> jbake : Store tokens (`sessionStorage`)

== Accès aux Ressources ==
group Opération Simple (CRUD)
  user -> jbake : Create an article
  jbake -> db : POST with JWT
  note right: Supabase Row Level Security\nchecks JWT automatically
  db -> jbake : Article created
end

group Opération Complexe (Métier)
  user -> jbake : Generate a report
  jbake -> spring : POST /api/reports\nwith JWT
  spring -> spring : Validate JWT Supabase
  spring -> spring : Extracted claims (`user_id`, roles)
  spring -> db : Complex queries
  spring -> jbake : Report generated
end

note over auth, spring
**The JWT is universal**
Validated by Supabase AND Spring Boot
No double authentication
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
autonumber

actor "Client" as user
participant "JBake" as jbake
participant "Spring Boot" as spring
participant "Supabase DB" as supadb
participant "Stripe API" as stripe
participant "Inventory Service" as inventory
participant "Email Service" as email
database "PostgreSQL" as db

user -> jbake : Place order
jbake -> spring : POST /api/orders/create

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

par Vérifications Parallèles
  spring -> inventory : Check stock
  inventory -> spring : Stock OK
else
  spring -> db : Check customer profile
  db -> spring : Verified client
end

spring -> stripe : Create Payment Intent
stripe -> spring : Intent created (ID: pi_xxx)

spring -> db : Create Order (status: PENDING)
db -> spring : Order created

spring -> stripe : Confirm payment
stripe -> spring : Payment confirmed

spring -> db : Update Order (status: PAID)
spring -> inventory : Decrement stock
spring -> db : COMMIT TRANSACTION

par Notifications Asynchrones
  spring -> email : Email confirmation
else
  spring -> supadb : Insert notification
  note right: Real-time notification\nvia Supabase Realtime
end

spring -> jbake : Order confirmed
jbake -> user : Display confirmation

note over spring
**Spring Boot responsibilities:**
• Transaction ACID
• Multi-service orchestration
• Automatic rollback on error
• Edge case handling
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

participant "Scheduler\n(Spring Boot)" as scheduler
participant "Report Service" as report
participant "PostgreSQL" as db
participant "External API" as api
participant "Email Service" as email
participant "Supabase Storage" as storage

== Job Quotidien : 2:00 ==
activate scheduler
scheduler -> report : Triggers report generation

activate report
report -> db : Retrieve data\nfrom the last 24h
db -> report : Dataset

report -> report : Calculations & Aggregations
report -> report : Generation PDF

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

report -> email : Send to the admins\nwith link PDF
deactivate report

== Job Hebdomadaire : Sunday 3h00 ==
scheduler -> report : External synchronization

activate report
report -> api : Fetch external data
api -> report : New data

report -> db : Tables update
report -> db : Obsolete data cleanup
deactivate report

== Job Mensuel : 1st of the month ==
scheduler -> report : Billing

activate report
report -> db : Active client list
report -> report : Amount calculation
report -> api : Invoice generation (Stripe)
report -> email : Sending invoices
deactivate report

deactivate scheduler

note right of scheduler
**Impossible with Supabase alone**
Edge Functions not suitable
for long-running and recurring jobs
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 "Personal Blog - 95% Supabase" {
  component "JBake" as jbake #SkyBlue

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

  package "Spring Boot (Optional)" #LightCoral {
    [Newsletter Mensuelle]
    note bottom: Scheduled job only
  }

  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 (Optional)"
**Spring Boot not mandatory**
Newsletter can be managed
by a third-party service (Mailchimp)
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "Application SaaS - Hybrid Architecture" {
  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 "External Services" {
    [Stripe API]
    [SendGrid Email]
  }

  database "Shared 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"
**Required for:**
• Subscription management
• Recurring billing
• Dynamic quotas
• Complex analytics
• Reliable 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 (Core Business)" #Coral {
    [Gestion Commandes]
    [Paiements Stripe]
    [Gestion Stock]
    [Calcul Frais Port]
    [Génération Factures]
    [Synchronisation ERP]
    [Emails Transactionnels]
  }

  cloud "Integrations" {
    [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 (Core Business)"
**Spring Boot essential:**
• Critical transactions
• Complex orchestration
• Multiple integrations
• Legal compliance
• Synchronization jobs
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "Estimated Monthly Costs" {

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

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

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

note right of "Scale Phase\n(10k-100k users)"
At this stage, the revenues largely justify the costs
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "Who Manages What?" {

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

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

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

note bottom of "To Manage (Spring Boot)"
**Can be minimized with:**
• Cloud Run (serverless)
• Kubernetes (if necessary)
• Managed services (RDS, etc.)
end note
@enduml

@startmindmap
skinparam backgroundColor #FEFEFE
* Architecture\nHybrid

** Start Simple
***_ MVP with Supabase
***_ 0€ initial cost
***_ Quick validation

** Evolve intelligently
***_ Add Spring Boot\nif necessary
***_ Gradual migration
***_ No total redesign

** Exploit the forces
***_ Supabase: Simplicity
***_ Spring Boot: Power
***_ PostgreSQL: Single source

** Minimize Complexity
***_ No synchronization
***_ No duplication
***Clear architecture

** Optimize Costs
***_ Free at the start
***_ Progressive scaling
***_ ROI evident

@endmindmap

@startuml
skinparam backgroundColor #FEFEFE

package "Complete Hybrid Architecture" {

  actor "Users" as users

  rectangle "Frontend (Static)" #SkyBlue {
    [JBake / GitHub Pages]
    note right: Free, CDN global
  }

  rectangle "Simple Backend (Supabase)" #LightGreen {
    [Auth OAuth2]
    [CRUD APIs]
    [Storage]
    [Realtime]
    note right
Free up to 50k users
Zero server configuration
    end note
  }

  rectangle "Business Backend (Spring Boot)" #Coral {
    [Orchestration]
    [Jobs Planifiés]
    [Intégrations]
    [Transactions]
    note right
Enabled only if necessary
    end note
  }

  database "PostgreSQL\nSource Single 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
**One database, two consumers**
• Supabase for the simple
• Spring Boot for the complex
• No synchronization required
end note

@enduml

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Current Architecture" #SkyBlue {
  [JBake]
  [Supabase]
  [Spring Boot]
}

rectangle "Possible Developments" #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 "Features" {
    [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
**Extensible architecture**
Each addition is independent
No global redesign necessary
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "Operations Distribution" {

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

    note bottom: **Managed by Supabase**
  }

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

    note bottom: **Managed by Spring Boot**
  }
}

note right
**Optimal focus:**
Your development time
concentrated on the 20% that
set your product apart
end note
@enduml