Skip to content

Use Cases

Ce document détaille les cas d'usage pour les Organisations (acteur principal) et les workflows des Photographes (contributeurs) et Clients (acheteurs).

1. ORGANISATION - Inscription

📊 Voir le diagramme de séquence

Description

L'organisation doit pouvoir créer un compte gratuitement sur la plateforme.

Données requises

  • Login (unique)
  • Email (unique, vérifié)
  • Mot de passe (force minimale requise)

Flux

  1. Organisation accède à la page d'inscription
  2. Remplit le formulaire (login, email, password)
  3. Accepte les CGU
  4. Soumet le formulaire
  5. Reçoit un email de confirmation avec lien de validation
  6. Clique sur le lien pour activer le compte
  7. Peut se connecter

Critères d'acceptation

  • ✅ Validation email en temps réel (format valide)
  • ✅ Validation mot de passe (min 8 caractères, 1 majuscule, 1 chiffre)
  • ✅ Login unique (vérification en temps réel)
  • ✅ Email unique (vérification en temps réel)
  • ✅ Email de confirmation envoyé dans les 2 minutes
  • ✅ Lien de validation valide pendant 24h
  • ✅ Message d'erreur clair si validation échoue
  • ✅ Redirection automatique vers dashboard après activation

Validation technique

  • Mots de passe hashés (bcrypt ou argon2)
  • Protection CSRF
  • Rate limiting (max 5 tentatives/minute/IP)

2. ORGANISATION - Configuration du profil

📊 Voir le diagramme de séquence

Description

L'organisation peut configurer son profil pour personnaliser sa présence et recevoir ses paiements.

Données requises

  • Informations générales:
  • Nom d'organisation (affiché publiquement)
  • Logo (upload d'image, optionnel)
  • Couleur principale (utilisée pour customiser le layout, optionnel)

  • Description (optionnelle)

  • Coordonnées de paiement:

  • Nom complet / Raison sociale
  • IBAN
  • BIC/SWIFT
  • Adresse complète
  • Email de facturation
  • Numéro de TVA (si applicable)

Flux

  1. Organisation se connecte
  2. Accède à "Mon profil"
  3. Remplit/modifie les informations
  4. Upload du logo (si désiré)
  5. Choisit une couleur principale (color picker)
  6. Sauvegarde les modifications
  7. Prévisualisation des changements

Critères d'acceptation

  • ✅ Upload logo (formats: PNG, JPG, SVG, max 2MB)
  • ✅ Redimensionnement automatique logo (200x200px)
  • ✅ Color picker avec preview en temps réel
  • ✅ Validation IBAN (format international)
  • ✅ Validation BIC/SWIFT
  • ✅ Validation numéro TVA (format européen)
  • ✅ Sauvegarde automatique ou bouton "Enregistrer"
  • ✅ Message de confirmation après sauvegarde
  • ✅ Profil incomplet = warning sur dashboard (coordonnées paiement manquantes)

Validation technique

  • Vérification format IBAN (checksum)
  • Vérification format BIC (longueur, caractères)
  • Stockage sécurisé des coordonnées bancaires (chiffrement)

3. ORGANISATION - Création d'un événement/galerie

📊 Voir le diagramme de séquence

Description

L'organisation crée un événement/galerie qui contiendra les photos uploadées par les photographes.

Données requises

  • Nom de l'événement (obligatoire)
  • Date de l'événement (obligatoire)
  • Lieu (optionnel)
  • Description (optionnelle, markdown supporté)
  • Type d'événement (sport, festival, convention, mariage, autre)
  • Visibilité:
  • Public (visible par tous)
  • Protégé par mot de passe (pour événements privés, mineurs)
  • Photo de couverture (optionnelle, générée auto si non fournie)

Flux

  1. Organisation clique sur "Créer un événement"
  2. Remplit le formulaire
  3. Configure la visibilité
  4. Si "Protégé": définit un mot de passe
  5. Upload photo de couverture (optionnel)
  6. Sauvegarde
  7. Événement créé avec ID unique
  8. Redirection vers page événement

Critères d'acceptation

  • ✅ Création simple et rapide (max 3 étapes)
  • ✅ Génération d'un ID unique (slug SEO-friendly basé sur le nom)
  • ✅ Génération automatique QR code (vers galerie)
  • ✅ URL publique: spotted.com/events/[slug]
  • ✅ Si protégé par mot de passe: prompt avant accès galerie
  • ✅ Photo de couverture par défaut si non fournie
  • ✅ Prévisualisation avant publication
  • ✅ Brouillon possible (événement non publié)

Post-création

  • Génération automatique d'outils marketing:
  • QR code téléchargeable (PNG, SVG)
  • Affiche PDF A4 avec QR code
  • Template email d'annonce

4. ORGANISATION - Génération d'accès photographe

📊 Voir le diagramme de séquence

Description

L'organisation génère un accès pour un photographe qui contribuera à l'événement. Le système crée automatiquement un login/mot de passe et envoie un email au photographe.

Données requises

  • Email du photographe (obligatoire)
  • Nom du photographe (optionnel, pour personnalisation email)
  • Événement/galerie associé(e)

Flux

  1. Organisation accède à l'événement créé
  2. Clique sur "Inviter un photographe"
  3. Saisit l'email du photographe
  4. (Optionnel) Saisit le nom du photographe
  5. Clique sur "Envoyer l'invitation"
  6. Système génère automatiquement:
  7. Login unique (ex: spotted-evt-abc123)
  8. Mot de passe aléatoire sécurisé
  9. Email automatique envoyé au photographe avec:
  10. Identifiants (login/mot de passe)
  11. Lien direct vers la page d'upload
  12. Instructions rapides
  13. Organisation voit l'accès créé dans la liste
  14. Statut: "En attente" (photographe n'a pas encore uploadé)

Critères d'acceptation

  • ✅ Génération login unique et sécurisé
  • ✅ Génération mot de passe aléatoire (12 caractères, forte entropie)
  • ✅ Email envoyé immédiatement (<2 min)
  • ✅ Email contient lien direct fonctionnel vers page d'upload
  • ✅ Lien valide indéfiniment (pas d'expiration)
  • ✅ Possibilité de créer plusieurs accès pour un même événement
  • ✅ Un photographe peut avoir plusieurs accès (événements différents)
  • ✅ Organisation peut renvoyer l'email si photographe ne l'a pas reçu
  • ✅ Affichage du statut: En attente / Actif (au moins 1 photo uploadée)

Validation technique

  • Login unique global (pas de collision)
  • Mot de passe hashé avant stockage
  • Email template personnalisable
  • Tracking ouverture email (optionnel)

Template email photographe

Objet: Vous êtes invité à uploader des photos pour [Nom événement]

Bonjour [Nom photographe],

[Nom organisation] vous invite à contribuer à la galerie photo de l'événement "[Nom événement]" sur Spotted.

Vos identifiants d'accès:
- Login: spotted-evt-abc123
- Mot de passe: X8k2P9mQ4vL7

Lien direct vers la page d'upload:
https://spotted.com/upload/evt-abc123

Vous pouvez uploader vos photos dès maintenant. C'est simple et rapide!

Merci de votre contribution,
L'équipe Spotted

5. ORGANISATION - Gestion des accès photographe

📊 Voir le diagramme de séquence

Description

L'organisation peut visualiser, modifier ou supprimer les accès photographe existants.

Fonctionnalités de visualisation

  • Liste de tous les accès photographe par événement
  • Pour chaque accès:
  • Email du photographe
  • Login généré
  • Date de création
  • Statut: En attente / Actif (photos uploadées)
  • Nombre de photos uploadées
  • Date du dernier upload
  • Actions disponibles

Fonctionnalités de modification

  • Changer l'email associé (renvoie automatiquement l'email)
  • Régénérer les identifiants (login/mot de passe)
  • Activer/désactiver temporairement un accès
  • Renvoyer l'email d'invitation

Fonctionnalités de suppression

  • Supprimer définitivement un accès photographe
  • Attention: Suppression de l'accès ≠ suppression des photos déjà uploadées
  • Confirmation obligatoire avant suppression
  • Options lors de la suppression:
  • Garder les photos déjà uploadées (par défaut)
  • Supprimer aussi les photos associées à cet accès

Critères d'acceptation

  • ✅ Interface de gestion claire (tableau avec filtres)
  • ✅ Confirmation obligatoire avant suppression
  • ✅ Notification au photographe en cas de modification/suppression (optionnel)
  • ✅ Traçabilité des modifications (logs admin)
  • ✅ Recherche/filtrage des accès (par email, statut)
  • ✅ Export CSV de la liste (optionnel)
  • ✅ Révocation immédiate de l'accès après suppression

Flux suppression

  1. Organisation clique sur "Supprimer" pour un accès
  2. Modal de confirmation s'affiche
  3. Choix: Garder les photos / Supprimer les photos
  4. Organisation confirme
  5. Accès révoqué immédiatement
  6. Photographe ne peut plus se connecter
  7. Photos gardées ou supprimées selon le choix
  8. Message de confirmation

6. PHOTOGRAPHE - Réception de l'invitation et première connexion

📊 Voir le diagramme de séquence

Description

Le photographe reçoit un email d'invitation, clique sur le lien et accède à la page d'upload dédiée.

Flux

  1. Photographe reçoit l'email d'invitation
  2. Clique sur le lien direct
  3. Atterrit sur la page d'upload dédiée
  4. Première connexion: peut être invité à compléter un mini-profil (optionnel)
  5. Nom complet
  6. Pseudonyme (affiché sur les photos)
  7. Bio courte (optionnelle)
  8. Accède directement à l'interface d'upload

Critères d'acceptation

  • ✅ Lien fonctionnel et direct (pas de page login intermédiaire)
  • ✅ Auto-authentification via token dans l'URL
  • ✅ Interface ultra-simple et minimaliste
  • ✅ Aucune distraction (pas de menu, sidebar, etc.)
  • ✅ Focus total sur l'upload
  • ✅ Message de bienvenue personnalisé: "Bienvenue! Vous contribuez à [Nom événement]"

7. PHOTOGRAPHE - Upload de photos

📊 Voir le diagramme de séquence

Description

Le photographe uploade ses photos de manière simple, rapide et efficace.

Principe

  • Accès le plus simple possible
  • Upload direct et rapide sans ralentissement
  • Processing différé en arrière-plan
  • Pas de blocage pendant le traitement

Interface

  • Zone de drop centrale:
  • "Glissez vos photos ici ou cliquez pour sélectionner"
  • Drag & drop supporté
  • Sélection multiple de fichiers
  • File d'attente d'upload:
  • Liste des fichiers en cours d'upload
  • Barre de progression par fichier
  • Statut: En cours / Terminé / Erreur
  • Options minimales:
  • Watermark: Par défaut / Texte personnalisé
  • Description globale (optionnelle, appliquée à toutes les photos du batch)

Flux technique

  1. Upload initial:
  2. Photos uploadées vers dossier temporaire (staging)
  3. Validation basique: format, taille max
  4. Confirmation immédiate de réception

  5. Feedback visuel (barre de progression)

  6. Processing en background (asynchrone):

  7. Génération de thumbnails (multiples résolutions)
  8. Optimisation des images (compression, WebP)
  9. Extraction métadonnées EXIF (date, heure, géolocalisation si dispo)
  10. Application du watermark
  11. Détection de doublons (hash MD5)
  12. Déplacement vers stockage définitif

  13. Indexation pour recherche

  14. Notification:

  15. Photographe peut fermer la page pendant le processing
  16. Email optionnel une fois toutes les photos traitées et publiées

Critères d'acceptation

  • ✅ Upload ne doit JAMAIS être bloqué par le processing
  • ✅ Feedback visuel clair sur l'état de chaque upload
  • ✅ Gestion des erreurs (réseau, format non supporté, taille excessive)
  • ✅ Possibilité de reprendre un upload interrompu (chunked upload)
  • ✅ Formats acceptés: JPG, PNG, HEIC, RAW (CR2, NEF, ARW, etc.)
  • ✅ Taille maximale par fichier: 50MB (configurable)
  • ✅ Upload en parallèle (5-10 fichiers simultanément)
  • ✅ Pas de limite de nombre de fichiers par session
  • ✅ Support mobile (responsive)

Optimisations

  • Compression côté client avant envoi (optionnel, pour accélérer)
  • Chunked upload (découpage en morceaux pour gros fichiers)
  • Système de queue pour gérer les pics de charge
  • Retry automatique en cas d'erreur réseau

Gestion des erreurs

  • Format non supporté:
  • Message: "Ce format n'est pas supporté. Formats acceptés: JPG, PNG, RAW"
  • Fichier ignoré, upload continue pour les autres
  • Taille excessive:
  • Message: "Ce fichier dépasse la taille maximale de 50MB"
  • Fichier ignoré
  • Erreur réseau:
  • Retry automatique (3 tentatives)
  • Si échec: message "Upload échoué, réessayez"
  • Doublon détecté:
  • Message: "Cette photo a déjà été uploadée"
  • Option: Remplacer / Ignorer

8. PHOTOGRAPHE - Configuration du watermark

📊 Voir le diagramme de séquence

Description

Le photographe peut personnaliser le watermark appliqué à ses photos.

Options disponibles

  1. Watermark par défaut:
  2. Logo Spotted + "Spotted.com"
  3. Position: Coin inférieur droit

  4. Opacité: 70%

  5. Watermark avec texte personnalisé:

  6. Logo Spotted + texte du photographe (ex: "© John Doe Photography")
  7. Position: Coin inférieur droit
  8. Opacité: 70%
  9. Max 30 caractères

Flux

  1. Photographe clique sur "Configurer watermark"
  2. Aperçu visuel des deux options
  3. Si texte personnalisé: saisit son texte
  4. Preview en temps réel sur une photo exemple
  5. Sauvegarde
  6. Watermark appliqué automatiquement à toutes les futures photos uploadées
  7. Option: Appliquer rétroactivement aux photos déjà uploadées (régénération)

Critères d'acceptation

  • ✅ Preview en temps réel
  • ✅ Validation longueur texte (max 30 caractères)
  • ✅ Caractères spéciaux autorisés (©, ®, etc.)
  • ✅ Application automatique aux futures photos
  • ✅ Option d'application rétroactive (avec confirmation)
  • ✅ Logo Spotted toujours visible (non supprimable)

9. PHOTOGRAPHE - Ajout de descriptions et tags

📊 Voir le diagramme de séquence

Description

Le photographe peut ajouter des descriptions et tags à ses photos pour faciliter la découverte par les clients.

Fonctionnalités

  • Description globale (pendant l'upload):
  • Appliquée à toutes les photos du batch

  • Ex: "Arrivée du marathon - Photos de 9h à 10h"

  • Description individuelle (après upload):

  • Modification photo par photo

  • Ex: "Franchissement de la ligne d'arrivée"

  • Tags:

  • Tags prédéfinis par type d'événement (sport, festival, etc.)
  • Tags personnalisés
  • Max 10 tags par photo

  • Ex: #marathon #arrivée #finisher #km42

  • Métadonnées automatiques:

  • Date et heure (EXIF)
  • Géolocalisation si disponible (EXIF GPS)
  • Numéro de dossard (détection IA en V2)

Flux

  1. Après upload, photographe peut cliquer sur une photo
  2. Modal s'ouvre avec la photo en grand
  3. Champs disponibles:
  4. Description (textarea, max 500 caractères)
  5. Tags (input avec autocomplétion)
  6. Sauvegarde
  7. Indexation pour recherche mise à jour

Critères d'acceptation

  • ✅ Modification individuelle ou en masse (sélection multiple)
  • ✅ Autocomplétion tags basée sur tags existants
  • ✅ Sauvegarde automatique (debounced)
  • ✅ Compteur de caractères pour description
  • ✅ Validation tags (pas de caractères spéciaux sauf # et -)

10. PHOTOGRAPHE - Accès FTP

📊 Voir le diagramme de séquence (V1: sur demande, V2: automatique)

Description

Les photographes qui uploadent de très gros volumes de photos peuvent demander un accès FTP pour plus d'efficacité.

V1: Accès FTP sur demande

  • Photographe contacte le support via bouton "Demander accès FTP"
  • Admin crée manuellement l'accès FTP
  • Credentials envoyées par email
  • Dossier FTP dédié par événement

V2: Accès FTP automatique

  • Lors de la création de l'accès photographe par l'organisation:
  • Login FTP = même login que page web
  • Mot de passe FTP = même mot de passe
  • Accès FTP créé automatiquement
  • Email d'invitation contient aussi les informations FTP:
  • Host: ftp.spotted.com
  • Port: 21 (ou 22 pour SFTP)
  • Login/mot de passe
  • Dossier cible

Critères d'acceptation

  • ✅ SFTP (sécurisé) ou FTPS
  • ✅ Accès isolé par événement (chroot)
  • ✅ Même processing asynchrone que pour upload web
  • ✅ Détection automatique des nouveaux fichiers
  • ✅ Support des gros fichiers RAW (>100MB)
  • ✅ Pas de limite de bande passante
  • ✅ Support des outils FTP clients (FileZilla, Cyberduck, etc.)

11. CLIENT - Navigation publique des événements

📊 Voir le diagramme de séquence

Description

Le visiteur non enregistré peut consulter la liste des événements et galeries publiques.

Structure de la page

La page d'accueil liste les événements avec une hiérarchie claire:

  1. Événements EN COURS (priorité absolue)
  2. Événements dont la date = aujourd'hui
  3. Badge "EN COURS" + couleur distinctive

  4. Mise en avant visuelle (taille, position)

  5. Événements récents (7 derniers jours)

  6. Événements terminés mais récents

  7. Section séparée avec titre "Événements récents"

  8. Tous les événements passés

  9. Archive complète
  10. Tri par date décroissante
  11. Pagination (20 événements par page) ou infinite scroll

Pour chaque événement (card)

  • Visuel:
  • Photo de couverture (ou première photo de la galerie)
  • Badge type d'événement (sport, festival, etc.)

  • Badge "EN COURS" si applicable

  • Informations:

  • Nom de l'événement
  • Date (format: "15 mars 2024" ou "Il y a 2 jours")
  • Lieu
  • Nombre de photos

  • Organisation (nom + logo si dispo)

  • Actions:

  • Bouton "Voir les photos" (principal)
  • Boutons de partage réseaux sociaux:
    • Facebook
    • Instagram
    • X (Twitter)
    • WhatsApp
    • LinkedIn
    • Copier le lien

Génération des contenus de partage (Open Graph)

Chaque événement dispose de meta tags optimisés pour le partage:

  • Image de prévisualisation (OG Image):
  • Générée automatiquement lors de la création de l'événement
  • Composition: Photo de couverture + logo Spotted + nom événement + date
  • Format: 1200x630px (recommandé Facebook/LinkedIn)

  • Stockée et servie via CDN

  • Texte d'accroche (OG Description):

  • Template personnalisé par événement
  • Ex: "Découvrez les photos de [Nom événement] le [Date]. Retrouvez-vous sur les clichés! 📸"
  • Contient call-to-action

  • Mention "Spotted" pour branding

  • Titre (OG Title):

  • Format: "[Nom événement] - Photos sur Spotted"

Critères d'acceptation

  • ✅ Responsive design (mobile first)
  • ✅ Temps de chargement <2s (lazy loading images)
  • ✅ SEO optimisé (meta tags, schema.org Event)
  • ✅ Preview correcte sur tous les réseaux sociaux (test avec Facebook Debugger, Twitter Card Validator)
  • ✅ Analytics pour tracker les partages (UTM parameters)
  • ✅ Filtres: Par type d'événement, par date, par lieu
  • ✅ Barre de recherche (par nom d'événement, organisation)
  • ✅ Événements protégés par mot de passe visibles avec icône cadenas

12. CLIENT - Visualisation d'une galerie publique

📊 Voir le diagramme de séquence

Description

Le client accède à une galerie d'événement et consulte toutes les photos.

Layout

  • Header galerie:
  • Nom de l'événement
  • Date et lieu
  • Organisation (nom + logo)
  • Description de l'événement
  • Nombre de photos
  • Boutons de partage

  • Barre de recherche/filtres (voir use case 13)

  • Grille de photos:

  • Layout masonry grid (Pinterest-style) ou grid classique
  • Thumbnails optimisés (lazy loading)
  • Hover: Légère animation (zoom, overlay)

  • Clic: Ouverture lightbox

  • Lightbox:

  • Photo en grande résolution (mais pas full HD - watermarked)
  • Navigation: Flèches gauche/droite + clavier (← →)
  • Zoom: Double-clic ou pinch (mobile)
  • Informations:
    • Description (si disponible)
    • Tags (si disponibles)
    • Date et heure (si EXIF dispo)
  • Actions:
    • Bouton "Acheter" (principal, bien visible)
    • Partage réseaux sociaux (icônes)
    • Télécharger watermarked (gratuit, basse résolution)
  • Fermeture: Clic en dehors, touche Esc, bouton X

Interactions sur chaque photo

1. Partage vers réseaux sociaux: - Boutons de partage individuels par photo - Image de prévisualisation: Photo avec watermark Spotted - Texte personnalisé: "Découvrez cette photo de [Nom événement] sur Spotted! 📸" - Lien direct vers la photo dans la lightbox

2. Réactions emojis (V2): Liste limitée à 10 emojis: - ❤️ Cœur - 👍 Like - 😊 Sourire - 😂 Rire - 🔥 Feu - 👏 Applaudissements - 🎉 Fête - 😍 Amour - 🤩 Star - 💪 Force

Fonctionnalités: - Compteur de réactions par emoji - Un utilisateur peut ajouter plusieurs emojis sur une même photo - Pas besoin de compte (limitation par IP/session/cookie) - Animation au clic

Critères d'acceptation

  • ✅ Performance fluide même avec 500+ photos
  • ✅ Images progressives (thumbnail → résolution moyenne)
  • ✅ Lightbox rapide et responsive
  • ✅ Navigation clavier fluide (← → ↑ ↓)
  • ✅ Watermark bien visible mais pas intrusif
  • ✅ Bouton "Acheter" toujours visible et accessible
  • ✅ Partage social fonctionnel (preview correcte)
  • ✅ Support tactile (swipe pour naviguer, pinch pour zoomer)
  • ✅ Loading states clairs (skeletons, spinners)
  • ✅ Infinite scroll ou pagination selon UX (test A/B)

Optimisations techniques

  • CDN pour toutes les images
  • Formats modernes (WebP, AVIF) avec fallback JPG
  • Preloading des images adjacentes en lightbox
  • Cache agressif (long TTL)
  • Compression adaptative selon device

13. CLIENT - Recherche et filtrage de photos

📊 Voir le diagramme de séquence

Description

Le client peut filtrer et rechercher des photos dans une galerie pour trouver plus facilement celles qui le concernent.

Fonctionnalités de filtrage (V1 - simple)

1. Recherche temporelle: - Input "Heure de passage" (ex: 10:30) - Affiche les photos ±15 minutes autour de cette heure - Basé sur les métadonnées EXIF (heure de prise de vue)

2. Recherche par tags: - Autocomplétion des tags disponibles dans la galerie - Filtrage en temps réel - Tags cliquables directement sur les photos

3. Recherche par description: - Barre de recherche textuelle - Recherche dans les descriptions ajoutées par photographes - Ex: "arrivée", "départ", "km 10"

4. Tri: - Par date/heure (par défaut) - Par popularité (nombre de réactions - V2) - Aléatoire (découverte)

Fonctionnalités avancées (V2)

5. Recherche par couleur dominante: - Détection automatique des couleurs principales des vêtements - Filtres: Rouge, Bleu, Jaune, Vert, Noir, Blanc, Orange, Rose - Ex: "Montrez-moi les photos avec beaucoup de rouge"

6. Reconnaissance faciale (V2): - Client uploade une photo de son visage - IA recherche les correspondances - Résultats triés par niveau de similarité

7. Recherche par numéro de dossard (V2): - Input numéro de dossard - IA détecte les dossards sur les photos - Affiche uniquement les photos contenant ce numéro

Interface de filtrage

Desktop: - Sidebar gauche avec tous les filtres - Filtres collapsibles par section - Badges actifs visibles (ex: "Heure: 10:30" avec bouton X) - Bouton "Réinitialiser les filtres"

Mobile: - Bouton "Filtres" ouvrant un drawer bottom-sheet - Même contenu que sidebar desktop - Application immédiate des filtres - Badge sur le bouton indiquant le nombre de filtres actifs

Critères d'acceptation

  • ✅ Filtrage en temps réel (pas de rechargement page)
  • ✅ URL mise à jour avec les filtres (partage de recherche)
  • ✅ Combinaison de plusieurs filtres
  • ✅ Feedback visuel du nombre de résultats
  • ✅ Message si aucun résultat ("Essayez d'élargir vos critères")
  • ✅ Performance maintenue même avec filtres multiples
  • ✅ Sauvegarde des filtres en session (retour arrière conserve les filtres)

14. CLIENT - Achat de photos - Sélection de produit

📊 Voir le diagramme de séquence

Description

Le client sélectionne le(s) produit(s) qu'il souhaite acheter pour une photo donnée.

Produits disponibles (V1)

1. Photo numérique: - Prix: 10€ - Format: JPEG haute résolution (résolution d'origine, sans watermark) - Livraison: Téléchargement immédiat après paiement - Lien valide 30 jours

2. Impression 10x15cm: - Prix: 15€ - Options: - Sans cadre (15€) - Avec cadre basique (+5€ = 20€) - Papier: Mat ou Brillant (choix gratuit) - Délai: 5-7 jours ouvrés

3. Agrandissements: - 20x30cm: 25€ (sans cadre) / 35€ (avec cadre) - 30x40cm: 40€ (sans cadre) / 55€ (avec cadre) - 40x60cm: 60€ (sans cadre) / 80€ (avec cadre) - Papier: Mat ou Brillant - Délai: 5-7 jours ouvrés

Interface de sélection

Déclenchement: - Bouton "Acheter" visible sur chaque photo (galerie + lightbox)

Modal d'achat: 1. Aperçu photo (colonne gauche) - Miniature de la photo - Nom événement - Date

  1. Sélecteur de produit (colonne droite)
  2. Radio buttons ou cards pour chaque type de produit
  3. Affichage du prix par défaut
  4. Pour photo numérique:
    • Aucune option supplémentaire
  5. Pour impressions:
    • Choix papier: Mat / Brillant
    • Checkbox "Avec cadre" (+prix dynamique)
    • Preview visuel du produit (mockup)
  6. Sélecteur de quantité:
    • Input number (min: 1, max: 99)
    • Boutons +/- pour incrémenter

  7. Prix total:

    • Calcul dynamique: (Prix unitaire) × Quantité
    • Affiché en gros et en gras

  8. Actions:

  9. Bouton "Ajouter au panier" (secondaire)
  10. Bouton "Acheter maintenant" (principal, CTA)
    • Bypass le panier, va direct au checkout

Critères d'acceptation

  • ✅ Interface claire et intuitive
  • ✅ Prix affichés TTC (TVA incluse)
  • ✅ Mockup visuel des produits (avec/sans cadre)
  • ✅ Mise à jour dynamique du prix selon les options
  • ✅ Responsive mobile et desktop
  • ✅ Validation quantité (min 1, max 99)
  • ✅ Feedback visuel lors de l'ajout au panier (animation, toast)
  • ✅ Fermeture modal: Clic en dehors, Esc, bouton X
  • ✅ Possibilité de revenir en arrière (modal reste ouverte)

15. CLIENT - Gestion du panier

📊 Voir le diagramme de séquence

Description

Le client peut constituer un panier avec plusieurs produits avant de finaliser sa commande.

Fonctionnalités

Icône panier (header): - Visible en permanence (sticky header) - Badge avec nombre total d'articles - Clic: Ouvre le panier (drawer ou page dédiée selon UX)

Page/Drawer panier:

  1. Liste des articles:

  2. Pour chaque article:

    • Miniature de la photo
    • Nom événement
    • Type de produit (ex: "Impression 10x15cm avec cadre, papier brillant")
    • Options choisies (papier, cadre)
    • Quantité (modifiable avec +/-)
    • Prix unitaire
    • Prix total ligne
    • Bouton supprimer (icône poubelle)

  3. Récapitulatif:

  4. Sous-total (somme des articles)
  5. Frais de port (calculés selon produits et quantité)
    • Photos numériques: 0€
    • Impressions: 5€ (jusqu'à 5 articles) puis +1€ par 5 articles

  6. Total TTC (gros, en gras)

  7. Actions:

  8. Bouton "Continuer mes achats" (retour à la galerie)
  9. Bouton "Vider le panier" (confirmation requise)
  10. Bouton "Valider ma commande" (CTA principal) → Checkout

Persistance du panier

  • Utilisateur non connecté:
  • Sauvegarde en localStorage
  • Conservation 7 jours
  • Utilisateur avec compte (V2):
  • Sauvegarde en BDD
  • Synchronisation multi-devices
  • Conservation 30 jours

Gestion des stocks (si applicable)

  • Si impression limitée (peu probable): indicateur de disponibilité
  • Si rupture: message clair + option de retrait du panier

Critères d'acceptation

  • ✅ Modification quantités en temps réel
  • ✅ Recalcul automatique des totaux (sous-total, frais de port, total)
  • ✅ Message si panier vide ("Votre panier est vide. Découvrez nos événements!")
  • ✅ Responsive parfait (mobile et desktop)
  • ✅ Sauvegarde automatique des modifications
  • ✅ Validation avant vidage du panier
  • ✅ Feedback visuel lors de la suppression (animation, toast)
  • ✅ Loading states si calculs asynchrones

16. CLIENT - Validation de la commande

📊 Voir le diagramme de séquence (Checkout)

Description

Le client finalise sa commande en renseignant ses informations de livraison et de facturation.

Étapes du checkout

Étape 1: Informations client - Email (obligatoire - pour envoi confirmation + téléchargement) - Checkbox "Créer un compte" (optionnel - V2) - Si oui: Mot de passe - Avantages: Suivi commandes, historique achats

Étape 2: Adresse de livraison (si produits physiques) - Nom complet - Adresse ligne 1 - Adresse ligne 2 (optionnel - Appartement, étage, etc.) - Code postal - Ville - Pays (sélecteur) - Téléphone (pour livraison)

Note: Si panier contient UNIQUEMENT des photos numériques, cette étape est skippée.

Étape 3: Adresse de facturation - Checkbox "Identique à l'adresse de livraison" (coché par défaut) - Si décoché: Même formulaire que livraison - Option "Entreprise" (dévoile champs supplémentaires): - Nom entreprise - Numéro TVA - SIRET/SIREN (France)

Étape 4: Récapitulatif final - Récapitulatif commande: - Liste complète des articles (miniatures + détails) - Sous-total - Frais de port - Total TTC - Adresses: - Adresse de livraison (si applicable) - Adresse de facturation - Conditions: - Checkbox "J'accepte les Conditions Générales de Vente" (obligatoire, lien vers CGV) - Checkbox "J'accepte la Politique de Confidentialité" (obligatoire, lien) - Checkbox "J'accepte de recevoir des offres de Spotted" (optionnel - newsletter) - Bouton final: - "Procéder au paiement" (CTA principal, disabled si CGV non cochées)

  • Indicateur de progression: Étape 1/4, 2/4, 3/4, 4/4
  • Boutons "Précédent" et "Suivant"
  • Possibilité de modifier à tout moment (clic sur étape précédente)
  • Validation des champs avant passage à l'étape suivante

Critères d'acceptation

  • ✅ Validation des champs en temps réel (email, téléphone, code postal)
  • ✅ Sauvegarde progressive (si connexion perdue, reprise possible)
  • ✅ Auto-complétion adresse (Google Places API ou équivalent)
  • ✅ Indicateur de progression clair
  • ✅ Modification du panier possible depuis récapitulatif (bouton "Modifier")
  • ✅ Responsive mobile optimisé (formulaire adapté)
  • ✅ Messages d'erreur clairs et contextuels
  • ✅ Bouton "Suivant" disabled si formulaire invalide

17. CLIENT - Paiement

📊 Voir le diagramme de séquence

Description

Le client procède au paiement sécurisé de sa commande via Stripe.

Moyens de paiement

  • Carte bancaire (Visa, Mastercard, Amex)
  • Apple Pay (si device compatible)
  • Google Pay (si device compatible)
  • PayPal (V2, optionnel)

Intégration Stripe

  • Utilisation de Stripe Checkout (hosted page) ou Stripe Elements (embedded)
  • PCI-DSS compliant (Spotted ne stocke JAMAIS les données bancaires)
  • Support 3D Secure obligatoire (SCA - Strong Customer Authentication)

Flux de paiement

  1. Clic sur "Procéder au paiement"
  2. Création d'une session Stripe
  3. Génération du montant total (avec frais de port)

  4. Redirection vers interface de paiement Stripe

  5. Interface Stripe:

  6. Client saisit informations bancaires
  7. Validation 3D Secure si nécessaire (SMS, app banque, etc.)

  8. Traitement du paiement

  9. Après paiement réussi:

  10. Redirection automatique vers page de confirmation Spotted
  11. Création de la commande en BDD (statut: "payée")

  12. Déclenchement des actions post-paiement (voir use case 18)

  13. Après paiement échoué:

  14. Redirection vers page d'erreur
  15. Message d'erreur explicite (carte refusée, insuffisance de fonds, etc.)
  16. Possibilité de réessayer
  17. Commande sauvegardée (statut: "en attente")
  18. Email optionnel: "Votre commande attend votre paiement"

Gestion des erreurs paiement

  • Carte refusée: "Votre carte a été refusée. Vérifiez vos informations ou essayez une autre carte."
  • Insuffisance de fonds: "Fonds insuffisants. Veuillez utiliser une autre carte."
  • 3DS échoué: "L'authentification 3D Secure a échoué. Veuillez réessayer."
  • Timeout: "Le paiement a expiré. Veuillez réessayer."
  • Erreur technique: "Une erreur est survenue. Aucun montant n'a été débité. Veuillez réessayer."

Sécurité

  • Webhook Stripe:
  • Confirmation asynchrone du paiement
  • Validation du montant côté serveur
  • Idempotence (éviter double traitement)

  • Signature validation

  • Logs:

  • Toutes les transactions loggées
  • Traçabilité complète

  • Monitoring des erreurs

  • Conformité RGPD:

  • Aucune donnée bancaire stockée par Spotted
  • Stripe est responsable des données bancaires
  • Tokenisation des cartes

Critères d'acceptation

  • ✅ Paiement 100% sécurisé (PCI-DSS)
  • ✅ Support des principales cartes bancaires
  • ✅ Support Apple Pay / Google Pay (si applicable)
  • ✅ 3D Secure fonctionnel
  • ✅ Gestion des erreurs et timeouts
  • ✅ Webhook pour confirmation asynchrone
  • ✅ Idempotence (éviter double paiement si refresh/retry)
  • ✅ Logs complets de toutes les transactions
  • ✅ Conformité SCA (Strong Customer Authentication)
  • ✅ Retry possible en cas d'échec

18. CLIENT - Confirmation de commande et livraison

📊 Voir le diagramme de séquence

Description

Après paiement réussi, le client accède à une page de confirmation et reçoit un email récapitulatif.

Page de confirmation

Contenu: - Message de remerciement: - "Merci pour votre commande! 🎉" - Message personnalisé selon type de produit

  • Informations commande:
  • Numéro de commande (ex: #SPT-20240315-A3K9)
  • Date et heure de commande
  • Récapitulatif des articles (miniatures + détails)

  • Montant total payé

  • Livraison (si produits physiques):

  • Adresse de livraison
  • Délai estimé: "Livraison sous 5-7 jours ouvrés"

  • Message: "Vous recevrez un email avec le numéro de suivi dès l'expédition"

  • Téléchargement (si photos numériques):

  • Boutons "Télécharger" pour chaque photo numérique
  • Lien direct de téléchargement

  • Message: "Vous pouvez télécharger vos photos immédiatement. Le lien est aussi dans votre email."

  • Actions:

  • Bouton "Télécharger la facture" (PDF)
  • Bouton "Retour aux galeries"
  • Bouton "Créer un compte" (si commande en guest - V2)

Email de confirmation

Envoi: Immédiatement après paiement (max 2 minutes)

Contenu: - Objet: "Confirmation de votre commande #SPT-20240315-A3K9" - Corps: - Message de remerciement - Numéro de commande - Date de commande - Récapitulatif des articles (tableau HTML) - Montant total payé - Si produits physiques: - Adresse de livraison - Délai de livraison estimé - Message: "Suivi d'expédition à venir" - Si photos numériques: - Liens de téléchargement directs (1 lien par photo) - Message: "Vos liens sont valides pendant 30 jours" - Pièce jointe: Facture PDF - Footer: - Lien vers "Suivre ma commande" (V2) - Lien vers "Conditions d'annulation/remboursement" - Contact support

Génération facture PDF

Contenu facture: - Logo Spotted - Mention "Facture" + Numéro de facture - Date d'émission - Informations vendeur (Spotted): - Raison sociale - Adresse - SIRET/SIREN - TVA intracommunautaire - Informations client: - Nom complet - Adresse de facturation - Email - Détail de la commande: - Tableau: Article | Quantité | Prix unitaire HT | TVA | Total TTC - Sous-total HT - TVA (20% en France) - Frais de port HT - Total TTC - Conditions de paiement: "Payé par carte bancaire le [Date]" - Mentions légales obligatoires

Téléchargement photos numériques

Génération de liens: - Liens sécurisés signés (JWT ou équivalent) - Format: https://spotted.com/download/[token] - Validité: 30 jours - Nombre de téléchargements: Illimité pendant la validité - Après expiration: Client peut demander nouveau lien (via email ou support)

Processus de téléchargement: 1. Client clique sur le lien 2. Vérification du token (validité, non-expiré) 3. Téléchargement de la photo en haute résolution (sans watermark) 4. Nom de fichier: spotted-[événement]-[id-photo].jpg

Suivi de commande (V2)

Statuts possibles: - ✅ Payée (immédiat) - 📦 En préparation (J+1) - 🚚 Expédiée (J+2 à J+4) - ✅ Livrée (J+5 à J+7) - ❌ Annulée (si demande client)

Email de suivi expédition: - Envoyé dès que le colis est expédié - Contient: - Numéro de suivi transporteur (Colissimo, Chronopost, DPD, etc.) - Lien de tracking transporteur - Délai estimé de livraison

Critères d'acceptation

  • ✅ Email de confirmation envoyé dans les 2 minutes
  • ✅ Liens de téléchargement fonctionnels immédiatement
  • ✅ Facture PDF générée automatiquement (conforme légalement)
  • ✅ Facture téléchargeable depuis email et page de confirmation
  • ✅ Numéro de commande unique et traçable
  • ✅ Espace client accessible sans compte via email + numéro commande (V2)
  • ✅ Liens de téléchargement sécurisés (token signé)
  • ✅ Gestion de l'expiration des liens (message clair si expiré)
  • ✅ Possibilité de renvoyer email de confirmation (si perdu)

19. ORGANISATION - Suivi des ventes et commissions

📊 Voir le diagramme de séquence

Description

L'organisation peut suivre en temps réel les ventes réalisées sur ses événements et les commissions générées.

Dashboard organisation

Vue d'ensemble: - KPIs principaux (cards en haut): - Total des ventes du mois en cours - Commission du mois en cours (~30% des ventes) - Nombre de photos vendues ce mois - Nombre d'événements actifs

  • Graphiques:
  • Évolution des ventes sur les 12 derniers mois (line chart)
  • Répartition des ventes par type de produit (pie chart)
  • Top 5 événements par ventes (bar chart)

Liste des événements: - Tableau avec pour chaque événement: - Nom événement - Date - Nombre de photos - Nombre de photographes - Ventes totales - Commission organisation (~30%) - Actions: Voir détails / Modifier / QR code / Outils marketing

Détail d'un événement: - Vue dédiée accessible en cliquant sur un événement - Statistiques: - Ventes totales - Commission organisation - Nombre de photos vendues / Nombre total de photos - Taux de conversion (visiteurs → acheteurs) - Panier moyen - Photos les plus vendues: - Top 10 avec miniatures - Nombre de ventes par photo - Répartition des ventes: - Par type de produit - Par photographe (si plusieurs) - Timeline: - Graphique des ventes jour par jour

Export des données

  • Bouton "Exporter" sur chaque page:
  • Format CSV ou Excel
  • Contient: Date, Événement, Type de produit, Quantité, Montant, Commission
  • Utilisation: Comptabilité, reporting interne

Paiement des commissions

Fréquence: Mensuelle (paiement le 15 du mois suivant)

Processus: 1. Le 1er de chaque mois: Calcul automatique des commissions du mois précédent 2. Génération d'un rapport de commission (PDF) 3. Notification par email: "Votre commission de [Mois] est prête: [Montant]" 4. Le 15: Virement automatique sur le compte bancaire renseigné 5. Email de confirmation: "Votre commission a été versée"

Conditions: - Seuil minimum: 50€ (si <50€, report au mois suivant) - Coordonnées bancaires complètes et validées

Dashboard section "Paiements": - Historique des paiements - Statut: En attente / Payé - Montant - Date de paiement - Téléchargement du justificatif de virement

Attestation fiscale annuelle

Génération automatique: - Disponible dès le 1er janvier pour l'année précédente - Téléchargeable depuis le dashboard - Contient: - Total des commissions perçues sur l'année - Détail mois par mois - Détail par événement - Mention: "Revenus à déclarer aux impôts"

Rappel fiscal: - Banner dans le dashboard en janvier: "Votre attestation fiscale 2024 est disponible" - Email de rappel envoyé en janvier

Critères d'acceptation

  • ✅ Dashboard mis à jour en temps réel (ou refresh toutes les 5 minutes)
  • ✅ Graphiques interactifs (hover pour détails)
  • ✅ Export CSV/Excel fonctionnel
  • ✅ Calcul automatique des commissions
  • ✅ Paiement automatique le 15 de chaque mois
  • ✅ Notifications par email (commissions calculées, paiement effectué)
  • ✅ Historique complet accessible
  • ✅ Attestation fiscale téléchargeable en PDF
  • ✅ Responsive (dashboard utilisable sur mobile)

20. ORGANISATION - Outils marketing

📊 Voir le diagramme de séquence

Description

L'organisation dispose d'outils marketing gratuits pour promouvoir ses événements et augmenter les ventes.

1. Génération de QR Code

Accessible depuis: - Page détail événement → Bouton "QR Code"

Configuration: - Destination: - Galerie de l'événement (par défaut) - Page d'accueil Spotted - Personnalisation: - Logo au centre du QR code (optionnel) - Couleur du QR code (par défaut: noir) - Formats d'export: - PNG (haute résolution: 2000x2000px) - SVG (vectoriel, pour impression grand format) - PDF (A4 avec QR code centré + nom événement)

Usages suggérés (affichés dans l'interface): - Imprimer et afficher sur le lieu de l'événement - Ajouter sur les dossards des participants - Intégrer dans les communications pré-événement (email, réseaux sociaux) - Panneaux de signalisation (départ, arrivée, zones photos)

2. Génération d'affiches PDF

Types d'affiches disponibles:

a) Affiche "Événement": - Template professionnel - Contenu: - Nom de l'événement - Date et lieu - QR code vers la galerie - Logo organisation (si renseigné) - Message: "Retrouvez vos photos sur Spotted!" - Logo Spotted - Formats: A4, A3, A2 - Layouts: Portrait / Paysage

b) Affiche "Photos disponibles": - Utilisée après l'événement - Contenu: - "Les photos de [Nom événement] sont en ligne!" - QR code vers la galerie - Message: "Scannez pour voir les photos" - Statistiques: "[X] photos disponibles"

Personnalisation: - Choix du template (3-4 designs disponibles) - Couleur d'accent (utilise la couleur de l'organisation si définie) - Ajout d'un message personnalisé (optionnel, max 100 caractères)

3. Kit de communication email

Templates prêts à l'emploi:

a) Email pré-événement (annonce): - Objet: "Photos de [Nom événement] disponibles sur Spotted!" - Corps: - Annonce de la couverture photo - Explication: "Après l'événement, retrouvez vos photos sur Spotted" - QR code - Lien direct vers la galerie (sera actif après l'événement) - Format: HTML responsive

b) Email post-événement (notification): - Objet: "Vos photos de [Nom événement] sont en ligne! 📸" - Corps: - Message: "Les photos de [Nom événement] sont maintenant disponibles" - Nombre de photos uploadées - Lien direct vers la galerie - CTA: "Découvrir mes photos" - Partage social encouragé - Format: HTML responsive

c) Signature email: - Template de signature pour les emails de l'organisation - Contient: - Nom organisation - QR code vers profil Spotted de l'organisation - Lien "Retrouvez nos événements sur Spotted" - Formats: HTML (pour clients email) / Image PNG

Export: - HTML copiable (pour intégration dans outil mailing) - PDF preview - Instructions d'utilisation incluses

4. Templates réseaux sociaux (V2)

Posts pré-événement: - Template annonce avec visuel attractif - Message type pré-rempli - Formats optimisés: Instagram (1080x1080), Facebook (1200x630), Twitter (1200x675)

Stories Instagram/Facebook: - Template avec zone photo + QR code - Format: 1080x1920px - Stickers "Swipe up" (si compte éligible)

Couverture événement Facebook: - Bannière 1640x856px - Contient: Nom événement, date, QR code, logo Spotted

Critères d'acceptation

  • ✅ Génération instantanée de tous les outils
  • ✅ Téléchargement direct (pas d'attente)
  • ✅ Formats haute résolution (imprimables)
  • ✅ Personnalisation simple et intuitive
  • ✅ Preview avant téléchargement
  • ✅ Instructions d'utilisation claires
  • ✅ Templates professionnels et modernes
  • ✅ Responsive (générateur utilisable sur mobile)
  • ✅ Historique des outils générés (ré-téléchargement possible)

Notes techniques générales

Sécurité

  • Tous les mots de passe hashés (bcrypt ou argon2)
  • HTTPS obligatoire sur toute la plateforme
  • Protection CSRF sur tous les formulaires
  • Rate limiting sur les endpoints sensibles (login, upload, paiement)
  • Validation côté serveur TOUJOURS (ne jamais faire confiance au client)
  • Sanitization des inputs (protection XSS)
  • Protection contre les injections SQL (ORM ou prepared statements)

Performance

  • CDN pour toutes les ressources statiques (images, CSS, JS)
  • Lazy loading images
  • Pagination ou infinite scroll (selon UX)
  • Cache agressif (Redis pour sessions, query results)
  • Optimisation requêtes DB (indexes, query optimization)
  • Monitoring performance (APM: New Relic, Datadog, etc.)

Accessibilité

  • Conformité WCAG 2.1 niveau AA minimum
  • Navigation clavier complète
  • Alt text sur toutes les images
  • Contraste suffisant (ratio 4.5:1)
  • Labels explicites sur formulaires
  • Messages d'erreur clairs et accessibles

Conformité RGPD

  • Consentement explicite pour newsletter
  • Droit d'accès, rectification, suppression des données
  • Politique de confidentialité claire et accessible
  • Durée de conservation des données définie
  • Anonymisation des données après suppression compte
  • Logs d'accès et modifications des données personnelles

Monitoring et logging

  • Logs applicatifs (niveau INFO, WARNING, ERROR)
  • Logs d'accès (qui a fait quoi, quand)
  • Monitoring uptime (PagerDuty, Pingdom, etc.)
  • Alertes en cas d'erreurs critiques
  • Metrics business (ventes, commissions, uploads) → Dashboard interne

Emails

  • Service d'envoi transactionnel (SendGrid, Mailgun, AWS SES)
  • Templates HTML responsive
  • Tracking ouverture et clics (optionnel)
  • Gestion des bounces et désabonnements
  • Rate limiting (éviter spam)

Stockage et backup

  • Stockage images: AWS S3 (ou équivalent)
  • Backup quotidien de la BDD
  • Versioning des images (garder les originaux)
  • Archivage des vieilles photos (>1 an) sur storage économique (Glacier)
  • Plan de disaster recovery

Récapitulatif des priorités V1 vs V2

V1 (MVP - 3 mois)

✅ Inscription et profil organisations ✅ Création événements/galeries ✅ Génération accès photographe (login/mdp) ✅ Upload photos (page web + FTP sur demande) ✅ Watermark (par défaut + texte personnalisé) ✅ Navigation publique des galeries ✅ Recherche simple (temps, tags, description) ✅ Achat photos numériques et impressions ✅ Panier et checkout ✅ Paiement Stripe ✅ Confirmation commande et email ✅ Dashboard organisations (ventes, commissions) ✅ Paiement mensuel des commissions ✅ Attestation fiscale annuelle ✅ Génération QR codes ✅ Génération affiches PDF ✅ Albums protégés par mot de passe

V2 (Post-MVP - 6-12 mois)

🔜 FTP automatique pour tous les photographes 🔜 Réactions emojis sur photos 🔜 Commentaires (modérés) 🔜 Reconnaissance faciale (recherche IA) 🔜 Détection numéro de dossard (IA) 🔜 Recherche par couleur dominante 🔜 Compte photographe autonome (pour récurrents) 🔜 Templates réseaux sociaux 🔜 Produits dérivés (mugs, t-shirts) 🔜 Packs prédéfinis (bundles) 🔜 Marketplace photographes 🔜 Live feed (publication temps réel) 🔜 Statistiques avancées (heatmaps, conversion) 🔜 API publique (intégrations tierces) 🔜 Application mobile native