Maquettes filaires — MotoParts, catalogue de pièces moto

4 écrans clés · wireframes de cadrage (la version haute fidélité est réalisée avec Google Stitch)

Écran 1 — Liste du catalogue · page d'accueil

MOTOPARTS
catalogue d'atelier
Administration
🔍 Rechercher une pièce, une marque…
Toutes les catégories ▾

10 PIÈCES AU CATALOGUE

Freinagephoto
Plaquettes de frein
Brembo
39,90 €
FicheModifierSuppr.
Pneumatiquephoto
Pneu arrière Power 6
Michelin
159,90 €
FicheModifierSuppr.
Transmissionphoto
Kit chaîne 525
DID
149,90 €
FicheModifierSuppr.
Échappementphoto
Silencieux slip-on
Akrapovič
549,00 €
FicheModifierSuppr.

Annotations : recherche = filtrage instantané à la frappe · le menu catégorie relance une requête Firestore (where) · clic sur une carte → écran 2 · « Administration » → écran 4 (connexion) puis gestion · grille responsive (1 colonne sur mobile) · états « chargement » et « aucune pièce trouvée » prévus.

Écran 2 — Fiche technique · fenêtre modale au-dessus de la liste

Plaquettes de frein avant
Brembo · Freinage
✕
photo grand format

39,90 €

CARACTÉRISTIQUES TECHNIQUES

matierecéramique
positionavant

COMPATIBILITÉS VÉHICULES

Yamaha MT-07 (2018+)Honda CB650R

Annotations : les caractéristiques affichées proviennent de l'objet attributs : elles changent selon la catégorie (démonstration du modèle document) · la fiche publique est en lecture seule : modifier et supprimer se font depuis l'espace admin (écrans 3 et 4).

Écran 3 — Formulaire d'ajout / modification · espace admin

Ajouter une pièce✕
Nom de la pièce *Ex. Plaquettes de frein avant
MarqueEx. Brembo
Catégorie *Choisir… ▾
Prix (€) *39.90
Image (URL)https://…
Caractéristiques techniques (propres à la catégorie)
matiere
céramique
✕
position
avant
✕
+ Ajouter une caractéristique
Compatibilités véhicules (un véhicule par ligne)Yamaha MT-07 (2018+)
Honda CB650R
Annuler Enregistrer la pièce

Annotations : le même formulaire sert à la création (vide) et à la modification (pré-rempli, id Firestore caché) · lignes clé/valeur dynamiques pour les attributs · validation : nom + catégorie obligatoires, prix numérique · à l'enregistrement → addDoc ou updateDoc, notification, retour à la liste rafraîchie.

Écran 4 — Connexion à l'espace d'administration · admin.html

MOTOPARTS
espace gestion
← Voir le site

Espace gestion

Zone réservée : ajout, modification et suppression des pièces.

Mot de passe••••••••

Mot de passe incorrect. (zone d'erreur)

Se connecter

Annotations : le mot de passe n'est jamais en clair dans le code — seule son empreinte SHA-256 est stockée et comparée à la saisie hachée (crypto.subtle) · session conservée dans sessionStorage (fermée avec l'onglet) · une fois connecté → liste de gestion + écran 3.