👟 NIKE-Like Store — Projet E-commerce Front-End (Portfolio)
Boutique de démonstration en HTML / CSS / JavaScript
Lien du site web , hébergé sur Github Pages:
📌 Présentation
Ce dépôt contient une recréation de boutique e-commerce inspirée de Nike, réalisée en JavaScript vanilla, HTML et CSS.
Le projet est pensé comme un portfolio front-end :
il met l’accent sur l’UX e-commerce réelle, la lisibilité du code, l’accessibilité, et une base maintenable pour des projets de boutiques plus avancés.
Le site inclut actuellement :
- Une page d’accueil
- Un catalogue produits avec tri / recherche / filtres
- Un panier persistant via
localStorage
- Une fiche produit dédiée (PDP)
- Un parcours de paiement simulé (démo)
- Des améliorations accessibilité
- Des métadonnées SEO et social preview
⚠️ Important : Aucun paiement réel n’est effectué.
🎯 Objectifs du projet
- Reproduire une expérience e-commerce crédible en front pur
- Travailler une structure de code claire et extensible
- Servir de base pour de futurs projets e-commerce professionnels
🚀 Fonctionnalités principales
🏠 Accueil (Home)
- Hero visuel avec CTA principaux
- Section catégories
- Section best-sellers dynamique
- Section spotlight “collections”
- Barre d’annonce type storefront
🛍️ Catalogue produits
- Recherche textuelle
- Tri (sélection, prix croissant/décroissant, nom)
- Filtres multi-critères (genre, catégorie, badge)
- Chips de filtres actifs
- Cartes produits avec choix de taille + ajout au panier
- Lien vers fiche produit détaillée (PDP)
- Liens produits externes
🛒 Panier
- Persistance locale (
localStorage)
- Modification des quantités
- Suppression de lignes
- Vidage complet du panier
- Calcul sous-total / livraison / total
- Redirection vers la page paiement
💳 Paiement (démo)
- Formulaire de paiement simulé
- Validation native HTML des champs
- Résumé de commande dynamique
- Message final expliquant qu’il s’agit d’une démo (pas de paiement réel)
🎨 Direction visuelle (inspiration Nike)
- Palette majoritairement noir / blanc / gris
- Typographie forte et hiérarchie claire
- UI minimaliste orientée produit
- Composants e-commerce classiques (cards, badges, CTA, summary)
- Ambiance premium sans surcharge visuelle
🧩 Architecture du projet
Le site est simple et lisible :
docs/*.html → pages (accueil, catalogue, panier, paiement)
docs/js/data.js → données produits
docs/js/app.js → logique front principale (rendu, panier, interactions)
docs/styles.css → styles globaux + responsive
📂 Structure du projet
site-e-commerce/
│
├── README.md
└── docs/
├── index.html
├── products.html
├── cart.html
├── product.html
├── payment.html
├── styles.css
└── js/
├── app.js
└── data.js
🧪 Qualité du code (état actuel)
- Code front sans dépendances lourdes
- Logique principale centralisée et documentée
- Comportements métier e-commerce simulés de façon cohérente
- Orientation lisibilité avant sur-ingénierie
⚠️ Notes légales / contenu
- Projet de démonstration non affilié à Nike.
- Les médias visuels utilisés pointent vers des liens externes.
👤 Auteur
Projet réalisé dans un objectif d’apprentissage avancé et de portfolio e-commerce front-end.