Organiser un catalogue technique sans compliquer la découverte. Ce projet personnel explore une interface automobile où recherche, catégories et informations produit restent au premier plan.
02 / PROJETS CHOISIS
AutoPro
La performance,
pièce par pièce.
Projet de développement personnel publié dans le dépôt Car-parts. Visuel éditorial réalisé pour cette présentation ; code accessible sur GitHub.
LE CONTEXTE
Un catalogue de pièces automobiles avec recherche, catégories, tri et fiches produit, développé avec Next.js et une intégration Supabase.
Le catalogue interroge les produits et catégories via Supabase, applique la recherche et le tri, puis propose un affichage en grille ou en liste. Chaque fiche est chargée à partir de son identifiant de route.
UNE IDÉE, UN CARACTÈREAutoPro
Des données structurées.
Une exploration fluide.
Une exploration fluide.
DU PROJET AU CODEL’idée prend forme.
Explorer le dépôt GitHub L’idée prend forme.
Le code la fait vivre.
- Next.js
- TypeScript
- Tailwind CSS
- Supabase
01
Trouver la bonne pièce
Recherche, catégories, tri et vues grille / liste.
app/products/page.tsxVoir le fichier source 02 Entrer dans le détail
Chargement par slug et gestion des états produit.
app/products/[slug]/page.tsxVoir le fichier source 03 Donner le ton
Direction automobile sombre et animations Framer Motion.
components/hero-section.tsxVoir le fichier source mouadbusni / Car-parts · Projet personnel
Chaque choix
a sa raison.
- 01
Associer recherche textuelle, catégorie et tri dans le chargement du catalogue.
- 02
Proposer une grille pour explorer et une liste pour parcourir les références.
- 03
Prévoir les états de chargement, les résultats vides et les produits introuvables.
EXPLORER LES DÉTAILSAPERÇU INTERACTIF
Le projet dans son ensemble.
CONTINUER L’EXPLORATION
MoD — Field Notes
Projet personnel · Portfolio
Et si on écrivait votre histoire ?
Parlons de votre projet↗