Architecture¶

Vue d'ensemble¶

flowchart LR
    U["Navigateur"]
    subgraph Dokploy["Dokploy (projet « todos »)"]
        F["frontend<br/>todo.dunkan.xyz<br/>fichiers statiques React"]
        B["Backend<br/>api.todo.dunkan.xyz<br/>Axum :8080"]
        P[("postgres<br/>base todos")]
    end
    C["Clerk"]

    U -- "charge l'app" --> F
    U -- "connexion, getToken()" --> C
    U -- "REST + Authorization: Bearer JWT" --> B
    B -- "clés publiques JWKS" --> C
    B -- "SQL filtré par user_id" --> P

• Le front est une SPA statique : tous les appels à l'API partent du navigateur, pas du serveur du front.
• Clerk gère les comptes et les sessions. Le front récupère un JWT de session (getToken()) et l'envoie à chaque requête.
• L'API vérifie le JWT, puis utilise son sub (identifiant utilisateur Clerk) comme user_id dans toutes les requêtes SQL.

Flux d'une requête authentifiée¶

sequenceDiagram
    autonumber
    participant N as Navigateur (React)
    participant K as Clerk
    participant A as API Axum
    participant D as PostgreSQL

    N->>K: getToken()
    K-->>N: JWT de session
    N->>A: GET /todo/todo<br/>Authorization: Bearer JWT
    Note over A: CorsLayer vérifie l'origine
    A->>K: JWKS (au premier appel, puis cache mémoire)
    Note over A: ClerkLayer : signature RS256, exp, nbf<br/>sinon 401
    A->>D: SELECT * FROM todos WHERE user_id = sub
    D-->>A: lignes
    A-->>N: 200 + JSON

Backend (todoback/)¶

Démarrage (main.rs)¶

1. Charge un éventuel fichier .env (dotenv).
2. Lit TEST puis DATABASE_URL : le programme panique si l'une d'elles est absente.
3. Initialise les logs (tracing, niveau INFO).
4. Ouvre un pool PostgreSQL (PgPoolOptions, 5 connexions max). Si la base est injoignable, le programme panique.
5. Construit le routeur (routes::routing), qui lit CLERK_SECRET_KEY (panique si absente).
6. Écoute sur 0.0.0.0:8080 (port codé en dur).

Pile de middlewares (routes/mod.rs)¶

Ordre d'exécution d'une requête entrante, de l'extérieur vers l'intérieur :

Authentification Clerk¶

Modules¶

Frontend (todofront/)¶

SPA React en JavaScript, construite par Vite et servie en fichiers statiques.

Fonctionnement :

• Chaque appel API demande un jeton frais (await getToken()) et l'envoie en Authorization: Bearer ….
• Après une création, modification, suppression ou un changement de statut, le composant bascule un état reseter, ce qui relance GET /todo/todo : la liste est toujours rechargée depuis l'API.
• Pas de routeur côté client : l'application tient sur une seule page.

Base de données¶

Une seule table todos, créée par migrations/20251107230825_init.sql. Schéma détaillé dans la référence API.

Structure du dépôt¶

todolist/
├── docker-compose.yaml        # postgres + todoback + todofront (dev local)
├── migrations/
│   └── 20251107230825_init.sql
├── todoback/                  # API Rust
│   ├── Cargo.toml
│   ├── Dockerfile             # multi-étapes (compose uniquement)
│   ├── .env.exemple
│   ├── check_output.txt       # ancien log de `cargo check` (obsolète)
│   └── src/
│       ├── main.rs
│       ├── routes/            # mod.rs (CORS, Clerk), todo_route.rs
│       ├── controllers/       # todo_controller.rs
│       ├── models/            # todo_model.rs
│       └── middlewares/       # code mort
└── todofront/                 # SPA React
    ├── package.json
    ├── vite.config.js
    ├── Dockerfile, nginx.conf # compose uniquement
    ├── .env.exemple
    └── src/
        ├── main.jsx, App.jsx, index.css
        └── components/        # api.js, ToDoCard, CreateTodo, UpdateTodo

Limites connues¶