ocean-cleanup/src/pages/USER_PROFILE_IMPLEMENTATION.md

User Profile Page Implementation

Overview

The User Profile Page displays comprehensive user statistics, contributions, and activity history. It provides both public profile viewing and personal profile editing capabilities.

Features Implemented

1. User Statistics Display

• Reports Submitted: Total count of litter reports submitted by the user
• Events Attended: Total count of cleanup events the user has participated in
• Impact Score: Calculated score based on user contributions (reports × 10 + events × 20)

2. Profile Information

• User avatar, name, username, and email
• Editable profile fields (first name, last name, username) for own profile
• Edit/Save/Cancel functionality for profile updates

3. Personal Contribution Map

• Interactive Leaflet map showing all report locations submitted by the user
• Markers for each report with popup details (litter type, date)
• Automatically centers on user's first report location

4. Activity Timeline

• Chronological list of all user activities
• Activity types:
  • Report submissions
  • Event creation
  • Event attendance
  • Event completion
• Each activity shows title, description, location, and timestamp
• Visual icons for different activity types

5. Tabbed Interface

Four tabs for organizing profile content:

• Overview: Statistics, contribution map, and recent activity
• Reports: Grid view of all submitted reports with photos
• Events: List of all events (created and attended) with details
• Activity: Full activity timeline

Routes

• /profile/:userId - View user profile (protected route)

Components

UserProfilePage (src/pages/UserProfilePage.tsx)

Main profile page component with:

• Profile header with avatar and statistics
• Tabbed navigation
• Contribution map
• Reports grid
• Events list
• Activity timeline
• Profile editing functionality

UserProfile (src/components/auth/UserProfile.tsx)

Updated header component that now links to the user's profile page when clicked.

Services

userService (src/services/userService.ts)

API service for user-related operations:

• getProfile(userId) - Fetch user profile with statistics
• updateProfile(userId, data) - Update user profile information
• getUserReports(userId) - Get all reports by user
• getUserEvents(userId) - Get all events (created and attended)
• getUserActivity(userId) - Get activity timeline

Types

UserProfile

interface UserProfile extends User {
  reportCount: number;
  eventCount: number;
}

UserActivity

interface UserActivity {
  id: string;
  type: 'report' | 'event_created' | 'event_attended' | 'event_completed';
  timestamp: Date;
  title: string;
  description?: string;
  location?: {
    latitude: number;
    longitude: number;
    locationName?: string;
  };
}

UpdateProfileDTO

interface UpdateProfileDTO {
  firstName?: string;
  lastName?: string;
  username?: string;
  notificationEmail?: boolean;
  notificationInApp?: boolean;
}

Backend Requirements

The following API endpoints need to be implemented on the backend:

1. GET /api/users/:id - Get user profile with statistics
2. PATCH /api/users/:id - Update user profile
3. GET /api/users/:id/reports - Get user's reports
4. GET /api/users/:id/events - Get user's events
5. GET /api/users/:id/activity - Get user's activity timeline

Impact Score Calculation

The impact score is calculated as:

Impact Score = (Number of Reports × 10) + (Number of Events × 20)

This gives more weight to event participation, encouraging community engagement.

Permissions

• Any authenticated user can view any profile
• Only the profile owner can edit their own profile
• Edit button only appears when viewing own profile

Mobile Responsiveness

• Responsive grid layouts for statistics and reports
• Collapsible navigation for mobile devices
• Touch-friendly map controls
• Optimized for screens from 320px to desktop

Future Enhancements

• Achievement badges based on milestones
• Leaderboard integration
• Social features (follow users, share profiles)
• Export personal data
• Profile privacy settings
• Custom profile themes