feat: modular FAQ system with 12 sections and data layer refactor#199
feat: modular FAQ system with 12 sections and data layer refactor#199snehamathad604 wants to merge 1 commit into
Conversation
|
@snehamathad604 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. |
🎉 Welcome to CodeLens — Thank You for Your Contribution!Hey @snehamathad604! 👋 We are genuinely excited to have you here. Every single PR — big or small — makes CodeLens better, and yours is no exception. Take a moment to review the checklist below to help us merge your work quickly and smoothly. ✅ Before Requesting a Review
💬 Join Our Community Channel — This is MandatoryBeing part of our communication channel is compulsory for all contributors, not optional. Why join? This is where all important announcements, PR review updates, contribution discussions, and maintainer decisions happen in real time. Contributors who are not in the channel regularly miss critical context and updates, which often leads to duplicated or misaligned work. Staying connected here is what keeps the community strong and your contributions impactful. We are rooting for you! If you have any questions, drop them in the channel or comment right here on this PR. Let's build something great together. 🚀✨ |
📝 WalkthroughWalkthroughThe PR expands the FAQ page from a single data-driven component into 12 modular section components, each backed by a dedicated per-category data file. A shared ChangesFAQ Modular System Expansion
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related issues
Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 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: 3
🧹 Nitpick comments (1)
frontend/src/components/faq/GettingStartedFAQ.jsx (1)
3-37: ⚖️ Poor tradeoffConsider extracting a shared FAQ card component.
Multiple card-based FAQ sections repeat the same
map→ bordered card structure with minor layout and styling variations. Extracting a reusable<FAQCardList>or<FAQCardGrid>component could reduce duplication and centralize future card-rendering updates.
frontend/src/components/faq/GettingStartedFAQ.jsx#L18-L33: grid layout with 2-column responsive cards.frontend/src/components/faq/AnalyticsDashboardFAQ.jsx#L17-L38: 3-column grid with inverted (black) card backgrounds.frontend/src/components/faq/AccountManagementFAQ.jsx#L17-L38: vertical stacked cards usingspace-y-6.frontend/src/components/faq/LegalComplianceFAQ.jsx#L30-L51: cards nested in a two-column layout grid.Each could pass
items,layout(grid/stack), andvariant(colors/shadows) props to a shared component, similar to howTroubleshootingFAQdelegates toFAQAccordion.🤖 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/faq/GettingStartedFAQ.jsx` around lines 3 - 37, Extract a reusable FAQ card component (e.g., FAQCardGrid or FAQCardList) to consolidate the duplicated map → card-rendering pattern across multiple FAQ section files. Create a new component that accepts props for items (the FAQ array), layout (controlling grid columns or stacking), and variant (for color and shadow styling). In GettingStartedFAQ.jsx (lines 18-33), replace the map and card div structure with a call to the new component, passing gettingStartedFaqs and layout="grid-cols-2". In AnalyticsDashboardFAQ.jsx (lines 17-38), extract the 3-column grid cards and replace them with the shared component using layout="grid-cols-3" and variant="inverted". In AccountManagementFAQ.jsx (lines 17-38), extract the vertically stacked cards and use layout="stack". In LegalComplianceFAQ.jsx (lines 30-51), extract the cards from the nested two-column grid and replace them with the shared component. Centralize the card styling (border, padding, shadow) in the extracted component and allow variants to customize the appearance, similar to how TroubleshootingFAQ uses FAQAccordion.
🤖 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/components/faq/DataPrivacyFAQ.jsx`:
- Around line 6-8: The section element with aria-labelledby="privacy-title" in
DataPrivacyFAQ.jsx currently applies a bottom border using border-b-4, but it
should use a top border to match the FAQ layout contract. Change border-b-4 to
border-t-4 in the className attribute of the section element to ensure visual
consistency with the other FAQ sections.
In `@frontend/src/components/faq/FAQAccordion.jsx`:
- Around line 22-33: The button element currently wraps the h3 heading, which
violates HTML semantics and weakens assistive technology navigation. Restructure
the code so the h3 element wraps the button instead—move the button opening tag
inside the h3, and close the button before closing the h3. This way the heading
remains semantically correct while keeping all button attributes (type="button",
onClick, aria-expanded, aria-controls, id) intact on the button element itself.
In `@frontend/src/components/faq/OpenSourceContribFAQ.jsx`:
- Line 8: The section divider styling is inconsistent across FAQ components,
using bottom borders (border-b-4) instead of top borders (border-t-4) per the
layout standard. Replace border-b-4 with border-t-4 in the className attribute
at the following three locations:
frontend/src/components/faq/OpenSourceContribFAQ.jsx line 8 in the main section
div, frontend/src/components/faq/PerformanceFAQ.jsx line 6 in the fallback
section div, and frontend/src/components/faq/PerformanceFAQ.jsx line 20 in the
primary render section div. Ensure all three locations use border-t-4 and
maintain the existing py-20 padding for consistency with the FAQ layout
standard.
---
Nitpick comments:
In `@frontend/src/components/faq/GettingStartedFAQ.jsx`:
- Around line 3-37: Extract a reusable FAQ card component (e.g., FAQCardGrid or
FAQCardList) to consolidate the duplicated map → card-rendering pattern across
multiple FAQ section files. Create a new component that accepts props for items
(the FAQ array), layout (controlling grid columns or stacking), and variant (for
color and shadow styling). In GettingStartedFAQ.jsx (lines 18-33), replace the
map and card div structure with a call to the new component, passing
gettingStartedFaqs and layout="grid-cols-2". In AnalyticsDashboardFAQ.jsx (lines
17-38), extract the 3-column grid cards and replace them with the shared
component using layout="grid-cols-3" and variant="inverted". In
AccountManagementFAQ.jsx (lines 17-38), extract the vertically stacked cards and
use layout="stack". In LegalComplianceFAQ.jsx (lines 30-51), extract the cards
from the nested two-column grid and replace them with the shared component.
Centralize the card styling (border, padding, shadow) in the extracted component
and allow variants to customize the appearance, similar to how
TroubleshootingFAQ uses FAQAccordion.
🪄 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: 92aac4ae-1f1e-4119-bd0c-d01f9dde31f0
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (34)
frontend/package.jsonfrontend/src/components/auth/ForgotPassword.jsxfrontend/src/components/codeforces/VerifyModal.jsxfrontend/src/components/explore/SubscribeNewsletter.jsxfrontend/src/components/faq/AccessibilityFAQ.jsxfrontend/src/components/faq/AccountManagementFAQ.jsxfrontend/src/components/faq/AnalyticsDashboardFAQ.jsxfrontend/src/components/faq/CommunityFAQ.jsxfrontend/src/components/faq/DataPrivacyFAQ.jsxfrontend/src/components/faq/FAQAccordion.jsxfrontend/src/components/faq/GettingStartedFAQ.jsxfrontend/src/components/faq/LegalComplianceFAQ.jsxfrontend/src/components/faq/OpenSourceContribFAQ.jsxfrontend/src/components/faq/PerformanceFAQ.jsxfrontend/src/components/faq/PlatformIntegrationFAQ.jsxfrontend/src/components/faq/RoadmapFAQ.jsxfrontend/src/components/faq/TroubleshootingFAQ.jsxfrontend/src/data/faqs.jsfrontend/src/data/faqs/accessibility.jsfrontend/src/data/faqs/accountManagement.jsfrontend/src/data/faqs/analyticsDashboard.jsfrontend/src/data/faqs/community.jsfrontend/src/data/faqs/dataPrivacy.jsfrontend/src/data/faqs/gettingStarted.jsfrontend/src/data/faqs/index.jsfrontend/src/data/faqs/legalCompliance.jsfrontend/src/data/faqs/openSourceContrib.jsfrontend/src/data/faqs/performance.jsfrontend/src/data/faqs/platformIntegration.jsfrontend/src/data/faqs/roadmap.jsfrontend/src/data/faqs/troubleshooting.jsfrontend/src/index.cssfrontend/src/pages/Contact.jsxfrontend/src/pages/FAQPage.jsx
| <section | ||
| aria-labelledby="privacy-title" | ||
| className="py-20 px-6 bg-white text-black border-b-4 border-black" |
There was a problem hiding this comment.
Use the top divider here to match the FAQ layout contract.
The FAQ expansion objective calls for border-t-4 dividers between sections, but this wrapper uses border-b-4. Switching the edge keeps the sections visually consistent.
♻️ Proposed fix
- <section
- aria-labelledby="privacy-title"
- className="py-20 px-6 bg-white text-black border-b-4 border-black"
- >
+ <section
+ aria-labelledby="privacy-title"
+ className="py-20 px-6 bg-white text-black border-t-4 border-black"
+ >📝 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.
| <section | |
| aria-labelledby="privacy-title" | |
| className="py-20 px-6 bg-white text-black border-b-4 border-black" | |
| <section | |
| aria-labelledby="privacy-title" | |
| className="py-20 px-6 bg-white text-black border-t-4 border-black" |
🤖 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/faq/DataPrivacyFAQ.jsx` around lines 6 - 8, The
section element with aria-labelledby="privacy-title" in DataPrivacyFAQ.jsx
currently applies a bottom border using border-b-4, but it should use a top
border to match the FAQ layout contract. Change border-b-4 to border-t-4 in the
className attribute of the section element to ensure visual consistency with the
other FAQ sections.
| <button | ||
| type="button" | ||
| onClick={() => toggle(index)} | ||
| className="flex w-full items-center justify-between text-left" | ||
| aria-expanded={isOpen} | ||
| aria-controls={panelId} | ||
| id={buttonId} | ||
| > | ||
| <h3 className="text-xl sm:text-2xl font-black uppercase tracking-tight"> | ||
| {item.q} | ||
| </h3> | ||
|
|
There was a problem hiding this comment.
Move the heading outside the button to keep valid accordion semantics.
On Line 22, the <button> currently contains <h3>, which is invalid HTML structure for heading content and can weaken assistive-tech navigation. Use <h3><button ... /></h3> instead.
Proposed fix
- <button
- type="button"
- onClick={() => toggle(index)}
- className="flex w-full items-center justify-between text-left"
- aria-expanded={isOpen}
- aria-controls={panelId}
- id={buttonId}
- >
- <h3 className="text-xl sm:text-2xl font-black uppercase tracking-tight">
- {item.q}
- </h3>
-
- <span className="text-3xl font-black">
- {isOpen ? "-" : "+"}
- </span>
- </button>
+ <h3 className="text-xl sm:text-2xl font-black uppercase tracking-tight">
+ <button
+ type="button"
+ onClick={() => toggle(index)}
+ className="flex w-full items-center justify-between text-left"
+ aria-expanded={isOpen}
+ aria-controls={panelId}
+ id={buttonId}
+ >
+ <span>{item.q}</span>
+ <span className="text-3xl font-black" aria-hidden="true">
+ {isOpen ? "-" : "+"}
+ </span>
+ </button>
+ </h3>🤖 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/faq/FAQAccordion.jsx` around lines 22 - 33, The
button element currently wraps the h3 heading, which violates HTML semantics and
weakens assistive technology navigation. Restructure the code so the h3 element
wraps the button instead—move the button opening tag inside the h3, and close
the button before closing the h3. This way the heading remains semantically
correct while keeping all button attributes (type="button", onClick,
aria-expanded, aria-controls, id) intact on the button element itself.
| return ( | ||
| <section | ||
| aria-labelledby="opensource-title" | ||
| className="py-20 px-6 bg-white text-black border-b-4 border-black" |
There was a problem hiding this comment.
Section divider direction is inconsistent with the stated FAQ layout standard. The shared root cause is using border-b-4 instead of the required border-t-4 section divider style.
frontend/src/components/faq/OpenSourceContribFAQ.jsx#L8-L8: replaceborder-b-4withborder-t-4.frontend/src/components/faq/PerformanceFAQ.jsx#L6-L6: replaceborder-b-4withborder-t-4in the fallback section.frontend/src/components/faq/PerformanceFAQ.jsx#L20-L20: replaceborder-b-4withborder-t-4in the primary render section.
As per coding guidelines, apply minimumpy-20padding per section withborder-t-4dividers.
📍 Affects 2 files
frontend/src/components/faq/OpenSourceContribFAQ.jsx#L8-L8(this comment)frontend/src/components/faq/PerformanceFAQ.jsx#L6-L6frontend/src/components/faq/PerformanceFAQ.jsx#L20-L20
🤖 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/faq/OpenSourceContribFAQ.jsx` at line 8, The section
divider styling is inconsistent across FAQ components, using bottom borders
(border-b-4) instead of top borders (border-t-4) per the layout standard.
Replace border-b-4 with border-t-4 in the className attribute at the following
three locations: frontend/src/components/faq/OpenSourceContribFAQ.jsx line 8 in
the main section div, frontend/src/components/faq/PerformanceFAQ.jsx line 6 in
the fallback section div, and frontend/src/components/faq/PerformanceFAQ.jsx
line 20 in the primary render section div. Ensure all three locations use
border-t-4 and maintain the existing py-20 padding for consistency with the FAQ
layout standard.
|
@coderabbitai please check whether work done in this PR is good to go and is ready to merge ? |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
echo "=== FAQPage.jsx ==="
cat frontend/src/pages/FAQPage.jsx
echo ""
echo "=== FAQAccordion.jsx ==="
cat frontend/src/components/faq/FAQAccordion.jsx
echo ""
echo "=== GettingStartedFAQ.jsx ==="
cat frontend/src/components/faq/GettingStartedFAQ.jsx
echo ""
echo "=== PlatformIntegrationFAQ.jsx ==="
cat frontend/src/components/faq/PlatformIntegrationFAQ.jsx
echo ""
echo "=== AnalyticsDashboardFAQ.jsx ==="
cat frontend/src/components/faq/AnalyticsDashboardFAQ.jsx
echo ""
echo "=== CommunityFAQ.jsx ==="
cat frontend/src/components/faq/CommunityFAQ.jsx
echo ""
echo "=== DataPrivacyFAQ.jsx ==="
cat frontend/src/components/faq/DataPrivacyFAQ.jsx
echo ""
echo "=== AccountManagementFAQ.jsx ==="
cat frontend/src/components/faq/AccountManagementFAQ.jsx
echo ""
echo "=== AccessibilityFAQ.jsx ==="
cat frontend/src/components/faq/AccessibilityFAQ.jsx
echo ""
echo "=== LegalComplianceFAQ.jsx ==="
cat frontend/src/components/faq/LegalComplianceFAQ.jsx
echo ""
echo "=== OpenSourceContribFAQ.jsx ==="
cat frontend/src/components/faq/OpenSourceContribFAQ.jsx
echo ""
echo "=== PerformanceFAQ.jsx ==="
cat frontend/src/components/faq/PerformanceFAQ.jsx
echo ""
echo "=== RoadmapFAQ.jsx ==="
cat frontend/src/components/faq/RoadmapFAQ.jsx
echo ""
echo "=== TroubleshootingFAQ.jsx ==="
cat frontend/src/components/faq/TroubleshootingFAQ.jsxLength of output: 18156 🏁 Script executed: #!/bin/bash
echo "=== data/faqs/index.js ==="
cat frontend/src/data/faqs/index.js
echo ""
echo "=== data/faqs/gettingStarted.js ==="
cat frontend/src/data/faqs/gettingStarted.js
echo ""
echo "=== data/faqs/platformIntegration.js ==="
cat frontend/src/data/faqs/platformIntegration.js
echo ""
echo "=== data/faqs/analyticsDashboard.js ==="
cat frontend/src/data/faqs/analyticsDashboard.js
echo ""
echo "=== data/faqs/dataPrivacy.js ==="
cat frontend/src/data/faqs/dataPrivacy.js
echo ""
echo "=== data/faqs/accountManagement.js ==="
cat frontend/src/data/faqs/accountManagement.js
echo ""
echo "=== data/faqs/openSourceContrib.js ==="
cat frontend/src/data/faqs/openSourceContrib.js
echo ""
echo "=== data/faqs/legalCompliance.js ==="
cat frontend/src/data/faqs/legalCompliance.js
echo ""
echo "=== data/faqs/troubleshooting.js ==="
cat frontend/src/data/faqs/troubleshooting.js
echo ""
echo "=== data/faqs/performance.js ==="
cat frontend/src/data/faqs/performance.js
echo ""
echo "=== data/faqs/community.js ==="
cat frontend/src/data/faqs/community.js
echo ""
echo "=== data/faqs/roadmap.js ==="
cat frontend/src/data/faqs/roadmap.js
echo ""
echo "=== data/faqs/accessibility.js ==="
cat frontend/src/data/faqs/accessibility.js
echo ""
echo "=== data/faqs.js (legacy) ==="
cat frontend/src/data/faqs.jsLength of output: 14069 🏁 Script executed: #!/bin/bash
echo "=== frontend/src/index.css ==="
cat frontend/src/index.css
echo ""
echo "=== frontend/package.json ==="
cat frontend/package.json
echo ""
echo "=== Check if react-helmet-async is actually used in FAQPage ==="
rg -n "helmet" frontend/src/pages/FAQPage.jsx
echo ""
echo "=== Check for react-helmet-async usage across codebase ==="
rg -rn "helmet" frontend/src/ --type jsx 2>/dev/null || rg -rn "helmet" frontend/src/
echo ""
echo "=== Check how other pages structure (for consistency) ==="
ls frontend/src/pages/
echo ""
echo "=== Check for other page files to compare patterns ==="
cat frontend/src/pages/Contact.jsx 2>/dev/null | head -60Length of output: 7178 🏁 Script executed: #!/bin/bash
echo "=== Look for any existing FAQ-related files NOT in PR (legacy) ==="
find frontend/src -name "*faq*" -o -name "*FAQ*" 2>/dev/null
echo ""
echo "=== Check tailwind config for breakpoints / custom classes ==="
cat frontend/tailwind.config.js 2>/dev/null || cat frontend/tailwind.config.ts 2>/dev/null || echo "No tailwind config found at root"
find frontend -name "tailwind.config*" 2>/dev/null
echo ""
echo "=== Check if there's an app router / routing file to see FAQ route ==="
cat frontend/src/App.jsx 2>/dev/null || cat frontend/src/App.tsx 2>/dev/null || cat frontend/src/main.jsx 2>/dev/null
echo ""
echo "=== List all components in faq folder ==="
ls frontend/src/components/faq/
echo ""
echo "=== List all files in faqs data folder ==="
ls frontend/src/data/faqs/
echo ""
echo "=== Check if react-helmet-async is listed in package.json ==="
cat frontend/package.json | grep -i helmetLength of output: 7466 🏁 Script executed: #!/bin/bash
echo "=== Check if legacy data/faqs.js is still imported anywhere ==="
rg -rn "from.*data/faqs" frontend/src/ | grep -v "data/faqs/"
echo ""
echo "=== Check FAQSection.jsx in explore folder ==="
cat frontend/src/components/explore/FAQSection.jsx
echo ""
echo "=== Check if the barrel index.js is imported anywhere ==="
rg -rn "from.*data/faqs/index" frontend/src/ || rg -rn "from.*data/faqs'" frontend/src/
echo ""
echo "=== Check where data/faqs.js is used ==="
rg -rn "data/faqs" frontend/src/ | grep -v "data/faqs/"Length of output: 6758
✅ What's Done Well
🔴 Critical Issues (Must Fix Before Merge)1.
|
| File | ID | Problem |
|---|---|---|
roadmap.js |
mobile-app |
"Mobile support may be considered as the platform grows." — adds no value |
roadmap.js |
planned-features |
"Future updates may include better analytics..." — too vague |
community.js |
discord |
"Community communication channels may be linked through the project repository." — unclear if Discord exists |
analyticsDashboard.js |
compare-stats |
"CodeLens may allow comparative analytics..." — unclear if feature exists |
openSourceContrib.js |
tech-stack |
"CodeLens uses modern frontend and backend technologies..." — says nothing useful |
Replace these with factual, specific answers. If a feature doesn't exist yet, say so directly: "A mobile app is not currently planned." is better than "may be considered".
🟠 Code Quality Issues
10. Redundant Array.isArray guard in PerformanceFAQ.jsx
if (!Array.isArray(performanceFaqs)) {
return <section>...No performance FAQs available yet.</section>;
}performanceFaqs is statically exported as export const performanceFaqs = [...] — it is always an array and this branch will never execute. Remove the dead code guard.
11. Inconsistent heading string casing in source code
Some headings are written in ALL CAPS in the JSX source, others in Title Case:
// ALL CAPS in source (PlatformIntegrationFAQ, AnalyticsDashboardFAQ, etc.)
<h2>PLATFORM INTEGRATIONS</h2>
<h2>ANALYTICS DASHBOARD</h2>
// Title Case in source (GettingStartedFAQ, DataPrivacyFAQ, etc.)
<h2>Getting Started</h2>
<h2>Data Privacy & Security</h2>Since all headings apply the uppercase Tailwind class, the visual output is identical. But the source code should be consistent. Use Title Case in the JSX and let CSS handle the uppercase transformation.
12. FAQPage intro shows only 2 hardcoded chips out of 12 sections
<span ...>Analytics</span>
<span ...>Privacy</span>There are 12 FAQ sections. Showing only 2 is misleading. Either list all key categories (in a responsive wrap grid) or remove the chip list entirely if it's just decorative.
📱 Phone Responsiveness Summary
| Concern | Status |
|---|---|
| Grid layouts collapse to 1 column on mobile (< 768px) | ✅ Correct |
FAQAccordion stacks in a single column |
✅ Correct |
overflow-x-hidden on <main> prevents horizontal scroll |
✅ Correct |
Section horizontal padding on mobile (px-6 = 24px each side) |
✅ Sufficient |
Section heading text-4xl on mobile |
|
| Inconsistent padding alignment between hero and sections on desktop | ❌ Needs fix (issue #4 above) |
| Missing max-width containers on wide screens | ❌ Needs fix (issue #5 above) |
Phone view is functionally usable — grids collapse, accordions work, no overflow. But the padding misalignment between the hero and section bodies will be noticeable on desktop/tablet.
Summary
| Severity | Count | Items |
|---|---|---|
| 🔴 Critical | 3 | react-helmet-async unused, <title>/<meta> in <main>, barrel index.js unused |
| 🟡 Layout | 3 | Missing responsive padding, missing max-w-7xl containers, TroubleshootingFAQ extra wrapper |
| 🟠 Content | 3 | Duplicate roadmap entries, duplicate accessibility entries, vague answers |
| 🟠 Code quality | 2 | Redundant guard in PerformanceFAQ, inconsistent heading casing |
| 🟠 UX | 1 | Only 2 chips shown for 12 sections |
The PR is not ready to merge in its current state. The architecture is genuinely good — the modular decomposition is clean and the data layer is well-organized. Address the critical issues (especially react-helmet-async + <Helmet> wiring, and the unused barrel) and fix the layout padding/container inconsistencies, and this will be in solid shape.
|
@snehamathad604 I see coderabbitai has shown MANY bugs so please do I complete reasoning about it and after studying what it says then implement in codebase IMPORTANT : ITS MANDATORY TO SHOWCASE FULL FAQ PAGE AND LITTLE BIT OF CODE PRESENTATION FOR VIDEO YOU CAN REFER TO LOOM OR PUT YOUR VIDEO IN YOUR DRIVE AND SHARE ITS LINK ALSO YOUR PR DESCRIPTION DOES NOT HAVE ALL SECTION SCREENSHOT SO ATTACH EVERY SECTION SCREENSHOT AND VIDEO BOTH ARE MANDATORY I AM SO MUCH EXCITED TO SEE FULL FAQ PAGE WAITING FOR YOUR NEXT ITERATION WORK |
|
Thanks for the review. I’ll address the CodeRabbit suggestions, update the UI changes, and attach screenshots of all FAQ sections along with a demo video in the next iteration. |
@snehamathad604 Join codelens communnity,developement,welcome rooms and you can put your doubts, updates on your issue and PR's you made and you can also talk about any idea |
|
@snehamathad604 you can support this project by starring it |
|
@snehamathad604 its been late |
|
Hi, I’ve been working through the review comments and addressing them one by one. |
@snehamathad604 thats great to hear and excited to see final outcome |
2 participants
📌 Pull Request Summary
🔗 Related Issue
Closes #182
📝 Description
This PR refactors the FAQ system into a modular architecture with 12 independent sections and a centralized data layer.
The goal is to improve scalability, maintainability, and separation of concerns across the FAQ feature in the CodeLens frontend.
Changes Made
Motivation
The previous FAQ implementation was monolithic and difficult to extend.
This refactor solves:
Now each section is independent and fully data-driven.
🚀 Type of Change
Select all that apply:
🧪 Testing
Verification
Test Details
📸 Screenshots / Demo (If Applicable)
UI verified locally on
/faqroute. All 12 FAQ sections render correctly with working accordion behavior.✅ Checklist
📚 Additional Notes
This PR improves frontend architecture without affecting backend APIs.
It is fully backward compatible.
Summary by CodeRabbit
New Features
Bug Fixes