diff --git a/frontend/index.html b/frontend/index.html index 32eecb1..279af41 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,7 +2,7 @@ - + CodeLens diff --git a/frontend/public/codelens.png b/frontend/public/codelens.png new file mode 100644 index 0000000..1349711 Binary files /dev/null and b/frontend/public/codelens.png differ diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 3d82063..d960bf1 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -24,6 +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 FAQPage from "./pages/FAQPage"; + import FAQSection from "./components/explore/FAQSection"; export default function App() { return ( @@ -101,6 +103,7 @@ export default function App() { /> } /> } /> + } /> } /> diff --git a/frontend/src/components/shared/Navbar.jsx b/frontend/src/components/shared/Navbar.jsx index aa10e55..8198d21 100644 --- a/frontend/src/components/shared/Navbar.jsx +++ b/frontend/src/components/shared/Navbar.jsx @@ -361,6 +361,9 @@ export default function Navbar() { Explore + + FAQ + {isAuthenticated && ( @@ -544,6 +547,13 @@ export default function Navbar() { Explore → + + FAQ → + {isAuthenticated && ( diff --git a/frontend/src/pages/FAQPage.jsx b/frontend/src/pages/FAQPage.jsx new file mode 100644 index 0000000..d046ab9 --- /dev/null +++ b/frontend/src/pages/FAQPage.jsx @@ -0,0 +1,243 @@ +import { useState } from "react"; + +const FAQ_CATEGORIES = [ + { + id: "general", + label: "General", + icon: "◈", + questions: [ + { + q: "What is CodeLens?", + a: "CodeLens is an engineering telemetry platform that aggregates your performance data from GitHub, LeetCode, and Codeforces into a single unified dashboard. It uses Google's Gemini AI to analyze your metrics and generate a precision-guided roadmap to mastery.", + }, + { + q: "Is CodeLens free to use?", + a: "Yes. CodeLens is fully open source and free to use. You only need your own API keys (GitHub, Gemini) to get started. There are no paywalls or hidden fees.", + }, + { + q: "Which platforms does CodeLens support?", + a: "CodeLens currently supports GitHub, LeetCode, and Codeforces. Trilateral sync pulls real-time data from all three simultaneously and normalizes them into a single view.", + }, + ], + }, + { + id: "setup", + label: "Setup & Config", + icon: "◉", + questions: [ + { + q: "What do I need to run CodeLens locally?", + a: "You need Node.js v18 or higher, a MongoDB instance (local or Atlas), and a valid Google Gemini API key. Clone the repo, fill in the .env files for both the frontend and server directories, and run npm run dev in each.", + }, + { + q: "How do I get a free MongoDB database?", + a: "Sign up at mongodb.com/cloud/atlas, create a free M0 cluster, add a database user, whitelist your IP, and copy the connection string. Paste it into your server/.env as MONGO_URI. The README has a step-by-step guide.", + }, + { + q: "Where do I put my Gemini API key?", + a: "Add it to your server/.env file as GEMINI_API_KEY=your_key_here. You can optionally also add VITE_GEMINI_KEY in frontend/.env for any client-side features, but the core AI engine runs server-side.", + }, + { + q: "The server won't start — what should I check?", + a: "Verify your MONGO_URI is correct and your IP is whitelisted in Atlas. Make sure PORT, JWT_SECRET, and GEMINI_API_KEY are all set. Check that you're running Node.js v18+ with node --version.", + }, + ], + }, + { + id: "features", + label: "Features", + icon: "◆", + questions: [ + { + q: "How does the AI roadmap generation work?", + a: "CodeLens aggregates your failed submissions, weak topics, and performance patterns across all three platforms, then sends anonymized telemetry to the Gemini API. Gemini analyzes the data and returns a milestone-based curriculum tailored to your specific gaps.", + }, + { + q: "What is the Problem of the Day?", + a: "The Problem of the Day is a curated algorithm challenge selected exclusively based on your identified weaknesses — not a generic daily problem. It changes based on your current roadmap and what you need to work on most.", + }, + { + q: "Is my data private?", + a: "Yes. CodeLens uses ephemeral LLM context, meaning your telemetry is not stored by the AI engine between sessions. Your data stays in your own MongoDB instance. Google does not retain your personal data.", + }, + ], + }, + { + id: "contributing", + label: "Contributing", + icon: "◇", + questions: [ + { + q: "How do I contribute to CodeLens?", + a: "Fork the repo, read CONTRIBUTING.md for coding standards and PR workflow, pick an open issue, and submit a PR. The project follows strict ES Modules, a Controller/Service/Repository backend pattern, and Tailwind CSS brutalist design on the frontend.", + }, + { + q: "Are there good first issues for beginners?", + a: "Yes — issues labeled 'good first issue' are specifically scoped for new contributors. They typically involve UI improvements, new pages, or small feature additions that don't require deep knowledge of the full codebase.", + }, + { + q: "What is the tech stack I need to know?", + a: "Frontend: React + Vite + Tailwind CSS v4 + React Router v6. Backend: Node.js + Express (ES Modules) + MongoDB via Mongoose + Google Gemini API. Familiarity with the MERN stack is sufficient to contribute.", + }, + ], + }, +]; + +function AccordionItem({ question, answer, index, isOpen, onToggle }) { + return ( +
+ + +
+

+ {answer} +

+
+
+ ); +} + +export default function FAQPage() { + const [activeCategory, setActiveCategory] = useState("general"); + const [openIndex, setOpenIndex] = useState(null); + + const currentCategory = FAQ_CATEGORIES.find((c) => c.id === activeCategory); + + function handleCategoryChange(id) { + setActiveCategory(id); + setOpenIndex(null); + } + + function handleToggle(index) { + setOpenIndex((prev) => (prev === index ? null : index)); + } + + return ( +
+ + {/* ── Hero ── */} +
+
+

+ Support / FAQ +

+

+ FREQUENTLY +
+ ASKED. +

+

+ Everything you need to know about setting up, using, and contributing to CodeLens. +

+
+
+ + {/* ── Content ── */} +
+
+ + {/* ── Category Sidebar ── */} + + + {/* ── Accordion Panel ── */} +
+ {/* Panel header */} +
+ {currentCategory?.icon} +

+ {currentCategory?.label} +

+ + {currentCategory?.questions.length} questions + +
+ + {/* Questions */} +
+ {currentCategory?.questions.map((item, i) => ( + handleToggle(i)} + /> + ))} +
+
+
+ + {/* ── Still have questions CTA ── */} +
+
+
+
+

+ Still have questions? +

+

+ Open an issue on GitHub or check the contributing guide. +

+
+ + Open an Issue + + +
+
+
+
+ ); +}