Stage 2ème Année – Boucherie Agadir

Présentation et Contexte

La Boucherie Agadir souhaitait moderniser son activité en se dotant d'un outil numérique permettant à ses clients de consulter les produits disponibles, de profiter de promotions en ligne et de passer commande à distance via un système de Click & Collect. L'objectif était de proposer une expérience client fluide, depuis la navigation dans le catalogue jusqu'à la validation de la commande.

J'ai travaillé en binôme sur ce projet. Mon camarade a pris en charge la mise en place de l'environnement Docker ainsi que la partie back-end en PHP, tandis que je me suis concentré sur la conception de la base de données, l'intégration front-end et la réalisation des maquettes Figma.

Fonctionnalités du site

Le site développé va bien au-delà d'un simple site vitrine. Il intègre un ensemble de fonctionnalités pensées pour répondre aux besoins concrets d'une boucherie :

• Gestion du catalogue produits : L'administrateur peut ajouter, modifier et supprimer ses propres produits directement depuis une interface dédiée, sans aucune compétence technique requise.
• Système de promotions : Possibilité de créer des offres promotionnelles sur des produits spécifiques, affichées automatiquement sur le site côté client.
• Panier dynamique : Les clients peuvent ajouter des articles à leur panier, modifier les quantités et visualiser le récapitulatif de leur commande en temps réel.
• Click & Collect : Le client valide sa commande en ligne et la récupère directement en boutique à l'heure souhaitée, évitant ainsi toute attente.
• Espace client : Création de compte, connexion sécurisée et suivi des commandes passées.

Conception de la Base de Données

La conception de la base de données a représenté le cœur de mon travail et le défi le plus important du stage. À partir du cahier des charges et des besoins exprimés par le client, j'ai modélisé un schéma relationnel complet sous MySQL comprenant 14 tables.

L'enjeu principal était d'anticiper tous les cas d'usage : gestion des produits et de leurs catégories, association des promotions, gestion des comptes clients, construction du panier, enregistrement des commandes et suivi de leur statut. Chaque relation entre les tables a été pensée pour garantir la cohérence des données et faciliter les requêtes nécessaires à l'affichage dynamique du site.

Cette étape m'a appris à traduire des besoins métier concrets en une structure de données robuste, un exercice bien plus exigeant qu'il n'y paraît lorsqu'on part d'une page blanche.

Maquettes Figma et Intégration Front-End

Avant de commencer l'intégration, j'ai effectué une phase de recherche visuelle approfondie en m'inspirant de sites de boucheries et commerces alimentaires existants, ainsi que de références trouvées sur Figma Community. Cette veille m'a permis de définir une direction graphique cohérente : mise en avant des produits, palette sobre et lisible, navigation intuitive.

L'intégration front-end a été réalisée en HTML, CSS et JavaScript vanilla. Un soin particulier a été apporté à la responsivité du site afin qu'il soit aussi agréable à utiliser sur mobile que sur desktop, un critère important pour une clientèle de proximité.

Environnement de Développement – Docker

Mon camarade a mis en place l'environnement Docker du projet, configurant les conteneurs nécessaires pour le serveur web, PHP et MySQL. De mon côté, j'ai appris à utiliser cet environnement au quotidien : lancer les conteneurs, interagir avec la base de données, et comprendre l'intérêt de conteneuriser un projet pour garantir que le code fonctionne de manière identique sur toutes les machines de l'équipe.

Cette expérience m'a donné une première approche concrète de Docker, un outil devenu incontournable dans les équipes de développement professionnelles.

Technologies et Outils

Compétences du Référentiel SIO

• Bloc 1 : 1.2 (Réponse aux demandes), 1.3 (Présence en ligne), 1.4 (Mode projet).
• Bloc 2 (SLAM) : 2.1 (Conception et développement), 2.2 (Maintenance évolutive), 2.3 (Gestion des données).
• Bloc 3 (Cybersécurité) : 3.5 (Vérification de la qualité et des accès sécurisés).

Bilan

Ce stage a été une expérience particulièrement formatrice. Travailler en binôme sur un projet réel destiné à un vrai client m'a confronté à des contraintes que l'on ne rencontre pas en cours : des besoins qui évoluent, des délais à respecter et des choix techniques qui ont des conséquences concrètes.

La conception de la base de données a été sans conteste l'exercice le plus enrichissant. Elle m'a forcé à penser le projet dans sa globalité avant d'écrire la moindre ligne de code, une discipline essentielle pour tout développeur. Ce stage a renforcé ma conviction de vouloir évoluer dans le développement web, en particulier sur des projets mêlant conception, back-end et expérience utilisateur.