feat: Improve Onboarding Experience

[Aryan-Agarwal-creator]

Is your feature request related to a problem? Please describe.

The current landing page has a strong visual design, but first-time users receive very little guidance before generating a badge. The preview section remains mostly empty until user interaction, making it difficult to immediately understand the product's value and workflow.

Additionally, the primary user action is not clearly emphasized, which may reduce engagement and increase drop-off for new visitors.

Describe the solution you'd like

Improve the onboarding and badge generation experience by introducing:

Interactive empty-state preview with a sample badge
Demo usernames (e.g., torvalds, gaearon, vercel) for quick testing
Clear primary CTA: Generate Badge
GitHub avatar preview when entering a username
Better validation and input feedback
Animated statistics cards showing:
Current Streak
Longest Streak
Total Contributions
Repositories
Improved recent-search chips with avatar support
Simple "How It Works" section:
Enter Username
Generate Badge
Add to README

These enhancements would help users understand the product instantly and create a more engaging experience.

Describe alternatives you've considered

An alternative approach would be to keep the current layout and only add helper text. However, an interactive preview combined with onboarding elements provides significantly better user guidance and showcases the product's core functionality before users perform any action.

Expected Benefits
Better first-time user experience
Increased engagement and interaction
Clearer badge generation workflow
Improved discoverability of features
More polished and professional onboarding experience

[github-actions]

👋 Hey @Aryan-Agarwal-creator, welcome to CommitPulse! 🎉

Thanks for opening your first issue — we're glad you're here.

Before diving in, please take a moment to:

• 📖 Read the CONTRIBUTING.md guide
• 💬 Join our Discord community for faster support and collaboration
• 🏷️ Comment /claim on any open, unassigned issue you'd like to work on

A maintainer will review your issue shortly. Happy contributing! 🚀

[Aryan-Agarwal-creator]

/claim

[github-actions]

🎉 Assigned! Welcome to the project, @Aryan-Agarwal-creator.

⏳ Reminder: You have 2 days to submit a Pull Request. After 2 days of inactivity, you will be automatically unassigned to give others a chance (as per our GSSoC anti-hoarding policy).

💡 Please read CONTRIBUTING.md if you haven't already.

Happy coding! 🚀

[stevesagronegocios673-ux]

Quick landing-page note after reading the issue, README.md, app/page.tsx, useRecentSearches, and the current first-screen flow: I would make the first implementation smaller and sharper than the full wishlist.

Right now the page already has the core loop:

Enter GitHub username -> preview badge -> Copy Link -> profile README guide

But the empty state only says "Enter a GitHub username above", while the actual product promise in the README is much stronger: "Drop this into your GitHub profile README" and "your contribution history deserves a monument." I would make that README embed outcome visible before the user types anything.

The first thing I would change is the empty preview card. Instead of a blank GitHub icon state, show a working sample badge for jhasourav07 or one demo account, with a small label like:

Try it with a demo profile
[torvalds] [gaearon] [vercel]

Clicking a chip should set the same username state that the input uses, not create a separate demo path. That keeps the implementation aligned with the current debounced badgeUrl flow.

I would also rename the primary action for this issue. The user request says "Clear primary CTA: Generate Badge", but the current submit button copies Markdown immediately. That is a bit surprising for a first-time visitor because they have not seen the result yet. A cleaner hierarchy would be:

Primary: Generate Badge
Secondary after successful load: Copy Markdown
Tertiary: Watch Dashboard

A few concrete acceptance criteria I would add:

• Empty preview renders a real sample badge, not only a placeholder message.
• Demo username chips fill the input and trigger the existing preview path.
• Copy Link is disabled until the current debouncedUsername badge has loaded successfully, so users do not copy a broken/not-found username.
• Recent searches should use the same chip style as demo usernames, but visually separated as "Recent" vs "Try" so new users are not shown an empty recent-search area.
• The success guide should stay after copy, because that is where the README embed instructions belong; do not duplicate all four steps above the fold.

The smallest useful version of this issue is not "more sections". It is making the first viewport prove the whole workflow: sample badge visible, username path obvious, and copy action available only after the badge exists.

Want the fuller pass? I can send a compact first-screen structure + 5 exact copy blocks for the empty preview, demo chips, primary CTA states, validation text, and README handoff guide.

[github-actions]

⚠️ Assignment automatically removed due to inactivity.
Feel free to reclaim the issue if you want to continue working on it.

[aaniya22]

/claim

[github-actions]

❌ Only the author of this issue (@Aryan-Agarwal-creator) can claim it.

[anshul23102]

Hi @JhaSourav07,

I would like to work on improving the onboarding experience. A cleaner first-run flow with clearer guidance for new users setting up their token and customizing their badge would lower the barrier to entry significantly.

/claim

This contribution would be filed under GSSoC 2026.