Skip to content

feat: add badge SVGs for user achievements

Rushika Sritha Maddula requested to merge feat/badges into develop

Description:

Implemented a badge system for the leaderboard using SVG assets to visually represent user rankings and achievements. This enhancement improves the UI by providing clear visual indicators for top contributors and active users.

Type of Change:

  • Bug Fix
  • Feature Development
  • Documentation

Changes Made:

  • Added SVG badge assets (Gold, Silver, Bronze, etc.)
  • Created reusable Badge component
  • Integrated badges into leaderboard UI
  • Implemented logic to assign badges based on user rank
  • Ensured responsive display across devices

Testing:

  • Tested on desktop
  • Tested on mobile
  • Tested in different browsers

Screenshots (if applicable):

Add screenshots showing badges in leaderboard UI (top users with badges).

Video Demo:

Add demo link showing badge rendering and leaderboard functionality.

Link to code walkthrough explaining implementation.

Checklist:

  • Code follows project style guidelines
  • Self-review completed
  • No console errors
  • TypeScript types are correct

Additional Notes:

  • SVG format is used for better scalability and performance
  • Badge logic can be extended for future achievements (streaks, milestones, etc.)

Future Improvements (Optional):

  • Add animated badges for top performers
  • Introduce achievement-based badges (streaks, contributions)
  • Backend-driven badge assignment

Merge request reports