Boutique solidaire
SPA : boutique en ligne
Site e-commerce statique pour la boutique solidaire de la SPA : catalogue de 25 produits et dons, avec recherche, filtres par catégorie, fiches produit et formulaire de contact fonctionnel.
Le projet
L'exercice imposait un site multi-pages en HTML et CSS. Plutôt qu'un site vitrine, j'ai choisi de reproduire une boutique solidaire réelle, celle de la SPA : ça imposait des contraintes concrètes (un catalogue à faire tenir sur une grille responsive, une navigation cohérente sur 17 pages, des mentions légales et une page RGPD comme sur un vrai site marchand).
Le sujet caritatif donnait aussi du sens au contenu, au lieu de remplir les pages avec du texte factice. Au total : 17 pages HTML, 10 feuilles de style, 3 fichiers JavaScript, environ 5 100 lignes.
Le projet est livré et clos. Le catalogue, la recherche, les filtres et le formulaire de contact sont pleinement fonctionnels ; le panier a volontairement été laissé à l'état de maquette, l'exercice portant sur l'intégration et le front-end, pas sur la logique d'achat.
Fonctionnalités
- Filtrage du catalogue par catégorie : 8 filtres appliqués en JavaScript sans rechargement de page
- Moteur de recherche présent dans l'en-tête de toutes les pages, avec résultats générés dynamiquement
- Fiches produit interactives : galerie de miniatures en fondu et recalcul du prix selon la quantité
- Formulaire de contact réellement fonctionnel via Web3Forms, sans serveur
Les difficultés rencontrées
Faire communiquer deux pages sans backend : la barre de recherche est dans l'en-tête de toutes les pages, mais les résultats doivent s'afficher sur une page dédiée, or en HTML/CSS pur, chaque chargement repart de zéro. J'ai d'abord tenté de dupliquer une zone de résultats sur chaque page : ingérable à maintenir sur 17 pages, et les résultats disparaissaient dès qu'on naviguait. J'ai fini par utiliser le mécanisme natif du formulaire HTML : la méthode GET place la saisie dans l'URL, que la page cible relit avec URLSearchParams pour filtrer le catalogue et construire les cartes. Effet de bord imprévu : un résultat de recherche devient partageable et ajoutable aux favoris, exactement comme sur un vrai site marchand.
Gérer les produits appartenant à plusieurs catégories : un panier pour chat relève à la fois de « Maison » et « Animaux ». Un attribut à valeur unique ne suffisait pas : j'ai stocké une liste dans l'attribut de données, puis découpé et testé l'appartenance côté JavaScript.
Ce que j'en ai retiré
- Structurer avant de coder : avec 17 pages et un en-tête copié partout, la moindre modification du menu était à répéter 17 fois. C'est ce projet qui m'a fait comprendre concrètement à quoi servent les composants : j'ai vécu le problème que React résout.
- Le responsive se pense d'abord, pas après : les pages où j'avais posé la grille avant les contenus se sont adaptées presque seules, les autres ont demandé beaucoup de rattrapage.
- Manipuler le DOM à la main avant de passer aux frameworks rend ces derniers bien plus lisibles ensuite.
- L'état d'une application doit vivre quelque part de persistant, ici l'URL.