[Feature Add] Implement an Easy-to-Use Daily Challenge & Active Streak Indicator Card

[Rajatgupta2760]

Description:

To enhance user engagement and visual interest on the CodePVG user dashboard, I propose adding a clean, retro terminal-styled dashboard card that displays the user's active coding streak status and current daily grind progress.

Proposed Solution:
Creating a compact, reusable frontend component that perfectly blends into the existing geek/terminal theme of the application.

Tasks:

1. Create a responsive StreakCard.jsx component.
2. Design it to visually display:
   • 🔥 Current Streak Count: A simple numeric tracker (e.g., Streak: 12 Days).
   • ⚡ Daily Grind Status: A clear badge that highlights if today's problem-solving sync has occurred (e.g., Green [ STATUS: COMPLETED ] or Red [ STATUS: PENDING ]).
3. Ensure the layout uses existing project theme properties and adapts cleanly across mobile and desktop viewport sizes.

I want to contribute in this issue.

[jagdish-15]

Thanks for the suggestion!

One thing we'd like some clarification on is how you plan to calculate and obtain the streak data.

The current API (https://leetcode-api-dun.vercel.app/:username) doesn't provide a streak field, which makes sense since LeetCode itself doesn't expose streak information on the profile page.

We may be able to derive streak information from the historical data that will be made available through issue #7, but that endpoint hasn't been implemented yet. Even then, we'd likely only be able to calculate streaks from the point a user starts being tracked by our platform rather than from the beginning of their LeetCode history.

Could you explain how you envision the streak calculation working and what data you would use for determining both the streak count and the daily grind status?

[Rajatgupta2760]

Since LeetCode doesn’t expose streak data, the streak will be derived from submission history. We will use timestamps of accepted submissions, normalize them into unique solve days, and compute consecutive day sequences for the current streak. Daily grind will be determined by whether at least one accepted submission exists for the current day. Initially, streaks will be calculated from the point a user starts being tracked, but once historical submission data (issue #7) is available, we can backfill and compute more accurate streaks.

…

On Sat, 30 May 2026 at 17:58, Jagdish Prajapati ***@***.***> wrote: *jagdish-15* left a comment (codepvg/leetcode-ranking#51) <#51 (comment)> Thanks for the suggestion! One thing we'd like some clarification on is how you plan to calculate and obtain the streak data. The current API (https://leetcode-api-dun.vercel.app/:username) doesn't provide a streak field, which makes sense since LeetCode itself doesn't expose streak information on the profile page. We may be able to derive streak information from the historical data that will be made available through issue #7 <#7>, but that endpoint hasn't been implemented yet. Even then, we'd likely only be able to calculate streaks from the point a user starts being tracked by our platform rather than from the beginning of their LeetCode history. Could you explain how you envision the streak calculation working and what data you would use for determining both the streak count and the daily grind status? — Reply to this email directly, view it on GitHub <#51?email_source=notifications&email_token=BPZSOD4KO22YZKRGDYNVNGT45LHYRA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTINJYGI4DCNJSHEYKM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KYZTPN52GK4S7MNWGSY3L#issuecomment-4582815290>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BPZSOD7QFWXYZTG6C37HD2345LHYRAVCNFSM6AAAAACZTNJ572VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DKOBSHAYTKMRZGA> . Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/BPZSOD7VGWG424GNG2BEQTL45LHYRA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTINJYGI4DCNJSHEYKM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KUZTPN52GK4S7NFXXG> and Android <https://github.com/notifications/mobile/android/BPZSOD3N4DZV2IB76XGCMG345LHYRA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTINJYGI4DCNJSHEYKM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2K4ZTPN52GK4S7MFXGI4TPNFSA>. Download it today! You are receiving this because you authored the thread.Message ID: ***@***.***>

[jagdish-15]

One concern I have is that the submission timestamps available from the current API don't appear to represent a user's complete submission history either.

For example, if you look at:
https://leetcode-api-dun.vercel.app/Neerad_ahire
The user has around 1500 total submissions, but the submission calendar only contains what appears to be a few hundred submissions when the daily counts are summed up.

Because of that, I'm not sure we can reliably calculate accurate streaks from the current API data alone. We may need to wait for the historical data endpoint from issue #7. Once that's available, we can calculate metrics such as current streak and longest streak directly from the historical dataset, return those values as part of the API response, and then implement a streak card within the user profile page planned in issue #8.

[Souma-122s]

Hey @jagdish-15 and @Rajatgupta2760! I saw someone is already working on the backend API for Issue #7. While they are doing that, can I work on the frontend UI for this Streak Card?

Also, I noticed the issue says .jsx, but looking at the repo it seems to be standard HTML/CSS/JS!

I can just build the card using HTML/CSS and some dummy data for now. That way, the design is 100% ready to go and we can just plug the real data in later when the backend is done. Let me know if I can go ahead and raise a PR!