République Tunisienne

Ministère de l’Enseignement Supérieur et de la Recherche Scientifique

FSM faculté de science de Monastir

Rapport de Projet Académique présenté dans le cadre de la

Licence en Génie Logiciel et Systèmes d’Information(LGLSI2)

Réalisé par

Réalisé par : Baccari Anas | Srihi Hakim

Rapport sur le Projet de E-commerce :

Développement Full-Stack

Encadrant Académique: M [Link] Encadrant Professionnel: M [Link]

Projet de Fin d’Etudes fait à

Entreprise d’accueil

Année Universitaire 2024-2025

Dédicace

À nos famille, pour son amour, son soutien inconditionnel et sa patience tout au long de mon
parcours.

À mes amis, pour leur présence rassurante et leurs encouragements constants.

À tous ceux qui me sont chers, et qui ont cru en moi, de près ou de loin.

Je vous dédie ce travail avec toute ma gratitude.

Remerciements

Je tiens à exprimer mes sincères remerciements à toutes les personnes qui ont contribué, de près ou
de loin, à la réalisation de ce projet.

Je remercie tout particulièrement Madame Maiez, enseignant à la Faculté des Sciences de Mona-
stir, pour son accompagnement, ses conseils pertinents, sa disponibilité et sa bienveillance tout au
long de ce travail de Projet de Fin d’Année. Ses orientations précieuses ont largement contribué à la
concrétisation de ce projet.

Je remercie également l’ensemble du corps enseignant du département d’informatique pour les com-
pétences et connaissances qu’ils nous ont transmises durant ces deux années de formation en Licence
en Génie Logiciel et Systèmes d’Information (LGLSI).

Mes pensées reconnaissantes vont également à ma famille et à mes amis pour leur soutien moral et
leur encouragement permanent.

À tous, je vous adresse mes plus sincères remerciements.

Je n’aurais jamais pu réaliser ce projet sans la précieuse aide et sans le soutien d’un grand nombre
de personnes dont la générosité, la bonne humeur et l’intérêt manifestés à l’égard de mon PFE m’ont
permis de progresser.

En premier lieu, je tiens à remercier mon encadrant universitaire, , pour la confiance qu’il m’a ac-
cordée en acceptant d’encadrer ce travail, pour ses multiples conseils et pour toutes les heures qu’il
a consacrées à diriger ce travail.

Ma reconnaissance va à ceux qui ont plus particulièrement assuré le soutien affectif de ce travail :
ma famille ainsi que mes amis. Mes parents...
 Abstract

The present work is part of a graduation project carried out within the company Entreprise d’accueil
in order to obtain the national diploma of engineer at the
FSM faculté de science de Monastir . This project’s objective is to design and implement a ...
Keywords—

Résumé

Ce travail s’inscrit dans le cadre du projet de fin d’études réalisé au sein de Entreprise d’accueil en
vue de l’obtention du diplôme national d’ingénieur à l’
FSM faculté de science de Monastir . L’objectif de ce projet consiste à ...

Mots clés—
Contents

Liste des algorithmes ii

Introduction 1

1 Présentation Générale du Projet 2

1.1 Présentation Générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Contexte et Justification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Objectifs du Projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3.1 Objectifs Généraux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3.2 Objectifs Spécifiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 Portée du Projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4.1 Inclus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4.2 Exclus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2 Méthodologie et Développement 7
2.1 Méthodologie de Travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2 Organisation en Sprints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2.1 Sprint 1 : Initialisation du Projet . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2.2 Sprint 2 : Gestion des Produits . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2.3 Sprint 3 : Gestion des Commandes . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2.4 Sprint 4 : Authentification et Sécurité . . . . . . . . . . . . . . . . . . . . . . 10
2.2.5 Sprint 5 : Optimisation et Tests . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.3 Choix Technologiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.3.1 Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.3.2 Backend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.3.3 Sécurité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3 Résultats et Fonctionnalités Réalisées 13

3.1 Présentation Générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2 Fonctionnalités Principales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2.1 Catalogue Produits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2.2 Panier d’Achat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2.3 Gestion des Commandes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.2.4 Authentification des Utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.2.5 Espace Administrateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3 Aperçu Visuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

i
Conclusion 15
.1 Librairies utilisées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Bibliography 17

ii
Introduction

Aujourd’hui, nos modes de vie évoluent rapidement, et avec eux, notre manière de consommer. Faire
ses courses, acheter des vêtements, commander un repas ou même trouver un cadeau ne nécessitent
plus de se déplacer : tout peut se faire à distance, en quelques clics, grâce à l’essor du commerce
en ligne. Ce nouveau modèle d’achat, basé sur la facilité, la rapidité et le confort, a profondément
changé les habitudes des consommateurs.
Le commerce électronique ne se limite plus à une tendance, il est devenu une nécessité dans un
monde où le temps est précieux et les attentes sont élevées. Les utilisateurs recherchent des services
accessibles, disponibles 24h/24, et capables de répondre à leurs besoins de manière simple et efficace.
De leur côté, les vendeurs trouvent dans le e-commerce une opportunité de toucher un public plus
large, sans les limites d’un espace physique.
C’est dans cette dynamique que s’inscrit le projet Souq : une réponse à ce besoin croissant de
proximité entre les commerçants et les clients, dans un environnement moderne, organisé et pensé
pour l’utilisateur.

1
Chapter 1

Présentation Générale du Projet

1.1 Présentation Générale

Le projet consiste à réaliser un clone de BlinkIt, une plateforme de commerce électronique permet-
tant aux utilisateurs d’acheter des produits alimentaires et de consommation quotidienne en ligne.
L’application est construite selon une architecture full-stack moderne basée sur MongoDB, [Link],
[Link] et [Link] (MERN stack).

1.2 Contexte et Justification

Dans un contexte marqué par l’essor rapide du commerce électronique, les entreprises et les parti-
culiers recherchent des solutions numériques performantes pour répondre aux exigences croissantes
des consommateurs en ligne. Les plateformes e-commerce modernes doivent non seulement offrir
une expérience utilisateur intuitive, mais aussi garantir des performances optimales, une sécurité
renforcée, et une adaptabilité aux besoins évolutifs des utilisateurs. Cependant, la création d’une
telle plateforme nécessite une expertise technique approfondie ainsi qu’une compréhension claire des
défis spécifiques liés à la gestion des transactions en ligne, à la personnalisation des parcours clients,
et à la scalabilité de l’infrastructure.
Le projet "Souq" s’inscrit dans cette dynamique en proposant une solution complète qui répond
aux attentes actuelles du marché tout en intégrant des technologies éprouvées. La justification de
ce projet repose sur plusieurs facteurs : (1) le besoin croissant d’outils e-commerce accessibles et
performants, (2) la nécessité de réduire la complexité technique inhérente au développement de telles
plateformes, et (3) l’opportunité d’exploiter des frameworks modernes pour construire une application
robuste et modulaire. En combinant ces éléments, "Souq" vise à se positionner comme une alternative
viable pour les utilisateurs cherchant une plateforme simple, sécurisée et efficace pour leurs activités
commerciales en ligne.

1.3 Objectifs du Projet

1.3.1 Objectifs Généraux
Le projet "Souq" a pour objectif principal de concevoir et développer une plateforme e-commerce
complète, intuitive et performante, capable de répondre aux besoins des utilisateurs finaux tout en
respectant les standards techniques actuels. Plus spécifiquement, cette solution vise à : (1) offrir une

2
interface utilisateur conviviale permettant une navigation fluide et un accès rapide aux produits ;
(2) implémenter des fonctionnalités avancées telles que la gestion des paniers, le suivi des comman-
des et l’intégration de systèmes de paiement sécurisés ; (3) garantir une architecture modulaire et
extensible pour faciliter l’évolution future de la plateforme ; et (4) assurer une expérience utilisateur
optimale grâce à des mécanismes de recherche, de filtrage et de recommandation personnalisée. En
résumé, "Souq" ambitionne de fournir une solution technologique robuste et adaptable qui s’aligne
sur les tendances modernes du commerce électronique tout en restant accessible et sécurisée pour ses
utilisateurs.

1.3.2 Objectifs Spécifiques

• Concevoir une interface utilisateur responsive en utilisant [Link] et Tailwind CSS : L’interface
utilisateur (UI) est un élément crucial pour garantir une expérience utilisateur fluide et en-
gageante. Pour ce faire, nous avons utilisé [Link] , une bibliothèque JavaScript moderne
qui permet de créer des interfaces dynamiques et réactives grâce à son système de composants
modulaires. Chaque composant est conçu pour être réutilisable, ce qui facilite la maintenance
et l’évolution du code.
Pour le design, nous avons opté pour Tailwind CSS , un framework CSS utilitaire qui offre
une grande flexibilité dans la création d’interfaces personnalisées sans nécessiter de styles sup-
plémentaires. Tailwind CSS permet également de rendre l’interface responsive , c’est-à-dire
adaptable à différents appareils (ordinateurs, tablettes, smartphones). Cette approche garantit
que les utilisateurs bénéficient d’une expérience cohérente, quel que soit leur dispositif..

• Implémenter un backend sécurisé avec [Link] et [Link]: Le backend constitue le cœur fonc-
tionnel de la plateforme "Souq". Nous avons choisi [Link] comme environnement d’exécution
côté serveur en raison de sa légèreté, de sa performance élevée et de sa capacité à gérer un
grand nombre de requêtes simultanées.
Pour structurer le backend, nous avons utilisé [Link] , un framework minimaliste mais
puissant qui simplifie la gestion des routes, des middlewares et des interactions avec la base de
données. Une attention particulière a été portée à la sécurité en intégrant des mécanismes de
validation des données, des protections contre les attaques courantes (comme les injections SQL
ou les CSRF), et en implémentant des protocoles HTTPS pour sécuriser les communications
entre le client et le serveur.*

• La gestion des données est un pilier essentiel de toute application e-commerce. Pour répondre
aux besoins de flexibilité et de scalabilité, nous avons choisi MongoDB , une base de données
NoSQL orientée documents. MongoDB permet de stocker les données sous forme de documents
JSON, ce qui facilite leur manipulation et leur mise à jour.
Les principales collections gérées par MongoDB incluent :
Produits : Contient les informations relatives aux articles disponibles sur la plateforme (nom,
description, prix, images, etc.). Utilisateurs : Stocke les données des clients (nom, email, mot
de passe hashé, adresse, etc.) ainsi que leurs rôles (administrateur ou utilisateur standard).
Commandes : Enregistre les détails des transactions effectuées (liste des produits, statut de
la commande, date, etc.). Cette architecture permet une gestion efficace des données tout en
offrant une évolutivité adaptée à une croissance future de la plateforme.

3
 • La sécurité des utilisateurs est une priorité absolue dans toute application web. Pour garantir
une authentification robuste, nous avons implémenté deux technologies complémentaires :
Bcrypt : Utilisé pour hasher les mots de passe avant leur stockage dans la base de données.
Cette approche rend impossible la récupération des mots de passe en clair, même en cas de
compromission de la base de données. JWT (JSON Web Tokens) : Permet de gérer les sessions
utilisateur de manière sécurisée. Lorsqu’un utilisateur se connecte, un token unique est généré
et renvoyé au client. Ce token est ensuite utilisé pour authentifier les requêtes ultérieures sans
avoir besoin de stocker les informations de session sur le serveur. Ces mécanismes assurent une
protection maximale des données sensibles tout en offrant une expérience utilisateur fluide.

• Pour offrir une expérience complète aux utilisateurs, plusieurs fonctionnalités clés ont été im-
plémentées :
Gestion du panier : Un système de panier dynamique permet aux utilisateurs d’ajouter, sup-
primer ou modifier les produits qu’ils souhaitent acheter. Les données du panier sont tem-
porairement stockées côté client (via des cookies ou le localStorage) ou synchronisées avec la
base de données pour les utilisateurs authentifiés. Gestion des commandes : Une fois qu’un
utilisateur passe une commande, les détails sont enregistrés dans la base de données, y compris
la liste des produits, le montant total et l’adresse de livraison. Les utilisateurs peuvent égale-
ment consulter l’historique de leurs commandes et leur statut (en cours, livré, etc.). Gestion du
profil utilisateur : Les utilisateurs peuvent mettre à jour leurs informations personnelles (nom,
adresse, etc.) et consulter leurs données depuis leur espace personnel. Cette fonctionnalité
repose sur une interface sécurisée accessible uniquement après authentification.

1.4 Portée du Projet

1.4.1 Inclus
• Navigation parmi les catégories et les produits: La navigation fluide et intuitive est un aspect
essentiel de toute plateforme e-commerce. Dans "Souq", nous avons implémenté un système de
navigation qui permet aux utilisateurs de parcourir les produits selon des catégories prédéfinies
(par exemple : électronique, vêtements, alimentation, etc.).
Catégorisation des produits : Les produits sont organisés dans des catégories hiérarchiques
pour simplifier la recherche. Cette organisation repose sur une modélisation claire dans la base
de données MongoDB, où chaque produit est associé à une catégorie spécifique. Recherche et
filtrage : En plus de la navigation par catégories, une barre de recherche avec autocomplétion a
été ajoutée pour permettre aux utilisateurs de trouver rapidement un produit spécifique. Des
filtres supplémentaires (par prix, par popularité, par disponibilité) sont également disponibles
pour affiner les résultats. Expérience utilisateur : L’interface de navigation utilise des com-
posants [Link] dynamiques pour charger les produits de manière asynchrone, réduisant ainsi
le temps de chargement initial et améliorant l’expérience utilisateur.

• Ajout des produits au panier : Le panier est une fonctionnalité centrale de toute application
e-commerce, car elle permet aux utilisateurs de sélectionner et d’organiser leurs achats avant
de passer à la caisse.
Gestion côté client : Le panier est initialement géré côté client via des cookies ou le localStorage
, ce qui permet aux utilisateurs non authentifiés d’ajouter des produits sans avoir besoin de

4
 créer un compte. Les données du panier incluent des informations telles que le nom du produit,
sa quantité, son prix unitaire, et une référence unique. Synchronisation avec le backend : Pour
les utilisateurs authentifiés, le panier est synchronisé avec la base de données MongoDB afin
de garantir que les données persistent même après la fermeture du navigateur. Cela permet
également de récupérer le panier lors d’une connexion ultérieure. Fonctionnalités avancées : Les
utilisateurs peuvent modifier la quantité de chaque produit, supprimer des articles du panier,
ou vider complètement le panier. Ces actions sont gérées via des requêtes API sécurisées entre
le frontend et le backend.

• Passation de commandes et gestion de leur statut : La passation de commandes est une étape
cruciale pour transformer un utilisateur en client. Cette fonctionnalité inclut plusieurs étapes
techniques et logistiques.
Processus de commande : Lorsqu’un utilisateur passe une commande, les données du panier
sont validées côté serveur ([Link]/[Link]) pour s’assurer que les produits sont toujours
disponibles et que les informations fournies (adresse, méthode de paiement) sont correctes.
Stockage des commandes : Une fois validée, la commande est enregistrée dans la collection
"Commandes" de MongoDB. Chaque commande contient des détails tels que la liste des pro-
duits, le montant total, l’adresse de livraison, et le statut initial ("en attente"). Suivi du statut
: Les utilisateurs peuvent consulter l’historique de leurs commandes et leur statut actuel (par
exemple : "en préparation", "expédié", "livré"). Ce suivi est rendu possible grâce à une inter-
face dédiée dans le profil utilisateur, alimentée par des requêtes API qui interrogent la base de
données.

• Authentification utilisateur : Les utilisateurs peuvent se connecter ou s’inscrire via un formu-

laire sécurisé. Les mots de passe sont hashés avec Bcrypt avant d’être stockés dans la base de
données, et les sessions sont gérées via des JWT pour éviter le stockage d’informations sensi-
bles côté serveur. Rôles et autorisations : Deux rôles principaux ont été définis : Utilisateur
standard : Peut naviguer sur le site, ajouter des produits au panier, passer des commandes, et
gérer son profil. Administrateur : Dispose de droits supplémentaires pour gérer les produits
(ajouter, modifier, supprimer) et superviser les commandes des utilisateurs. Middleware de
sécurité : [Link] utilise des middlewares pour vérifier les permissions des utilisateurs avant
d’accorder l’accès à certaines routes sensibles (par exemple : tableau de bord administrateur).

• Tableau de bord pour la gestion des produits et des commandes : Gestion des produits : Ajout
de nouveaux produits avec des champs obligatoires (nom, description, prix, images, catégorie).
Modification ou suppression des produits existants via des formulaires dynamiques. Visuali-
sation des stocks et des performances des produits (nombre de ventes, popularité). Gestion
des commandes : Affichage d’une liste complète des commandes avec des filtres (par date, par
statut, par utilisateur). Possibilité de mettre à jour le statut d’une commande (par exem-
ple : marquer comme "expédié"). Génération de rapports statistiques simples (ventes totales,
revenus mensuels, etc.). Interface intuitive : Le tableau de bord utilise des composants [Link]
et des bibliothèques comme [Link] ou React Table pour afficher les données sous forme de
graphiques et de tableaux interactifs.

1.4.2 Exclus
• Intégration d’un système de paiement réel (ex: PayPal, Stripe): L’intégration d’un système de
paiement réel a été exclue en raison de la complexité technique et des exigences de conformité

5
 légale (comme la norme PCI DSS). À la place, un système de simulation de paiement a été mis
en place pour tester le processus de commande.

• Application mobile native (seulement responsive web): Le développement d’une application

mobile native (iOS/Android) a été exclu pour des raisons de temps et de ressources. La plate-
forme est conçue comme une application web responsive , accessible sur tous les appareils via
un navigateur, ce qui garantit une expérience utilisateur cohérente sans nécessiter de développe-
ment spécifique pour mobile.

• Notifications en temps réel : Les notifications en temps réel, telles que les alertes sur l’état
des commandes ou les promotions, ont été exclues car elles nécessitent l’implémentation de
technologies avancées comme WebSockets ou des services tiers (par exemple Firebase). Cela
aurait ajouté une couche de complexité au projet, dépassant son cadre initial.

• L’utilisation d’intelligence artificielle pour proposer des recommandations personnalisées aux

utilisateurs a été exclue en raison des ressources nécessaires (modèles d’apprentissage automa-
tique, traitement de grandes quantités de données). À la place, des recommandations simples
basées sur des filtres statiques (par exemple, produits populaires ou liés à la catégorie consultée)
ont été mises en œuvre.

6
Chapter 2

Méthodologie et Développement

2.1 Méthodologie de Travail

Le projet a été réalisé en suivant une approche Agile, permettant une flexibilité et une adaptation
continue au fil de l’avancement du développement. Cette méthode repose sur des cycles courts appelés
Sprints.

2.2 Organisation en Sprints

2.2.1 Sprint 1 : Initialisation du Projet
• 1. Mise en place de l’environnement de développement ([Link], MongoDB, React) La première
étape du projet consiste à configurer l’environnement de développement afin de garantir que
toutes les technologies nécessaires sont correctement installées et fonctionnelles.
[Link] : [Link] est utilisé comme environnement d’exécution côté serveur. Il permet de
développer des applications backend performantes grâce à son moteur JavaScript V8. Pour ce
sprint, nous avons installé [Link] et vérifié sa version via la commande node -v. De plus, le
gestionnaire de paquets npm ou yarn a été configuré pour installer les dépendances nécessaires.
MongoDB : MongoDB, une base de données NoSQL orientée documents, a été installée locale-
ment ou configurée via un service cloud comme MongoDB Atlas . Cette base de données est
utilisée pour stocker les données des utilisateurs, produits, et commandes. Nous avons égale-
ment testé la connexion à MongoDB en utilisant le pilote Mongoose pour [Link]. [Link]
: [Link] a été choisi pour le développement du frontend. Un nouveau projet React a été
initialisé avec la commande npx create-react-app ou Vite, assurant ainsi une structure de base
prête à l’emploi. Les dépendances essentielles ont été installées pour préparer le développement
des composants.

• Une fois l’environnement de développement configuré, nous avons procédé à l’initialisation des
deux principales parties du projet : le backend et le frontend.
Backend ([Link]) : Un projet [Link] a été créé avec un fichier [Link] pour gérer les
dépendances. Le framework [Link] a été installé via npm (npm install express) et configuré

• Configuration de Tailwind CSS pour le design.

7
2.2.2 Sprint 2 : Gestion des Produits
• La création d’un modèle de données robuste est une étape cruciale dans le développement
d’une application e-commerce. Le modèle de données définit la structure et les relations entre
les entités principales, garantissant ainsi une organisation claire et cohérente des informations.
Objectif : L’objectif était de concevoir un modèle de données qui représente les produits de
manière complète et flexible. Chaque produit doit inclure des attributs tels que : ID du produit
: Identifiant unique pour chaque produit. Nom : Le nom du produit. Description : Une brève
description du produit. Prix : Le prix unitaire du produit. Catégorie : La catégorie à laquelle
appartient le produit (ex. : électronique, vêtements, etc.). Stock : La quantité disponible
en stock. Images : Les images associées au produit pour une meilleure présentation. Tech-
nologies utilisées : Pour ce sprint, j’ai utilisé une base de données relationnelle (par exemple,
MySQL ou PostgreSQL) pour stocker les données des produits. Le modèle a été implémenté
en utilisant un ORM (Object-Relational Mapping) comme Sequelize (pour [Link]) ou Entity
Framework (pour .NET), ce qui permet de manipuler les données de manière orientée objet.
Résultat : Le modèle de données finalisé est maintenant prêt à être utilisé par d’autres mod-
ules de l’application, tels que l’affichage des produits et la gestion du panier. Cette étape a
également permis de garantir la scalabilité future de la plateforme, en prévoyant des champs
supplémentaires si nécessaire.

• Une fois le modèle de données en place, l’étape suivante consistait à développer l’interface
utilisateur (UI) pour afficher les produits de manière attrayante et intuitive.
Objectif : L’objectif était de créer une interface utilisateur qui permette aux utilisateurs de
parcourir facilement les produits, de filtrer par catégorie et de consulter les détails d’un produit
spécifique. Fonctionnalités développées : Affichage en grille ou liste : Les produits sont affichés
sous forme de grille ou de liste, selon la préférence de l’utilisateur. Pagination : Pour éviter
de surcharger la page avec trop de données, une pagination a été mise en place. Filtrage et
tri : Les utilisateurs peuvent filtrer les produits par catégorie, prix ou popularité, et trier les
résultats par ordre croissant ou décroissant. Détails du produit : En cliquant sur un produit,
l’utilisateur accède à une page détaillée contenant une description complète, des images supplé-
mentaires et des options d’achat. Technologies utilisées : J’ai utilisé des frameworks frontaux
comme [Link] ou [Link] pour développer l’interface utilisateur. Ces frameworks permettent
de créer des interfaces dynamiques et réactives. De plus, des bibliothèques CSS comme Boot-
strap ou TailwindCSS ont été utilisées pour assurer un design moderne et responsive. Résultat
: L’interface d’affichage des produits est désormais opérationnelle et offre une expérience util-
isateur fluide. Les utilisateurs peuvent naviguer facilement entre les différentes catégories et
consulter les détails des produits sans rencontrer de problèmes de performance.

• profile Qwen2.5-Max 12:18 pm Sprint 2 : Gestion des Produits Le deuxième sprint du projet
"Souq" a été consacré à la gestion des produits, une fonctionnalité centrale de toute plateforme
e-commerce. Ce sprint visait à structurer et mettre en œuvre les composants essentiels liés aux
produits, depuis leur modélisation jusqu’à leur affichage et interaction avec l’utilisateur. Voici
une analyse détaillée de chaque item :
1. Création du modèle de données pour les produits La création d’un modèle de données
robuste est une étape cruciale dans le développement d’une application e-commerce. Le modèle
de données définit la structure et les relations entre les entités principales, garantissant ainsi
une organisation claire et cohérente des informations.

8
Objectif : L’objectif était de concevoir un modèle de données qui représente les produits de
manière complète et flexible. Chaque produit doit inclure des attributs tels que : ID du produit
: Identifiant unique pour chaque produit. Nom : Le nom du produit. Description : Une brève
description du produit. Prix : Le prix unitaire du produit. Catégorie : La catégorie à laquelle
appartient le produit (ex. : électronique, vêtements, etc.). Stock : La quantité disponible en
stock. Images : Les images associées au produit pour une meilleure présentation. Technologies
utilisées : Pour ce sprint, j’ai utilisé une base de données relationnelle (par exemple, MySQL ou
PostgreSQL) pour stocker les données des produits. Le modèle a été implémenté en utilisant
un ORM (Object-Relational Mapping) comme Sequelize (pour [Link]) ou Entity Framework
(pour .NET), ce qui permet de manipuler les données de manière orientée objet. Résultat
: Le modèle de données finalisé est maintenant prêt à être utilisé par d’autres modules de
l’application, tels que l’affichage des produits et la gestion du panier. Cette étape a également
permis de garantir la scalabilité future de la plateforme, en prévoyant des champs supplémen-
taires si nécessaire. 2. Développement de l’interface d’affichage des produits Une fois le modèle
de données en place, l’étape suivante consistait à développer l’interface utilisateur (UI) pour
afficher les produits de manière attrayante et intuitive.
Objectif : L’objectif était de créer une interface utilisateur qui permette aux utilisateurs de
parcourir facilement les produits, de filtrer par catégorie et de consulter les détails d’un produit
spécifique. Fonctionnalités développées : Affichage en grille ou liste : Les produits sont affichés
sous forme de grille ou de liste, selon la préférence de l’utilisateur. Pagination : Pour éviter
de surcharger la page avec trop de données, une pagination a été mise en place. Filtrage et
tri : Les utilisateurs peuvent filtrer les produits par catégorie, prix ou popularité, et trier les
résultats par ordre croissant ou décroissant. Détails du produit : En cliquant sur un produit,
l’utilisateur accède à une page détaillée contenant une description complète, des images supplé-
mentaires et des options d’achat. Technologies utilisées : J’ai utilisé des frameworks frontaux
comme [Link] ou [Link] pour développer l’interface utilisateur. Ces frameworks permettent
de créer des interfaces dynamiques et réactives. De plus, des bibliothèques CSS comme Boot-
strap ou TailwindCSS ont été utilisées pour assurer un design moderne et responsive. Résultat
: L’interface d’affichage des produits est désormais opérationnelle et offre une expérience util-
isateur fluide. Les utilisateurs peuvent naviguer facilement entre les différentes catégories et
consulter les détails des produits sans rencontrer de problèmes de performance. 3. Intégration
de la fonctionnalité d’ajout au panier L’ajout au panier est une fonctionnalité clé de toute
plateforme e-commerce, car elle permet aux utilisateurs de sélectionner des produits avant de
passer à la caisse.
Objectif : L’objectif était d’intégrer une fonctionnalité d’ajout au panier qui soit simple, rapide
et fiable. Les utilisateurs doivent pouvoir ajouter des produits à leur panier en un clic et
visualiser les articles ajoutés. Fonctionnalités développées : Bouton "Ajouter au panier" : Un
bouton visible sur chaque produit permet d’ajouter celui-ci au panier. Mise à jour en temps
réel : Le panier est mis à jour en temps réel, sans nécessiter de rechargement de la page.
Gestion des quantités : Les utilisateurs peuvent ajuster la quantité d’un produit dans le panier
ou le supprimer complètement. Résumé du panier : Un récapitulatif du panier est affiché en
permanence, indiquant le nombre total d’articles et le montant total. Technologies utilisées
: Frontend : J’ai utilisé des bibliothèques JavaScript comme Redux ou Context API pour
gérer l’état global du panier. Cela permet de partager les données du panier entre différentes
parties de l’application. Backend : Une API RESTful a été développée pour gérer les requêtes
liées au panier, telles que l’ajout, la modification ou la suppression de produits. Base de

9
 données : Les données du panier sont temporairement stockées côté client (dans le localStorage
ou une session) pour les utilisateurs non connectés, et synchronisées avec la base de données
lorsque l’utilisateur se connecte. Résultat : La fonctionnalité d’ajout au panier est maintenant
pleinement fonctionnelle et offre une expérience utilisateur optimale. Les utilisateurs peuvent
ajouter des produits, ajuster les quantités et consulter un récapitulatif de leur commande avant
de procéder au paiement.

2.2.3 Sprint 3 : Gestion des Commandes

• Développement du système de commande (création, suivi, affichage) : Objectif : L’objectif
était de créer un système complet permettant aux utilisateurs de passer des commandes, de
suivre leur statut et de consulter l’historique des achats. Fonctionnalités développées : Création
de commande : Une fois le panier validé, une commande est générée avec les informations du
client, les produits sélectionnés et le montant total. Suivi des commandes : Les utilisateurs
peuvent consulter le statut de leur commande (ex. : en attente, confirmée, expédiée, livrée).
Affichage des commandes passées : Une section "Mes commandes" permet aux utilisateurs de
visualiser l’historique de leurs achats avec des détails comme la date, le statut et les articles
commandés. Technologies utilisées : Backend : API RESTful pour gérer les opérations liées
aux commandes. Frontend : Interface utilisateur intuitive avec des notifications pour informer
les utilisateurs des mises à jour de statut. Résultat : Un système de commande fluide et
transparent a été mis en place, améliorant ainsi l’expérience utilisateur.

• Mise en place du tableau de bord administrateur pour la gestion des commandes: Objectif :
Offrir aux administrateurs une interface centralisée pour gérer toutes les commandes reçues sur
la plateforme. Fonctionnalités développées : Vue globale des commandes : Liste des commandes
avec filtres par statut, date ou utilisateur. Détails des commandes : Accès aux informations
complètes d’une commande (produits, client, statut). Actions administratives : Possibilité de
modifier le statut d’une commande (ex. : marquer comme expédiée). Technologies utilisées
: Backend : Intégration d’une API sécurisée pour récupérer et mettre à jour les données
des commandes. Frontend : Utilisation de tableaux dynamiques (ex. DataTables) pour une
gestion efficace des données. Résultat : Le tableau de bord administrateur simplifie la gestion
des commandes et permet un suivi précis des transactions.

• Validation des commandes par l’administrateur: Objectif : Permettre à l’administrateur de

valider les commandes avant leur traitement, assurant ainsi une gestion rigoureuse des stocks
et des paiements. Fonctionnalités développées : Validation manuelle : L’administrateur peut
examiner chaque commande et la valider ou la rejeter. Notifications automatiques : Les utilisa-
teurs reçoivent une notification lorsque leur commande est validée ou rejetée. Mise à jour des
stocks : Une fois la commande validée, les stocks sont automatiquement ajustés. Technologies
utilisées : Backend : Logique métier pour synchroniser la validation des commandes avec la
base de données. Notifications : Envoi d’e-mails ou de messages via des services tiers (ex.
SendGrid). Résultat : La validation des commandes par l’administrateur garantit une gestion
précise des ressources et renforce la confiance des utilisateurs dans la plateforme.

2.2.4 Sprint 4 : Authentification et Sécurité

• Mise en œuvre de l’authentification par JWT : Objectif : L’objectif était d’implémenter un
système d’authentification sécurisé basé sur les JSON Web Tokens (JWT) pour gérer les ses-

10
 sions utilisateur. Fonctionnement : Lors de la connexion, l’utilisateur fournit ses identifiants
(email/mot de passe). Le backend vérifie ces informations et génère un token JWT contenant
les données utilisateur encodées. Ce token est renvoyé au client et stocké localement (ex. local-
Storage ou cookies). Pour chaque requête ultérieure, le token est envoyé dans l’en-tête HTTP
pour authentifier l’utilisateur. Technologies utilisées : Backend : Bibliothèques comme json-
webtoken (pour [Link]) pour générer et valider les tokens. Frontend : Stockage sécurisé du
token et ajout automatique dans les requêtes via des intercepteurs (ex. Axios). Résultat :
L’authentification par JWT permet une gestion sécurisée et sans état des sessions utilisateur,
tout en garantissant une expérience fluide.

• Sécurisation des routes backend pour utilisateurs et administrateurs : Objectif : L’objectif était
de protéger les routes backend en fonction des rôles (utilisateur ou administrateur), assurant
que seuls les utilisateurs autorisés puissent accéder à certaines ressources. Méthodologie :
Middleware d’authentification : Un middleware vérifie la validité du token JWT pour chaque
requête. Contrôle des rôles : Une logique supplémentaire vérifie le rôle de l’utilisateur (ex.
"user" ou "admin") avant d’autoriser l’accès à une route spécifique. Exemples : Les routes
utilisateur permettent uniquement la gestion du profil et des commandes personnelles. Les
routes administrateur donnent accès au tableau de bord et aux actions de gestion (validation des
commandes, gestion des produits). Technologies utilisées : Backend : Middleware personnalisé
pour la validation des tokens et des rôles. Base de données : Ajout d’un champ "role" dans
le modèle utilisateur pour distinguer les rôles. Résultat : Les routes backend sont désormais
sécurisées, empêchant tout accès non autorisé et renforçant la protection des données sensibles.

2.2.5 Sprint 5 : Optimisation et Tests

• Optimisation des performances frontend et backend: Objectif : L’objectif était d’améliorer les
performances globales de l’application pour offrir une expérience utilisateur fluide et réduire
les temps de chargement. Optimisations réalisées : Frontend : Compression des images et
utilisation de formats modernes (ex. WebP). Minification des fichiers CSS, JavaScript et HTML
pour réduire leur taille. Mise en cache des ressources statiques pour accélérer le chargement des
pages. Chargement asynchrone des scripts non essentiels pour éviter de bloquer le rendu initial.
Backend : Indexation des bases de données pour accélérer les requêtes complexes. Réduction
des appels redondants à l’API via un système de mise en cache (ex. Redis). Pagination côté
serveur pour limiter la quantité de données envoyées au client. Résultat : Les optimisations
ont permis de réduire significativement les temps de chargement et d’améliorer la réactivité de
l’application, tant pour les utilisateurs que pour les administrateurs.

• Objectif : L’objectif était de tester les principales fonctionnalités de l’application pour détecter
et corriger les éventuels bugs ou anomalies. Tests réalisés : Tests manuels : Simulation des
scénarios d’utilisation courants (ex. navigation, ajout au panier, passage de commande, au-
thentification). Tests automatisés : Utilisation de frameworks comme Jest (pour le backend)
et Cypress ou Selenium (pour le frontend) pour automatiser les tests des fonctionnalités cri-
tiques. Scénarios testés : Connexion et inscription d’un utilisateur. Recherche et affichage des
produits. Ajout/suppression de produits dans le panier. Passage d’une commande et mise à
jour du statut. Validation des commandes par l’administrateur. Tests de performance : Simu-
lation de montée en charge pour évaluer la capacité de l’application à gérer un grand nombre
d’utilisateurs simultanément. Résultat : Les tests ont permis d’identifier et de corriger plusieurs
anomalies mineures, garantissant ainsi une meilleure stabilité et fiabilité de l’application. Les

11
 tests automatisés ont également été intégrés dans le pipeline CI/CD pour détecter rapidement
les régressions futures.

2.3 Choix Technologiques

2.3.1 Frontend
• [Link] : Utilisé pour construire une interface utilisateur dynamique et réactive en suivant
le modèle composant. React permet d’optimiser le rendu grâce au Virtual DOM, rendant
l’application plus performante et fluide.

• Tailwind CSS : Choisi pour accélérer la conception d’interfaces responsive sans avoir à écrire
beaucoup de CSS personnalisé. Tailwind propose des classes utilitaires prêtes à l’emploi qui
permettent de respecter facilement les bonnes pratiques de design moderne.

• Axios : Utilisé pour gérer les appels HTTP entre le frontend et le backend. Axios simplifie
l’envoi des requêtes asynchrones et offre une meilleure gestion des réponses et des erreurs que
l’API Fetch native.

2.3.2 Backend
• [Link] : Framework léger choisi pour créer des APIs RESTful de manière rapide et struc-
turée. Express facilite la gestion des routes, des middlewares et des requêtes HTTP côté
serveur.

• [Link] : Utilisé comme environnement d’exécution pour JavaScript côté serveur. [Link] est
non bloquant (asynchrone), ce qui permet de traiter un grand nombre de requêtes simultané-
ment, idéal pour les applications web modernes.

• MongoDB : Base de données NoSQL choisie pour sa flexibilité dans la gestion de données non
structurées. MongoDB permet de stocker les informations sous forme de documents JSON, ce
qui est très adapté à une application e-commerce évolutive.

2.3.3 Sécurité
• Bcrypt : Utilisé pour sécuriser les mots de passe en les hachant avant de les stocker en base
de données. Cela protège les utilisateurs en cas de fuite de données, car les mots de passe réels
ne sont jamais sauvegardés.

• JWT (JSON Web Token) : Employé pour l’authentification sécurisée des utilisateurs. JWT
permet de transmettre des informations d’identité de manière sécurisée entre le frontend et le
backend, tout en évitant d’avoir à stocker l’état de session sur le serveur.

12
Chapter 3

Résultats et Fonctionnalités Réalisées

3.1 Présentation Générale

Le projet Souq est une application web de commerce électronique développée dans le but de repro-
duire l’expérience utilisateur d’une plateforme de vente moderne. Elle permet aux utilisateurs de
parcourir des produits, de les ajouter à leur panier, de s’inscrire, de se connecter, et de passer des
commandes. Le site propose une interface fluide et responsive, adaptée à tous les types d’appareils.
Le développement s’est concentré sur l’intégration complète du frontend et du backend, ainsi que sur
la mise en place de fonctionnalités essentielles pour un site e-commerce : gestion d’authentification,
sécurisation des données, et traitement des commandes.
Tous les éléments ont été adaptés au contexte du projet Souq, avec une personnalisation visuelle
(changement du nom et du logo) afin d’apporter une identité propre à la plateforme.

3.2 Fonctionnalités Principales

3.2.1 Catalogue Produits
• Affichage dynamique des produits avec image, prix et description : Les produits sont
affichés de manière dynamique grâce à l’intégration du frontend avec le backend. Chaque fiche
produit présente une image représentative, un prix clairement indiqué, ainsi qu’une description
succincte permettant aux utilisateurs de comprendre rapidement les caractéristiques du produit.
Cette approche facilite la navigation et améliore l’expérience utilisateur.

• Classification par catégories : Afin d’optimiser la recherche et la découverte de produits,

un système de catégorisation a été mis en place. Les articles sont regroupés par types (par
exemple : fruits, boissons, produits ménagers), permettant aux clients de filtrer rapidement les
produits selon leurs besoins spécifiques et de trouver plus facilement ce qu’ils recherchent.

3.2.2 Panier d’Achat

• Ajout et suppression de produits dans le panier : Les utilisateurs peuvent ajouter un ou
plusieurs articles à leur panier directement depuis la page d’accueil ou la page produit. Ils ont
également la possibilité de retirer un produit à tout moment avant de finaliser leur commande,
leur laissant une totale liberté dans la gestion de leur panier d’achat.

13
 • Mise à jour automatique de la quantité et du total : Le panier se met à jour en temps
réel lorsque l’utilisateur modifie la quantité d’un produit. Le prix total du panier est recalculé
instantanément sans rechargement de la page, ce qui rend l’expérience plus fluide et agréable
pour l’utilisateur.

3.2.3 Gestion des Commandes

• Création d’une commande à partir du panier : Une fois les articles sélectionnés, l’utilisateur
peut valider son panier et générer une commande. Cette commande est sauvegardée dans la
base de données avec tous les détails associés, notamment les produits commandés, les quan-
tités, les prix, et les informations de l’utilisateur.

• Suivi de l’état des commandes (en attente, validée, livrée) : Chaque commande est
associée à un statut. Cela permet à l’utilisateur de suivre l’évolution de sa commande (par
exemple : en attente de validation, commande validée, commande expédiée ou livrée). Cette
gestion des statuts est essentielle pour renforcer la transparence et la confiance des clients.

3.2.4 Authentification des Utilisateurs

• Inscription et connexion sécurisées : Les utilisateurs peuvent créer un compte personnel
en fournissant des informations de base (nom, email, mot de passe). Le mot de passe est
protégé via un hachage sécurisé (Bcrypt) avant d’être stocké dans la base de données. Lors de
la connexion, les informations sont vérifiées, et si elles sont correctes, un token JWT est généré
pour sécuriser la session de l’utilisateur.

• Accès restreint aux fonctionnalités liées aux commandes pour les utilisateurs con-
nectés : Seuls les utilisateurs authentifiés ont accès aux fonctionnalités sensibles comme la
validation du panier, le suivi des commandes, et la gestion de leur compte. Cela garantit la
confidentialité des informations personnelles et empêche tout accès non autorisé.

3.2.5 Espace Administrateur

• Gestion des produits (ajout, modification, suppression) : Un espace dédié est réservé à
l’administrateur pour gérer les produits du catalogue. Il peut facilement ajouter de nouveaux
articles, modifier les informations existantes (comme le prix ou la description) ou supprimer
des produits qui ne sont plus disponibles à la vente. Cette fonctionnalité permet de maintenir
la base de données produits à jour et fiable.

• Consultation et traitement des commandes des clients : L’administrateur peut consulter

l’ensemble des commandes passées par les utilisateurs, accéder aux détails de chaque commande,
et mettre à jour leur statut. Cela lui permet de gérer efficacement le processus de validation,
d’expédition et de livraison, tout en assurant une bonne organisation logistique du site.

3.3 Aperçu Visuel

Des captures d’écran de l’application peuvent être ajoutées ici pour illustrer l’interface utilisateur et
les principales fonctionnalités (facultatif selon ton rapport).

14
Conclusion et Perspectives

Le développement du Souq nous a permis de mettre en œuvre une architecture full-stack moderne et
de comprendre les défis liés à la création d’une plateforme e-commerce. L’application est fonctionnelle
et propose une navigation fluide, une interface utilisateur intuitive, ainsi qu’un backend performant.
Pour aller plus loin, plusieurs perspectives peuvent être envisagées : l’intégration d’un système de
paiement sécurisé, l’ajout d’un système de recommandation, ou encore le déploiement sur le cloud.

15
.1 Librairies utilisées
• Frontend : React, Axios, Tailwind CSS

• Backend : Express, MongoDB, JWT, Bcrypt

• Outils : [Link], VS Code, Postman

16
Bibliography

[Christianto et al., 2024] Christianto, K., Chakir, A., Andry, J. F., Adikara, F., Liliana, L., and
Felicia, J. (2024). Modeling user experience in delivery applications using the design thinking
method and system usability scale. Journal of Computer Science, 20(7):722–729.

[Goffic, 2024] Goffic, M. L. (2024). Sécurité des applications web: stratégies offensives et défensives.
Éditions ENI.

[Krug, 2014] Krug, S. (2014). Don’t Make Me Think: A Common Sense Approach to Web Usability.
New Riders (Pearson), 3 edition.

[Laudon and Traver, 2021] Laudon, K. C. and Traver, C. G. (2021). E-commerce 2021: Business,
Technology and Society. Pearson, 16 edition.

[Macé, 2021] Macé, N. (2021). Développement et architecture des applications web modernes: retrou-
ver les fondamentaux. Eyrolles (Collection DataPro).

[Schorung, 2024] Schorung, M. (2024). Quick commerce and the evolving business models of the
food retail industry – investigating the quick commerce supply chain and the urban impacts of
dark stores. Transportation Research Procedia, 79:305–312.

17
18
 Abstract

The present work is part of a graduation project carried out within the company Entreprise d’accueil
in order to obtain the national diploma of engineer at the
FSM faculté de science de Monastir . This project’s objective is to design and implement a ...
Keywords—

Résumé

Ce travail s’inscrit dans le cadre du projet de fin d’études réalisé au sein de Entreprise d’accueil en
vue de l’obtention du diplôme national d’ingénieur à l’
FSM faculté de science de Monastir . L’objectif de ce projet consiste à ...

Mots clés—