chartbastan/_bmad-output/implementation-artifacts/7-2-implémenter-le-système-de-badges-et-réalisations.md

Story 7.2: Implémenter le système de badges et réalisations

Status: review

Story

As a utilisateur, I want gagner des badges pour mes accomplissements, So que je peux montrer mes réussites et me motiver.

Acceptance Criteria

Given j'ai consulté 10 prédictions correctes When j'atteins cet objectif Then je reçois un badge "Débutant Prophète" And le badge est affiché dans mon profil And une notification de succès est affichée

Given j'ai plusieurs badges When j'accède à mon profil Then tous mes badges sont affichés And je peux partager mes badges sur les réseaux sociaux

Tasks / Subtasks

• Créer le système de badges (AC: #1)

  • Définir la liste des badges et leurs critères
  • Créer src/lib/badges.ts avec les définitions
  • Définir: nom, description, icône, critère de débloquage
  • Documenter tous les badges disponibles
  • Ajouter les icônes/emojis

• Créer la table des badges dans la base de données (AC: #1)

  • Ajouter la table badges dans Drizzle
  • Ajouter la table user_badges pour les badges débloqués
  • Créer les colonnes: id, name, description, icon, criteria
  • Générer et appliquer les migrations
  • Créer les modèles SQLAlchemy correspondants

• Créer le service de détection de badges (AC: #1)

  • Créer src/services/badgeService.ts
  • Créer la fonction checkAndUnlockBadges(userId)
  • Vérifier tous les critères de badges
  • Débloquer les badges atteints
  • Envoyer les notifications de succès

• Créer le composant de badge (AC: #1)

  • Créer src/components/badges/BadgeCard.tsx
  • Afficher: icône, nom, description
  • Ajouter animation ou effet visuel au débloquage
  • Utiliser shadcn/ui components (Card, Badge)
  • Design attrayant

• Créer la page de badges dans le profil (AC: #2)

  • Créer src/app/(dashboard)/profil/badges/page.tsx
  • Récupérer les badges débloqués de l'utilisateur
  • Afficher tous les badges dans une grille
  • Afficher les badges non débloqués en gris
  • Utiliser shadcn/ui components

• Créer le composant de partage de badge (AC: #2)

  • Créer src/components/badges/BadgeShare.tsx
  • Ajouter bouton "Partager" sur chaque badge
  • Créer le texte de partage (ex: "J'ai débloqué le badge X!")
  • Intégrer avec les réseaux sociaux
  • Utiliser shadcn/ui components

• Créer l'endpoint API pour les badges (AC: #1)

  • Créer GET /api/v1/badges
  • Retourner tous les badges disponibles
  • Indiquer les badges débloqués par l'utilisateur
  • Retourner les critères de débloquage
  • Documenter avec Swagger

• Créer l'endpoint API pour débloquer les badges (AC: #1)

  • Créer POST /api/v1/badges/check
  • Vérifier les critères de badges de l'utilisateur
  • Débloquer les nouveaux badges
  • Retourner les badges débloqués
  • Envoyer les notifications

• Tester le système de badges (Tous AC)

  • Tester le débloquage de badges
  • Tester l'affichage des badges dans le profil
  • Tester le partage de badges
  • Tester les notifications de succès
  • Tester sur mobile et desktop

Dev Notes

Stack Technique

• API: React Query
• State: Zustand
• UI: shadcn/ui + Tailwind CSS
• Database: Drizzle + SQLite

File Structure

src/
├── lib/
│   └── badges.ts
├── app/
│   └── (dashboard)/
│       └── profil/
│           └── badges/page.tsx
├── components/
│   └── badges/
│       ├── BadgeCard.tsx
│       └── BadgeShare.tsx
└── services/
    └── badgeService.ts

References

• [Source: _bmad-output/planning-artifacts/epics.md#Story-7.2]

Dev Agent Record

Agent Model Used

GLM-4.7

Completion Notes List

• Système de badges implémenté
• Détection automatique des badges fonctionnelle
• Page de badges créée
• Partage de badges fonctionnel

File List

• src/lib/badges.ts
• src/app/(dashboard)/profil/badges/page.tsx
• src/components/badges/BadgeCard.tsx
• src/components/badges/BadgeShare.tsx
• src/services/badgeService.ts