[FOSSOVERFLOW-25] Feat: Gamification System - Dynamic POTD with Admin selection, Streaks and Global Leaderboards section

[aviralsaxena16]

🚀 Feature Request: Gamification System & Unified Leaderboards

📝 Description

We are overhauling CanonForces with a complete Gamification System. This "Epic" issue combines the upgrades for the Problem of the Day (POTD) logic with a brand new Global Leaderboard page.

The goal is to drive user retention through Daily Streaks, Coin Rewards, and competitive Rankings.

Note: "Today's Solvers" list for POTD is already implemented. You do not need to rebuild that. Your focus is on the new logic (Streaks, Admin Tools, Weekly POTD stats) and the separate Global Leaderboard page.

🎯 Key Features & Requirements

Part 1: Dynamic POTD & Streak System

Location: /potd page

1. Admin Manual Selection (Override):

   • Current Logic: Randomly picks a problem.
   • New Logic: Create an Admin-only interface to manually set a Codeforces Problem ID/Link for a specific date.
   • Fallback: If no manual problem is set, the system defaults to the existing random picker.

2. Daily Streak Logic:

   • Goal: Gamify consistency.
   • Logic:
     • If a user solves the POTD today, increment their currentStreak by +1.
     • If a user misses a day (didn't solve yesterday's POTD), their streak resets to 0 (or 1, upon solving today's).
   • Display: Show the streak count prominently on the User Dashboard.

3. Coin Rewards:

   • Successfully solving the POTD should reward the user with Coins (e.g., +10 Coins).
   • Update the user's coinBalance in Firebase.

4. Local POTD Leaderboard (Weekly):

   • Create a small leaderboard specifically for the POTD section.
   • Metric: Users with the highest POTD streak or most POTD solves this week.
   • Reset: Logic to filter or reset this view weekly.

Part 2: Global Leaderboard Section

Location: New /leaderboard page

1. Dual Ranking Views:

   • Top Earners: Rank users by totalCoins (descending).
   • Top Solvers: Rank users by totalProblemsSolved (descending).
   • UI: Tabs/Toggle to switch between these two views.

2. User List UI:

   • Display Top 50 users.
   • Row Data: Rank (1, 2), Avatar, Username, Metric Value (Coins/Solved Count), and Streak Icon.

3. "My Rank" Sticky Footer:

   • If the logged-in user is not in the Top 50, show a sticky bar at the bottom displaying their specific rank and score relative to the leaders.

🛠️ Technical Implementation

• Stack: Next.js, Firebase (Firestore).
• Database Updates:
  • users collection: Add fields currentStreak, lastPotdDate, totalCoins.
  • potd_schedule collection: For Admin selections.
• Logic:
  • Reuse the existing checkSubmission helper for Codeforces verification.
  • Ensure Firestore indexes are created for orderBy('totalCoins', 'desc') and orderBy('totalProblemsSolved', 'desc').

✅ Acceptance Criteria

• Admin can manually set the POTD; system falls back to random if unset.
• User's streak increments on solve and resets on miss.
• User receives Coins for solving POTD.
• POTD Page: Shows a "Weekly Top Solvers" list.
• Global Leaderboard Page: Shows "Top Coin Earners" and "Top Problem Solvers" tabs.
• "My Rank" footer appears for users outside the top list.

🏷️ Labels

Foss Overflow backend frontend gamification database

[github-actions]

🚀 Thanks for Helping Improve CanonForces!

We'll review it as soon as possible. We truly appreciate your contributions to CanonForces! ⚔️✨

✅ Before working on a PR, please:

• Read our README.md, CONTRIBUTING.md.
• Wait until the issue is assigned to you before starting a PR.
• Discuss your approach if you're unsure, we're happy to help!

💬 Need quick support or want to discuss ideas?
Join our Discord 👉 CanonForces Discord

Thanks again, @aviralsaxena16! 🎉