- Introduction
- Installation
- Architecture
- Fonctionnalités
- API et Intégration
- Structure des fichiers
- Versioning avec Git
- Support
- Licence
E-Shop est une application e-commerce moderne construite avec Next.js 14, React 18, et Tailwind CSS. Elle offre une expérience utilisateur fluide avec des fonctionnalités complètes de commerce électronique. L'application permet une gestion des utilisateurs via une interface d'administration, ainsi qu'une gestion des produits et de l'authentification.
- Next.js 14 : Framework React performant pour les applications côté serveur.
- React 18 : Bibliothèque JavaScript pour construire des interfaces utilisateur interactives.
- Tailwind CSS : Framework CSS pour une personnalisation rapide du design.
- TypeScript : Langage typé pour plus de robustesse.
- Zustand : Gestion d'état globale pour React.
- Radix UI : Composants accessibles et réutilisables.
- Lucide React : Icônes vectorielles pour une meilleure expérience visuelle.
- Platzi FakeAPI : API externe pour récupérer des données produits.
- Cloner le projet
git clone <repository-url> cd e-shop
- Installer les dépendances
npm install
- Lancer le serveur de développement
npm run dev
L'application sera disponible sur http://localhost:3000.
L'application suit l'architecture App Router de Next.js 14, avec une structure modulaire pour une extensibilité facile.
src/
├── app/ # Routes et pages de l'application
├── components/ # Composants réutilisables
├── lib/ # Utilitaires et configurations
└── types/ # Types TypeScript- Server Components pour optimiser les performances.
- Client Components pour interagir avec le DOM.
- Middleware pour l'authentification.
- Gestion d'état globale avec Zustand.
- Composants UI réutilisables avec Radix UI.
- Authentification et Autorisation
- Connexion/Déconnexion avec gestion des avatars.
- Protection des routes (authentification).
- Gestion des sessions via cookies.
- Affichage conditionnel des fonctionnalités administratives.
- Profil utilisateur personnalisable.
- Navigation
- Header responsive avec un menu dynamique.
- Catégories de produits accessibles via le menu.
- Recherche (seulement l'icône de recherche est présente, mais la fonctionnalité de recherche n'est pas encore implémentée).
- Panier d'achat avec la possibilité d'ajouter et supprimer des produits.
- Menu utilisateur avec avatar.
- Interface Utilisateur
- Design moderne et responsive avec Tailwind CSS.
- Animations fluides pour des transitions visuelles agréables.
- Composants interactifs pour améliorer l’expérience utilisateur.
- Administration (CRUD)
- CRUD pour les utilisateurs : La section admin permet d'ajouter, de modifier et de supprimer des utilisateurs.
- Affichage des utilisateurs : Liste des utilisateurs avec leurs informations.
- Pagination Pagination des résultats pour une meilleure gestion des produits affichés.
interface User {
id: number;
email: string;
name: string;
avatar?: string;
role: string;
creationAt: string;
}
interface AuthState {
token: string | null;
user: User | null;
isAuthenticated: boolean;
login: (email: string, password: string) => Promise<void>;
logout: () => void;
initialize: () => void;
updateUser: (updatedUser: User) => void;
}Platzi Fake API : L'API externe permet de récupérer des produits fictifs. Exemple de requête pour récupérer les produits :
const fetchProducts = async () => {
const response = await fetch('https://api.escuelajs.co/api/v1/products');
const data = await response.json();
return data;
}e-shop/
├── public/
│ └── docs/
│ └── swagger.json # Fichier JSON Swagger
├── src/
│ ├── app/
│ │ ├── page.tsx # Page d'accueil
│ │ ├── layout.tsx # Layout principal
│ │ ├── admin/
│ │ │ └── page.tsx # Interface admin
│ │ ├── profile/
│ │ │ └── page.tsx # Profil utilisateur
│ │ ├── about/
│ │ │ ├── history.tsx # Page "Histoire"
│ │ │ └── reseller.tsx # Page "Revendeur"
│ │ ├── cart/
│ │ │ └── page.tsx # Page "Panier"
│ │ ├── contact/
│ │ │ └── page.tsx # Page "Contact"
│ │ ├── login/
│ │ │ └── page.tsx # Page "Connexion"
│ │ ├── shop/
│ │ │ ├── fashion.tsx # Page "Fashion"
│ │ │ ├── home.tsx # Page "Home"
│ │ │ ├── beauty.tsx # Page "Beauty"
│ │ │ ├── electronics.tsx # Page "Electronics"
│ │ │ ├── sport.tsx # Page "Sport"
│ │ ├── error.tsx # Page d'erreur (404 ou autre)
│ │ ├── loading.tsx # Page de chargement
│ │ ├── not-found.tsx # Page non trouvée (404)
│ │ ├── providers.tsx # Providers de l'application
│ │ └── components/
│ │ ├── Header.tsx # En-tête
│ │ └── Footer.tsx # Pied de page
│ ├── components/
│ │ └── ui/ # Composants UI réutilisables
│ ├── lib/
│ │ ├── auth.ts # Logique d'authentification
│ │ └── utils.ts # Utilitaires
│ └── types/
│ └── product.ts # Types des produits
├── pages/
│ └── api-docs.tsx # Page pour afficher Swagger UI
├── docs/
│ └── README.md # Documentation du projet
├── package.json # Fichier de configuration des dépendances
├── tsconfig.json # Configuration TypeScript
└── .gitignore # Fichier pour ignorer les fichiers/dossiers dans GitLe code est versionné sur GitHub. Suivez ces étapes pour contribuer :
- Fork le projet
- Créez une branche (git checkout -b feature/AmazingFeature)
- Commit les changements (git commit -m 'Add some AmazingFeature')
- Push sur la branche (git push origin feature/AmazingFeature)
- Ouvrir une Pull Request
Pour toute question ou problème :
- Consulter la documentation.
- Ouvrir une issue sur GitHub.
- Contacter l'équipe de support.
Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.
Recherche : L'icône de recherche est présente, mais la fonctionnalité de recherche n'est pas encore implémentée. Tests unitaires : Les tests unitaires ne sont pas encore implémentés. Application non déployée : L'application n'est pas encore déployée.