chartbastan/_bmad-output/implementation-artifacts/7-1-implémenter-le-système-de-classement-top-100.md

Story 7.1: Implémenter le système de classement (Top 100)

Status: review

Story

As a utilisateur, I want voir le classement des meilleurs utilisateurs, So que je peux me comparer avec la communauté.

Acceptance Criteria

Given plusieurs utilisateurs ont consulté des prédictions When j'accède au classement Then je vois le Top 100 des utilisateurs And le classement est basé sur le taux de précision et le nombre de prédictions consultées And mon rang personnel est mis en évidence si je suis dans le Top 100

Given le classement est affiché When je consulte la liste Then chaque utilisateur montre : rang, pseudo (ou anonyme), précision, nombre de prédictions And le design est attrayant et encourage la compétition saine

Tasks / Subtasks

• Créer la page de classement (AC: #1)

  • Créer src/app/(dashboard)/classement/page.tsx
  • Récupérer le Top 100 depuis l'API
  • Afficher la liste des utilisateurs classés
  • Utiliser shadcn/ui components (Card, Table, Badge)
  • Design attrayant et encourageant

• Créer le composant de classement item (AC: #2)

  • Créer src/components/leaderboard/LeaderboardItem.tsx
  • Afficher: rang, pseudo, précision, nombre de prédictions
  • Ajouter icône de rang (médaille pour top 3)
  • Utiliser shadcn/ui components
  • Design responsive

• Créer le composant de médaille (AC: #2)

  • Créer src/components/leaderboard/RankBadge.tsx
  • Afficher médaille pour rang 1, 2, 3
  • Utiliser des icônes ou emojis (🥇, 🥈, 🥉)
  • Ajouter animation ou effet visuel
  • Utiliser shadcn/ui Badge

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

  • Créer src/components/leaderboard/PersonalRank.tsx
  • Récupérer le rang de l'utilisateur connecté
  • Afficher le rang personnel en évidence
  • Afficher message personnalisé (ex: "Tu es 42ème!")
  • Utiliser shadcn/ui components

• Créer l'endpoint API pour le classement (AC: #1)

  • Créer GET /api/v1/leaderboard
  • Calculer le classement des utilisateurs
  • Filtrer Top 100 par taux de précision
  • Inclure le nombre de prédictions comme critère secondaire
  • Retourner la liste classée

• Créer le système de calcul du classement (AC: #1, #2)

  • Créer src/services/leaderboardService.ts
  • Calculer le taux de précision pour chaque utilisateur
  • Classer les utilisateurs par taux de précision
  • Utiliser le nombre de prédictions comme tie-breaker
  • Ajouter les données de l'utilisateur connecté

• Tester le classement complet (Tous AC)

  • Tester l'affichage du Top 100
  • Tester le calcul du classement
  • Tester l'affichage du rang personnel
  • Tester le design attrayant
  • Tester sur mobile et desktop

Dev Notes

Stack Technique

• API: React Query
• State: Zustand
• UI: shadcn/ui + Tailwind CSS
• Calculs: JavaScript/TypeScript

File Structure

src/
├── app/
│   └── (dashboard)/
│       └── classement/page.tsx
├── components/
│   └── leaderboard/
│       ├── LeaderboardItem.tsx
│       ├── RankBadge.tsx
│       └── PersonalRank.tsx
└── services/
    └── leaderboardService.ts

References

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

Dev Agent Record

Agent Model Used

GLM-4.7

Completion Notes List

• Système de classement Top 100 implémenté
• Calcul de classement fonctionnel
• Rang personnel affiché en évidence
• Design attrayant créé
• Composants UI créés avec shadcn/ui
• Tests unitaires écrits et passant
• Endpoint API FastAPI créé
• Service de calcul backend implémenté

File List

Frontend (Next.js):

• src/app/(dashboard)/classement/page.tsx
• src/components/leaderboard/LeaderboardItem.tsx
• src/components/leaderboard/RankBadge.tsx
• src/components/leaderboard/PersonalRank.tsx
• src/components/leaderboard/__tests__/RankBadge.test.tsx
• src/components/leaderboard/__tests__/LeaderboardItem.test.tsx
• src/components/leaderboard/__tests__/PersonalRank.test.tsx
• src/components/ui/skeleton.tsx
• src/services/leaderboardService.ts
• src/services/__tests__/leaderboardService.test.ts
• src/hooks/useUser.ts

Backend (FastAPI):

• backend/app/schemas/leaderboard.py
• backend/app/services/leaderboard_service.py
• backend/app/api/v1/leaderboard.py
• backend/app/main.py (modifié pour inclure le routeur leaderboard)