[FEAT] Add "Share to Socials" image export for stats

[Kritika200520]

hi @Priyanshu-byte-coder

Problem Statement

Developers love sharing their coding activity, streaks, and milestones on platforms like X (Twitter) or LinkedIn (similar to GitHub Wrapped). Currently, users have to manually take screenshots of the dashboard if they want to share their DevTrack stats, which is tedious and doesn't always look clean.

Proposed Solution

Add a "Share / Download" button to the StreakTracker widget (next to the "Copy to clipboard" button). When clicked, it should use a library like html-to-image to take a high-quality snapshot of the component and trigger a download of a PNG image (e.g., devtrack-streak.png). This makes it frictionless for users to share their stats and helps DevTrack grow organically!

Alternatives Considered

• Web Share API: Could be used instead of a direct download, but it has limited support on desktop browsers. A simple image download is more universally reliable.
• Server-side image generation (OG Images): We could use Vercel's @vercel/og to generate images via an API route, but doing it client-side with html-to-image is much faster to implement and doesn't consume server resources.

Acceptance Criteria

• Install html-to-image dependency.
• Add a download/share icon button in the StreakTracker header.
• Button triggers html-to-image to generate a PNG of the StreakTracker container.
• Image downloads successfully with a descriptive filename.
• Styling and layout (including Dark/Light mode) render correctly in the exported image.

Additional Context

[github-actions]

Thanks for opening your first issue on DevTrack! 🎉

A maintainer will take a look shortly. In the meantime:

• Check the Contributing guide if you are planning to work on this
• Browse Discussions for Q&A and ideas
• Look for good first issue if you want somewhere to start

[Kritika200520]

hi maintainer i am a Gssoc2026 contributor . Please assign this to me i would like to work on this

[tech-dipesh]

/assign gssoc

[harshitha1869]

This feature could significantly improve user engagement and project visibility since users can directly share their progress cards on social platforms without manual screenshots.

A few implementation ideas that could further enhance the experience:

• Add automatic padding/background handling to ensure exported images look clean in both dark and light themes.
• Include the user’s streak count, contribution stats, and current rank badge in the exported snapshot for a more shareable “achievement card” feel.
• Consider adding a small DevTrack watermark/logo in the exported image to improve organic reach when users post online.

I’d be excited to contribute to this feature under GSSoC 2026