docs: ajout du design document webapp jardin
Architecture validée : FastAPI + Vue 3 + SQLite + Docker Compose + Tailwind CSS (thème Gruvbox Dark). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
137
docs/plans/2026-02-21-jardin-webapp-design.md
Normal file
137
docs/plans/2026-02-21-jardin-webapp-design.md
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
# 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
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 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
|
||||||
|
|
||||||
|
- [x] `docker-compose.yml` + Dockerfiles
|
||||||
|
- [x] Backend FastAPI : structure + modèles + CRUD complet (jardins, variétés, plantations, tâches)
|
||||||
|
- [x] Seed de démo (1 jardin, variétés, plantations, tâches)
|
||||||
|
- [x] Frontend Vue 3 : structure + navigation + pages (squelettes avec appels API réels)
|
||||||
|
- [x] README d'installation
|
||||||
Reference in New Issue
Block a user