ocean-cleanup/BADGE_SYSTEM_IMPLEMENTATION.md

Badge System Implementation

Overview

Implemented a badge achievement system that rewards users based on their impact score. Users earn badges as they contribute to the platform through reports and event participation.

Badge Levels

Badge	Min Score	Max Score	Image	Description
Beginner	0	49	/Beginner.png	Starting your environmental journey
Intermediate	50	99	/Intermediate.png	Making a real difference
Advanced	100	149	/Advanced.png	Dedicated environmental champion
Expert	150	199	/Expert.png	Leading the cleanup movement
Master	200+	∞	/Master.png	Elite environmental guardian

Impact Score Calculation

The impact score is calculated based on user activities:

• Reports submitted: 10 points each
• Events attended: 20 points each
• Events organized (completed): 50 points each

Formula: (reports × 10) + (events attended × 20) + (events organized × 50)

Implementation Details

Files Created

1. src/utils/badges.ts

   • Badge type definitions and constants
   • getBadgeForScore() - Returns badge for a given score
   • getNextBadgeProgress() - Calculates progress to next badge level

2. src/components/auth/BadgeDisplay.tsx

   • Reusable badge display component
   • Shows current badge with image and description
   • Optional progress bar to next badge level
   • Three size variants: small, medium, large

Files Modified

1. src/pages/UserProfilePage.tsx

   • Added badge display in statistics section (small size)
   • Added dedicated badge progress section (large size with progress bar)
   • Shows current badge, description, and progress to next level

2. src/components/auth/index.ts

   • Exported BadgeDisplay component

Features

Badge Display Component

<BadgeDisplay 
  impactScore={score} 
  showProgress={true} 
  size="large" 
/>

Props:

• impactScore (number, required) - User's current impact score
• showProgress (boolean, optional) - Show progress bar to next badge
• size ('small' | 'medium' | 'large', optional) - Badge image size

Progress Tracking

• Visual progress bar showing advancement to next badge
• Points remaining to next level
• Congratulatory message for Master level achievers

Visual Design

• Color-coded badges with gradient backgrounds
• Responsive layout that works on all screen sizes
• Smooth animations for progress bars
• Badge images from /public folder

User Profile Integration

The badge system is integrated into the user profile page in two locations:

1. Statistics Grid - Small badge display alongside key metrics
2. Achievement Section - Large badge with full progress details

Badge Images

Badge images are stored in the /public folder:

• Beginner.png
• Intermediate.png
• Advanced.png
• Expert.png
• Master.png

These images are already present in the project and are referenced by the badge system.

Future Enhancements

Potential improvements for the badge system:

• Badge unlock notifications
• Badge showcase on user profile
• Special badges for milestones (e.g., "First Report", "Event Organizer")
• Leaderboard showing top badge holders
• Social sharing of badge achievements
• Badge history timeline

Testing

To test the badge system:

1. Navigate to user profile page
2. View current badge based on impact score
3. Check progress bar showing advancement to next level
4. Verify badge images load correctly
5. Test responsive design on different screen sizes

Notes

• Badge levels are automatically calculated based on impact score
• Progress is shown as a percentage and points remaining
• Master badge holders see a special "Maximum Level Achieved" message
• The system is fully type-safe with TypeScript