Display Star Count on Repository Cards in the Discover Page #34

📋 Description

The Repository interface already includes a stargazers_count field (it's part of the GitHub API response), but the Discover page's RepoCard component does not display it anywhere.

Star count is one of the most universally recognized signals of a repository's popularity. Adding it with smart number formatting (e.g., 12.3k instead of 12300) gives users an instant quality signal when browsing repos.

📍 File to Change

frontend/app/(auth)/discover/components/repocard.tsx

✅ What To Do

Step 1: Add a formatStars helper function:

function formatStars(count: number): string {
  if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`;
  if (count >= 1_000) return `${(count / 1_000).toFixed(1)}k`;
  return String(count);
}

Step 2: Display the star count in the card footer, next to the language display:

import { Star } from 'lucide-react';

{/* Add this wherever the language/metadata row is rendered */}
{repo.stargazers_count !== undefined && repo.stargazers_count > 0 && (
  <span className="flex items-center gap-1 text-sm text-[#8b949e]">
    <Star className="w-3.5 h-3.5 fill-[#8b949e]" />
    {formatStars(repo.stargazers_count)}
  </span>
)}

🏁 Acceptance Criteria

• A ⭐ icon + formatted number appears on each repository card
• Numbers ≥ 1,000 are formatted as k (e.g., "4.2k")
• Numbers ≥ 1,000,000 are formatted as M (e.g., "1.2M")
• If stargazers_count is undefined or 0, the element is hidden gracefully (no "0" displayed)
• The card layout is not broken on small/mobile screens

💡 Technical Hints

• stargazers_count?: number is already in the Repository interface in frontend/lib/api/github-service.ts — you don't need to change the API layer at all
• Star from lucide-react is the ideal icon — it's already installed in the project
• Position the star count next to the language indicator at the bottom of the card

🚀 Getting Started

1. Fork the repository
2. Create a branch: git checkout -b fix/issue-8-star-count-cards
3. Edit frontend/app/(auth)/discover/components/repocard.tsx
4. Run locally: cd frontend && npm run dev → navigate to /discover
5. Open a Pull Request!