Skip to content

Add Language Icons/Badges to Repository Cards on the Discover Page #41

Description

@Vedant1703

The RepoCard component on the Discover page currently shows the repository's programming language as plain text (e.g., "Go", "Python"). Popular platforms like GitHub display a small colored dot next to the language name for quick visual scanning.

Adding similar color-coded language indicators will improve the UI readability of the Discover page at a glance.


📍 File to Change

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


✅ What To Do

  1. Create a language-to-color lookup object inside the component:
const LANGUAGE_COLORS: Record<string, string> = {
  JavaScript: '#f1e05a',
  TypeScript: '#3178c6',
  Python:     '#3572A5',
  Go:         '#00ADD8',
  Rust:       '#dea584',
  Java:       '#b07219',
  'C++':      '#f34b7d',
  Ruby:       '#701516',
  PHP:        '#4F5D95',
  Swift:      '#F05138',
  Kotlin:     '#A97BFF',
  'C#':       '#178600',
};
  1. Find where language is rendered in repocard.tsx and wrap it with a colored dot:
{repo.language && (
  <span className="flex items-center gap-1.5 text-sm text-[#8b949e]">
    <span
      className="w-3 h-3 rounded-full shrink-0"
      style={{ backgroundColor: LANGUAGE_COLORS[repo.language] ?? '#8b949e' }}
    />
    {repo.language}
  </span>
)}

🏁 Acceptance Criteria

  • A colored dot appears before the language name on every repo card that has a language value
  • Unknown languages fall back to a neutral gray dot (#8b949e)
  • The change is purely visual and does not break any existing functionality
  • Works on both mobile and desktop layouts

💡 Technical Hints

  • The language field is already part of the Repository interface defined in frontend/lib/api/github-service.ts
  • No new packages are needed — pure inline styling with style={{ backgroundColor: ... }}
  • Refer to the full GitHub language color list for more colors

🚀 Getting Started

  1. Fork the repository
  2. Create a branch: git checkout -b fix/issue-1-language-color-dots
  3. Make your changes in frontend/app/(auth)/discover/components/repocard.tsx
  4. Run the frontend locally: cd frontend && npm run dev
  5. Open a Pull Request!

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions