feat: enhance contributors page UI and add footer navigation by pari-dubey1 · Pull Request #536 · GitMetricsLab/github_tracker

pari-dubey1 · 2026-05-26T07:10:18Z

Related Issue

Closes: 🚀 Feature: Add Dedicated Contributors Page with Footer Navigation Link #483

Description

Enhanced the existing Contributors page UI to better align with the modern design aesthetics of the platform.

Changes Made

Redesigned the contributors page with a modern glassmorphism-inspired UI
Added responsive contributor cards with improved spacing and layout
Added smooth hover animations and glow effects
Improved dark/light mode compatibility
Added animated background grid and ambient glow effects
Improved typography and visual hierarchy
Added statistics section for contributors and open-source metrics
Added a CTA section encouraging community contributions
Added footer navigation link for easier access to the Contributors page
Improved overall responsiveness across devices

How Has This Been Tested?

Tested on desktop and mobile screen sizes
Verified responsiveness using browser developer tools
Tested dark mode and light mode compatibility
Verified contributor data fetching from GitHub API
Confirmed footer navigation redirects correctly to the Contributors page
Checked for console errors and layout consistency

Screenshots (if applicable)

Before:

After:

Type of Change

Summary by CodeRabbit

New Features
- Redesigned the Contributors page with a new hero section featuring contributor metrics
- Replaced contributor cards with direct clickable links to GitHub profiles
- Added a "Start Contributing" call-to-action section for new contributors
- Enhanced the loading and error state user interface with improved styling
- Contributor count is now dynamically calculated and displayed in the metrics section

netlify · 2026-05-26T07:10:23Z

❌ Deploy Preview for github-spy failed.

Name	Link
🔨 Latest commit	`83235ac`
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a19c8904f408c0008e26c8f

coderabbitai · 2026-05-26T07:10:32Z

Warning

Review limit reached

@mehul-m-prajapati, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 21 minutes and 27 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 305798f9-b309-4feb-b977-6514260384eb

📥 Commits

Reviewing files that changed from the base of the PR and between ec23fb5 and 83235ac.

📒 Files selected for processing (1)

src/pages/Contributors/Contributors.tsx

📝 Walkthrough

Walkthrough

Contributors.tsx was refactored from Material UI to Tailwind CSS. Import statements replaced MUI/react-router utilities with lucide-react icons. Data fetching adjusted axios configuration and error messaging. The entire UI layout was redesigned from MUI card grid to a Tailwind landing-style page with hero section, dynamic stats grid, responsive contributor cards linking to GitHub profiles, and call-to-action section.

Changes

Contributors Page Redesign

Layer / File(s)	Summary
Icon library migration `src/pages/Contributors/Contributors.tsx`	Imports updated from Material UI and react-router-dom utilities to lucide-react icon library (`Sparkles`, `Github`, `Users`, `GitPullRequest`, `ArrowRight`) for Tailwind-based icon rendering.
Stats configuration and fetch logic `src/pages/Contributors/Contributors.tsx`	New `stats` array introduced for top-level metrics display; axios request configuration adjusted to remove `withCredentials` specification; error catch block message shortened to "Failed to fetch contributors."
Complete Tailwind UI overhaul `src/pages/Contributors/Contributors.tsx`	Entire JSX layout rewritten from MUI `Container`/`Grid`/`Card` components to Tailwind-styled sections: hero header with background overlay, responsive stats grid with dynamic contributor count computed from `contributors.length`, contributors grid with external `<a>` links to GitHub profiles, and CTA section with "Start Contributing" link; loading and error states converted to custom Tailwind `<div>` layouts.

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly Related Issues

#409: The UI layout refactoring, responsive grid adjustments, and CTA/stats enhancements described in this PR directly implement the visual improvements and feature completeness suggested in that issue.

Suggested Labels

level:intermediate, quality:clean, gssoc:approved

Poem

🐰 A contributors page now shines so bright,
Tailwind paints it with responsive delight,
GitHub profiles dance in a grid so clean,
From Material's past to future's scene,
Stats sparkle where metrics once were sparse,
The community now gets its finest glass! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main changes: enhancing the contributors page UI and adding footer navigation, which directly matches the primary objectives of the PR.
Description check	✅ Passed	The PR description is comprehensive, following the template structure with all required sections completed: Related Issue (`#483`), detailed description of changes, testing methodology, before/after screenshots, and type of change selection.
Linked Issues check	✅ Passed	The PR fully addresses the linked issue `#483` requirements: dedicated contributors page with responsive grid, GitHub data fetching, dark/light mode support, animations, footer navigation link, and mobile responsiveness are all implemented.
Out of Scope Changes check	✅ Passed	All changes are within scope of issue `#483`; the refactoring focuses solely on contributors page UI enhancement, responsive design, animations, and footer navigation integration without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

🧹 Nitpick comments (1)

src/pages/Contributors/Contributors.tsx (1)

217-232: ⚡ Quick win

Add loading="lazy" for better initial page performance.

With 30+ contributor avatars, eager loading all images impacts initial page load time and bandwidth. Native lazy loading defers off-screen images until the user scrolls near them.

♻️ Proposed fix

                     <img
                       src={contributor.avatar_url}
                       alt={contributor.login}
+                      loading="lazy"
                       className="
                       relative
                       w-24
                       h-24
                       rounded-full

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/Contributors/Contributors.tsx` around lines 217 - 232, Add native
lazy loading to the contributor avatar <img> element to defer off-screen images:
update the <img> (the one using contributor.avatar_url and
alt={contributor.login} with the long className) to include loading="lazy" (and
optionally decoding="async") so avatars are not eagerly loaded and initial page
performance improves.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/pages/Contributors/Contributors.tsx`:
- Around line 217-232: Add native lazy loading to the contributor avatar <img>
element to defer off-screen images: update the <img> (the one using
contributor.avatar_url and alt={contributor.login} with the long className) to
include loading="lazy" (and optionally decoding="async") so avatars are not
eagerly loaded and initial page performance improves.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 11aee22f-f472-4492-91b4-8f11aec01402

📥 Commits

Reviewing files that changed from the base of the PR and between 6c6bc3e and ec23fb5.

📒 Files selected for processing (1)

src/pages/Contributors/Contributors.tsx

pari-dubey1 · 2026-05-27T10:45:28Z

@mehul-m-prajapati Please review the PR. Thank You!

github-actions · 2026-05-29T17:10:58Z

🎉🎉 Thank you for your contribution! Your PR #536 has been merged! 🎉🎉

feat: enhance contributors page UI and add footer navigation

ec23fb5

github-actions Bot added gssoc:approved level:intermediate quality:clean type:accessibility labels May 26, 2026

coderabbitai Bot reviewed May 26, 2026

View reviewed changes

Merge branch 'main' into improve-contributors-page

83235ac

mehul-m-prajapati merged commit f212191 into GitMetricsLab:main May 29, 2026
1 of 6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: enhance contributors page UI and add footer navigation#536

feat: enhance contributors page UI and add footer navigation#536
mehul-m-prajapati merged 2 commits into
GitMetricsLab:mainfrom
pari-dubey1:improve-contributors-page

pari-dubey1 commented May 26, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

netlify Bot commented May 26, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 26, 2026 •

edited

Loading

Review limit reached

Walkthrough

Changes

Possibly Related Issues

Suggested Labels

Poem

Uh oh!

coderabbitai Bot left a comment

Uh oh!

pari-dubey1 commented May 27, 2026

Uh oh!

Uh oh!

github-actions Bot commented May 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

pari-dubey1 commented May 26, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related Issue

Description

Changes Made

How Has This Been Tested?

Screenshots (if applicable)

Before:

After:

Type of Change

Summary by CodeRabbit

Uh oh!

netlify Bot commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for github-spy failed.

Uh oh!

coderabbitai Bot commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Walkthrough

Changes

Possibly Related Issues

Suggested Labels

Poem

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

pari-dubey1 commented May 27, 2026

Uh oh!

Uh oh!

github-actions Bot commented May 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

pari-dubey1 commented May 26, 2026 •

edited by coderabbitai Bot

Loading

netlify Bot commented May 26, 2026 •

edited

Loading

coderabbitai Bot commented May 26, 2026 •

edited

Loading