Phase 3: Gamification & Achievement System

[tkkr6895]

Description

Implement a badge-based achievement system with observation streaks, milestone badges, personal stats, and toast notifications to drive sustained community engagement during pilot deployments.

Implementation Tasks

• 3.3.1 — Create AchievementService.ts — define badge registry, check unlock conditions, persist achievements (src/services/AchievementService.ts)
• 3.3.2 — Define badge set:
  • First Observation
  • 10 / 50 / 100 Observations
  • 10 Species Recorded
  • Endemic Spotter (recorded an endemic species)
  • Seasonal Observer (observations across all 4 seasons)
  • Protocol Master (completed all field protocols)
  • Multi-Layer (observation enriched with 3+ data sources)
  • 7-Day / 30-Day Streak
    (src/services/AchievementService.ts)
• 3.3.3 — Create AchievementsPanel.tsx — badge grid (earned vs locked), streak counter, personal stats dashboard (src/components/gamification/AchievementsPanel.tsx)
• 3.3.4 — Create StreakBadge.tsx — compact badge in Header showing active observation streak count (src/components/gamification/StreakBadge.tsx)
• 3.3.5 — Wire achievement checks after each observation save + toast notification on badge unlock (src/App.tsx)
• 3.3.6 — Add achievements table to Dexie schema (v3 migration) (src/db/database.ts)

Acceptance Criteria

• All defined badges can be unlocked by meeting their conditions
• Achievement check runs automatically after each observation save
• Toast notification appears when a new badge is unlocked (with badge icon and name)
• Streak counter accurately tracks consecutive calendar days with observations
• Streak resets correctly when a day is missed
• AchievementsPanel displays all badges — earned badges highlighted, locked badges greyed out
• Personal stats show: total observations, species observed, area covered, data quality score
• StreakBadge renders in Header with current streak count (hidden when streak is 0)
• Achievements persist across app sessions via IndexedDB
• Dexie v3 migration creates achievements table

Dependencies

• Coordinate v3 migration with Full Authentication issue (3.2.7) to avoid conflicting schema versions
• Species Database (2.1) — for species-related badges (Endemic Spotter, 10 Species)
• SyncEngine (1.4, ✅ complete) — for Multi-Layer badge (enrichment source count)

Relevant Files

• src/services/AchievementService.ts (new)
• src/components/gamification/AchievementsPanel.tsx (new)
• src/components/gamification/StreakBadge.tsx (new)
• src/components/Header.tsx — StreakBadge placement
• src/db/database.ts — v3 migration
• src/App.tsx — achievement check wiring