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

[Jai-Shankar1033]

What I noticed

I was using GitHub Tracker and noticed that no matter which page you navigate to — Home, Tracker, About — the browser tab always shows the same title "GitHub Tracker". It never updates to reflect the current page.
This is a bug because:

Users with multiple tabs open can't tell which tab is which
Browser history shows the same title for every page
It hurts SEO since search engines use page titles to understand content

What I'm proposing

Update the page <title> dynamically on every route change so each page has its own meaningful title.

🏗️ How it would work

┌─────────────────────────────────────┐
│ User navigates to /tracker │
└──────────────┬──────────────────────┘
│
▼
┌─────────────────────────────────────┐
│ React Router detects route change │
└──────────────┬──────────────────────┘
│
▼
┌─────────────────────────────────────┐
│ useEffect updates document.title │
└──────────────┬──────────────────────┘
│
▼
┌─────────────────────────────────────┐
│ Tab shows "Tracker — GitHub Tracker"│
└─────────────────────────────────────┘

🛠️ Tech Implementation Plan

Option 1 — Simple useEffect per page:

// Add this inside each page component
useEffect(() => {
document.title = 'Tracker — GitHub Tracker';
}, []);

Option 2 — Custom hook (cleaner, recommended):
// src/hooks/usePageTitle.ts
const usePageTitle = (title: string) => {
useEffect(() => {
document.title = ${title} — GitHub Tracker;
return () => {
document.title = 'GitHub Tracker';
};
}, [title]);
};

// Usage in any page component:
usePageTitle('Tracker');
usePageTitle('About');
usePageTitle('Home');