Skip to content

Faq page fix #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dikshajha13 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Faq page fix #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9da1e0a
my first contribution
dikshajha13 May 18, 2026
136fcc3
Merge branch 'main' into main
dikshajha13 May 19, 2026
6dda428
refactor: improve FAQ page UX, accessibility and styling
dikshajha13 May 20, 2026
662294b
WIP: FAQ fixes before branch cleanup
dikshajha13 May 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 1 addition & 13 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 5 additions & 1 deletion frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ 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 (
<AuthProvider>
Expand Down Expand Up @@ -80,6 +81,7 @@ export default function App() {
</PublicRoute>
}
/>

<Route path="/explore" element={<ExplorePage />} />
{/* GitHub OAuth callback — must be public, no auth required */}
<Route path="/auth/github/callback" element={<GitHubCallbackPage />} />
Expand All @@ -101,6 +103,8 @@ export default function App() {
/>
<Route path="/terms" element={<TermsPage/>} />
<Route path="/privacy" element={<PrivacyPage/>} />
<Route
path="/faq" element={<FAQpage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</MainLayout>
Expand Down
192 changes: 192 additions & 0 deletions frontend/src/pages/FAQpage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
import {useState} from "react";

const faq_data=[
{
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 progress, analyze profiles, explore various contests, and improve problem-solving consistency across multiple coding platforms",
},
{
category: "GENERAL",
ques: "What are different platforms 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: "Can I track upcoming coding contests on CodeLens?",
answer: "Yes. CodeLens provides contest tracking for multiple competitive programming platform in one centralized interface.",
},
{
category: "CONTESTS",
ques: "Does CodeLens support contests for beginners?",
answer: "Yes. CodeLens tracks contests suitable for both beginners and experienced competitive programmers across multiple platforms."
},
{
category: "CONTESTS",
ques: "Can users receive reminders for upcoming contests?",
answer: "CodeLens helps users stay informed about upcoming contests so they never miss important competitive programming events."
},
{
category: "DASHBOARD",
ques: "What kind of insights does the dashboard provide? ",
answer: "The dashboard provides insights into coding activity, platform statistics, problem-solving progress, and overall performance across integrated platforms in one place.",
},
{
category: "DASHBOARD",
ques: "Does the dashboard update coding statistics automatically?",
answer: "The dashboard regularly updates coding statistics and activity from connected platforms to keep progress insights accurate."
},
{
category: "DASHBOARD",
ques: "Can the dashboard help identify weak areas in coding preparation?",
answer: "Yes. The dashboard helps users analyze performance trends and identify areas where additional practice may be needed."
},
];

export default function FAQpage(){

const [selectedCategory, setSelectedCategory] = useState("GENERAL");
const[openQuestion, setOpenQuestion]=useState(null);

return(
<div
className="min-h-screen p-8 bg-white text-black dark:bg-black dark:text-white">
<h1 className="text-5xl font-bold">
FREQUENTLY ASKED QUESTIONS
</h1>
<p className="mt-4 text-gray-500 dark:text-gray-400">
Find answers about CodeLens: tools, contests, accounts and features
</p>

<div
className="flex gap-4 mt-10">
<button
aria-pressed={selectedCategory === "GENERAL"}
onClick={() => {
setSelectedCategory("GENERAL");
setOpenQuestion(null);
}}
className={`px-4 py-2 rounded-lg border transition-all duration-300 ${
selectedCategory==="GENERAL"
?"bg-black text-white dark:bg-white dark:text-black"
:"bg-white text-black hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700"
}`}>
GENERAL
</button>
<button
aria-pressed={selectedCategory === "TOOLS"}
onClick={() => {
setSelectedCategory("TOOLS");
setOpenQuestion(null);
}}
className={`px-4 py-2 rounded-lg border transition-all duration-300 ${
selectedCategory==="TOOLS"
?"bg-black text-white dark:bg-white dark:text-black"
:"bg-white text-black hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700"
}`}>
TOOLS
</button>
<button
aria-pressed={selectedCategory === "CONTESTS"}
onClick={() => {
setSelectedCategory("CONTESTS");
setOpenQuestion(null);
}}
className={`px-4 py-2 rounded-lg border transition-all duration-300 ${
selectedCategory==="CONTESTS"
?"bg-black text-white dark:bg-white dark:text-black"
:"bg-white text-black hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700"
}`}>
CONTESTS
</button>
<button
aria-pressed={selectedCategory === "DASHBOARD"}
onClick={() => {
setSelectedCategory("DASHBOARD");
setOpenQuestion(null);
}}
className={`px-4 py-2 rounded-lg border transition-all duration-300 ${
selectedCategory==="DASHBOARD"
?"bg-black text-white dark:bg-white dark:text-black"
:"bg-white text-black hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700"
}`}>
DASHBOARD

</button>


</div>

<div
className="mt-10 space-y-4">
{faq_data
.filter((item)=> item.category===selectedCategory)
.map((item,index)=>(
<div
key={`${item.category}-${item.ques}`}
onClick={()=>
setOpenQuestion(
openQuestion ===index?null:index
)
}
className="border rounded-2xl p-5 cursor-pointer hover:shadow-lg transition-all duration-300"
>



<div
role="button"
tabIndex={0}
onKeyDown={(e)=>{
if(e.key === "Enter" || e.key === " "){
setOpenQuestion(openQuestion===index?null:index);
}
}}
>
Comment on lines +157 to +165
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Prevent page scroll when toggling with Space key.

On Line 161, space key toggles the accordion but does not prevent default scrolling behavior, which can cause a jarring keyboard UX.

Suggested fix 
             <div
                 role="button"
                 tabIndex={0}
                 onKeyDown={(e)=>{
                     if(e.key === "Enter" || e.key === " "){
+                        e.preventDefault();
                         setOpenQuestion(openQuestion===index?null:index);
                     }
                 }}
             >
📝 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.

Suggested change
<div
role="button"
tabIndex={0}
onKeyDown={(e)=>{
if(e.key === "Enter" || e.key === " "){
setOpenQuestion(openQuestion===index?null:index);
}
}}
>
<div
role="button"
tabIndex={0}
onKeyDown={(e)=>{
if(e.key === "Enter" || e.key === " "){
e.preventDefault();
setOpenQuestion(openQuestion===index?null:index);
}
}}
>
🤖 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/FAQpage.jsx` around lines 157 - 165, The onKeyDown handler
for the accordion toggling (the inline function that checks e.key === "Enter" ||
e.key === " ") should call e.preventDefault() when the Space key is pressed (and
optionally for Enter) before calling
setOpenQuestion(openQuestion===index?null:index) to stop the browser from
scrolling; update the handler attached to the div (the role="button" block) to
prevent default on space and then perform the toggle using the existing
setOpenQuestion/openQuestion/index logic.

<div className="flex justify-between items-center">
<h2 className="text-2xl font-semibold">
{item.ques}
</h2>
<span className="text-3xl">
{openQuestion===index?"-":"+"}
</span>
</div>

{openQuestion ===index &&(
<p className="mt-3 text-gray-600 dark:text-gray-300">
{item.answer}
</p>

)}
</div>

</div>

))}
</div>
</div>

);
};


6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading