[GOOD FIRST ISSUE] Add repo filter dropdown to ContributionGraph

[Priyanshu-byte-coder]

What needs to be done

Add a dropdown to ContributionGraph that lets users filter the chart to commits from a specific repository.

Why this matters

Users who contribute to many repos want to see their activity per-project, not just globally.

Exact files to edit

1. src/app/api/metrics/contributions/route.ts

Add support for an optional repo query param (around line 18):

const repo = req.nextUrl.searchParams.get("repo"); // e.g. "owner/repo-name"

// Add to the GitHub search query string:
const repoFilter = repo ? `+repo:${repo}` : "";
const searchRes = await fetch(
  `${GITHUB_API}/search/commits?q=author:${session.githubLogin}+author-date:>=${sinceStr}${repoFilter}&per_page=100&sort=author-date&order=asc`,
  ...

2. src/components/ContributionGraph.tsx

Add a repo state and dropdown (after line 20):

const [repo, setRepo] = useState<string>("all");
const [repoOptions, setRepoOptions] = useState<string[]>([]);

// Fetch repo list on mount
useEffect(() => {
  fetch("/api/metrics/repos?days=90")
    .then(r => r.json())
    .then((d: { repos: { name: string }[] }) =>
      setRepoOptions(d.repos.map(r => r.name))
    )
    .catch(() => {});
}, []);

Update the contributions fetch to include repo:

fetch(`/api/metrics/contributions?days=${days}${repo !== "all" ? `&repo=${repo}` : ""}`)

Add the dropdown next to the time-range tabs (same row):

<select
  value={repo}
  onChange={e => setRepo(e.target.value)}
  className="bg-slate-700 text-slate-300 text-sm rounded-lg px-2 py-1 border border-slate-600"
>
  <option value="all">All repos</option>
  {repoOptions.map(r => (
    <option key={r} value={r}>{r.split("/")[1]}</option>
  ))}
</select>

Acceptance criteria

• "All repos" is default (existing behavior unchanged)
• Dropdown lists repos from /api/metrics/repos?days=90
• Selecting a repo re-fetches contributions filtered to that repo
• Time-range tabs and repo filter work together
• npm run lint and npm run type-check pass

Setup

See DEVELOPMENT.md to get running locally.

Mentorship

Comment "I'd like to work on this" to get assigned.

[mahakagarwal7]

HI @Priyanshu-byte-coder
I would like to work on this issue as part of GSSoC 2026.

Please assign me this issue.

[Shravani-36]

Hi I am interested to work on this issue