Dynamic Leaderboard System

Live home page showing players, top score, and current Legend.
Top 10 live leaderboard with auto badges, score velocity arrows, and percentile ranks.
Add any player with a username and score which instantly updates the live leaderboard.
Remove any player by username, ranks and badges auto-recalculate instantly.
Advanced statistics with mean, median, std deviation, quartiles, and live score distribution chart.
Real-time API performance monitoring. average response time tracked per endpoint.
Full submission history with live timestamps and score velocity tracking per player.
Both frontend and backend running as separate Docker containers via docker-compose.
docker-compose build, leaderboard-app-frontend and backend images built successfully.
Full system architecture: React frontend, Node.js backend, MongoDB Atlas, all containerized with Docker.

Team Name: 3 Idiots

Inspiration

Leaderboards play an essential role on any competitive platform whether gaming or educational. It was necessary to create more than just a simple scoreboard but a whole mechanism for keeping track of the momentum and showing players statistics and velocity.

What it does

Dynamic Leaderboard System is a full-stack REST API application which provides the following functionality for users:

Ability to submit and update scores dynamically
A live Top 10 leaderboard with automatically awarded badges (Legend, Elite, Top 10)
Velocity tracking - the speed of rising or falling of the player
Access to various statistics (mean, median, variance, quartiles, IQR, score distribution)
Monitoring of the performance of the API with the help of average endpoint response times
Access to the full history of submissions sorted by time

How we built it

Frontend: React + Tailwind CSS + Framer Motion for smooth animations, React Query for auto-refresh every 5 seconds
Backend: Node.js + Express.js REST API with 6 endpoints (/add, /remove, /leaderboard, /info, /performance, /history)
Database: MongoDB Atlas (cloud) with Mongoose ODM for schema modeling and bulk rank recalculation
API Docs: Swagger UI auto-served at /api-docs
Containerization: Docker + Docker Compose for reproducible deployment
Performance Tracking: Custom middleware that tracks average response time per endpoint in real-time

Problems faced

Updating rank based on score in an atomic manner without any performance impact
Handling different scenarios while validating score (handling negative score, “-0” score, non-finite number, etc.)
Calculation of badges for the ranks calculated live using the MongoDB bulkWrite operation
Configuring Nginx in the Docker container to deliver React app build

Features we are happy we implemented

Fully fledged REST API with 6 endpoints built in 24 hours
Highly sophisticated algorithms to calculate score velocity and percentile (beyond minimum specs)
Leaderboard with real-time ranking update every 5 seconds with visual effects
Entirely containerized application that required us to run just docker-compose up --build
Documented API using Swagger UI available at /api-docs

Lessons learned from Dynamic Leaderboard System project

Design and deployment of production-level REST API with OpenAPI 3.0 specification
Bulk update functionality with MongoDB for mass-scale data changes
Docker multi-stage building for React + Nginx performance improvement
Implementation of real-time patterns via React Query with defined polling time
Importance of correct input validation in API design