Feature Request: Visual Coding Profile Analytics Dashboard

[Akash504-ai]

Overview

Currently, the user profile allows developers to add links to their coding platforms such as:

• GitHub
• LeetCode
• GeeksForGeeks
• Codeforces
• CodeChef

At the moment, these platforms are displayed only as profile links.

To improve the developer experience, we plan to add a visual analytics dashboard that automatically fetches statistics from these platforms and displays them using graphs and charts.

This will transform the profile page from a static information page into a developer performance dashboard.

---

Problem Statement

Developers often want to showcase their coding activity and progress across different platforms.

However, currently:

• The platform only stores profile links
• No statistics or analytics are displayed
• Users must manually visit external sites to view performance metrics

Adding visual analytics will allow users to:

• Track coding progress
• Showcase achievements
• Compare activity across platforms
• Improve their developer profile visibility

---

Goal

Create a Developer Analytics Dashboard inside the profile page that visually represents coding platform performance.

The dashboard should include:

GitHub Analytics

• Repository count
• Total stars
• Contribution activity
• Commit graph

LeetCode Analytics

• Total problems solved
• Difficulty distribution (Easy / Medium / Hard)
• Ranking information

Codeforces Analytics

• Current rating
• Rank
• Contest performance

---

⚠️ Technical Constraints

Different coding platforms have different API support.

Platform	API Support
GitHub	✅ Official API
LeetCode	⚠️ Unofficial APIs
Codeforces	✅ Official API
GeeksForGeeks	❌ No Public API
CodeChef	❌ No Official API

Because of these limitations, we may initially support only:

• GitHub
• LeetCode
• Codeforces

---

Proposed Architecture

To implement this feature safely and efficiently:

1. Backend will fetch stats from coding platforms
2. Backend will normalize the data
3. Frontend will display the data using charts

This prevents:

• API rate limit issues
• exposing API keys
• inconsistent data formats

---

Implementation Plan

Backend – Create Stats Module

Create a new module for platform statistics.

backend/modules/stats

Structure:

stats.controller.js
stats.service.js
stats.routes.js

---

GitHub Stats Integration

Use the official GitHub API.

https://api.github.com/users/{username}

Example metrics:

• public_repos
• followers
• following

Repository stats endpoint:

https://api.github.com/users/{username}/repos

Metrics to calculate:

• total repositories
• total stars
• forks count

Create endpoint: GET /api/stats/github/:username

---

LeetCode Stats Integration

Use an unofficial stats API:

https://leetcode-stats-api.herokuapp.com/{username}

Response includes:

• easySolved
• mediumSolved
• hardSolved
• totalSolved
• ranking

Create endpoint: GET /api/stats/leetcode/:username

---

Codeforces Stats Integration

Use official Codeforces API.

https://codeforces.com/api/user.info?handles={handle}

Create endpoint: GET /api/stats/codeforces/:handle

---

🎨 Frontend Implementation

Install a charting library.

Recommended: npm install recharts

Alternative libraries:

• Chart.js
• Nivo

---

Create Chart Components

src/components/charts/

Example structure:

GithubStatsChart.jsx
LeetcodeStatsChart.jsx
CodeforcesStatsChart.jsx

---

Visualization Ideas

GitHub Dashboard

Display:

• Total repositories
• Stars
• Contributions

Suggested charts:

• Bar charts
• Contribution heatmap
• Activity graphs

---

LeetCode Dashboard

Use a donut chart for difficulty distribution.

Example:

Easy 120
Medium 150
Hard 50

---

Codeforces Dashboard

Display:

• Current rating
• Rank
• Contest participation

Charts:

• rating progress graph
• contest history

---

UI Integration

Update the profile page.

pages/Profile.jsx

Add a new section:

Developer Analytics

Example layout:

Developer Analytics--->

GitHub Stats
[ Graph ]

LeetCode Stats
[ Donut Chart ]

Codeforces Rating
[ Progress Chart ]

---

Acceptance Criteria

The feature will be considered complete when:

• GitHub statistics are fetched and displayed
• LeetCode statistics are displayed visually
• Codeforces rating and stats are visible
• Charts render properly
• Data loads asynchronously
• Errors are handled gracefully

---

Future Improvements

Possible enhancements:

• Redis caching for API responses
• Automatic stats refresh
• Contest performance tracking
• AI-powered coding performance insights
• Skill recommendations based on coding activity

---

Priority

Low (Future Feature)

Reason:

The current development focus is on core platform features:

• AI interviews
• profile management
• coding profile linking

Analytics can be implemented after the core platform is stable.

---