Application web moderne pour une plateforme e-commerce avec Angular
- Vue d'ensemble
- Fonctionnalités
- Technologies
- Prérequis
- Installation
- Configuration
- Utilisation
- Structure
- Composants
- Services
- Routing
- Styling
- Build
- Déploiement
- Tests
- Contribution
- Licence
Application frontend Angular pour une plateforme e-commerce complète offrant :
- Interface utilisateur moderne et responsive
- Catalogue de produits avec recherche et filtres
- Système de panier avec attributs personnalisables
- Processus de paiement sécurisé (Stripe)
- Gestion des commandes et historique
- Interface d'administration complète
- Authentification et gestion de profil
Catalogue de produits avec filtres et recherche |
Page produit avec attributs personnalisables |
Panier avec attributs et codes promo |
Processus de paiement sécurisé Stripe |
Historique des commandes avec détails |
Authentification avec OAuth2 |
Statistiques et graphiques en temps réel |
Liste des produits avec filtres |
Création/modification avec attributs |
Gestion des codes promotionnels |
Suivi et gestion des commandes |
Gestion des utilisateurs et admins |
💡 Note : Les screenshots montrent l'interface finale avec le design system unifié (bleu foncé #0b213a + orange #f7731c)
-
✅ Navigation par catégories
-
✅ Recherche de produits
-
✅ Filtrage (prix, catégorie, disponibilité)
-
✅ Tri (prix, popularité, nouveauté)
-
✅ Page détaillée du produit
-
✅ Galerie d'images avec zoom
-
✅ Sélection d'attributs personnalisés
- Taille, couleur, matériau, etc.
- Validation des attributs obligatoires
- Calcul automatique du prix avec suppléments
- Affichage du stock par option
-
✅ Avis et notes clients
- ✅ Ajout/suppression de produits
- ✅ Modification des quantités
- ✅ Affichage des attributs sélectionnés
- ✅ Calcul automatique des totaux
- ✅ Application de codes promo
- ✅ Badge de notification en temps réel
- ✅ Persistance du panier
- ✅ Processus de checkout fluide
- ✅ Intégration Stripe sécurisée
- ✅ Confirmation de commande
- ✅ Historique des commandes
- ✅ Détails complets avec attributs
- ✅ Modal de détails de commande
- ✅ Inscription et connexion
- ✅ OAuth2 (Google, Facebook)
- ✅ Gestion du profil
- ✅ Upload de photo de profil
- ✅ Modification des informations
- ✅ Historique d'achats
- ✅ CRUD complet des produits
- ✅ Upload d'images multiples
- ✅ Gestion des catégories
- ✅ Configuration des attributs personnalisés
- Création d'attributs (taille, couleur, etc.)
- Ajout d'options avec prix supplémentaires
- Gestion du stock par option
- Ordre d'affichage
- Activation/désactivation
- ✅ Gestion du stock
- ✅ Archivage de produits
- ✅ Liste de toutes les commandes
- ✅ Détails des commandes
- ✅ Modification du statut
- ✅ Recherche et filtrage
- ✅ Interface moderne de gestion
- ✅ Création et modification de codes
- ✅ Configuration des réductions (% ou montant fixe)
- ✅ Conditions d'utilisation :
- Montant minimum
- Dates de validité
- Nombre max d'utilisations
- ✅ Statistiques en temps réel
- ✅ Activation/désactivation
- ✅ Filtres (actifs, inactifs, expirés)
- ✅ Design cohérent avec l'interface admin
- ✅ Liste complète des utilisateurs
- ✅ Création d'administrateurs
- Modal avec formulaire complet
- Validation des données
- Attribution automatique du rôle ADMIN
- ✅ Détails des utilisateurs
- ✅ Statistiques (total, admins, users)
- ✅ Filtrage et recherche
- ✅ Cards de statistiques uniformes
- ✅ Statistiques en temps réel
- ✅ Graphiques interactifs :
- Ventes par mois
- Produits par catégorie
- Commandes par statut
- Revenus journaliers
- ✅ Cards de statistiques uniformes
- ✅ Actions rapides
- ✅ Design moderne et cohérent
- Angular 17+ - Framework frontend
- TypeScript 5.0 - Langage de programmation
- RxJS - Programmation réactive
- Angular Router - Navigation
- Angular Forms - Gestion des formulaires
- Tailwind CSS 3.0 - Framework CSS utility-first
- Bootstrap 5 - Composants UI
- Bootstrap Icons - Icônes
- Responsive Design - Mobile-first
- Stripe Elements - Paiement sécurisé
- HttpClient - Communication API
- JWT - Authentification
- npm - Gestionnaire de paquets
- Angular CLI - Outils de développement
- ESLint - Linting
- Prettier - Formatage du code
- Node.js 18+ et npm 9+
- Angular CLI 17+
- Backend API en cours d'exécution (port 9092)
- Compte Stripe (clé publique)
git clone https://github.com/BahaManai/frontend-ecommerce.git
cd frontend-ecommercenpm installCréer/modifier src/environments/environment.ts :
export const environment = {
production: false,
apiUrl: "http://localhost:9092/api",
stripePublishableKey: "pk_test_votre_cle_stripe",
};Pour la production src/environments/environment.prod.ts :
export const environment = {
production: true,
apiUrl: "https://votre-api.com/api",
stripePublishableKey: "pk_live_votre_cle_stripe",
};npm startou
ng serveL'application sera accessible sur http://localhost:4200
Deux fichiers de configuration :
environment.ts- Développementenvironment.prod.ts- Production
Créer proxy.conf.json pour éviter les problèmes CORS en développement :
{
"/api": {
"target": "http://localhost:9092",
"secure": false,
"changeOrigin": true
}
}Puis lancer avec :
ng serve --proxy-config proxy.conf.jsonfrontend-ecommerce/
├── src/
│ ├── app/
│ │ ├── admin/ # Composants admin
│ │ │ ├── admin-product-form/ # Formulaire produit avec attributs
│ │ │ ├── promo-codes/ # Gestion codes promo
│ │ │ └── ...
│ │ ├── auth/ # Authentification
│ │ │ ├── login/
│ │ │ ├── register/
│ │ │ └── ...
│ │ ├── product/ # Page produit
│ │ ├── panier/ # Panier
│ │ ├── paiement/ # Paiement
│ │ ├── commandes/ # Historique commandes
│ │ ├── services/ # Services Angular
│ │ │ ├── product.service.ts
│ │ │ ├── cart.service.ts
│ │ │ ├── auth.service.ts
│ │ │ └── ...
│ │ ├── guards/ # Route guards
│ │ ├── interceptors/ # HTTP interceptors
│ │ ├── pipes/ # Pipes personnalisés
│ │ └── models/ # Interfaces TypeScript
│ ├── assets/ # Images, fonts, etc.
│ ├── environments/ # Configuration
│ ├── styles.css # Styles globaux
│ └── index.html
├── angular.json # Configuration Angular
├── tailwind.config.js # Configuration Tailwind
├── package.json # Dépendances npm
└── README.md
- Affichage du catalogue
- Recherche et filtres
- Pagination
- Navigation par catégories
- Détails du produit
- Galerie d'images
- Sélection d'attributs personnalisés
- Ajout au panier avec validation
- Avis clients
- Liste des articles
- Affichage des attributs sélectionnés
- Modification des quantités
- Application de codes promo
- Calcul des totaux
- Intégration Stripe Elements
- Formulaire de paiement sécurisé
- Confirmation de commande
- Historique des commandes
- Modal de détails avec attributs
- Statut des commandes
- Formulaire de création/modification
- Upload d'images
- Gestion des attributs personnalisés
- Ajout/suppression d'attributs
- Configuration des options
- Prix supplémentaires
- Gestion du stock par option
- Liste des codes promo
- Création et modification
- Statistiques d'utilisation
- obtenirProduits(): Observable<Produit[]>
- obtenirProduitComplet(id): Observable<Produit>
- creerProduit(produit): Observable<Produit>
- modifierProduit(id, produit): Observable<Produit>
- supprimerProduit(id): Observable<void>- obtenirPanier(userId): Observable<Panier>
- ajouterProduit(userId, produitId, qty, attributs): Observable<Panier>
- supprimerProduit(userId, produitId): Observable<Panier>
- viderPanier(userId): Observable<void>
- nombreArticles$: Observable<number>- login(credentials): Observable<AuthResponse>
- register(user): Observable<AuthResponse>
- logout(): void
- isAuthenticated(): boolean
- getToken(): string
- getUser(): User- creerIntentionPaiement(montant): Observable<string>
- confirmerPaiement(commandeId): Observable<void>/ - Page d'accueil
/login - Connexion
/register - Inscription
/products/:id - Détails produit
/panier - Panier
/checkout - Paiement
/commandes - Historique
/profile - Profil
/admin/dashboard - Tableau de bord
/admin/products - Gestion produits
/admin/products/new - Nouveau produit
/admin/products/:id - Modifier produit
/admin/promo-codes - Codes promo
/admin/orders - Commandes
/admin/users - Utilisateurs
- AuthGuard - Protection des routes authentifiées
- AdminGuard - Protection des routes admin
Configuration dans tailwind.config.js :
module.exports = {
content: ["./src/**/*.{html,ts}"],
theme: {
extend: {
colors: {
primary: "#0d6efd",
secondary: "#6c757d",
success: "#198754",
danger: "#dc3545",
},
},
},
};Utilisation extensive des classes Tailwind :
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Contenu -->
</div>
</div>Utilisé pour certains composants :
- Modals
- Alerts
- Forms
- Buttons
npm run buildou
ng build --configuration productionLes fichiers seront dans dist/frontend-ecommerce/
- Minification du code
- Tree shaking
- Lazy loading des modules
- AOT compilation
- Service Worker (optionnel)
Configuration Nginx :
server {
listen 80;
server_name votre-domaine.com;
root /var/www/frontend-ecommerce;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:9092;
}
}Options de déploiement :
- Vercel - Déploiement automatique depuis GitHub
- Netlify - CI/CD intégré
- Firebase Hosting - Hébergement Google
- AWS S3 + CloudFront - Solution AWS
- Serveur VPS - Nginx/Apache
# Build
npm run build
# Upload vers serveur
scp -r dist/frontend-ecommerce/* user@server:/var/www/npm testou
ng testnpm run e2eng test --code-coverage- Tokens JWT stockés dans localStorage
- Interceptor HTTP pour ajout automatique du token
- Guards pour protection des routes
- Sanitization automatique par Angular
- Validation des inputs
- Obligatoire en production
- Configuration SSL/TLS
L'application est entièrement responsive :
- Mobile : < 768px
- Tablet : 768px - 1024px
- Desktop : > 1024px
Breakpoints Tailwind utilisés :
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px
Les contributions sont les bienvenues !
- Fork le projet
- Créer une branche (
git checkout -b feature/AmazingFeature) - Commit les changements (
git commit -m 'Add AmazingFeature') - Push vers la branche (
git push origin feature/AmazingFeature) - Ouvrir une Pull Request
-
✨ Système d'attributs personnalisés
- Sélection dynamique d'attributs (taille, couleur, etc.)
- Affichage selon le type (SELECT, RADIO, COLOR)
- Validation des attributs obligatoires
- Calcul automatique du prix avec suppléments
- Affichage du stock par option
- Désactivation des options en rupture
-
✨ Panier enrichi
- Affichage détaillé des attributs sélectionnés
- Calcul précis des prix avec suppléments
- Badge de notification en temps réel
- Application de codes promo
- Validation avant paiement
-
✨ Historique de commandes détaillé
- Modal de détails avec attributs
- Affichage des prix supplémentaires
- Statut de commande en temps réel
- Filtrage par statut
- Design moderne et responsive
-
✨ Interface admin complète
-
Gestion des produits :
- Formulaire avec attributs personnalisés
- Ajout/suppression d'attributs
- Configuration des options avec prix
- Gestion du stock par option
- Upload d'images multiples
- Filtre par catégorie
- Tri alphabétique
-
Gestion des codes promo :
- Interface moderne avec cards
- Création/modification de codes
- Statistiques d'utilisation
- Filtres (actifs, inactifs, expirés)
- Validation en temps réel
-
Gestion des utilisateurs :
- Création d'administrateurs
- Modal avec formulaire complet
- Statistiques (total, admins, users)
- Cards uniformes avec design cohérent
-
Dashboard :
- Graphiques interactifs (Chart.js)
- Statistiques en temps réel
- Cards uniformes (bordure orange, icônes bleues)
- Actions rapides
-
Gestion des commandes :
- Liste complète avec filtres
- Modification du statut
- Détails des commandes
- Statistiques (total, CA, panier moyen)
- Cards de statistiques uniformes
-
- 💅 Design System Unifié
- Palette de couleurs cohérente :
- Bleu foncé (#0b213a) - Textes et titres
- Orange (#f7731c) - Accents et actions
- Cards de statistiques uniformes :
- Bordure orange en haut (4px)
- Icônes bleues sur fond blanc
- Textes en bleu foncé
- Effet hover élégant
- Tableaux modernes :
- Header bleu foncé sans coins arrondis
- Ligne orange de séparation (4px)
- Effet hover avec barre orange
- Modals cohérents :
- Header bleu foncé
- Titres en blanc
- Boutons avec dégradés
- Palette de couleurs cohérente :
- 📱 Responsive Design
- Mobile-first approach
- Breakpoints optimisés
- Navigation adaptative
- Grilles flexibles
- ⚡ Performance
- Lazy loading des images
- Pagination optimisée
- Caching des données
- Debounce sur les recherches
- 🏗️ Architecture
- Services réutilisables
- Guards pour la sécurité
- Interceptors HTTP
- Pipes personnalisés
- Composants standalone
- 🔒 Sécurité
- JWT dans localStorage
- Guards sur les routes admin
- Validation des formulaires
- Sanitization automatique
- 📊 Gestion d'état
- Services avec BehaviorSubject
- Observables RxJS
- Gestion du panier en temps réel
- Synchronisation avec le backend
- ✅ Affichage correct des attributs dans le panier
- ✅ Calcul précis des prix avec suppléments
- ✅ Validation des attributs obligatoires
- ✅ Gestion des erreurs de paiement
- ✅ Synchronisation du badge panier
- ✅ Responsive sur mobile
- ✅ Coins arrondis supprimés des tableaux
- ✅ Titres des modals en blanc
- ✅ Style uniforme des cards admin
- ✨ Système d'attributs personnalisés
- ✨ Affichage des attributs dans le panier
- ✨ Modal de détails de commande
- ✨ Intégration Stripe
- ✨ Codes promo
- ✨ Interface admin améliorée
- 🎉 Version initiale
- ✨ Catalogue produits
- ✨ Panier et commandes
- ✨ Authentification
Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.
Votre Nom
- GitHub: @BahaManai
- Email: bahaeddinmanai7@gmail.com
- Angular Team
- Tailwind CSS
- Stripe
- Tous les contributeurs
Pour toute question ou problème :
- Ouvrir une issue
- Contacter par email
⭐ Si ce projet vous a aidé, n'hésitez pas à lui donner une étoile !