jardin/docs/plans/2026-02-21-jardin-webapp-design.md

Design — Webapp Gestion Jardin

Date : 2026-02-21 Stack : FastAPI + Vue 3 + SQLite + Docker Compose + Tailwind CSS Langue : Français Thème : Gruvbox Dark Seventies

---

Architecture globale

Monorepo avec deux services distincts orchestrés par Docker Compose :

• backend/ : API FastAPI (Python), SQLite, gestion des uploads
• frontend/ : SPA Vue 3/Vite, servie par Nginx en production
• data/ : volume persistant (SQLite + images uploadées)

jardin/
├── backend/
│   ├── app/
│   │   ├── main.py
│   │   ├── database.py
│   │   ├── models/
│   │   └── routers/
│   ├── tests/
│   ├── seed.py
│   ├── requirements.txt
│   └── Dockerfile
├── frontend/
│   ├── src/
│   │   ├── views/
│   │   ├── components/
│   │   ├── router/
│   │   ├── stores/
│   │   └── api/
│   ├── tailwind.config.js
│   ├── package.json
│   └── Dockerfile
├── data/
├── docker-compose.yml
└── README.md

---

Backend FastAPI

Modèles SQLModel

Fichier	Tables
models/garden.py	Garden, GardenCell, GardenImage, Measurement
models/plant.py	PlantVariety, PlantImage
models/planting.py	Planting, PlantingEvent
models/task.py	Task
models/settings.py	UserSettings, LunarCalendarEntry

Routers API (préfixe /api)

Router	Endpoints
gardens.py	CRUD /gardens, /gardens/{id}/cells, /gardens/{id}/measurements
varieties.py	CRUD /varieties
plantings.py	CRUD /plantings, /plantings/{id}/events
tasks.py	CRUD /tasks
settings.py	GET/PUT /settings, GET /lunar?month=YYYY-MM
media.py	POST /upload, DELETE /upload/{filename}

Choix techniques

• SQLModel synchrone (pas d'async DB, compatible SQLite sans friction)
• lifespan FastAPI : création des tables au démarrage, seed si DB vide
• CORS ouvert (*) configurable via .env
• Validation Pydantic native via SQLModel
• Sans authentification pour le MVP (module prévu, non implémenté)

---

Frontend Vue 3

Stack

Vue 3 + Vite + TypeScript + Pinia + Vue Router + Tailwind CSS

Routes

Route	Vue	Rôle
/	DashboardView	Tâches du jour, mesures récentes, plantations actives
/jardins	JardinsView	Liste des jardins + création
/jardins/:id	JardinDetailView	Fiche jardin + grille 2D
/varietes	VarietesView	Catalogue des variétés
/plantations	PlantationsView	Liste filtrable des plantations
/planning	PlanningView	Calendrier mois/semaine
/taches	TachesView	Liste / Kanban des tâches
/lunaire	LunaireView	Calendrier lunaire
/reglages	ReglagesView	Paramètres, export/import

Layout

• AppHeader.vue — navigation fixe, liens actifs, icônes
• AppDrawer.vue — menu burger slide-in sur mobile
• Toutes les vues dans le layout principal App.vue

Thème Tailwind Gruvbox

// tailwind.config.js
colors: {
  bg:         '#282828',
  'bg-soft':  '#3c3836',
  text:       '#ebdbb2',
  'text-muted': '#a89984',
  green:      '#b8bb26',
  yellow:     '#fabd2f',
  blue:       '#83a598',
  orange:     '#fe8019',
  red:        '#fb4934',
}

Stores Pinia

Un store par domaine (useGardensStore, useVarietesStore, usePlantationsStore, useTasksStore). Les appels API sont centralisés dans src/api/ (un fichier par ressource).

---

Périmètre de la session

Livrable : scaffold complet + étape 1 fonctionnelle

• docker-compose.yml + Dockerfiles
• Backend FastAPI : structure + modèles + CRUD complet (jardins, variétés, plantations, tâches)
• Seed de démo (1 jardin, variétés, plantations, tâches)
• Frontend Vue 3 : structure + navigation + pages (squelettes avec appels API réels)
• README d'installation