fix(route): fixed the faq page route and added faq link in navbar#151
Conversation
|
@anujsharma8d is attempting to deploy a commit to the Kunal Verma's projects Team on Vercel. A member of the Team first needs to authorize it. |
🚀 PR Received SuccessfullyHello @anujsharma8d, Thank you for taking the initiative to contribute to this project. Please ensure that your PR follows all project guidelines properly before requesting review.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
💤 Files with no reviewable changes (1)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds a public ChangesFAQ Integration
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
|
Hey @kunalverma2512 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
frontend/src/components/shared/Navbar.jsx (1)
564-694:⚠️ Potential issue | 🟠 Major | ⚡ Quick winAdd FAQ link to the mobile menu for navigation parity.
The FAQ link is present in the desktop navigation (lines 392-394) but missing from the mobile menu. This creates an inconsistent user experience where mobile users cannot access the FAQ page from the navbar.
📱 Proposed fix to add FAQ link in mobile menu
Add the FAQ link after the Explore link in the mobile menu:
<Link to="/explore" onClick={closeMenu} className={mobileLinkCls}> Explore <span className="text-zinc-300 text-sm">→</span> </Link> + +<Link to="/faq" onClick={closeMenu} className={mobileLinkCls}> + FAQ <span className="text-zinc-300 text-sm">→</span> +</Link> {isAuthenticated && ( <Link to="/codeforces" onClick={closeMenu} className={mobileLinkCls}>🤖 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 `@frontend/src/components/shared/Navbar.jsx` around lines 564 - 694, Mobile menu is missing the FAQ navigation item causing parity issues with desktop; add an FAQ Link after the Explore link inside the mobile menu when isMenuOpen is true. Locate the mobile section that renders Links (uses isMenuOpen, mobileLinkCls and closeMenu) and insert a Link to "/faq" with onClick={closeMenu} and className={mobileLinkCls} immediately after the Explore Link so mobile users see the same FAQ entry as desktop. Ensure it follows the same structure/markup (text "FAQ" and trailing arrow span) to match styling.frontend/src/App.jsx (1)
29-29:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winRemove unused
FAQSectionimport fromfrontend/src/App.jsx
FAQSectionis imported infrontend/src/App.jsxbut isn’t referenced anywhere in that file; the component is used via<FAQSection />infrontend/src/pages/ExplorePage.jsx, so this import can be dropped.[Minor snippet (current code):
import FAQSection from "./components/explore/FAQSection";(App.jsx:29)]🤖 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 `@frontend/src/App.jsx` at line 29, Remove the unused import of FAQSection from App.jsx: delete the line importing FAQSection (import FAQSection from "./components/explore/FAQSection";) since the component is not referenced in this file; verify no other references to the symbol FAQSection remain in this file and run the linter/TS/ESLint to ensure no unused-import warnings persist.
🤖 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.
Outside diff comments:
In `@frontend/src/App.jsx`:
- Line 29: Remove the unused import of FAQSection from App.jsx: delete the line
importing FAQSection (import FAQSection from "./components/explore/FAQSection";)
since the component is not referenced in this file; verify no other references
to the symbol FAQSection remain in this file and run the linter/TS/ESLint to
ensure no unused-import warnings persist.
In `@frontend/src/components/shared/Navbar.jsx`:
- Around line 564-694: Mobile menu is missing the FAQ navigation item causing
parity issues with desktop; add an FAQ Link after the Explore link inside the
mobile menu when isMenuOpen is true. Locate the mobile section that renders
Links (uses isMenuOpen, mobileLinkCls and closeMenu) and insert a Link to "/faq"
with onClick={closeMenu} and className={mobileLinkCls} immediately after the
Explore Link so mobile users see the same FAQ entry as desktop. Ensure it
follows the same structure/markup (text "FAQ" and trailing arrow span) to match
styling.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 82ec14e2-6003-4a09-b3d4-f62b5cfce733
📒 Files selected for processing (2)
frontend/src/App.jsxfrontend/src/components/shared/Navbar.jsx
|
@coderabbitai please check whether this PR is production ready or not and is this make nearby codes,files,folders compatible with the work done in this PR |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
echo "=== App.jsx (full file) ==="
fd -e jsx "App" --search-path frontend/src -x cat {}
echo ""
echo "=== Navbar.jsx (full file) ==="
fd -e jsx "Navbar" --search-path frontend/src/components -x cat {}
echo ""
echo "=== FAQPage component (find & cat) ==="
fd -e jsx -e tsx "FAQ" --search-path frontend/src -x cat {}
echo ""
echo "=== All routes in App.jsx ==="
rg -n "Route|path=" frontend/src/App.jsx 2>/dev/null || rg -rn "Route|path=" frontend/src --include="*.jsx" --include="*.tsx" -l
echo ""
echo "=== All existing page components ==="
fd -e jsx -e tsx --search-path frontend/src/pages
echo ""
echo "=== Check for any route constants / route config files ==="
fd -e js -e jsx -e ts -e tsx "routes" --search-path frontend/src
echo ""
echo "=== Check mobile nav / hamburger nav in Navbar ==="
rg -n "mobile\|hamburger\|drawer\|MobileNav\|sm:\|md:" frontend/src/components/shared/Navbar.jsx 2>/dev/null
echo ""
echo "=== Check if FAQ is mentioned anywhere else (links, sitemap, etc.) ==="
rg -rn "faq\|FAQ" frontend/src --include="*.jsx" --include="*.tsx" --include="*.js" --include="*.ts" -l
echo ""
echo "=== Check for sitemap or robots.txt ==="
fd "sitemap\|robots" --search-path frontend/public
fd "sitemap\|robots" --search-path frontend/src
echo ""
echo "=== Check for any 404 / fallback route ==="
rg -n "404\|NotFound\|fallback\|\*" frontend/src/App.jsx 2>/dev/null
echo ""
echo "=== Check for lazy loading / code splitting usage in App.jsx ==="
rg -n "lazy\|Suspense\|import(" frontend/src/App.jsx 2>/dev/null
echo ""
echo "=== Check for SEO / meta tags in FAQPage ==="
fd -e jsx -e tsx "FAQ" --search-path frontend/src -x rg -n "helmet\|meta\|title\|Helmet\|SEO" {}
echo ""
echo "=== Check for PropTypes / TypeScript types in Navbar ==="
rg -n "PropTypes\|interface\|type " frontend/src/components/shared/Navbar.jsx 2>/dev/null
echo ""
echo "=== Check for test files related to FAQ or Navbar ==="
fd -e test.jsx -e test.tsx -e spec.jsx -e spec.tsx --search-path frontend/src
fd -e test.js -e spec.js --search-path frontend/src
echo ""
echo "=== Check package.json for dependencies ==="
cat frontend/package.json 2>/dev/null || cat package.json 2>/dev/null
echo ""
echo "=== Check for footer links mentioning FAQ ==="
fd -e jsx -e tsx "Footer" --search-path frontend/src/components -x cat {}
echo ""
echo "=== Check for any accessibility attributes (aria) in Navbar ==="
rg -n "aria-\|role=" frontend/src/components/shared/Navbar.jsx 2>/dev/nullLength of output: 64399
🔍 Complete Analysis: PR
|
| File | Change |
|---|---|
frontend/src/App.jsx |
Adds <Route path="/faq" element={<FAQPage />} /> |
frontend/src/components/shared/Navbar.jsx |
Adds FAQ link in desktop center nav + mobile drawer |
✅ What works correctly
Routing
/faqroute is placed correctly — before the*wildcard catch-all (NotFoundPage), so it resolves properly.FAQPageis a public route (noProtectedRoutewrapper), which is correct — anyone should be able to read the FAQ.
Navbar integration
- Desktop: uses the existing
navLinkCls("/faq")helper, so it gets the same active-link underline styling as Explore/Dashboard when on/faq. Confirmed in the screenshot. - Mobile drawer: FAQ link is also present in the mobile
isMenuOpensection withmobileLinkCls+onClick={closeMenu}. Both viewports are covered.
Secondary fixes this PR silently resolves
FAQSection"View All FAQs" button —frontend/src/components/explore/FAQSection.jsxalready had<Link to="/faq">View All FAQs</Link>. Before this PR it was a dead link (no matching route). Now it works.- Footer FAQ link —
frontend/src/components/shared/Footer.jsxalready had/faqin the Platform section. Now it also resolves correctly.
FAQPage quality
- The page itself is well-built: sticky index sidebar, accessible accordion, hero section, "Go Back" CTA.
- Accessibility:
aria-expanded,aria-controls,aria-labelledby,role="region"are all properly implemented on the FAQ accordion. ✅ handleGoBack()has a fallback to/explorewhenwindow.history.length <= 1(e.g., direct navigation). ✅<title>FAQ - CodeLens</title>inside JSX is valid in React 19 — React hoists it to<head>automatically. ✅
⚠️ Issues to address before merging
1. Pre-existing dead import in App.jsx (not introduced by this PR, but visible)
// App.jsx — Line 30: imported but never used in routes
import FAQSection from "./components/explore/FAQSection";FAQSection is the landing-page FAQ accordion component. It is not a page and should not be imported in App.jsx. This should be cleaned up:
- import FAQSection from "./components/explore/FAQSection";2. No SEO meta tags on FAQPage
The page has <title>FAQ - CodeLens</title> but no <meta name="description">, Open Graph, or canonical tags. For a public-facing FAQ page this matters for search indexing:
// Add inside <main> in FAQPage.jsx
<meta
name="description"
content="Frequently asked questions about CodeLens — platform tracking, data privacy, open source contributions, and more."
/>3. No <title> on most other pages
The approach is inconsistent — most other pages (e.g., TermsPage, PrivacyPage, ExplorePage) have no <title> tag at all. It would be worth raising a separate issue to add <title> consistently across all pages.
4. No lazy loading (low priority)
FAQPage is eagerly imported, consistent with all other pages. For a growing app, lazy loading all page-level components with React.lazy + Suspense would be a good future improvement — but this is out of scope for this PR.
🧪 Test coverage
No test files exist anywhere in the frontend. This is a project-wide gap, not specific to this PR.
📊 Compatibility check — nearby files
| File | Compatible? | Notes |
|---|---|---|
App.jsx |
✅ | Route added correctly, ordered before * |
Navbar.jsx |
✅ | Desktop + mobile both updated, consistent styling |
Footer.jsx |
✅ | Already had /faq link — now resolves |
FAQSection.jsx (explore) |
✅ | "View All FAQs" <Link to="/faq"> now resolves |
FAQPage.jsx |
✅ | Well-structured, accessible, no broken imports |
data/faqs.js |
✅ | Used correctly by FAQPage, categories rendered dynamically |
NotFoundPage (* route) |
✅ | Not affected, /faq intercepts before it |
ProtectedRoute / PublicRoute |
✅ | Correctly not wrapped — FAQ is public |
🏁 Verdict
The PR is production-ready for the specific bug it fixes. The route works, both desktop and mobile navbars are updated, styling is consistent, and it fixes two additional silently broken links (Footer + FAQSection CTA).
Recommended before merging:
- Remove the unused
FAQSectionimport fromApp.jsx - Add a
<meta name="description">toFAQPage.jsx
These are minor and can be fixed in a single follow-up commit on this branch.
|
@anujsharma8d implement the recommended suggestions given by coderabbitai |
|
@coderabbitai please tell whats this in your previous comment : |
|
Tip For best results, initiate chat on the files or code changes. The PR description image shows the CodeLens FAQ page at
What is a
|
| Page | Browser tab shows |
|---|---|
/faq |
✅ "FAQ - CodeLens" |
/terms |
❌ Just "CodeLens" or a blank title |
/privacy |
❌ Just "CodeLens" or a blank title |
/explore |
❌ Just "CodeLens" or a blank title |
This is inconsistent — ideally every page should have its own descriptive <title> tag, like:
Terms of Service - CodeLensPrivacy Policy - CodeLensExplore - CodeLens
Why it matters
- User experience — users with many tabs open can't tell which tab is which
- SEO — search engines rank pages better when they have descriptive, unique titles
- Professionalism — consistent titles across all pages is a standard web practice
What I recommended
Since this is a project-wide issue (not caused by this PR), it would be cleaner to track it in a separate GitHub issue rather than making this PR responsible for fixing every page. Would you like me to open that issue? 🐇
|
@coderabbitai so please make a separate issue handling this title issue with proper and logical title and insane, end to end description for the issue so that contributors can also understand this issue and work on it |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
echo "=== All page components ==="
fd -e jsx -e tsx --search-path frontend/src/pages
echo ""
echo "=== Pages WITH <title> tag ==="
fd -e jsx -e tsx --search-path frontend/src/pages -x grep -l "<title>" {}
echo ""
echo "=== Pages WITHOUT <title> tag ==="
fd -e jsx -e tsx --search-path frontend/src/pages -x sh -c 'grep -L "<title>" "$1" && echo "$1 -> MISSING"' _ {}
echo ""
echo "=== Detailed: title tag content per page ==="
fd -e jsx -e tsx --search-path frontend/src/pages -x sh -c '
file="$1"
result=$(grep -n "<title>" "$file" 2>/dev/null)
if [ -n "$result" ]; then
echo "✅ $file: $result"
else
echo "❌ $file: NO <title>"
fi
' _ {}
echo ""
echo "=== Check if helmet or react-helmet is used anywhere ==="
rg -rn "Helmet\|react-helmet\|next/head" frontend/src --include="*.jsx" --include="*.tsx" --include="*.js"
echo ""
echo "=== Check index.html for base title ==="
cat frontend/index.html 2>/dev/null || fd "index.html" --search-path frontend -x cat {}Length of output: 5092 🏁 Script executed: #!/bin/bash
gh issue create \
--repo kunalverma2512/CodeLens \
--title "feat(seo/ux): Add unique <title> tags to all page components for consistent browser tab titles and SEO" \
--body "## 🐛 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\`:
\`\`\`html
<title>CodeLens</title>
\`\`\`
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\`:
\`\`\`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
- [ ] Every page component listed above has a \`<title>\` tag with a unique, descriptive value
- [ ] All titles follow the consistent format \`{Page Name} - CodeLens\`
- [ ] Opening multiple CodeLens tabs in a browser shows distinct, readable tab names
- [ ] No external library (e.g., \`react-helmet\`) is required — use React 19 native title hoisting
---
## 📎 References
- Discovered during review of PR `#151` (FAQ route fix)
- \`FAQPage.jsx\` already implements the correct pattern and can be used as reference
- React 19 document metadata: https://react.dev/reference/react-dom/components/title
- Requested by `@kunalverma2512`"Length of output: 4510
➡️ #152 Here's a summary of what the issue covers:
Any contributor picking up that issue has everything they need to get started. 🐇 |
|
@kunalverma2512 |
|
@coderabbitai please check whether the latest commit properly handles the your recommended changes in the codes you indicated and is this ready to merge |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
echo "=== App.jsx — check for FAQSection import ==="
fd -e jsx "App" --search-path frontend/src -x grep -n "FAQSection\|import" {}
echo ""
echo "=== FAQPage.jsx — check for meta description and title ==="
fd -e jsx "FAQPage" --search-path frontend/src -x grep -n "meta\|title\|description" {}
echo ""
echo "=== FAQPage.jsx — first 60 lines ==="
fd -e jsx "FAQPage" --search-path frontend/src -x head -60 {}
echo ""
echo "=== Navbar.jsx — check for FAQ links (desktop + mobile) ==="
fd -e jsx "Navbar" --search-path frontend/src/components -x grep -n "faq\|FAQ" {}
echo ""
echo "=== App.jsx — full import section and route for /faq ==="
fd -e jsx "App" --search-path frontend/src -x grep -n "faq\|FAQ\|Route\|import" {}Length of output: 8741
✅ All Recommended Changes — Verified
🏁 Verdict: Ready to MergeThe PR is production-ready. All originally flagged issues are resolved, both desktop and mobile navbars cover the FAQ link, the route is correctly ordered, the dead import is cleaned up, and the FAQ page now has proper SEO meta tags. The separate title-consistency issue is already tracked in 🐇 ✨ |
|
@anujsharma8d well done you can support this project by starring it |
kunalverma2512
added
good first issue
2 participants
📌 Pull Request Summary
🔗 Related Issue
Closes #148
📝 Description
This PR fixed the faq page route and adds faq link in the navbar.
Changes Made
Motivation
There is no route to take user to the faq page, so after clicking faq link it redirects us to the same page.
🚀 Type of Change
Select all that apply:
🧪 Testing
Verification
📸 Screenshots / Demo (If Applicable)
✅ Checklist
📚 Additional Notes
FAQ page is already created in the codebase but there is no route that connects the website with the faq page.
Summary by CodeRabbit