Feature Request: Visual Coding Profile Analytics Dashboard #7
Description
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 | |
| 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:
- Backend will fetch stats from coding platforms
- Backend will normalize the data
- 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_reposfollowersfollowing
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.