Skip to content

feature: Add 1-click comparison preset chips on Homepage Empty State #220

Description

@O2sa

When first arriving at DevImpact without query parameters, the home screen displays an empty state. We should add clickable example preset pills (e.g., 'Linus Torvalds vs Dan Abramov', 'Evan You vs Anthony Fu', 'Guillermo Rauch vs Lee Robinson') so users can immediately test the platform with 1 click.

Motivation

Instant gratification prevents first-time bounce rates and lets visitors see the product in action right away with zero typing, encouraging them to star the repo and share it.

Tasks

  • Create a curated list of well-known open-source developer pairs in a config/constant file.
  • Render clickable suggestion chips under the compare form in HomePageClient when no comparison has been run yet.
  • Clicking a preset chip should automatically fill username1 and username2 and trigger the comparison flow.
  • Include smooth loading transitions and accessible keyboard navigation (Tab + Enter/Space).
  • Add translation keys for preset labels and headers.

Files to Check

  • src/features/comparison/components/home-page-client.tsx
  • src/features/comparison/components/compare-form.tsx
  • src/locales/en.json & src/locales/ar.json

Tip

🚀 Want to contribute?
Comment assign me to be automatically assigned to this issue via our GitHub Actions bot. Happy coding! ✨

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions