feat: dynamic page title on route change

[Jai-Shankar1033]

Related Issue

• Closes: 🐛 Bug Report: Page Title Does Not Update on Route Change — Always Shows "GitHub Tracker" #730

---

Description

Ever noticed how the browser tab just says "GitHub Tracker" no matter which page you're on? This PR fixes that.

I created a small usePageTitle hook that updates document.title whenever you navigate to a new route. Now each page has its own meaningful title — so if you're on the Contributors page, the tab says "Contributors — GitHub Tracker", and if you're viewing a contributor's profile, it shows their username directly in the tab.

This is a small change but makes the app feel a lot more polished, especially when you have multiple tabs open.

---

How Has This Been Tested?

Ran the dev server and manually navigated through all routes — Home, Tracker, About, Login, Sign Up, Contact, Contributors, Contributor Profile, Privacy Policy, and Activity. Verified the tab title updated correctly on each page. Also ran npx tsc --noEmit with no errors.

---

Type of Change

• New feature

Summary by CodeRabbit

• New Features
  • Page titles now dynamically update based on your current location within the app for better browser tab identification.
  • Enhanced social media sharing metadata including Open Graph and Twitter card support.
  • Expanded SEO metadata configuration with theme color and site information.

[netlify]

✅ Deploy Preview for github-spy ready!

Name	Link
🔨 Latest commit	1dc54b8
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a3abb96bc711d000a2c5652
😎 Deploy Preview	https://deploy-preview-747--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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 74037324-9005-42df-a2af-79e00a1dfbe7

📥 Commits

Reviewing files that changed from the base of the PR and between 53f820b and 1dc54b8.

⛔ Files ignored due to path filters (1)

• public/og-image.png is excluded by !**/*.png

📒 Files selected for processing (12)

• index.html
• src/hooks/usePageTitle.ts
• src/pages/About/About.tsx
• src/pages/Activity.tsx
• src/pages/Contact/Contact.tsx
• src/pages/ContributorProfile/ContributorProfile.tsx
• src/pages/Contributors/Contributors.tsx
• src/pages/Home/Home.tsx
• src/pages/Login/Login.tsx
• src/pages/Privacy/PrivacyPolicy.tsx
• src/pages/Signup/Signup.tsx
• src/pages/Tracker/Tracker.tsx

---

📝 Walkthrough

Walkthrough

Adds a new usePageTitle React hook in src/hooks/usePageTitle.ts that dynamically sets document.title per route. The hook is integrated into all ten page components with per-page title strings. index.html is also updated with an expanded page title and Open Graph/Twitter Card social preview metadata.

Changes

Dynamic Page Title and SEO Metadata

Layer / File(s)	Summary
usePageTitle hook implementation src/hooks/usePageTitle.ts	Exports a usePageTitle(title: string) hook using useEffect to set document.title to "{title} — GitHub Tracker" when title is truthy, or "GitHub Tracker" otherwise; resets to the app name on cleanup.
Hook integration across all page components src/pages/About/About.tsx, src/pages/Activity.tsx, src/pages/Contact/Contact.tsx, src/pages/ContributorProfile/ContributorProfile.tsx, src/pages/Contributors/Contributors.tsx, src/pages/Home/Home.tsx, src/pages/Login/Login.tsx, src/pages/Privacy/PrivacyPolicy.tsx, src/pages/Signup/Signup.tsx, src/pages/Tracker/Tracker.tsx	Imports and invokes usePageTitle in all ten page components with their respective static (or dynamic, in ContributorProfile) title strings; no other logic in those components is changed.
SEO and social metadata index.html	Replaces the minimal <title> tag with a descriptive title and adds theme-color, Open Graph (og:url, og:title, og:description, og:image), and Twitter Card meta tags to the document <head>.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• GitMetricsLab/github_tracker#173: Refactors src/pages/About/About.tsx with animation and layout changes, directly overlapping with this PR's import and hook call additions in the same component.
• GitMetricsLab/github_tracker#536: Refactors src/pages/Contributors/Contributors.tsx UI/logic, the same file where this PR adds the usePageTitle("Contributors") hook call.
• GitMetricsLab/github_tracker#614: Modifies src/pages/Tracker/Tracker.tsx component structure, the same file where this PR inserts the usePageTitle("Tracker") call.

Suggested labels

type:feature, level1, quality:clean

🐇 Hoppity hop, from page to page I go,
Each tab now tells you where you are, you know!
"Tracker", "About", "Login" — oh what a sight,
No more guessing in tabs left or right.
My little hook sets titles with glee,
Dynamic titles for all — even me! 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: dynamic page title on route change' accurately summarizes the main change in the changeset, which implements dynamic page titles that update based on route changes.
Description check	✅ Passed	The PR description follows the template structure with all required sections completed: Related Issue (#730), Description with clear explanation and rationale, How Has This Been Tested with manual testing details, and Type of Change marked as 'New feature'.
Linked Issues check	✅ Passed	The PR fully implements the recommended solution from issue #730: a custom usePageTitle hook that dynamically updates document.title on route changes. All page components have been updated to use the hook with appropriate titles.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing dynamic page titles. The updates to index.html (metadata/SEO tags) support the page title feature, and the hook implementation with its usage across page components align with the linked issue objectives.

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

[Jai-Shankar1033]

Hey @mehul-m-prajapati

I've opened PR #747 for issue #730 — dynamic page titles on route change.

All routes are covered, TypeScript is clean, and the deploy preview is up. Would love a review when you get a chance!