[feature]: Dynamic User Profile, Avatar Upload & Game Stats UI

[JavadJan]

Parsed project fields

[Importance:] Main
[Duration:] 3 Days
{P1}

Summary

Implement dynamic user profile functionality including avatar upload, dynamic profile fields (level, XP, achievements), and the frontend structure for game statistics and match history using mock data. This prepares the user profile system for integration with the game server later.

Description

• Add avatar upload (with preview as a bonus), validation, and default fallback.
• Make profile page fully dynamic (username, level, XP, achievements).
• Integrate BFF stats endpoints for user statistics.
• Build match history UI using mock data, structured for easy future API integration.
• Ensure the profile page loads data dynamically for any user ID.

Intended area

Backend

Problem / goal

Dynamic User Profile, Avatar Upload & Game Stats UI

Scope

1. Stats_Service
2. frontend/home
3. frontend/profile
4. bff

Acceptance criteria

Acceptance Criteria

1. Profile page loads dynamic data from BFF.
2. Avatar upload works and updates immediately.
3. Default avatar shown if none exists.
4. Stats section displays dynamic stats + derived stats.
5. Match history component exists and renders mock data.
6. Component is ready for real API integration.

Technical notes

Technical Notes

• Use existing BFF StatsService endpoints.
• Use Zod schemas for validation.
• Mock match history data in a separate file.
• Write frontend component structure for stats

Test plan

Checklist

• Dynamic profile fields implemented
• Avatar upload implemented
• Stats section integrated
• Match history component created
• Mock data structured for easy replacement