Architecture Hybride : Le Meilleur des Deux Mondes avec Supabase et Spring Boot

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "Architecture Traditionnelle" {
  actor Utilisateur as user
  component "Frontend" as frontend #LightBlue
  component "Backend Monolithique" as backend #LightCoral {
    [Authentification]
    [CRUD]
    [Logique Métier]
    [Jobs]
    [APIs Tierces]
  }
  database "Base de Données" as db #LightGray

  user --> frontend
  frontend --> backend : Toutes les requêtes
  backend --> db
}

note right of backend
  Tout passe par le backend
  même les opérations simples

  ⚠️ Point de congestion unique
  ⚠️ Complexité dès le départ
  ⚠️ Couplage fort
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 : Toutes les opérations
}

note right of baas
  Développement rapide
  Pas de serveur à gérer

  ⚠️ Limité pour logique complexe
  ⚠️ Vendor lock-in
  ⚠️ Edge Functions contraintes
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

actor Utilisateur as user #LightBlue

package "Couche Frontend" {
  component "Site Statique JBake" as frontend #SkyBlue
}

package "Couche Simple (Supabase)" #LightGreen {
  component "Authentification" as auth
  component "CRUD Basique" as crud
  component "Stockage Fichiers" as storage
  component "Temps Réel" as realtime
}

package "Couche Métier (Spring Boot)" #Coral {
  component "Logique Complexe" as logic
  component "Orchestration" as orchestration
  component "Jobs Planifiés" as jobs
  component "Intégrations" as integrations
}

database "PostgreSQL Partagé" as db #LightGray

user --> frontend

frontend --> auth : OAuth2, JWT
frontend --> crud : Articles, Profils
frontend --> storage : Images, Fichiers
frontend --> realtime : Notifications

frontend --> logic : Calculs, Rapports
frontend --> orchestration : Workflows
logic --> integrations : Stripe, APIs
orchestration --> db
jobs --> db

crud --> db
auth --> db

note bottom of db
  **Une seule source de vérité**
  Partagée entre Supabase et Spring Boot
end note

note right of auth
  **Gratuit jusqu'à 50k users**
  Configuration en quelques clics
  OAuth2 multi-providers
end note

note right of logic
  **Activé seulement si nécessaire**
  Kotlin + Coroutines
  Transactions complexes
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

rectangle "**Phase 1 : MVP**" #LightGreen {
  component "JBake + Supabase" as mvp
  note right
    ✓ Développement en jours
    ✓ Coût : 0€
    ✓ Validation concept
  end note
}

rectangle "**Phase 2 : Croissance**" #LightYellow {
  component "JBake + Supabase\n+ Spring Boot (optionnel)" as growth
  note right
    ✓ Logique métier émerge
    ✓ Premiers jobs planifiés
    ✓ Intégrations tierces
  end note
}

rectangle "**Phase 3 : Scale**" #LightCoral {
  component "Architecture Complète" as scale
  note right
    ✓ Orchestration complexe
    ✓ Performances optimisées
    ✓ Cache distribué
  end note
}

mvp -down-> growth : Quand la complexité\nle justifie
growth -down-> scale : Optimisation\ncontinue
@enduml

@startmindmap
skinparam backgroundColor #FEFEFE
* Opérations\nApplicatives

left side

** Opérations Simples\n(Supabase)
***_ CRUD Standard
****_ Lecture
****_ Création
****_ Mise à jour
****_ Suppression
***_ Authentification
****_ Login/Logout
****_ OAuth2
****_ Gestion session
***_ Stockage
****_ Upload fichiers
****_ CDN automatique
***_ Temps Réel
****_ WebSocket
****_ Notifications

right side

** Opérations Complexes\n(Spring Boot)
***_ Logique Métier
****_ Calculs complexes
****_ Règles métier
****_ Validations avancées
***_ Orchestration
****_ Multi-services
****_ Transactions distribuées
****_ Saga patterns
***_ Tâches Planifiées
****_ Rapports périodiques
****_ Synchronisations
****_ Nettoyages
***_ Intégrations
****_ Paiements (Stripe)
****_ APIs tierces
****_ Services ML/AI

@endmindmap

@startuml
skinparam backgroundColor #FEFEFE

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

  package "Schema: public (ใช้ร่วมกัน)" #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
**ข้อดี:**
• ไม่มีการซิงโครไนซ์ที่ซับซ้อน
• สามารถทำ JOINs ระหว่างตารางได้
• รับประกันความสอดคล้องของข้อมูล
• การย้ายข้อมูล (Migrations) แบบรวมศูนย์
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
autonumber

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

== Authentification ==
user -> jbake : Clique "Se connecter"
jbake -> auth : Redirect OAuth2 (Google/GitHub)
auth -> user : Consent screen
user -> auth : Autorise
auth -> auth : Génère JWT
auth -> jbake : Retourne JWT + Refresh Token
jbake -> jbake : Stocke tokens (sessionStorage)

== Accès aux Ressources ==
group Opération Simple (CRUD)
  user -> jbake : Crée un article
  jbake -> db : POST avec JWT
  note right: Supabase Row Level Security\nvérifie le JWT automatiquement
  db -> jbake : Article créé
end

group Opération Complexe (Métier)
  user -> jbake : Génère un rapport
  jbake -> spring : POST /api/reports\navec JWT
  spring -> spring : Valide JWT Supabase
  spring -> spring : Extrait claims (user_id, roles)
  spring -> db : Requêtes complexes
  spring -> jbake : Rapport généré
end

note over auth, spring
  **Le JWT est universel**
  Valide par Supabase ET Spring Boot
  Pas de double authentification
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 : Passe commande
jbake -> spring : POST /api/orders/create

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

par Vérifications Parallèles
  spring -> inventory : Vérifier stock
  inventory -> spring : Stock OK
else
  spring -> db : Vérifier profil client
  db -> spring : Client vérifié
end

spring -> stripe : Créer Payment Intent
stripe -> spring : Intent créé (ID: pi_xxx)

spring -> db : Créer Order (status: PENDING)
db -> spring : Order créé

spring -> stripe : Confirmer paiement
stripe -> spring : Paiement confirmé

spring -> db : Update Order (status: PAID)
spring -> inventory : Décrémenter stock
spring -> db : COMMIT TRANSACTION

par Notifications Asynchrones
  spring -> email : Email confirmation
else
  spring -> supadb : Insert notification
  note right: Notification temps réel\nvia Supabase Realtime
end

spring -> jbake : Order confirmé
jbake -> user : Affiche confirmation

note over spring
  **Responsabilités Spring Boot :**
  • Transaction ACID
  • Orchestration multi-services
  • Rollback automatique si erreur
  • Gestion des cas limites
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 : 2h00 ==
activate scheduler
scheduler -> report : Déclenche génération rapport

activate report
report -> db : Récupère données\ndes dernières 24h
db -> report : Dataset

report -> report : Calculs & Agrégations
report -> report : Génération PDF

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

report -> email : Envoie aux admins\navec lien PDF
deactivate report

== Job Hebdomadaire : Dimanche 3h00 ==
scheduler -> report : Synchronisation externe

activate report
report -> api : Fetch données externes
api -> report : Nouvelles données

report -> db : Mise à jour tables
report -> db : Nettoyage données obsolètes
deactivate report

== Job Mensuel : 1er du mois ==
scheduler -> report : Facturation

activate report
report -> db : Liste clients actifs
report -> report : Calcul montants
report -> api : Génération factures (Stripe)
report -> email : Envoi factures
deactivate report

deactivate scheduler

note right of scheduler
  **Impossible avec Supabase seul**
  Edge Functions non adaptées
  pour jobs longs et récurrents
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 "บล็อกส่วนตัว - Supabase 95%" {
  component "JBake" as jbake #SkyBlue

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

  package "Spring Boot (ทางเลือก)" #LightCoral {
    [Newsletter Mensuelle]
    note bottom: เฉพาะงานที่กำหนดเวลาไว้เท่านั้น
  }

  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 (ทางเลือก)"
**ไม่จำเป็นต้องใช้ Spring Boot**
จดหมายข่าว (Newsletter) สามารถจัดการได้
โดยบริการจากภายนอก (Mailchimp)
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

package "แอปพลิเคชัน SaaS - สถาปัตยกรรมแบบไฮบริด" {
  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 "บริการภายนอก" {
    [Stripe API]
    [SendGrid Email]
  }

  database "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"
**จำเป็นสำหรับ:**
• การจัดการการสมัครสมาชิก
• การเรียกเก็บเงินแบบต่อเนื่อง
• โควตาแบบไดนามิก
• การวิเคราะห์ข้อมูลที่ซับซ้อน
• 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 Logic)" #Coral {
    [Gestion Commandes]
    [Paiements Stripe]
    [Gestion Stock]
    [Calcul Frais Port]
    [Génération Factures]
    [Synchronisation ERP]
    [Emails Transactionnels]
  }

  cloud "การเชื่อมต่อระบบ" {
    [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 Logic)"
**Spring Boot ที่จำเป็น:**
• ธุรกรรมที่มีความสำคัญ (Critical Transactions)
• การประสานงานที่ซับซ้อน (Complex Orchestration)
• การเชื่อมต่อที่หลากหลาย (Multiple Integrations)
• การปฏิบัติตามข้อกำหนดทางกฎหมาย (Legal Compliance)
• งานการซิงโครไนซ์ข้อมูล (Synchronization Jobs)
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "ประมาณการค่าใช้จ่ายรายเดือน" {

  rectangle "ระยะ MVP\n(ผู้ใช้ 0-1,000 คน)" #LightGreen {
    [JBake (GitHub Pages): 0€]
    [Supabase: 0€]
    [Spring Boot: N/A]
    note bottom: **รวมทั้งหมด: 0€/เดือน**
  }

  rectangle "ระยะเติบโต\n(ผู้ใช้ 1k-10k คน)" #LightYellow {
    [JBake (GitHub Pages): 0€]
    [Supabase: 0€]
    [Spring Boot (Cloud Run): 20-50€]
    [PostgreSQL (si séparé): 0-30€]
    note bottom: **รวม: 20-80€/เดือน**
  }

  rectangle "ระยะขยายตัว\n(ผู้ใช้ 10k-100k คน)" #LightCoral {
    [JBake (Netlify Pro): 19€]
    [Supabase Pro: 25€]
    [Spring Boot (instances multiples): 100-300€]
    [Redis Cache: 20-50€]
    [Monitoring: 20€]
    note bottom: **รวม: 184-414€/เดือน**
  }
}

note right of "ระยะขยายตัว\n(ผู้ใช้ 10k-100k คน)"
ในขั้นตอนนี้ รายได้มีความคุ้มค่ากับค่าใช้จ่ายอย่างมาก
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "ใครจัดการอะไร?" {

  rectangle "จัดการโดย Supabase (ไม่ต้องออกแรง)" #LightGreen {
    [Authentification]
    [Base de données]
    [Backups automatiques]
    [Scaling automatique]
    [Monitoring DB]
    [Sécurité DB]
  }

  rectangle "จัดการโดย GitHub (ไม่ต้องออกแรง)" #SkyBlue {
    [Hébergement site statique]
    [HTTPS/SSL]
    [CDN global]
    [Déploiement automatique]
  }

  rectangle "สิ่งที่ต้องจัดการ (Spring Boot)" #LightCoral {
    [Déploiement application]
    [Monitoring APM]
    [Logs centralisés]
    [Scaling horizontal]
    [Mises à jour sécurité]
  }
}

note bottom of "สิ่งที่ต้องจัดการ (Spring Boot)"
**ลดขนาดได้ด้วย:**
• Cloud Run (serverless)
• Kubernetes (หากจำเป็น)
• บริการแบบ Managed (RDS และอื่นๆ)
end note
@enduml

@startmindmap
skinparam backgroundColor #FEFEFE
* Architecture\nHybride

** Commencer Simple
***_ MVP avec Supabase
***_ 0€ de coût initial
***_ Validation rapide

** Évoluer Intelligemment
***_ Ajouter Spring Boot\nsi nécessaire
***_ Migration progressive
***_ Pas de refonte totale

** Exploiter les Forces
***_ Supabase: Simplicité
***_ Spring Boot: Puissance
***_ PostgreSQL: Source unique

** Minimiser la Complexité
***_ Pas de synchronisation
***_ Pas de duplication
***_ Architecture claire

** Optimiser les Coûts
***_ Gratuit au départ
***_ Scaling progressif
***_ ROI évident

@endmindmap

@startuml
skinparam backgroundColor #FEFEFE

package "สถาปัตยกรรมแบบไฮบริดที่สมบูรณ์" {

  actor "ผู้ใช้งาน" as users

  rectangle "Frontend (Static)" #SkyBlue {
    [JBake / GitHub Pages]
    note right: ฟรี, CDN ทั่วโลก
  }

  rectangle "Backend แบบเรียบง่าย (Supabase)" #LightGreen {
    [Auth OAuth2]
    [CRUD APIs]
    [Storage]
    [Realtime]
    note right
ฟรีสูงสุด 50k users
ไม่ต้องตั้งค่าเซิร์ฟเวอร์
    end note
  }

  rectangle "Backend สำหรับธุรกิจ (Spring Boot)" #Coral {
    [Orchestration]
    [Jobs Planifiés]
    [Intégrations]
    [Transactions]
    note right
เปิดใช้งาน
เมื่อจำเป็นเท่านั้น
    end note
  }

  database "PostgreSQL\nแหล่งข้อมูลความจริงหนึ่งเดียว (Source Unique de Vérité)" 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
**ฐานข้อมูลเดียว ผู้บริโภคสองราย**
• Supabase สำหรับสิ่งที่เรียบง่าย
• Spring Boot สำหรับสิ่งที่ซับซ้อน
• ไม่จำเป็นต้องมีการซิงโครไนซ์
end note

@enduml

@startuml
skinparam backgroundColor #FEFEFE

rectangle "สถาปัตยกรรมปัจจุบัน" #SkyBlue {
  [JBake]
  [Supabase]
  [Spring Boot]
}

rectangle "การพัฒนาที่เป็นไปได้" #LightYellow {

  package "ประสิทธิภาพ" {
    [Redis Cache]
    [CDN pour Assets]
    [PostgreSQL Replicas]
  }

  package "การตรวจสอบติดตาม" {
    [Grafana]
    [Prometheus]
    [Sentry]
  }

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

  package "คุณสมบัติ" {
    [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
**สถาปัตยกรรมที่ขยายได้**
การเพิ่มเติมแต่ละส่วนเป็นอิสระต่อกัน
ไม่จำเป็นต้องปรับโครงสร้างใหม่ทั้งหมด
end note
@enduml

@startuml
skinparam backgroundColor #FEFEFE

package "การกระจายการดำเนินงาน" {

  rectangle "80% - การดำเนินงานมาตรฐาน" #LightGreen {
    [Lecture de données]
    [Création d'entités]
    [Mise à jour simple]
    [Suppression]
    [Upload fichiers]
    [Authentification]

    note bottom: **จัดการโดย Supabase**
  }

  rectangle "20% - ตรรกะทางธุรกิจ" #Coral {
    [Calculs complexes]
    [Workflows multi-étapes]
    [Transactions critiques]
    [Intégrations tierces]
    [Jobs planifiés]

    note bottom: **จัดการโดย Spring Boot**
  }
}

note right
**จุดโฟกัสที่ดีที่สุด :**
เวลาในการพัฒนาของคุณ
ที่เน้นไปยัง 20% ซึ่ง
สร้างความแตกต่างให้กับผลิตภัณฑ์ของคุณ
end note
@enduml