Ticket Contents
Description
The leaderboard table on the dashboard shows users and their rankings but does not display any pagination information such as total number of users on the leaderboard, current page number, total number of pages or a next and previous page button. A user viewing the leaderboard has no way of knowing how many total users are on the leaderboard or how many pages of results exist. This makes the leaderboard feel incomplete and leaves users with no way to navigate through the full list efficiently.
Goals
Goals
-Help users understand how many total users are on the leaderboard
-Allow users to navigate through all rankings without endless scrolling
-Help users find their own rank quickly and easily
-Make the leaderboard feel complete and professional
-Improve overall user experience on the leaderboard page
-Encourage healthy competition by showing users the full scale of the community
Expected Outcome
-Users can see the total number of people on the leaderboard at a glance
-Users can navigate through all pages of the leaderboard using next and previous buttons
-Users can see which page they are currently on and how many total pages exist
-Users can find their own rank quickly without having to scroll endlessly through the list
-The leaderboard feels complete and professional with all ranking information clearly visible
-New users feel motivated to participate when they can see the full scale of the community they are competing in
-The leaderboard page looks and works consistently with industry standard leaderboard designs seen in other platforms
Acceptance Criteria
-Total number of users displayed clearly on the page
-Current page number and total pages shown on the table
-Next and previous page buttons visible and working correctly
-Correct rankings load when navigating between pages
-Message like "Showing 4 to 10 of 500 users" visible above or below the table
-Works correctly on both Monthly and Overall tabs
-Works correctly when switching between filter options
-Works on both desktop and mobile
-Pagination controls hidden gracefully if only one page exists
-Backend API verified to return correct total count and pagination details
Implementation Details
Backend:
Update the leaderboard API in api/dashboard/ to accept page and page_size as query parameters
Use Django REST Framework's built in PageNumberPagination class to handle pagination automatically
Return total_count, current_page, total_pages and results in every API response
Frontend:
Read pagination details from the API response and display them on the leaderboard page
Build a simple pagination component with next and previous buttons using React.js
Display a message like "Showing 4 to 10 of 500 users" above or below the table
Update the API call to include the current page number whenever the user navigates to a new page
Technologies Used:
Python and Django REST Framework — to add pagination support using PageNumberPagination
React.js — to build the pagination component and handle page navigation
Tailwind CSS — to style the pagination controls and user count message
Testing:
Test next and previous buttons load correct rankings
Test pagination works on both Monthly and Overall tabs
Test pagination works with all filter options
Test on both desktop and mobile screens
Verify API returns correct total count and page details
Mockups/Wireframes
[
leaderboard_pagination_wireframe.html
](url)
Product Name
mulearn
Domain
No response
Tech Skills Needed
Python, Tailwind CSS, JavaScript
Mentor(s)
.
Complexity
Low
Category
Backend
Ticket Contents
Description
The leaderboard table on the dashboard shows users and their rankings but does not display any pagination information such as total number of users on the leaderboard, current page number, total number of pages or a next and previous page button. A user viewing the leaderboard has no way of knowing how many total users are on the leaderboard or how many pages of results exist. This makes the leaderboard feel incomplete and leaves users with no way to navigate through the full list efficiently.
Goals
Goals
-Help users understand how many total users are on the leaderboard
-Allow users to navigate through all rankings without endless scrolling
-Help users find their own rank quickly and easily
-Make the leaderboard feel complete and professional
-Improve overall user experience on the leaderboard page
-Encourage healthy competition by showing users the full scale of the community
Expected Outcome
-Users can see the total number of people on the leaderboard at a glance
-Users can navigate through all pages of the leaderboard using next and previous buttons
-Users can see which page they are currently on and how many total pages exist
-Users can find their own rank quickly without having to scroll endlessly through the list
-The leaderboard feels complete and professional with all ranking information clearly visible
-New users feel motivated to participate when they can see the full scale of the community they are competing in
-The leaderboard page looks and works consistently with industry standard leaderboard designs seen in other platforms
Acceptance Criteria
-Total number of users displayed clearly on the page
-Current page number and total pages shown on the table
-Next and previous page buttons visible and working correctly
-Correct rankings load when navigating between pages
-Message like "Showing 4 to 10 of 500 users" visible above or below the table
-Works correctly on both Monthly and Overall tabs
-Works correctly when switching between filter options
-Works on both desktop and mobile
-Pagination controls hidden gracefully if only one page exists
-Backend API verified to return correct total count and pagination details
Implementation Details
Backend:
Update the leaderboard API in api/dashboard/ to accept page and page_size as query parameters
Use Django REST Framework's built in PageNumberPagination class to handle pagination automatically
Return total_count, current_page, total_pages and results in every API response
Frontend:
Read pagination details from the API response and display them on the leaderboard page
Build a simple pagination component with next and previous buttons using React.js
Display a message like "Showing 4 to 10 of 500 users" above or below the table
Update the API call to include the current page number whenever the user navigates to a new page
Technologies Used:
Python and Django REST Framework — to add pagination support using PageNumberPagination
React.js — to build the pagination component and handle page navigation
Tailwind CSS — to style the pagination controls and user count message
Testing:
Test next and previous buttons load correct rankings
Test pagination works on both Monthly and Overall tabs
Test pagination works with all filter options
Test on both desktop and mobile screens
Verify API returns correct total count and page details
Mockups/Wireframes
[
leaderboard_pagination_wireframe.html
](url)
Product Name
mulearn
Domain
No response
Tech Skills Needed
Python, Tailwind CSS, JavaScript
Mentor(s)
.
Complexity
Low
Category
Backend