🛍️ Projet Fullstack - Shop Management

https://www.youtube.com/watch?v=r61tJPlTtnI https://www.youtube.com/channel/UC1WL2YE3a569B3bOtUz3mXQ

Un projet e-commerce fullstack complet avec gestion d'authentification, de produits, de commandes et panel administrateur.

📋 Table des matières

Présentation du projet
Technologie utilisées
Prérequis
Installation
Démarrage du projet
Arrêt des services
Structure du projet
Accès aux applications
Fonctionnalités
Base de données

🎯 Présentation du projet

Ce projet est une application e-commerce fullstack permettant :

✅ Pour les utilisateurs :

Inscription et connexion sécurisée avec JWT
Consultation du catalogue de produits
Filtrage par catégories
Création de commandes
Suivi des commandes personnelles

✅ Pour les administrateurs :

Gestion complète des produits (ajout, modification, suppression)
Gestion des catégories
Gestion des stocks
Suivi de toutes les commandes
Gestion des utilisateurs

💻 Technologie utilisées

Backend

Spring Boot 3.2.0 - Framework web Java
Spring Security - Authentification et autorisation
Spring Data JPA - ORM pour la base de données
JWT (JSON Web Tokens) - Authentification stateless
H2 Database - Base de données embarquée
Maven - Gestion des dépendances
Java 17 - Langage de programmation

Frontend

Vue.js 3.4 - Framework JavaScript réactif
Vue Router 4.3 - Routage côté client
Pinia 2.1 - Gestion d'état
Axios 1.6 - Client HTTP
Vite 5.0 - Build tool moderne
Node.js / npm - Gestion des dépendances

📦 Prérequis

Avant de démarrer, assurez-vous d'avoir installé :

Java 17+ → Télécharger
Node.js 16+ et npm → Télécharger
Git → Télécharger
Maven (optionnel - inclus dans le projet via mvnw)

Vérifier les versions

java -version
node -v
npm -v
git --version

🚀 Installation

1. Cloner le dépôt

git clone https://github.com/dadafax/projet_java.git
cd projet_java

2. Installation des dépendances Frontend

cd frontend
npm install
cd ..

3. Préparation du Backend

Le backend utilise Maven Wrapper (mvnw.cmd), aucune installation supplémentaire n'est nécessaire.

▶️ Démarrage du projet

Option 1️⃣ : Démarrage rapide (Recommandé)

Double-cliquez sur START_ALL.bat depuis le dossier racine du projet.

Le script va :

✅ Vérifier la structure du projet
✅ Vérifier la disponibilité des ports
✅ Démarrer le Backend Spring Boot (port 8080)
✅ Démarrer le Frontend Vue.js (port 5173)
✅ Afficher les URLs d'accès

Sortie attendue :

======================================
   ✅ Démarrage en cours !
======================================

📱 Frontend: http://localhost:5173
🔧 Backend:  http://localhost:8080
💾 H2 DB:    http://localhost:8080/h2-console

Option 2️⃣ : Démarrage manuel

Fenêtre Terminal 1 - Backend :

cd backend
./mvnw.cmd spring-boot:run

Fenêtre Terminal 2 - Frontend :

cd frontend
npm run dev

🛑 Arrêt des services

⚠️ Si le démarrage échoue (ports occupés)

Double-cliquez sur KILL_PORTS.bat pour arrêter les processus :

======================================
   Arrêt des Processus
======================================

Vérification du port 8080...
✓ Processus XXXX arrêté

Vérification du port 5173...
✓ Processus YYYY arrêté

======================================
   ✓ Nettoyage complété
======================================

Ensuite, relancez START_ALL.bat.

Alternative : Arrêt manuel

En PowerShell (Windows) :

# Arrêter le backend (port 8080)
Get-Process | Where-Object {$_.Port -eq 8080} | Stop-Process -Force

# Arrêter le frontend (port 5173)
Get-Process | Where-Object {$_.Port -eq 5173} | Stop-Process -Force

Ou via Task Manager :

Cherchez java.exe et node.exe
Cliquez droit → Terminer la tâche

📂 Structure du projet

projet_java/
├── backend/                          # Spring Boot API
│   ├── src/main/java/com/example/
│   │   ├── controller/              # Contrôleurs REST
│   │   ├── service/                 # Logique métier
│   │   ├── entity/                  # Modèles JPA
│   │   ├── repository/              # Accès aux données
│   │   ├── security/                # JWT & Authentification
│   │   └── dto/                     # Data Transfer Objects
│   ├── src/main/resources/
│   │   └── application.properties    # Configuration
│   └── pom.xml                      # Dépendances Maven
│
├── frontend/                         # Vue.js SPA
│   ├── src/
│   │   ├── views/                   # Pages (Home, Login, Admin, etc.)
│   │   ├── router/                  # Configuration routes
│   │   ├── stores/                  # État Pinia (authentification)
│   │   ├── services/                # Client HTTP (Axios)
│   │   ├── App.vue                  # Composant racine
│   │   └── main.js                  # Point d'entrée
│   ├── package.json                 # Dépendances npm
│   └── vite.config.js               # Configuration Vite
│
├── START_ALL.bat                    # Script démarrage auto
├── KILL_PORTS.bat                   # Script arrêt services
└── README.md                        # Ce fichier

🌐 Accès aux applications

Une fois démarrées, accédez à :

Service	URL	Description
Frontend	http://localhost:5173	Application web Vue.js
API Backend	http://localhost:8080	API REST Spring Boot
H2 Console	http://localhost:8080/h2-console	Base de données en ligne

🔐 H2 Console

JDBC URL : jdbc:h2:mem:testdb
Username : sa
Password : (laisser vide)

✨ Fonctionnalités principales

🔐 Authentification & Sécurité

✅ Inscription des utilisateurs
✅ Connexion avec JWT
✅ Tokens sécurisés expirables
✅ Déconnexion
✅ Rôles utilisateur (USER, ADMIN)

🛒 Catalogue & Produits

✅ Consultation des produits avec images
✅ Filtrage par catégories
✅ Affichage du stock en temps réel
✅ Sélection de quantité avant commande
✅ Indicateur de rupture de stock

📦 Commandes

✅ Création de commandes (utilisateurs authentifiés)
✅ Suivi des commandes personnelles
✅ Vérification du stock avant commande
✅ Restauration automatique du stock en cas d'annulation
✅ Suppression de commandes (admin)
✅ Annulation de commandes (admin)

👨‍💼 Panel Admin

✅ Tableau de bord avec statistiques (produits, utilisateurs, commandes)
✅ Gestion des produits (ajout, modification, suppression)
✅ Gestion des catégories (ajout, suppression)
✅ Gestion des stocks (mise à jour)
✅ Suivi de toutes les commandes
✅ Consultation de tous les utilisateurs (username, email, rôle)
✅ Édition en ligne des produits

👤 Gestion du profil

✅ Affichage des informations personnelles
✅ Modification du profil utilisateur

💾 Base de données

Entités principales

User

ID, Email, Mot de passe, Nom, Prénom, Rôle

Product

ID, Nom, Description, Prix, Stock, Catégorie

Category

ID, Nom, Description

Order

ID, User, Date, Total, Statut
Items (produits commandés)

Initialisation des données

Le projet inclut un DataInitializer qui crée automatiquement :

2 comptes test (user et admin)
catégories de produits
produits d'exemple

🐛 Dépannage

Le backend ne démarre pas

# Vérifier que Java 17+ est installé
java -version

# Vérifier que le port 8080 est libre
netstat -ano | findstr :8080

Le frontend ne démarre pas

# Vérifier les dépendances
cd frontend
npm install

# Relancer
npm run dev

Port 8080 ou 5173 déjà utilisé

# Double-cliquez sur KILL_PORTS.bat
# Ou arrêtez manuellement les processus via Task Manager

Impossible de se connecter à l'API

# Vérifier que le backend est bien lancé sur http://localhost:8080
# Vérifier les logs dans la fenêtre du backend

📝 Comptes de test

Une fois l'application démarrée, vous pouvez utiliser :

Compte utilisateur

ID : user
Password : user123

Compte administrateur

ID : admin
Password : admin123

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
backend		backend
frontend		frontend
projet_fullstack		projet_fullstack
.gitignore		.gitignore
KILL_PORTS.bat		KILL_PORTS.bat
README.md		README.md
START_ALL.bat		START_ALL.bat
reg_payload.json		reg_payload.json

Folders and files

Latest commit

History

Repository files navigation