Paul Bailey
8448d001d2
- Created badge utility with 5 levels (Beginner, Intermediate, Advanced, Expert, Master) - Badge thresholds: 0, 50, 100, 150, 200 points - Implemented BadgeDisplay component with progress tracking - Enhanced user profile statistics boxes with centered layout, gradients, and icons - Added badge progress section showing advancement to next level - Badge images reference existing assets in /public folder
120 lines
3.8 KiB
Markdown
120 lines
3.8 KiB
Markdown
# 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
|
||
```typescript
|
||
<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
|