Alten E-Commerce

Table des matières

1. Introduction
2. Architecture du projet
3. Technologies utilisées
4. Installation et configuration
5. Structure du backend
6. Structure du frontend
7. Tests
8. API Documentation
9. Déploiement
10. Liens utiles

Introduction

Alten E-Commerce est une application web complète de commerce électronique développée avec la stack MERN (MongoDB, Express, React, Node.js). L'application permet aux utilisateurs de parcourir des produits, de créer un compte, de se connecter, d'ajouter des produits à leur panier et à leur liste de souhaits, et de passer des commandes.

Architecture du projet

Le projet est divisé en deux parties principales :

1. Backend : Une API RESTful développée avec Node.js et Express, qui gère la logique métier, l'authentification et les interactions avec la base de données MongoDB.
2. Frontend : Une interface utilisateur réactive développée avec React et Tailwind CSS, qui offre une expérience utilisateur moderne et intuitive.

Technologies utilisées

Backend

• Node.js : Environnement d'exécution JavaScript côté serveur
• Express : Framework web pour Node.js
• MongoDB : Base de données NoSQL
• Mongoose : ODM (Object Data Modeling) pour MongoDB
• JWT : JSON Web Tokens pour l'authentification
• Bcrypt : Hachage de mots de passe
• Swagger : Documentation API
• Jest : Framework de test

Frontend

• React : Bibliothèque JavaScript pour construire des interfaces utilisateur
• Axios : Client HTTP pour les requêtes API
• Tailwind CSS : Framework CSS utilitaire
• React Testing Library : Bibliothèque de test pour React
• Jest : Framework de test

Installation et configuration

Prérequis

• Node.js (v14 ou supérieur)
• npm (v6 ou supérieur)
• MongoDB (v4 ou supérieur)

Installation

1. Cloner le dépôt

   git clone https://github.com/votre-utilisateur/alten-ecommerce.git
   cd alten-ecommerce

2. Configurer le backend

   cd backend
   npm install

   Créez un fichier .env à la racine du dossier backend avec les variables suivantes :

   MONGODB_URI=votre_uri_mongodb
   JWT_SECRET=votre_secret_jwt
   PORT=5000
   

3. Configurer le frontend

   cd ../frontend
   npm install

Structure du backend

Le backend est organisé selon une architecture MVC (Modèle-Vue-Contrôleur) :

• Models : Définition des schémas de données avec Mongoose

  • User.js : Modèle utilisateur avec authentification, panier et liste de souhaits
  • Product.js : Modèle produit avec détails et inventaire

• Controllers : Logique métier

  • userController.js : Gestion des utilisateurs, authentification, panier et liste de souhaits
  • productController.js : Gestion des produits et des catégories

• Routes : Définition des points d'entrée API

  • userRoutes.js : Routes pour les opérations utilisateur
  • productRoutes.js : Routes pour les opérations produit

• Middleware : Fonctions intermédiaires

  • auth.middleware.js : Vérification de l'authentification

Structure du frontend

Le frontend est organisé selon une architecture par composants :

• Components : Composants React réutilisables

  • Header.js : Barre de navigation
  • Footer.js : Pied de page
  • ProductCard.js : Carte de produit
  • ProductList.js : Liste de produits
  • etc.

• Pages : Pages principales de l'application

  • Home.js : Page d'accueil
  • ProductDetail.js : Détails du produit
  • Cart.js : Panier d'achat
  • Wishlist.js : Liste de souhaits
  • Login.js & Register.js : Pages d'authentification

• Context : Gestion de l'état global

  • AuthContext.js : Contexte d'authentification
  • CartContext.js : Contexte du panier

• Services : Services pour les appels API

  • api.js : Configuration d'Axios et fonctions d'appel API

Tests

Le projet utilise Jest comme framework de test principal, avec des configurations spécifiques pour le backend et le frontend.

Tests Backend

Les tests backend utilisent Jest et Supertest pour tester les API :

• Tests unitaires : Tests des contrôleurs et des middlewares
• Tests d'intégration : Tests des routes API complètes
• Tests de modèles : Validation des modèles de données

Pour exécuter les tests backend :

cd backend
npm test

Pour générer un rapport de couverture de code :

npm run test:coverage

Tests Frontend

Les tests frontend utilisent Jest et React Testing Library :

• Tests de composants : Vérification du rendu et des interactions utilisateur
• Tests de hooks : Validation de la logique des hooks personnalisés
• Tests d'intégration : Vérification des flux utilisateur complets

Pour exécuter les tests frontend :

cd frontend
npm test

Pour générer un rapport de couverture de code :

npm run test:coverage

API Documentation

L'API est documentée avec Swagger. Une fois le serveur backend démarré, vous pouvez accéder à la documentation à l'adresse :

http://localhost:5000/api-docs

Déploiement

Backend

Le backend peut être déployé sur des plateformes comme Heroku, AWS, ou DigitalOcean :

cd backend
npm start

Frontend

Le frontend peut être déployé sur des plateformes comme Netlify, Vercel, ou GitHub Pages :

cd frontend
npm run build

Liens utiles

• MongoDB Documentation
• Express Documentation
• React Documentation
• Node.js Documentation
• Mongoose Documentation
• JWT Documentation
• Tailwind CSS Documentation
• Jest Documentation