Add DeveloperSummary component to display GitHub profile insights

[Pari658]

Related Issue

• Closes: 🚀 Feature: Generate Developer Summary from GitHub Profile #664

---

Description

Added a Developer Summary section to the Tracker page that displays GitHub profile insights based on the entered username.

Changes Made

• Created a new DeveloperSummary component.

• Fetched GitHub user profile information using the GitHub API.

• Displayed key profile details including:

  • Profile avatar
  • Name
  • Bio
  • Public repositories count
  • Followers and following count

• Integrated the Developer Summary card into the Tracker page.

• Added responsive styling using Material UI components.

---

How Has This Been Tested?

• Ran the application locally using npm run dev.
• Tested with multiple GitHub usernames.
• Verified that profile information loads correctly and updates based on the entered username.
• Confirmed that existing tracker functionality remains unaffected.

---

Screenshots

Type of Change

• Bug fix
• New feature
• Code style update
• Breaking change
• Documentation update

Summary by CodeRabbit

• New Features
  • Added a developer profile summary card on the tracker page showing GitHub avatar, display name (falls back to username), bio, public repo count, followers, and following.
  • Profile fetching is debounced to reduce requests and supports optional authorization tokens.
  • Network and API errors are handled gracefully so the UI remains stable when profiles cannot be loaded.

[netlify]

✅ Deploy Preview for github-spy ready!

Name	Link
🔨 Latest commit	0b53767
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a23aa3078a657000874ae03
😎 Deploy Preview	https://deploy-preview-666--github-spy.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Wondering what really moved? Review this PR in Change Stack to inspect semantic changes, definitions, and references.

📝 Walkthrough

Walkthrough

Adds a new DeveloperSummary React/MUI component that fetches GitHub user profiles (debounced, abortable, optional Bearer token) and displays avatar, name, bio, and repo/follower stats. The Tracker page imports and renders this component with the current username and token.

Changes

Developer Summary Feature

Layer / File(s)	Summary
DeveloperSummary component & types src/components/DeveloperSummary.tsx	Defines DeveloperProfile and component props (username: string, optional token); implements a debounced (500ms) useEffect that fetches https://api.github.com/users/{username} with optional Bearer Authorization, uses AbortController and timeout cleanup, parses non-OK responses for errors, logs non-abort errors, and stores/clears profile state accordingly.
DeveloperSummary render src/components/DeveloperSummary.tsx	Renders MUI Paper showing avatar, name (fallback to username), optional bio, chips for public repos/followers/following, and a summary sentence; returns null when no profile is present.
Tracker page integration src/pages/Tracker/Tracker.tsx	Imports DeveloperSummary and inserts it into the Tracker render, passing current username and token from useGitHubAuth.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• GitMetricsLab/github_tracker#490: Refactor wiring of authenticated username/token into the frontend which the Tracker now uses to pass auth into DeveloperSummary.

Suggested labels

type:feature

Poem

🐰 I hopped through code to fetch a name,
Avatar bright, stats in a frame,
A debounced call, tidy and neat,
Profiles shown for every greet,
Tracker warmed by summaries sweet.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description is comprehensive and follows the template, including related issue, detailed description of changes, testing approach, and screenshots.
Linked Issues check	✅ Passed	The PR successfully implements all objectives from issue #664: fetches GitHub profile details, retrieves repository and statistics, generates a developer summary, and presents key insights.
Out of Scope Changes check	✅ Passed	All changes are directly related to issue #664; the new DeveloperSummary component and its integration into Tracker.tsx align with the stated objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The pull request title accurately summarizes the main change: adding a DeveloperSummary component to display GitHub profile information. The title is concise, specific, and clearly reflects the primary objective of the changeset.

_{✏️ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

🎉 Thank you @Pari658 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines

[coderabbitai]

Actionable comments posted: 2

🤖 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.

Inline comments:
In `@src/components/DeveloperSummary.tsx`:
- Around line 27-34: The fetch in the useEffect (triggered by username) calls
res.json() unconditionally and passes that result to setProfile, causing error
payloads (e.g. {"message":"Not Found"}) to be treated as a valid profile; update
the fetch chain to check res.ok before setting state: after fetch, inspect
res.ok and if false extract the error message (e.g. await res.json() or
res.text()) and handle it (throw or set an error state) so setProfile only
receives a successful user object; modify the useEffect/fetch block that
references username and setProfile to guard non-OK responses and avoid rendering
error objects as profile data.
- Around line 27-34: The effect in DeveloperSummary (the useEffect that reads
username and calls fetch and setProfile) runs on every keystroke, causes
unauthenticated rate-limit issues, can suffer raced responses, and never clears
stale profile; update it to debounce/defer requests and abort in-flight fetches:
create an AbortController inside the effect and call controller.abort in the
cleanup, start the fetch only after a short debounce timeout (clear the timeout
in cleanup), clear profile immediately when username becomes empty or when
starting a new request, and accept an optional token prop from Tracker to
include an Authorization header for authenticated requests; reference the
useEffect, username, setProfile, and fetch call when making these changes.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 21fdd4b1-15b8-4c60-9c93-cc9f723754f0

📥 Commits

Reviewing files that changed from the base of the PR and between 53f820b and 5e214c5.

📒 Files selected for processing (2)

• src/components/DeveloperSummary.tsx
• src/pages/Tracker/Tracker.tsx

[Pari658]

@GitMetricsLab i have opened up the pr please merge it