added FAQ page and improved app.jsx#77
Conversation
🚀 PR Received SuccessfullyHello @dikshajha13, 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 (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds a new FAQ page component with category-filtered, expandable Q&A and wires it into the app by registering a ChangesFAQ Page Feature
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
🚥 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
frontend/src/pages/FAQ.jsx (1)
79-112: ⚡ Quick winConsider adding accessibility attributes for FAQ items.
The FAQ items lack semantic HTML and ARIA attributes that would improve keyboard navigation and screen reader support. While the current implementation functions, adding
aria-expandedand proper keyboard handlers would better serve all users.♿ Suggested accessibility improvements
<div key={index} onClick={()=> setOpenQuestion( openQuestion ===index?null:index ) } + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + setOpenQuestion(openQuestion === index ? null : index); + } + }} + role="button" + tabIndex={0} + aria-expanded={openQuestion === index} className="border rounded-2xl p-5 cursor-pointer hover:shadow-lg transition-all duration-300" >🤖 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/pages/FAQ.jsx` around lines 79 - 112, The FAQ list uses a clickable div for each item but lacks accessibility attributes and keyboard support; update the clickable element (preferably replace the div with a semantic <button> or at minimum add role="button" and tabIndex={0}) for the mapping over faq and make it expose aria-expanded={openQuestion === index} and aria-controls pointing to the answer panel id (e.g., "faq-answer-{index}"), give the answer <p> an id matching that aria-controls, and add an onKeyDown handler that toggles setOpenQuestion (same logic as the onClick) when Enter or Space is pressed so keyboard and screen reader users can open/close items (refer to setOpenQuestion, openQuestion, faq, selectedCategory, item, index).frontend/src/App.jsx (1)
67-68: 💤 Low valueConsider formatting the FAQ route consistently.
The FAQ route is split across two lines, while similar public routes (lines 70-78, 87-88) use single-line format. For consistency, consider:
- <Route - path="/faq" element={<FAQ />} /> + <Route path="/faq" element={<FAQ />} />🤖 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` around lines 67 - 68, The FAQ route JSX is split across two lines; make it consistent with other public routes by collapsing the Route element into a single line (change the Route that references FAQ to the single-line form using Route with path="/faq" and element={<FAQ />}), update the Route JSX in App.jsx where the FAQ Route is declared, and reformat/run Prettier so it matches the existing route formatting style used for other routes.
🤖 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 `@frontend/src/pages/FAQ.jsx`:
- Around line 63-74: The category buttons currently use onMouseEnter which
causes accessibility/usability issues; replace the onMouseEnter handlers with
onClick handlers on the same button elements so
setSelectedCategory("GENERAL"/"TOOLS"/"CONTESTS"/"DASHBOARD") is called on
click, and ensure the existing button elements retain keyboard focusability and
visible focus styles (no additional role changes required because they are
native <button> elements).
- Around line 63-74: The category buttons currently render unstyled; add
className attributes and active-state classes so they get CSS styling and show
selection. For each button that calls setSelectedCategory (e.g., the buttons for
"GENERAL", "TOOLS", "CONTESTS", "DASHBOARD"), add a base class like
"faq-category-button" and conditionally add an "active" or "selected" class when
selectedCategory === "GENERAL"/"TOOLS"/...; ensure styles exist in the
corresponding CSS/SCSS (or module) to handle base, :hover, and .active states
and consider also adding an onClick handler and aria-pressed attribute tied to
selectedCategory for keyboard/accessibility.
- Around line 5-46: The FAQ array named faq in FAQ.jsx should be extracted out
of the component to improve reusability and testability; create a new module
(e.g., frontend/src/data/faqData.js) that exports the constant (e.g., FAQ_DATA)
containing the current objects, or move the faq constant to the top-level of
FAQ.jsx above the component, then replace the in-file definition with an import
or reference to FAQ_DATA and update any references inside the component
accordingly (search for the variable name faq inside the component to locate
usages).
- Around line 5-46: The faq array contains answer strings with accidental
leading spaces and a few typos; remove any leading space characters at the start
of each answer value in the faq entries and correct the text mistakes: in the
entry with ques "Are upcoming coding constests tracked on CodeLens?" change
"constests" → "contests" and "constest" → "contest", and in the entry with ques
"What insights are available in the dashboard? " change "coing" → "coding";
update the relevant answer strings in the faq constant accordingly (locate by
the ques values above).
---
Nitpick comments:
In `@frontend/src/App.jsx`:
- Around line 67-68: The FAQ route JSX is split across two lines; make it
consistent with other public routes by collapsing the Route element into a
single line (change the Route that references FAQ to the single-line form using
Route with path="/faq" and element={<FAQ />}), update the Route JSX in App.jsx
where the FAQ Route is declared, and reformat/run Prettier so it matches the
existing route formatting style used for other routes.
In `@frontend/src/pages/FAQ.jsx`:
- Around line 79-112: The FAQ list uses a clickable div for each item but lacks
accessibility attributes and keyboard support; update the clickable element
(preferably replace the div with a semantic <button> or at minimum add
role="button" and tabIndex={0}) for the mapping over faq and make it expose
aria-expanded={openQuestion === index} and aria-controls pointing to the answer
panel id (e.g., "faq-answer-{index}"), give the answer <p> an id matching that
aria-controls, and add an onKeyDown handler that toggles setOpenQuestion (same
logic as the onClick) when Enter or Space is pressed so keyboard and screen
reader users can open/close items (refer to setOpenQuestion, openQuestion, faq,
selectedCategory, item, index).
🪄 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: 13f2c4f6-5090-4111-87fa-d56dd1dc3299
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
frontend/src/App.jsxfrontend/src/pages/FAQ.jsx
| const faq=[ | ||
| { | ||
| category: "GENERAL", | ||
| ques: "What is CodeLens?", | ||
| answer: " CodeLens is basically a developer platform. CodeLens aggregates your GitHub, LeetCode, and Codeforces data into a single AI-powered command center that tells you exactly what to learn next.", | ||
| }, | ||
| { | ||
| category: "GENERAL", | ||
| ques: "How does Codelens help developers?", | ||
| answer: " It helps users track coding progresses, analyze profiles, explore various contests, and improve problem-solving consistency across multiple coding platforms", | ||
| }, | ||
| { | ||
| category: "GENERAL", | ||
| ques: "What are different platform integrated with CodeLens?", | ||
| answer: "CodeLens currently supports integrations and tracking with platforms like LeetCode, Codeforces , Codechef, Git and Github", | ||
| }, | ||
| { | ||
| category: "TOOLS", | ||
| ques: "Which type of tools are provided?", | ||
| answer: "CodeLens offers AI-powered developer tools", | ||
| }, | ||
| { | ||
| category: "TOOLS", | ||
| ques: "What is Vela AI used for?", | ||
| answer: "Vela AI helps developers receive intelligent coding guidance, recommendations, and assistance inside the CodeLens platform.", | ||
| }, | ||
| { | ||
| category:"TOOLS", | ||
| ques: "How does Apex AI improve coding preparation?", | ||
| answer: "Apex AI analyzes user activity and provides insights , recommendations, and learning assistance for competitive programming improvement.", | ||
| }, | ||
| { | ||
| category: "CONTESTS", | ||
| ques: "Are upcoming coding constests tracked on CodeLens?", | ||
| answer: "YES. CodeLens provides constest tracking for multiple competitive programming platform in one centralized interface.", | ||
| }, | ||
| { | ||
| category: "DASHBOARD", | ||
| ques: "What insights are available in the dashboard? ", | ||
| answer: "The dashboard helps users monitor coing activity, platform statistics and progress across the platforms used in one place.", | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win
Extract FAQ data to a separate constant or file.
The FAQ data array is currently defined inside the component, which reduces reusability and makes testing harder. Consider moving it outside the component or to a separate faqData.js file.
♻️ Suggested refactor
Option 1: Move above the component in the same file:
import {useState} from "react";
+const FAQ_DATA = [
+ {
+ category: "GENERAL",
+ ques: "What is CodeLens?",
+ answer: "CodeLens is basically a developer platform...",
+ },
+ // ... rest of FAQ items
+];
+
function FAQ(){
- const faq=[
- {
- category: "GENERAL",
- ques: "What is CodeLens?",
- answer: " CodeLens is basically...",
- },
- // ... rest of FAQ items
-];
+ const faq = FAQ_DATA;Option 2: Extract to frontend/src/data/faqData.js:
// frontend/src/data/faqData.js
export const FAQ_DATA = [
{
category: "GENERAL",
ques: "What is CodeLens?",
answer: "CodeLens is basically a developer platform...",
},
// ... rest of FAQ items
];Then import in FAQ.jsx:
import {useState} from "react";
+import {FAQ_DATA} from "../data/faqData";
function FAQ(){
- const faq=[
- // ... FAQ items
- ];
+ const faq = FAQ_DATA;🤖 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/pages/FAQ.jsx` around lines 5 - 46, The FAQ array named faq in
FAQ.jsx should be extracted out of the component to improve reusability and
testability; create a new module (e.g., frontend/src/data/faqData.js) that
exports the constant (e.g., FAQ_DATA) containing the current objects, or move
the faq constant to the top-level of FAQ.jsx above the component, then replace
the in-file definition with an import or reference to FAQ_DATA and update any
references inside the component accordingly (search for the variable name faq
inside the component to locate usages).
Fix leading spaces in answer strings and correct typos.
Several FAQ answers have leading spaces that will display awkwardly, and there are typos in user-facing content:
Leading spaces in lines 9, 14, 19, 24, 29, 34, 39, 44 - remove the space at the start of each answer string.
Typos to fix:
- Line 38: "constests" → "contests"
- Line 39: "constest" → "contest"
- Line 44: "coing" → "coding"
📝 Proposed fixes
{
category: "GENERAL",
ques: "What is CodeLens?",
- answer: " CodeLens is basically a developer platform. CodeLens aggregates your GitHub, LeetCode, and Codeforces data into a single AI-powered command center that tells you exactly what to learn next.",
+ answer: "CodeLens is basically a developer platform. CodeLens aggregates your GitHub, LeetCode, and Codeforces data into a single AI-powered command center that tells you exactly what to learn next.",
},
{
category: "GENERAL",
ques: "How does Codelens help developers?",
- answer: " It helps users track coding progresses, analyze profiles, explore various contests, and improve problem-solving consistency across multiple coding platforms",
+ answer: "It helps users track coding progresses, analyze profiles, explore various contests, and improve problem-solving consistency across multiple coding platforms",
},
{
category: "GENERAL",
ques: "What are different platform integrated with CodeLens?",
- answer: "CodeLens currently supports integrations and tracking with platforms like LeetCode, Codeforces , Codechef, Git and Github",
+ answer: "CodeLens currently supports integrations and tracking with platforms like LeetCode, Codeforces, Codechef, Git and Github",
},
{
category: "TOOLS",
ques: "Which type of tools are provided?",
- answer: "CodeLens offers AI-powered developer tools",
+ answer: "CodeLens offers AI-powered developer tools",
},
{
category: "TOOLS",
ques: "What is Vela AI used for?",
- answer: "Vela AI helps developers receive intelligent coding guidance, recommendations, and assistance inside the CodeLens platform.",
+ answer: "Vela AI helps developers receive intelligent coding guidance, recommendations, and assistance inside the CodeLens platform.",
},
{
category:"TOOLS",
ques: "How does Apex AI improve coding preparation?",
- answer: "Apex AI analyzes user activity and provides insights , recommendations, and learning assistance for competitive programming improvement.",
+ answer: "Apex AI analyzes user activity and provides insights, recommendations, and learning assistance for competitive programming improvement.",
},
{
category: "CONTESTS",
- ques: "Are upcoming coding constests tracked on CodeLens?",
- answer: "YES. CodeLens provides constest tracking for multiple competitive programming platform in one centralized interface.",
+ ques: "Are upcoming coding contests tracked on CodeLens?",
+ answer: "YES. CodeLens provides contest tracking for multiple competitive programming platform in one centralized interface.",
},
{
category: "DASHBOARD",
ques: "What insights are available in the dashboard? ",
- answer: "The dashboard helps users monitor coing activity, platform statistics and progress across the platforms used in one place.",
+ answer: "The dashboard helps users monitor coding activity, platform statistics and progress across the platforms used in one place.",
},🤖 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/pages/FAQ.jsx` around lines 5 - 46, The faq array contains
answer strings with accidental leading spaces and a few typos; remove any
leading space characters at the start of each answer value in the faq entries
and correct the text mistakes: in the entry with ques "Are upcoming coding
constests tracked on CodeLens?" change "constests" → "contests" and "constest" →
"contest", and in the entry with ques "What insights are available in the
dashboard? " change "coing" → "coding"; update the relevant answer strings in
the faq constant accordingly (locate by the ques values above).
| <button onMouseEnter={() => setSelectedCategory("GENERAL")}> | ||
| GENERAL | ||
| </button> | ||
| <button onMouseEnter={() => setSelectedCategory("TOOLS")}> | ||
| TOOLS | ||
| </button> | ||
| <button onMouseEnter={() => setSelectedCategory("CONTESTS")}> | ||
| CONTESTS | ||
| </button> | ||
| <button onMouseEnter={() => setSelectedCategory("DASHBOARD")}> | ||
| DASHBOARD | ||
| </button> |
There was a problem hiding this comment.
Replace onMouseEnter with onClick for category selection.
Using onMouseEnter for category switching creates severe usability and accessibility problems:
- Accidental hovers change content unexpectedly
- No keyboard navigation support (violates WCAG 2.1.1)
- Touch devices cannot hover
- Users cannot see category content before committing to selection
♿ Proposed accessibility fix
- <button onMouseEnter={() => setSelectedCategory("GENERAL")}>
+ <button onClick={() => setSelectedCategory("GENERAL")}>
GENERAL
</button>
- <button onMouseEnter={() => setSelectedCategory("TOOLS")}>
+ <button onClick={() => setSelectedCategory("TOOLS")}>
TOOLS
</button>
- <button onMouseEnter={() => setSelectedCategory("CONTESTS")}>
+ <button onClick={() => setSelectedCategory("CONTESTS")}>
CONTESTS
</button>
- <button onMouseEnter={() => setSelectedCategory("DASHBOARD")}>
+ <button onClick={() => setSelectedCategory("DASHBOARD")}>
DASHBOARD
</button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button onMouseEnter={() => setSelectedCategory("GENERAL")}> | |
| GENERAL | |
| </button> | |
| <button onMouseEnter={() => setSelectedCategory("TOOLS")}> | |
| TOOLS | |
| </button> | |
| <button onMouseEnter={() => setSelectedCategory("CONTESTS")}> | |
| CONTESTS | |
| </button> | |
| <button onMouseEnter={() => setSelectedCategory("DASHBOARD")}> | |
| DASHBOARD | |
| </button> | |
| <button onClick={() => setSelectedCategory("GENERAL")}> | |
| GENERAL | |
| </button> | |
| <button onClick={() => setSelectedCategory("TOOLS")}> | |
| TOOLS | |
| </button> | |
| <button onClick={() => setSelectedCategory("CONTESTS")}> | |
| CONTESTS | |
| </button> | |
| <button onClick={() => setSelectedCategory("DASHBOARD")}> | |
| DASHBOARD | |
| </button> |
🤖 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/pages/FAQ.jsx` around lines 63 - 74, The category buttons
currently use onMouseEnter which causes accessibility/usability issues; replace
the onMouseEnter handlers with onClick handlers on the same button elements so
setSelectedCategory("GENERAL"/"TOOLS"/"CONTESTS"/"DASHBOARD") is called on
click, and ensure the existing button elements retain keyboard focusability and
visible focus styles (no additional role changes required because they are
native <button> elements).
Add styling to category buttons.
The category buttons have no className attributes, so they will render as unstyled, making the interface appear broken and buttons unrecognizable.
🎨 Proposed styling fix
<div
className="flex gap-4 mt-10">
- <button onMouseEnter={() => setSelectedCategory("GENERAL")}>
+ <button
+ onMouseEnter={() => setSelectedCategory("GENERAL")}
+ className={`px-6 py-2 rounded-lg font-semibold transition-colors ${
+ selectedCategory === "GENERAL"
+ ? "bg-blue-600 text-white"
+ : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+ }`}
+ >
GENERAL
</button>
- <button onMouseEnter={() => setSelectedCategory("TOOLS")}>
+ <button
+ onMouseEnter={() => setSelectedCategory("TOOLS")}
+ className={`px-6 py-2 rounded-lg font-semibold transition-colors ${
+ selectedCategory === "TOOLS"
+ ? "bg-blue-600 text-white"
+ : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+ }`}
+ >
TOOLS
</button>
- <button onMouseEnter={() => setSelectedCategory("CONTESTS")}>
+ <button
+ onMouseEnter={() => setSelectedCategory("CONTESTS")}
+ className={`px-6 py-2 rounded-lg font-semibold transition-colors ${
+ selectedCategory === "CONTESTS"
+ ? "bg-blue-600 text-white"
+ : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+ }`}
+ >
CONTESTS
</button>
- <button onMouseEnter={() => setSelectedCategory("DASHBOARD")}>
+ <button
+ onMouseEnter={() => setSelectedCategory("DASHBOARD")}
+ className={`px-6 py-2 rounded-lg font-semibold transition-colors ${
+ selectedCategory === "DASHBOARD"
+ ? "bg-blue-600 text-white"
+ : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+ }`}
+ >
DASHBOARD
</button>🤖 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/pages/FAQ.jsx` around lines 63 - 74, The category buttons
currently render unstyled; add className attributes and active-state classes so
they get CSS styling and show selection. For each button that calls
setSelectedCategory (e.g., the buttons for "GENERAL", "TOOLS", "CONTESTS",
"DASHBOARD"), add a base class like "faq-category-button" and conditionally add
an "active" or "selected" class when selectedCategory === "GENERAL"/"TOOLS"/...;
ensure styles exist in the corresponding CSS/SCSS (or module) to handle base,
:hover, and .active states and consider also adding an onClick handler and
aria-pressed attribute tied to selectedCategory for keyboard/accessibility.
|
@coderabbitai review this entire PR thoroughly and point out every area that can be improved, optimized, or made more logically consistent so the overall implementation becomes cleaner, stronger, and production-ready for the project. |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 17244
|
| Location | Typo | Correction |
|---|---|---|
| CONTESTS question | "constests" |
"contests" |
| CONTESTS answer | "constest tracking" |
"contest tracking" |
| DASHBOARD answer | "coing activity" |
"coding activity" |
| GENERAL answer | "coding progresses" |
"coding progress" |
10. 🟡 Accessibility Issues
- Category
<button>elements have noaria-pressedoraria-selectedattributes to communicate state to screen readers. - The FAQ accordion
<div>elements act as interactive controls but are not<button>elements — this breaks keyboard navigation (noTabfocus, noEnter/Spaceactivation). Wrap each FAQ item in a<button>or addrole="button"withtabIndex={0}and anonKeyDownhandler.
// FAQ item should be a button or at minimum:
<div
role="button"
tabIndex={0}
onKeyDown={(e) => e.key === "Enter" && setOpenQuestion(openQuestion === index ? null : index)}
onClick={...}
...
>11. 🟡 Missing Dark Mode Support
The component uses hardcoded text-gray-500 and text-gray-600 with no dark: variants, while the rest of the project (e.g., CodeforcesPage.jsx, AccountCenterPage.jsx) consistently uses Tailwind dark mode classes. Add dark:text-gray-400, dark:border-gray-700, dark:bg-gray-800 equivalents to match the app's design system.
12. 🟢 Component Declaration Style Inconsistency
All other page components use export default function ComponentName() directly. FAQ.jsx uses a function FAQ() declaration followed by a separate export default FAQ. Prefer the direct export style for consistency:
// Other pages use:
export default function FAQPage() { ... }Summary Table
| # | Severity | File | Issue |
|---|---|---|---|
| 1 | 🔴 Bug | FAQ.jsx |
openQuestion not reset on category switch |
| 2 | 🔴 UX Bug | FAQ.jsx |
onMouseEnter used instead of onClick for category selection |
| 3 | 🔴 Perf | FAQ.jsx |
faq array redefined on every render |
| 4 | 🔴 Dead code | App.jsx |
Unused FAQSection import |
| 5 | 🟡 | FAQ.jsx |
index used as key in filtered list |
| 6 | 🟡 | FAQ.jsx |
No active state indicator on category buttons |
| 7 | 🟡 | FAQ.jsx |
4 content typos |
| 8 | 🟡 | FAQ.jsx |
Accessibility: no keyboard navigation, no ARIA attributes |
| 9 | 🟡 | FAQ.jsx |
No dark mode Tailwind variants |
| 10 | 🟡 | App.jsx |
Inconsistent route indentation and placement |
| 11 | 🟢 | Both | File naming (FAQ.jsx → FAQPage.jsx) and export style inconsistency |
The 🔴 issues (especially items 1 & 2) need to be fixed before merge as they cause incorrect functional behaviour. The rest are important for code quality and production readiness.
|
@dikshajha13 See what coderabbitai suggestion and do reasoning about what is said and make sure to come up with PR having everything resolved Stick screenshot of the page and stick video (via drive link) showcasing your work Looking for your contributions |
2 participants
##changes made:
-added FAQ page component
-updated app.jsx with new changes
##purpose:
contribution for GSSoC project
Summary by CodeRabbit