User Management Application

Application complète de gestion des utilisateurs avec Spring Boot (Backend), PostgreSQL (Database) et Nuxt UI (Frontend).

🏗️ Architecture

• Backend: Spring Boot 3.2.1 avec Java 21
• Frontend: Nuxt 3 avec Nuxt UI
• Database: PostgreSQL 18
• Déploiement: Docker Compose

📁 Structure du projet

.
├── back/           # API Spring Boot
├── db/             # PostgreSQL + scripts d'initialisation
├── front/          # Application Nuxt UI
└── docker-compose.yml

🚀 Démarrage rapide

Avec Docker Compose (Recommandé)

# Démarrer tous les services
docker-compose up --build

# En arrière-plan
docker-compose up -d --build

# Arrêter les services
docker-compose down

Accès aux services

• Frontend: http://localhost:3000
• Backend API: http://localhost:8080
• Database: localhost:5432

Variables d'environnement

Créez un fichier .env à la racine du projet :

# PostgreSQL
PG_USER=dbUser
PG_PWD=Test123=
PG_DB=dbPerson

📝 Fonctionnalités Frontend

Pages

• / - Liste des utilisateurs avec tableau
• /users/:id - Page de détail d'un utilisateur

Actions disponibles

• ✅ Créer un utilisateur (modal)
• ✅ Modifier un utilisateur (modal)
• ✅ Supprimer un utilisateur (avec confirmation)
• ✅ Voir les détails d'un utilisateur

Validations

• Email valide (format)
• Champs requis (nom, prénom, email)

🔌 API Endpoints

Méthode	Endpoint	Description
GET	/api/users	Liste tous les utilisateurs
GET	/api/users/{id}	Récupère un utilisateur
POST	/api/users	Crée un utilisateur
PUT	/api/users/{id}	Modifie un utilisateur
DELETE	/api/users/{id}	Supprime un utilisateur

Exemple de requête

# Liste des utilisateurs
curl http://localhost:8080/api/users

# Créer un utilisateur
curl -X POST http://localhost:8080/api/users \
  -H "Content-Type: application/json" \
  -d '{"nom":"Doe","prenom":"John","email":"john@example.com"}'

💻 Développement local

Backend (Spring Boot)

cd back
mvn spring-boot:run

Note: Décommentez les lignes dans application.properties pour la config locale.

Frontend (Nuxt)

cd front
npm install
npm run dev

Créez un fichier .env :

NUXT_PUBLIC_API_BASE=http://localhost:8080

Database (PostgreSQL)

Le container PostgreSQL doit être en cours d'exécution :

docker-compose up db

🗄️ Base de données

Schéma de la table users

• id - SERIAL PRIMARY KEY
• nom - VARCHAR(100)
• prenom - VARCHAR(100)
• email - VARCHAR(150) UNIQUE
• adresse - VARCHAR(255)
• ville - VARCHAR(100)
• code_postal - VARCHAR(10)
• telephone - VARCHAR(20)
• date_naissance - DATE
• date_creation - TIMESTAMP

Données de test

8 utilisateurs fictifs sont automatiquement insérés au démarrage.

🛠️ Technologies utilisées

Backend

• Spring Boot 3.2.1
• Spring Data JPA
• PostgreSQL Driver
• Maven

Frontend

• Nuxt 3
• Nuxt UI (Tailwind CSS)
• TypeScript
• Vue 3

DevOps

• Docker & Docker Compose
• Multi-stage builds
• Health checks

📦 Build de production

# Build tous les services
docker-compose build

# Build un service spécifique
docker-compose build frontend
docker-compose build backend

🐛 Dépannage

Le frontend ne peut pas contacter le backend

• Vérifiez que CORS est activé (WebConfig.java)
• Vérifiez l'URL de l'API dans nuxt.config.ts

Erreur de connexion PostgreSQL

• Vérifiez que les variables d'environnement sont correctes
• Attendez que le healthcheck PostgreSQL soit OK

Port déjà utilisé

Changez les ports dans docker-compose.yml :

ports:
  - "3001:3000"  # Frontend
  - "8081:8080"  # Backend
  - "5433:5432"  # PostgreSQL

📄 License

MIT