From cb866f449dc3f7a1767e99d06ac835d8a82b657a Mon Sep 17 00:00:00 2001 From: Saurabh Kumar Bajpai Date: Tue, 19 May 2026 22:31:49 +0530 Subject: [PATCH 1/7] feat: add dedicated FAQ page --- frontend/src/App.jsx | 3 +- .../src/components/explore/FAQSection.jsx | 22 +-- frontend/src/components/shared/Footer.jsx | 1 + frontend/src/data/faqs.js | 18 +++ frontend/src/pages/FAQPage.jsx | 128 ++++++++++++++++++ 5 files changed, 151 insertions(+), 21 deletions(-) create mode 100644 frontend/src/data/faqs.js create mode 100644 frontend/src/pages/FAQPage.jsx diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 3d82063..827ae6a 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -24,7 +24,7 @@ import GitHubIntelligencePage from "./pages/GitHubIntelligencePage"; import GitHubCallbackPage from "./pages/GitHubCallbackPage"; import ProtectedRoute from "./components/shared/ProtectedRoute"; import PublicRoute from "./components/shared/PublicRoute"; -import FAQSection from "./components/explore/FAQSection"; +import FAQPage from "./pages/FAQPage"; export default function App() { return ( @@ -101,6 +101,7 @@ export default function App() { /> } /> } /> + } /> } /> diff --git a/frontend/src/components/explore/FAQSection.jsx b/frontend/src/components/explore/FAQSection.jsx index 8c9664f..823ee74 100644 --- a/frontend/src/components/explore/FAQSection.jsx +++ b/frontend/src/components/explore/FAQSection.jsx @@ -1,24 +1,6 @@ import { useState } from "react"; import { Link } from "react-router-dom"; - -const faqs = [ - { - q: "What is CodeLens?", - a: "CodeLens is a platform that helps developers track their coding progress across different platforms like Codeforces, LeetCode, and GitHub in one place.", - }, - { - q: "What problem does CodeLens solve?", - a: "It brings all your coding activity into one place so you can understand your progress, stay consistent, and know what to improve next.", - }, - { - q: "Is my repository data private?", - a: "CodeLens only uses publicly available data from connected platforms and does not store any sensitive information.", - }, - { - q: "How can I contribute to CodeLens?", - a: "You can contribute by solving issues, adding features, improving UI, or fixing bugs. Check the repository and start with beginner-friendly issues.", - }, -]; +import { faqs } from "../../data/faqs"; export default function FAQSection() { const [openIdx, setOpenIdx] = useState(null); @@ -84,4 +66,4 @@ export default function FAQSection() { ); -} \ No newline at end of file +} diff --git a/frontend/src/components/shared/Footer.jsx b/frontend/src/components/shared/Footer.jsx index 7db19bd..96c447c 100644 --- a/frontend/src/components/shared/Footer.jsx +++ b/frontend/src/components/shared/Footer.jsx @@ -35,6 +35,7 @@ export default function Footer() { {[ { to: "/dashboard", label: "Dashboard" }, { to: "/explore", label: "Explore" }, + { to: "/faq", label: "FAQ" }, { to: "/codeforces", label: "Codeforces" }, ].map((l) => ( +
+
+
+

+ Help Center / FAQ +

+

+ Answers Without The Noise. +

+
+ +
+

+ Quick answers for developers connecting coding platforms, reading analytics, + protecting profile data, and contributing to CodeLens. +

+
+ {supportTopics.map((topic) => ( + + {topic} + + ))} +
+
+
+
+ +
+
+ + +
+ {faqs.map((item, index) => { + const isOpen = openIdx === index; + + return ( +
+ + + {isOpen && ( +
+

+ {item.a} +

+
+ )} +
+ ); + })} +
+
+
+ +
+
+
+

+ Still Curious? +

+

+ Explore The Platform. +

+
+ + Back To Explore + +
+
+ + ); +} From 8034de9a07ffb1c893088c018eb777c7d12ba55e Mon Sep 17 00:00:00 2001 From: Saurabh Kumar Bajpai Date: Wed, 20 May 2026 16:04:36 +0530 Subject: [PATCH 2/7] fix: address FAQ page review feedback --- frontend/src/App.jsx | 3 +- .../src/components/explore/FAQSection.jsx | 22 ++++++--- frontend/src/data/faqs.js | 8 ++++ frontend/src/pages/FAQPage.jsx | 45 +++++++++++++------ 4 files changed, 56 insertions(+), 22 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 827ae6a..1202a31 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -17,6 +17,7 @@ import ContestLeetCodePage from "./pages/ContestLeetCodePage"; import ContestAtCoderPage from "./pages/ContestAtCoderPage"; import TermsPage from "./pages/TermsPage"; import PrivacyPage from "./pages/PrivacyPage"; +import FAQPage from "./pages/FAQPage"; import NotFoundPage from "./pages/NotFoundPage"; import ForgotPassword from "./components/auth/ForgotPassword"; import AccountCenterPage from "./pages/AccountCenterPage"; @@ -24,7 +25,7 @@ import GitHubIntelligencePage from "./pages/GitHubIntelligencePage"; import GitHubCallbackPage from "./pages/GitHubCallbackPage"; import ProtectedRoute from "./components/shared/ProtectedRoute"; import PublicRoute from "./components/shared/PublicRoute"; -import FAQPage from "./pages/FAQPage"; + export default function App() { return ( diff --git a/frontend/src/components/explore/FAQSection.jsx b/frontend/src/components/explore/FAQSection.jsx index 823ee74..eb00fc1 100644 --- a/frontend/src/components/explore/FAQSection.jsx +++ b/frontend/src/components/explore/FAQSection.jsx @@ -20,12 +20,15 @@ export default function FAQSection() { return (
); @@ -58,7 +66,7 @@ export default function FAQSection() {
View All FAQs diff --git a/frontend/src/data/faqs.js b/frontend/src/data/faqs.js index 81a7f01..b6c1eac 100644 --- a/frontend/src/data/faqs.js +++ b/frontend/src/data/faqs.js @@ -1,17 +1,25 @@ export const faqs = [ { + id: "what-is-codelens", + category: "Platform tracking", q: "What is CodeLens?", a: "CodeLens is a platform that helps developers track their coding progress across different platforms like Codeforces, LeetCode, and GitHub in one place.", }, { + id: "problem-solved", + category: "Platform tracking", q: "What problem does CodeLens solve?", a: "It brings all your coding activity into one place so you can understand your progress, stay consistent, and know what to improve next.", }, { + id: "data-privacy", + category: "Data privacy", q: "Is my repository data private?", a: "CodeLens only uses publicly available data from connected platforms and does not store any sensitive information.", }, { + id: "contribute", + category: "Open source", q: "How can I contribute to CodeLens?", a: "You can contribute by solving issues, adding features, improving UI, or fixing bugs. Check the repository and start with beginner-friendly issues.", }, diff --git a/frontend/src/pages/FAQPage.jsx b/frontend/src/pages/FAQPage.jsx index 572294e..d83748d 100644 --- a/frontend/src/pages/FAQPage.jsx +++ b/frontend/src/pages/FAQPage.jsx @@ -1,19 +1,29 @@ -import { useState } from "react"; +import { useRef, useState } from "react"; import { Link } from "react-router-dom"; import { faqs } from "../data/faqs"; -const supportTopics = [ - "Platform tracking", - "Data privacy", - "Open source", - "Account setup", -]; +const supportTopics = [...new Set(faqs.map((item) => item.category))]; export default function FAQPage() { - const [openIdx, setOpenIdx] = useState(0); + const [openIdx, setOpenIdx] = useState(null); + const itemRefs = useRef([]); + + const toggleFaq = (index, shouldScroll = false) => { + setOpenIdx((currentIndex) => (currentIndex === index ? null : index)); + + if (shouldScroll) { + window.requestAnimationFrame(() => { + itemRefs.current[index]?.scrollIntoView({ + behavior: "smooth", + block: "start", + }); + }); + } + }; return (
+ FAQ - CodeLens
@@ -53,9 +63,9 @@ export default function FAQPage() {
{faqs.map((item, index) => ( {isOpen && ( -
+

{item.a}

From 712bea4e0fc5a022712f7d78e523909c358f6e9a Mon Sep 17 00:00:00 2001 From: Saurabh Kumar Bajpai <157192462+saurabhhhcodes@users.noreply.github.com> Date: Wed, 20 May 2026 17:48:41 +0530 Subject: [PATCH 3/7] fix: bind FAQ panel regions to toggles --- frontend/src/components/explore/FAQSection.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/explore/FAQSection.jsx b/frontend/src/components/explore/FAQSection.jsx index eb00fc1..dff77a5 100644 --- a/frontend/src/components/explore/FAQSection.jsx +++ b/frontend/src/components/explore/FAQSection.jsx @@ -17,6 +17,8 @@ export default function FAQSection() {
{faqs.map((item, index) => { const isOpen = openIdx === index; + const buttonId = `landing-faq-button-${item.id}`; + const panelId = `landing-faq-panel-${item.id}`; return (
toggle(index)} className="w-full flex items-center justify-between gap-4 p-6 sm:p-8 text-left" aria-expanded={isOpen} - aria-controls={`landing-faq-panel-${item.id}`} + aria-controls={panelId} + id={buttonId} >

Q: {item.q} @@ -46,7 +49,10 @@ export default function FAQSection() {
Date: Thu, 21 May 2026 02:42:59 +0530 Subject: [PATCH 4/7] fix: use history back on FAQ page --- frontend/src/pages/FAQPage.jsx | 36 ++++++++++++++++++++++------------ 1 file changed, 23 insertions(+), 13 deletions(-) diff --git a/frontend/src/pages/FAQPage.jsx b/frontend/src/pages/FAQPage.jsx index d83748d..67dd3d9 100644 --- a/frontend/src/pages/FAQPage.jsx +++ b/frontend/src/pages/FAQPage.jsx @@ -1,5 +1,5 @@ import { useRef, useState } from "react"; -import { Link } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { faqs } from "../data/faqs"; const supportTopics = [...new Set(faqs.map((item) => item.category))]; @@ -7,6 +7,7 @@ const supportTopics = [...new Set(faqs.map((item) => item.category))]; export default function FAQPage() { const [openIdx, setOpenIdx] = useState(null); const itemRefs = useRef([]); + const navigate = useNavigate(); const toggleFaq = (index, shouldScroll = false) => { setOpenIdx((currentIndex) => (currentIndex === index ? null : index)); @@ -81,6 +82,8 @@ export default function FAQPage() {
{faqs.map((item, index) => { const isOpen = openIdx === index; + const buttonId = `faq-button-${item.id}`; + const panelId = `faq-panel-${item.id}`; return (
toggleFaq(index)} className="flex w-full items-center justify-between gap-6 p-6 text-left sm:p-8" aria-expanded={isOpen} - aria-controls={`faq-panel-${item.id}`} + aria-controls={panelId} + id={buttonId} > {item.q} @@ -105,16 +109,21 @@ export default function FAQPage() { - {isOpen && ( -
+
+

- {item.a} + {item.a}

- )} +
); })} @@ -132,12 +141,13 @@ export default function FAQPage() { Explore The Platform.

- navigate(-1)} className="inline-flex border-4 border-white px-8 py-5 text-sm font-black uppercase tracking-widest text-white transition-colors hover:bg-white hover:text-black" > - Back To Explore - + Go Back +
From c9b62859fc75000b6f1d388044604b6f35058887 Mon Sep 17 00:00:00 2001 From: Saurabh Kumar Bajpai Date: Sat, 23 May 2026 12:03:28 +0530 Subject: [PATCH 5/7] fix: contain FAQ page mobile width --- frontend/src/pages/FAQPage.jsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/FAQPage.jsx b/frontend/src/pages/FAQPage.jsx index 67dd3d9..be4d97f 100644 --- a/frontend/src/pages/FAQPage.jsx +++ b/frontend/src/pages/FAQPage.jsx @@ -23,7 +23,10 @@ export default function FAQPage() { }; return ( -
+
FAQ - CodeLens
@@ -36,12 +39,12 @@ export default function FAQPage() {
-
+

Quick answers for developers connecting coding platforms, reading analytics, protecting profile data, and contributing to CodeLens.

-
+
{supportTopics.map((topic) => ( toggleFaq(index, true)} - className={`border-2 px-4 py-3 text-left text-xs font-black uppercase tracking-widest transition-colors ${ + className={`break-words border-2 px-4 py-3 text-left text-xs font-black uppercase tracking-widest transition-colors ${ openIdx === index ? "border-white bg-white text-black" : "border-white text-white hover:bg-white hover:text-black" @@ -91,7 +94,7 @@ export default function FAQPage() { ref={(element) => { itemRefs.current[index] = element; }} - className="border-4 border-black bg-white shadow-[8px_8px_0_0_rgba(0,0,0,1)]" + className="border-4 border-black bg-white shadow-[6px_6px_0_0_rgba(0,0,0,1)] sm:shadow-[8px_8px_0_0_rgba(0,0,0,1)]" >