feat(web): add contributor leaderboard page

README.md

@@ -307,6 +307,8 @@ Thanks to all the amazing people who contribute to **DevCard** 🚀
   </a>
 </p>
 
+> 🏆 **Contributor Leaderboard** — contributors are also ranked by merged PRs, issues, and open PRs in the web app at the [`/leaderboard`](https://devcard.app/leaderboard) route (`apps/web`).
+
 <br>
 
 ## Project Support

apps/web/src/App.tsx

@@ -2,6 +2,7 @@ import { Routes, Route } from 'react-router-dom';
 import LandingPage from './pages/LandingPage';
 import ProfilePage from './pages/ProfilePage';
 import CardPage from './pages/CardPage';
+import LeaderboardPage from './pages/LeaderboardPage';
 import NotFound from './pages/NotFound';
 
 export default function App() {
@@ -10,6 +11,7 @@ export default function App() {
       <Route path="/" element={<LandingPage />} />
       <Route path="/u/:username" element={<ProfilePage />} />
       <Route path="/devcard/:id" element={<CardPage />} />
+      <Route path="/leaderboard" element={<LeaderboardPage />} />
       <Route path="*" element={<NotFound />} />
     </Routes>
   );

apps/web/src/pages/LeaderboardPage.css

@@ -0,0 +1,145 @@
+.leaderboard {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 7rem 1.5rem 4rem;
+}
+
+.leaderboard-header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.leaderboard-header h1 {
+  font-size: clamp(2.2rem, 5vw, 3.2rem);
+  font-weight: 900;
+  font-family: 'Outfit', sans-serif;
+  margin: 1rem 0 0.75rem;
+}
+
+.leaderboard-subtitle {
+  color: var(--text-secondary);
+  line-height: 1.7;
+  max-width: 520px;
+  margin: 0 auto;
+}
+
+.leaderboard-state {
+  text-align: center;
+  padding: 2.5rem 1.5rem;
+  border-radius: var(--radius-lg);
+  color: var(--text-secondary);
+}
+
+.leaderboard-state.error {
+  color: #ef4444;
+}
+
+.leaderboard-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0;
+  margin: 0;
+}
+
+.leaderboard-row {
+  display: grid;
+  grid-template-columns: 2.5rem 1fr auto;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  border-radius: var(--radius-lg);
+}
+
+.rank {
+  font-weight: 800;
+  font-size: 1.1rem;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.rank-1 { color: #f5c518; }
+.rank-2 { color: #c0c5ce; }
+.rank-3 { color: #cd7f32; }
+
+.contributor {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  text-decoration: none;
+  color: var(--text-primary);
+  min-width: 0;
+}
+
+.contributor-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 2px solid var(--border-glass);
+  flex-shrink: 0;
+}
+
+.contributor-name {
+  font-weight: 600;
+  font-family: 'Outfit', sans-serif;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.contributor:hover .contributor-name {
+  color: var(--primary);
+}
+
+.stats {
+  display: flex;
+  gap: 1.25rem;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 3.5rem;
+}
+
+.stat-value {
+  font-weight: 800;
+  font-size: 1.15rem;
+  color: var(--text-primary);
+}
+
+.stat-label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+
+.leaderboard-footer {
+  text-align: center;
+  margin-top: 2.5rem;
+}
+
+.leaderboard-footer a {
+  text-decoration: none;
+  font-weight: 600;
+}
+
+@media (max-width: 600px) {
+  .leaderboard-row {
+    grid-template-columns: 2rem 1fr;
+    grid-template-areas:
+      'rank contributor'
+      'stats stats';
+    row-gap: 0.85rem;
+  }
+  .rank { grid-area: rank; }
+  .contributor { grid-area: contributor; }
+  .stats {
+    grid-area: stats;
+    justify-content: space-around;
+    width: 100%;
+  }
+}

apps/web/src/pages/LeaderboardPage.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import Navbar from '../components/Navbar';
+import './LeaderboardPage.css';
+
+const REPO = 'Dev-Card/DevCard';
+const GITHUB_API = 'https://api.github.com';
+
+// Maintainers / accounts excluded from the contributor leaderboard.
+const EXCLUDED = new Set(
+  ['ShantKhatri', 'Harxhit', 'blankirigaya'].map((u) => u.toLowerCase())
+);
+
+type Contributor = {
+  login: string;
+  avatarUrl: string;
+  profileUrl: string;
+  issues: number;
+  mergedPrs: number;
+  openPrs: number;
+};
+
+type GithubContributor = {
+  login: string;
+  avatar_url: string;
+  html_url: string;
+  type: string;
+};
+
+type SearchResult = { total_count: number };
+
+async function ghJson<T>(url: string): Promise<T> {
+  const response = await fetch(url, {
+    headers: { Accept: 'application/vnd.github+json' },
+  });
+  if (!response.ok) {
+    throw new Error(`GitHub request failed: ${response.status}`);
+  }
+  return response.json() as Promise<T>;
+}
+
+async function countSearch(query: string): Promise<number> {
+  const url = `${GITHUB_API}/search/issues?q=${encodeURIComponent(query)}&per_page=1`;
+  const result = await ghJson<SearchResult>(url);
+  return result.total_count;
+}
+
+async function loadContributorStats(login: string): Promise<Pick<Contributor, 'issues' | 'mergedPrs' | 'openPrs'>> {
+  const base = `repo:${REPO} author:${login}`;
+  const [issues, mergedPrs, openPrs] = await Promise.all([
+    countSearch(`${base} type:issue`),
+    countSearch(`${base} type:pr is:merged`),
+    countSearch(`${base} type:pr is:open`),
+  ]);
+  return { issues, mergedPrs, openPrs };
+}
+
+export default function LeaderboardPage() {
+  const [contributors, setContributors] = useState<Contributor[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    document.title = 'Contributor Leaderboard | DevCard';
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      setLoading(true);
+      setError(null);
+      try {
+        const list = await ghJson<GithubContributor[]>(
+          `${GITHUB_API}/repos/${REPO}/contributors?per_page=100`
+        );
+
+        const eligible = list.filter(
+          (c) => c.type === 'User' && !EXCLUDED.has(c.login.toLowerCase())
+        );
+
+        const enriched = await Promise.all(
+          eligible.map(async (c) => {
+            const stats = await loadContributorStats(c.login);
+            return {
+              login: c.login,
+              avatarUrl: c.avatar_url,
+              profileUrl: c.html_url,
+              ...stats,
+            } satisfies Contributor;
+          })
+        );
+
+        enriched.sort(
+          (a, b) =>
+            b.mergedPrs - a.mergedPrs ||
+            b.issues - a.issues ||
+            b.openPrs - a.openPrs ||
+            a.login.localeCompare(b.login)
+        );
+
+        if (!cancelled) setContributors(enriched);
+      } catch {
+        if (!cancelled) setError('Could not load contributors. GitHub may be rate-limiting — try again shortly.');
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <>
+      <div className="bg-glow" />
+      <Navbar />
+      <main className="leaderboard" id="leaderboard-main">
+        <header className="leaderboard-header">
+          <div className="hero-badge">🏆 Community</div>
+          <h1>
+            <span className="gradient-text">Contributor</span> Leaderboard
+          </h1>
+          <p className="leaderboard-subtitle">
+            The developers building DevCard — ranked by merged pull requests, issues, and open work.
+          </p>
+        </header>
+
+        {loading && (
+          <div className="leaderboard-state glass">Loading contributors…</div>
+        )}
+
+        {error && !loading && (
+          <div className="leaderboard-state glass error">{error}</div>
+        )}
+
+        {!loading && !error && (
+          <ol className="leaderboard-list" id="leaderboard-list">
+            {contributors.map((c, i) => (
+              <li key={c.login} className="leaderboard-row glass">
+                <span className={`rank rank-${i + 1 <= 3 ? i + 1 : 'n'}`}>
+                  {i + 1}
+                </span>
+                <a
+                  href={c.profileUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="contributor"
+                >
+                  <img
+                    src={c.avatarUrl}
+                    alt={c.login}
+                    className="contributor-avatar"
+                    loading="lazy"
+                  />
+                  <span className="contributor-name">@{c.login}</span>
+                </a>
+                <div className="stats">
+                  <span className="stat" title="Merged pull requests">
+                    <span className="stat-value">{c.mergedPrs}</span>
+                    <span className="stat-label">Merged PRs</span>
+                  </span>
+                  <span className="stat" title="Open pull requests">
+                    <span className="stat-value">{c.openPrs}</span>
+                    <span className="stat-label">Open PRs</span>
+                  </span>
+                  <span className="stat" title="Issues created">
+                    <span className="stat-value">{c.issues}</span>
+                    <span className="stat-label">Issues</span>
+                  </span>
+                </div>
+              </li>
+            ))}
+          </ol>
+        )}
+
+        <div className="leaderboard-footer">
+          <Link to="/" className="gradient-text">
+            ← Back to Home
+          </Link>
+        </div>
+      </main>
+    </>
+  );
+}