Contributor Reputation Dashboards

[Benjtalkshow]

Feature: User Reputation Dashboard (XP, Skills & Contributions)

Overview

To enhance user profiles and showcase contributions, we should introduce a visual reputation dashboard. This dashboard will display:

• Contribution history (GitHub-style heatmap)
• XP (experience points) earned
• A radar chart representing technical skills

This feature will improve user engagement and provide a clearer representation of user activity and expertise.

---

Goals

• Visualize user contributions over time
• Display accumulated XP/reputation metrics
• Showcase technical skill distribution
• Enhance profile page experience

---

Implementation Details

1. Extend User Type

Modify: types/user.ts

• Add new fields to the User type:
  • xp (number)
  • skills (array or mapped object with skill levels)
  • contributionHistory (date-based activity data)
• Ensure type safety and compatibility with API responses

---

2. Update Profile Page

Modify: app/profile/[username]/page.tsx

• Add a new "Reputation Dashboard" section
• Integrate:
  • Skill radar chart
  • Contribution heatmap
  • XP display (e.g., card or summary widget)
• Ensure layout is responsive and visually balanced

---

3. Create Skill Radar Chart

Create: components/profile/skill-radar-chart.tsx

• Use Recharts to render a radar chart
• Map user skills to chart axes
• Ensure dynamic rendering based on user data
• Handle empty or partial data gracefully

---

4. Create Contribution Heatmap

Create: components/profile/contribution-heatmap.tsx

• Build a GitHub-style activity heatmap
• Display contributions by date
• Use color intensity to represent activity level
• Ensure proper date handling and responsiveness

---

Files Affected

Modified

• types/user.ts
• app/profile/[username]/page.tsx

Created

• components/profile/skill-radar-chart.tsx
• components/profile/contribution-heatmap.tsx

---

Acceptance Criteria

• Profile page includes a visible reputation dashboard
• XP is displayed correctly
• Skill radar chart renders accurately with user data
• Contribution heatmap reflects activity history
• UI is responsive and visually consistent
• No regressions in existing profile functionality

---

Testing Notes

• Test with users having varying levels of activity
• Validate correct rendering of skill data
• Ensure heatmap correctly maps dates and activity intensity
• Check responsiveness across screen sizes

---

Additional Notes

• Consider normalizing skill values (e.g., 0–100 scale) for chart consistency
• Optimize rendering for large contribution datasets
• Allow future extensibility for additional metrics (e.g., badges, streaks)
• Optionally cache computed data for performance improvements

[linear]

BOU-146

[coderabbitai]

🔗 Related PRs

#62 - feat: introduce leaderboard page with filtering, table, and user rank [merged]
#63 - feat: Add mini-leaderboard and user rank badge components [merged]
#67 - feat: Implement a comprehensive reputation system [merged]
#90 - feat:implement sponsor review dashboard. [merged]
#110 - feat: Implement Earnings & Payout Tracking [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[Ekene001]

@Ekene001 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi, I’d like to work on this.

I can have the XP metrics, skill radar, and activity heatmap ready in 24 hours. I have experience in building data-heavy profile sections and working with Recharts, so I understand how to handle the data mapping for the heatmap without it feeling sluggish on mobile.

My approach:

I’ll start by updating the User types and then build the skill-radar-chart.tsx to visualize technical expertise across the different axes. I’ll implement the contribution-heatmap.tsx to match the GitHub style, ensuring the color intensity scales correctly based on activity levels. I’ll also pay close attention to the empty states so the dashboard still looks clean for new users and I'll provide a screen recording of the mobile and desktop view to verify the responsiveness of the charts.

Please assign this to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Ekene001 to this issue.

[legend4tech]

@legend4tech has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hello, I’m Legend4Tech, a full-stack developer and top open-source contributor, previously a fellow at OnlyDust. I’m interested in contributing to this issue and would be happy to help implement a solution, fix bugs, or improve features as needed. I’m ready to follow the project’s workflow and coding standards to ensure smooth collaboration.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @legend4tech to this issue.

[drips-wave]

Congratulations, @legend4tech! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @legend4tech: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊