Implement Client-Side Leaderboard Sorting & Ranking System (Dynamic & Optimized)

[Disumakadiya]

Team 149

Description

This PR implements a comprehensive, client-side leaderboard ranking system that dynamically calculates user rankings based on performance metrics. The system includes intelligent tie-breaking logic, performance optimization through memoization, and a complete test suite to validate all ranking scenarios. The leaderboard no longer relies on pre-calculated ranks and instead computes them in real-time using a reusable ranking engine.

Related Issue

closes #103

Type of Change

• New feature (non-breaking change which adds functionality)
• Performance improvement
• Testing infrastructure

Changes Made

Core Ranking Engine (src/utils/leaderboardEngine.ts)

• Dynamic Sorting: Implemented sorting algorithm based on:
  • Primary: Current Streak (higher is better)
  • Secondary: Total Problems Solved (higher is better)
  • Tertiary: Longest Streak (higher is better)
  • Fallback: Alphabetical order (stable sorting)
• Rank Calculation: Standard competition ranking with proper tie handling
• Utility Functions: 14 helper functions including search, pagination, rank changes, context view, and data validation
• Immutable Operations: All functions return new arrays without mutating originals

React Integration (src/hooks/useLeaderboard.ts)

• Custom Hook: useLeaderboard with configurable options
• Memoized Computations: Uses useMemo for optimal performance
• Features: Search/filter, pagination, rank change tracking, user position lookup
• Three Variants: Basic, simple, and advanced hook configurations
• Reactive Updates: Automatically recalculates when data changes

Test Infrastructure

• Visual Test Page (src/pages/LeaderboardTest.tsx): Interactive UI for running tests
• Test Scenarios (src/utils/leaderboardEngine.test.examples.ts): 11 comprehensive tests covering:
  • Unique ranks
  • Tie-breaking on primary, secondary, and tertiary metrics
  • Identical users (alphabetical fallback)
  • Empty leaderboard
  • Large dataset performance (100+ users in <5ms)
  • Rank change detection
  • Search/filter functionality
  • Pagination
  • User context view
  • Data validation and sanitization

UI Updates

• Leaderboard Page (src/pages/Leaderboard.tsx):
  • Integrated useLeaderboard hook
  • Uses mock data for frontend-only demonstration
  • Made publicly accessible (no login required)
  • Displays Top 3 podium, statistics, and full leaderboard table
• Routes (src/App.tsx):
  • Added /leaderboard route (public)
  • Added /leaderboard-test route (public)

Type Definitions

• Updated Types (src/types/index.ts): Added longestStreak?: number to LeaderboardEntry
• New Types: RankableUser, RankedEntry exported from engine

Mock Data

• Updated (src/data/mockData.ts): Added longestStreak field to all leaderboard entries

Screenshots (if applicable)

Screenshots and visual documentation available in issue walkthrough:

• Leaderboard page with Top 3 podium
• Statistics summary cards
• Full ranked leaderboard table
• Test page with all scenarios passing
• Performance metrics showing <5ms ranking time

Testing

• All 11 test scenarios pass
• Tested unique ranks calculation
• Tested tie-breaking logic (all levels)
• Tested empty leaderboard handling
• Performance tested with 150+ users
• Tested rank change detection
• Tested search/filter functionality
• Tested pagination logic
• Tested data validation
• Tested on Desktop (Chrome/Firefox)
• No console errors or warnings
• Code builds successfully

Checklist

• My code follows the project's code style guidelines
• I have performed a self-review of my code
• I have commented my code where necessary (JSDoc for all functions)
• My changes generate no new warnings
• I have tested my changes thoroughly
• All TypeScript types are properly defined
• Tailwind CSS classes are used appropriately
• Component is responsive across different screen sizes
• I have read and followed the CONTRIBUTING.md guidelines
• Memoization is properly implemented for performance
• No array mutations (immutable operations)
• Stable sorting algorithms used

Additional Notes

• System is fully frontend-based and does not require backend integration
• Performance optimized for 100+ users with O(n log n) complexity
• Extensible architecture supports future features (filters, real-time updates, virtual scrolling)
• All ranking logic is centralized and reusable across the application
• Test page available at /leaderboard-test for validation
• Foundation built for competitive features like achievements and rank history

Performance Benchmarks

• 10 users: <1ms
• 50 users: <2ms
• 100 users: <5ms
• 500 users: <20ms
• 1000 users: <50ms

[krishnapaljadeja]

✅ PR Validation Passed

Hey @Disumakadiya! Your PR looks good. Here is what we found:

Field	Value
Team Number	Team 149
Linked Issue	closes #103

A maintainer will review your PR within 24–48 hours. Stay responsive to feedback!

GDG CHARUSAT Open Source Contri Sprintathon

[aaleya5]

please resolve conflicts
@Disumakadiya

[Disumakadiya]

@aaleya5
The conflicts have been solved.
Please look into it.

[Disumakadiya]

@aaleya5
The conflicts have been solved.
Please look into it.

[aaleya5]

hey @Disumakadiya please pull from main and then run your project. there are too many errors.

[Disumakadiya]

@aaleya5 i have checked and solved the conflict errors.please check it

[aaleya5]

@Disumakadiya take a pull from main before merging your code into it. and then test. your work is too far away from current main.

[Disumakadiya]

@aaleya5 Please see from my side i have fetched all main code its up to date

[aaleya5]

atleast show me the screenshot of when you run the site. then we will know. @Disumakadiya

[Disumakadiya]

@aaleya5 please see

[krishnapaljadeja]

🎉 PR Merged — Points Awarded!

Congratulations @Disumakadiya! Your contribution has been merged.

Field	Value
Repo	Code_duel_frontend
Team	Team 149
Contributor	@Disumakadiya
Level	Level 2 — Intermediate
Points Awarded	20 pts
Source	Linked Issue #103

The central leaderboard has been updated. Keep contributing!

GDG CHARUSAT Open Source Contri Sprintathon