Donner une cohérence à un parcours marchand qui rassemble catalogue, fiches produit, variantes et panier. Le projet personnel explore la rencontre entre une direction streetwear et les détails de l’achat en ligne.
01 / PROJETS CHOISIS
AURA
Du style.
Et un parcours complet.
Projet de développement personnel. Visuel éditorial réalisé pour cette présentation ; code du projet accessible sur GitHub.
LE CONTEXTE
Une boutique de streetwear développée en React et TypeScript, de la découverte des collections à la gestion du panier.
Des pages dédiées et des composants réutilisables structurent le parcours. Les filtres de catégorie et de prix organisent le catalogue ; le panier distingue chaque combinaison de produit, taille et couleur.
UNE IDÉE, UN CARACTÈREAURA
Le style attire.
Le parcours compte.
Le parcours compte.
DU PROJET AU CODEL’idée prend forme.
Explorer le dépôt GitHub L’idée prend forme.
Le code la fait vivre.
- React
- TypeScript
- Tailwind CSS
- Framer Motion
01
Explorer le catalogue
Filtres de catégorie et de prix, tri des produits.
src/pages/ProductsPage.tsxVoir le fichier source 02 Composer le panier
Variantes, quantités et calcul des totaux.
src/context/CartContext.tsxVoir le fichier source 03 Relier l’expérience
Routes dédiées, fournisseurs de contexte et transitions.
src/App.tsxVoir le fichier source mouadbusni / AURA-V9-main · Projet personnel
Chaque choix
a sa raison.
- 01
Filtrer par catégorie et prix, puis trier les produits pour faciliter l’exploration.
- 02
Gérer les variantes, quantités et totaux dans un contexte React partagé.
- 03
Relier catalogue, fiches produit, panier et écrans de commande par une navigation dédiée.
EXPLORER LES DÉTAILSAPERÇU INTERACTIF
Le projet dans son ensemble.
CONTINUER L’EXPLORATION
AutoPro
Projet personnel · Catalogue automobile
Et si on écrivait votre histoire ?
Parlons de votre projet↗