134 lines
4.2 KiB
Markdown
134 lines
4.2 KiB
Markdown
# 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
|
|
|
|
- [x] Créer le système de badges (AC: #1)
|
|
- [x] Définir la liste des badges et leurs critères
|
|
- [x] Créer `src/lib/badges.ts` avec les définitions
|
|
- [x] Définir: nom, description, icône, critère de débloquage
|
|
- [x] Documenter tous les badges disponibles
|
|
- [x] Ajouter les icônes/emojis
|
|
|
|
- [x] Créer la table des badges dans la base de données (AC: #1)
|
|
- [x] Ajouter la table `badges` dans Drizzle
|
|
- [x] Ajouter la table `user_badges` pour les badges débloqués
|
|
- [x] Créer les colonnes: id, name, description, icon, criteria
|
|
- [x] Générer et appliquer les migrations
|
|
- [x] Créer les modèles SQLAlchemy correspondants
|
|
|
|
- [x] Créer le service de détection de badges (AC: #1)
|
|
- [x] Créer `src/services/badgeService.ts`
|
|
- [x] Créer la fonction `checkAndUnlockBadges(userId)`
|
|
- [x] Vérifier tous les critères de badges
|
|
- [x] Débloquer les badges atteints
|
|
- [x] Envoyer les notifications de succès
|
|
|
|
- [x] Créer le composant de badge (AC: #1)
|
|
- [x] Créer `src/components/badges/BadgeCard.tsx`
|
|
- [x] Afficher: icône, nom, description
|
|
- [x] Ajouter animation ou effet visuel au débloquage
|
|
- [x] Utiliser shadcn/ui components (Card, Badge)
|
|
- [x] Design attrayant
|
|
|
|
- [x] Créer la page de badges dans le profil (AC: #2)
|
|
- [x] Créer `src/app/(dashboard)/profil/badges/page.tsx`
|
|
- [x] Récupérer les badges débloqués de l'utilisateur
|
|
- [x] Afficher tous les badges dans une grille
|
|
- [x] Afficher les badges non débloqués en gris
|
|
- [x] Utiliser shadcn/ui components
|
|
|
|
- [x] Créer le composant de partage de badge (AC: #2)
|
|
- [x] Créer `src/components/badges/BadgeShare.tsx`
|
|
- [x] Ajouter bouton "Partager" sur chaque badge
|
|
- [x] Créer le texte de partage (ex: "J'ai débloqué le badge X!")
|
|
- [x] Intégrer avec les réseaux sociaux
|
|
- [x] Utiliser shadcn/ui components
|
|
|
|
- [x] Créer l'endpoint API pour les badges (AC: #1)
|
|
- [x] Créer `GET /api/v1/badges`
|
|
- [x] Retourner tous les badges disponibles
|
|
- [x] Indiquer les badges débloqués par l'utilisateur
|
|
- [x] Retourner les critères de débloquage
|
|
- [x] Documenter avec Swagger
|
|
|
|
- [x] Créer l'endpoint API pour débloquer les badges (AC: #1)
|
|
- [x] Créer `POST /api/v1/badges/check`
|
|
- [x] Vérifier les critères de badges de l'utilisateur
|
|
- [x] Débloquer les nouveaux badges
|
|
- [x] Retourner les badges débloqués
|
|
- [x] Envoyer les notifications
|
|
|
|
- [x] Tester le système de badges (Tous AC)
|
|
- [x] Tester le débloquage de badges
|
|
- [x] Tester l'affichage des badges dans le profil
|
|
- [x] Tester le partage de badges
|
|
- [x] Tester les notifications de succès
|
|
- [x] 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`
|