Skip to content

feat: fetch and dynamically render local leaderboard ranks in profile page#319

Open
Yashaswini-K-P wants to merge 1 commit into
codepvg:mainfrom
Yashaswini-K-P:feat/frontend-leaderboard-banner
Open

feat: fetch and dynamically render local leaderboard ranks in profile page#319
Yashaswini-K-P wants to merge 1 commit into
codepvg:mainfrom
Yashaswini-K-P:feat/frontend-leaderboard-banner

Conversation

@Yashaswini-K-P

@Yashaswini-K-P Yashaswini-K-P commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

Description

This PR connects the frontend user profile banner to the newly exposed leaderboard rankings API data. It reads the local rankings (Overall, Monthly, Weekly, and Daily) and updates the dashboard UI dynamically on page load using a standalone, self-contained architecture consistent with other widgets like badges and contests.

Related to #195

Changes Made

  • HTML Update: Added unique target IDs (overall-item, overall-rank, etc.) to the rankings layout structure inside user.html.
  • New Feature Script: Created /js/user/ranks.js to extract the username from the URL path, query the user profile API endpoint, and populate the banner.
  • Robust Rendering: Formatted the values cleanly as raw numbers and implemented dynamic fallback checking (hiding items/showing -- if the rank is 0 or missing).

Type of Change

  • Bug fix
  • New feature
  • UI/Visual update
  • Documentation update
  • Refactor

Testing

  • Tested locally
  • Tested on mobile viewport (if applicable)
  • No console errors introduced

Checklist

  • My code follows the project's coding style
  • I have formatted my code locally by running npx prettier --write . before submitting
  • I am submitting my PR from a dedicated feature/* branch, not the main branch
  • I have performed a self-review of my code
  • My changes generate no new warnings or errors
  • I have updated documentation if required
  • I have linked the relevant issue

Screenshots / Screen Recording

@github-actions

Copy link
Copy Markdown
Contributor

Thank you for submitting a pull request.

Please ensure your changes comply with the project's contribution guidelines and that all workflow checks pass successfully.

Formatting and Branching

  • Please confirm you have formatted your code locally using npx prettier --write . before requesting a review.
  • Ensure this PR is made from a feature/* branch and not main.

Note: This project is currently maintained by a solo maintainer, so reviews and responses may sometimes take a little time. Thanks for your patience.

@jagdish-15

Copy link
Copy Markdown
Collaborator

Are you planning to open a follow-up PR to display the rank change indicators alongside the ranks as well?

We already expose those through the /api/user/:username endpoint as part of #242. If so, feel free to edit the description of this PR so it doesn't close the issue, and then open another PR under the same issue for the rank change indicators.

@Yashaswini-K-P

Copy link
Copy Markdown
Contributor Author

"Hi @jagdish-15! I'd prefer to keep this PR focused purely on rendering the base ranks as it's already tested and standalone. I will gladly open a follow-up PR right after this one gets merged to implement the rank change indicators"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants