🛋️ Kanap – Développement d’un site e-commerce dynamique en JavaScript

Contexte

Dans une mission pour une agence de développement web, j’ai été chargé de rendre dynamique le site e-commerce de la marque fictive Kanap, spécialisée dans la vente de canapés. Le front-end statique était déjà intégré, et l’API back-end mise à disposition par un autre développeur.

Objectif

Connecter le front-end à l’API afin de rendre l’interface fonctionnelle, gérer dynamiquement le catalogue de produits, le panier, la validation des formulaires, ainsi que la confirmation de commande. Le site devait respecter une architecture modulaire en JavaScript, avec un code clair, commenté et réutilisable.

Défis techniques

• Connexion à l’API REST pour récupérer les produits (GET) et passer une commande (POST)
• Affichage dynamique du catalogue produit sur la page d’accueil
• Page produit : sélection des options (couleur, quantité) et ajout au panier
• Gestion du panier : modification des quantités, suppression de produits, calculs automatiques des totaux
• Validation du formulaire : vérification des formats (email, prénom sans chiffres, etc.)
• Envoi de la commande : construction de l’objet contact + tableau des product-ID, envoi au back-end
• Affichage dynamique de la page de confirmation avec l’identifiant de commande
• Stockage local sécurisé : aucune donnée sensible comme le prix n’est conservée en localStorage

Compétences développées

• Manipulation du DOM avec JavaScript Vanilla
• Utilisation de fetch et des promesses
• Structuration du code en fonctions modulaires et réutilisables
• Mise en place d’un plan de test d’acceptation
• Validation dynamique de formulaire (regex, messages d’erreur, UX)
• Gestion avancée du localStorage
• Rigueur dans le respect des spécifications fonctionnelles et techniques

Technologies utilisées

• HTML5
• CSS3
• JavaScript ES6
• API REST (JSON)

Fonctionnalités principales

• ✅ Liste des produits dynamique
• ✅ Détail d’un produit avec choix couleur + quantité
• ✅ Panier dynamique (modification, suppression, regroupement)
• ✅ Formulaire de commande avec validation en temps réel
• ✅ Requête POST vers l’API pour finaliser la commande
• ✅ Page de confirmation affichant un numéro unique de commande

Liens utiles