Skip to content

Phase 5: User Profile & Rankings 👤🏆

This phase focuses on user identity, gamification, and social competition.

🖼️ UI Reference

Profile{: .mobile-frame } Badges{: .mobile-frame } Leaderboard{: .mobile-frame }

👤 User Profile (profile_screen.dart)

A clean, card-based interface for managing the user's account.

Sections:

  • Header: Displays profile picture, name, and current badge/rank.
  • Stats Card: Quick view of "Current Points" vs. "Total Lifetime Earnings".
  • Menu Items: Navigation to Coupons, History, Achievements, and Help Center.

🏆 Leaderboard (rankings_screen.dart)

The competitive heart of the app.

Features:

  • Top 3 Podium: Visual highlight of the gold, silver, and bronze leaders.
  • User Row: Highlights the current user's position in the global list.
  • Filters: Switch between "Weekly" and "All-Time" rankings.

🎖️ Badges System

A visual reward system triggered by Firestore milestones.

  • Storage: Badges are stored as an array of IDs in the user document.
  • Logic: Each time a transaction is submitted, the app (or Cloud Function) checks if a new milestone (e.g., 50 items) has been reached.