Résumé du Projet - Rashele Parfumerie

Aperçu Général

Rashele Parfumerie est une application web e-commerce full-stack spécialisée dans la vente de parfums et fragrances.

Type : Application Web E-Commerce Objectif : Plateforme de vente au détail spécialisée en parfumerie avec panneau d’administration, gestion de clients et automatisation marketing.

Fonctionnalités Principales

Fonctionnalités pour Clients

Catalogue de Produits : Navigation par catégories (Femme, Homme, Unisexe, Offres Spéciales)
Détails de Produit : Information complète sur les parfums (marque, taille, genre, concentration : EDT, EDP, Parfum)
Abonnement à l’Infolettre : Marketing par courriel avec vérification double opt-in
Multi-Devises : Support pour plusieurs devises avec taux de change
Multi-Langues : Contenu bilingue (Espagnol/Anglais)

Panneau d’Administration

Gestion de Produits : CRUD complet avec téléversement d’images
Gestion de Catégories : Organisation hiérarchique des produits
Infolettre : Gestion des abonnés et campagnes segmentées
Campagnes Marketing : Planification et envoi de courriels
Blog/Publications : Création de contenu avec intégration aux réseaux sociaux
Panneau de Configuration : Paramètres du site, image de marque
Migration de Données : Outils d’importation CSV

Stack Technologique

Frontend

Technologie	Version	Utilisation
Next.js	15.5.4	Framework principal avec App Router
React	19.1.0	Bibliothèque UI
TypeScript	5	Langage principal
Tailwind CSS	3.4.17	Framework de styles
Radix UI	-	Bibliothèque de composants UI
React Hook Form	7.63.0	Gestion de formulaires
Zod	4.1.11	Validation de schémas
Lucide React	0.544.0	Icônes
Next-themes	0.4.6	Gestion de thèmes
Sonner	2.0.7	Notifications toast

Backend & Base de Données

Technologie	Version	Utilisation
Prisma	6.17.0	ORM
PostgreSQL	-	Base de données (Neon cloud)
NextAuth.js	4.24.11	Authentification
bcryptjs	3.0.2	Hachage de mots de passe

Services Externes

Service	Objectif
Cloudinary	Hébergement d’images et CDN
Resend	Service de courriels transactionnels
Vercel Analytics	Analyse de performance

Outils de Développement

ESLint 9 : Linting avec configuration Next.js
date-fns : Gestion des dates
csv-parse : Traitement CSV pour les migrations

Architecture et Patrons

Structure du Projet

/perfumeria-rashelle/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (public)/           # Pages publiques
│   │   ├── admin/              # Tableau de bord admin (protégé)
│   │   └── api/                # Routes API
│   ├── components/             # Composants React
│   │   ├── admin/              # Composants admin
│   │   └── ui/                 # Composants réutilisables
│   ├── contexts/               # Contextes React (LanguageContext)
│   ├── hooks/                  # Hooks personnalisés (useCurrency, useSiteSettings)
│   ├── lib/                    # Utilitaires et configuration
│   │   ├── auth.ts             # Config NextAuth
│   │   ├── db.ts               # Client Prisma
│   │   ├── validations.ts      # Schémas Zod
│   │   └── email.ts            # Modèles de courriels
│   └── middleware.ts           # Middleware Next.js (auth/CORS)
├── prisma/
│   ├── schema.prisma           # Schéma de base de données (13 modèles)
│   └── seed.ts                 # Script de seeding
├── public/                     # Assets statiques
├── scripts/
│   └── create-admin.ts         # Création d'utilisateur admin
└── MD Files/                   # Documentation (23+ fichiers)

Patrons Implémentés

Next.js App Router : Server Components pour le rendu côté serveur
Authentification par Couches : NextAuth.js avec stratégie JWT, protection de routes via middleware
Contrôle d’Accès Basé sur les Rôles : ADMIN/CLIENTE
ORM & Base de Données : Prisma avec PostgreSQL, relations définies
Système de Design : Composants réutilisables basés sur Radix UI
API RESTful : Routes API avec validation Zod et gestion d’erreurs cohérente

Modèles de Base de Données (13)

User, Product, Category
Order, OrderItem
Newsletter, Campaign
Post, SocialMedia
SearchLog, SiteSettings
Configuration, PaymentMethod

Bonnes Pratiques Implémentées

Sécurité

✅ Authentification & Autorisation

Hachage de mots de passe avec bcryptjs
Sessions JWT avec expiration de 7 jours
Contrôle d’accès basé sur les rôles
Protection CSRF dans le middleware
Protection CORS avec origines autorisées

✅ Validation de Données

Validation d’entrée avec schémas Zod
Prévention d’injection SQL via Prisma ORM
Exigences de mot de passe fort (12+ caractères, majuscules, minuscules, chiffres, caractères spéciaux)
Messages d’erreur génériques pour prévenir l’énumération d’utilisateurs

✅ En-têtes de Sécurité

X-Frame-Options
X-Content-Type-Options
Content Security Policy (CSP)

✅ Gestion des Secrets

Variables d’environnement séparées (.env)
Informations d’identification non engagées dans le code

Qualité du Code

✅ TypeScript Strict Mode activé ✅ ESLint configuré avec standards Next.js ✅ Conventions de nommage cohérentes ✅ Modularisation des composants ✅ Séparation Server/Client Components ✅ Type Safety complet avec Zod ✅ Indexation de base de données sur les champs fréquemment interrogés

Gestion des Données

✅ ORM Type-Safe avec Prisma ✅ Versionnement de schéma (migrations) ✅ Intégrité relationnelle (clés étrangères) ✅ Suppression en cascade pour les enregistrements liés ✅ Script de seed pour les données de test

Performance

✅ Optimisation d’images Next.js ✅ CDN Cloudinary pour les médias ✅ Analytics intégré (Vercel) ✅ Optimisation de requêtes avec index ✅ Stratégies de cache pour les assets statiques