🐛 Problem
Every page in the CodeLens frontend currently shows "CodeLens" as the browser tab title, because the only <title> tag is in frontend/index.html:
This means when a user has multiple CodeLens tabs open (e.g., Dashboard, Explore, Practice), they cannot tell which tab is which — every tab reads the same "CodeLens" text.
Additionally, search engines (Google, Bing, etc.) use the <title> tag as the primary display text in search results. Unique, descriptive titles improve search indexing and click-through rates.
📊 Current State
Out of 22 page components, only 2 have a <title> tag — and one of them (CodeforcesPage.jsx) uses <title> inside a tooltip card, not as a page-level document title.
| Page Component |
Has <title>? |
FAQPage.jsx |
✅ FAQ - CodeLens |
CodeforcesPage.jsx |
⚠️ Used inside tooltip, not as page title |
AccountCenterPage.jsx |
❌ Missing |
AlgoVersePage.jsx |
❌ Missing |
ApexAIPage.jsx |
❌ Missing |
ApexWorkspacePage.jsx |
❌ Missing |
BugReportsPage.jsx |
❌ Missing |
ContestAtCoderPage.jsx |
❌ Missing |
ContestCodeChefPage.jsx |
❌ Missing |
ContestCodeforcesPage.jsx |
❌ Missing |
ContestLeetCodePage.jsx |
❌ Missing |
DashboardPage.jsx |
❌ Missing |
ExplorePage.jsx |
❌ Missing |
GitHubCallbackPage.jsx |
❌ Missing |
GitHubIntelligencePage.jsx |
❌ Missing |
LandingPage.jsx |
❌ Missing |
LoginPage.jsx |
❌ Missing |
NotFoundPage.jsx |
❌ Missing |
PracticePage.jsx |
❌ Missing |
PrivacyPage.jsx |
❌ Missing |
SignupPage.jsx |
❌ Missing |
TermsPage.jsx |
❌ Missing |
✅ Expected Behaviour
Each page should show a unique, descriptive title in the browser tab. Suggested format: {Page Name} - CodeLens
| Page |
Suggested <title> |
| Landing |
CodeLens — Track, Analyze, Grow |
| Explore |
Explore - CodeLens |
| Dashboard |
Dashboard - CodeLens |
| Practice |
Practice - CodeLens |
| Login |
Login - CodeLens |
| Sign Up |
Sign Up - CodeLens |
| Account Center |
Account Center - CodeLens |
| AlgoVerse |
AlgoVerse - CodeLens |
| Apex AI |
Apex AI - CodeLens |
| Apex Workspace |
Apex Workspace - CodeLens |
| Bug Reports |
Bug Reports - CodeLens |
| Contest (AtCoder) |
AtCoder Contests - CodeLens |
| Contest (CodeChef) |
CodeChef Contests - CodeLens |
| Contest (Codeforces) |
Codeforces Contests - CodeLens |
| Contest (LeetCode) |
LeetCode Contests - CodeLens |
| GitHub Intelligence |
GitHub Intelligence - CodeLens |
| Privacy Policy |
Privacy Policy - CodeLens |
| Terms of Service |
Terms of Service - CodeLens |
| 404 Not Found |
Page Not Found - CodeLens |
| GitHubCallbackPage |
(no user-facing title needed — redirect page) |
🛠️ How to Implement
Since the project uses React 19, you do not need any external library like react-helmet. React 19 natively hoists <title> tags to the document <head> automatically.
Simply add a <title> tag at the top level of each page's JSX return, following the pattern already used in FAQPage.jsx:
// Example: frontend/src/pages/ExplorePage.jsx
return (
<main>
<title>Explore - CodeLens</title>
{/* rest of the page */}
</main>
);React will automatically move this into the browser <head> — no wrapper component or library needed.
🎯 Acceptance Criteria
📎 References
🐛 Problem
Every page in the CodeLens frontend currently shows "CodeLens" as the browser tab title, because the only
<title>tag is infrontend/index.html:This means when a user has multiple CodeLens tabs open (e.g., Dashboard, Explore, Practice), they cannot tell which tab is which — every tab reads the same "CodeLens" text.
Additionally, search engines (Google, Bing, etc.) use the
<title>tag as the primary display text in search results. Unique, descriptive titles improve search indexing and click-through rates.📊 Current State
Out of 22 page components, only 2 have a
<title>tag — and one of them (CodeforcesPage.jsx) uses<title>inside a tooltip card, not as a page-level document title.<title>?FAQPage.jsxFAQ - CodeLensCodeforcesPage.jsxAccountCenterPage.jsxAlgoVersePage.jsxApexAIPage.jsxApexWorkspacePage.jsxBugReportsPage.jsxContestAtCoderPage.jsxContestCodeChefPage.jsxContestCodeforcesPage.jsxContestLeetCodePage.jsxDashboardPage.jsxExplorePage.jsxGitHubCallbackPage.jsxGitHubIntelligencePage.jsxLandingPage.jsxLoginPage.jsxNotFoundPage.jsxPracticePage.jsxPrivacyPage.jsxSignupPage.jsxTermsPage.jsx✅ Expected Behaviour
Each page should show a unique, descriptive title in the browser tab. Suggested format:
{Page Name} - CodeLens<title>CodeLens — Track, Analyze, GrowExplore - CodeLensDashboard - CodeLensPractice - CodeLensLogin - CodeLensSign Up - CodeLensAccount Center - CodeLensAlgoVerse - CodeLensApex AI - CodeLensApex Workspace - CodeLensBug Reports - CodeLensAtCoder Contests - CodeLensCodeChef Contests - CodeLensCodeforces Contests - CodeLensLeetCode Contests - CodeLensGitHub Intelligence - CodeLensPrivacy Policy - CodeLensTerms of Service - CodeLensPage Not Found - CodeLens🛠️ How to Implement
Since the project uses React 19, you do not need any external library like
react-helmet. React 19 natively hoists<title>tags to the document<head>automatically.Simply add a
<title>tag at the top level of each page's JSX return, following the pattern already used inFAQPage.jsx:React will automatically move this into the browser
<head>— no wrapper component or library needed.🎯 Acceptance Criteria
<title>tag with a unique, descriptive value{Page Name} - CodeLensreact-helmet) is required — use React 19 native title hoisting📎 References
FAQPage.jsxalready implements the correct pattern and can be used as reference