From adc65d3d2672c93a0937da7cefe7a5937d217c0c Mon Sep 17 00:00:00 2001
From: Gupta-02 <Gupta-02@users.noreply.github.com>
Date: Tue, 2 Sep 2025 13:07:59 +0530
Subject: [PATCH 1/2] Committed latest changes

---
 client/src/App.jsx                        |  11 +-
 client/src/components/Footer.jsx          |   2 +-
 client/src/components/Header.jsx          |  62 +++--
 client/src/components/ScoreTrendChart.jsx | 115 +++-----
 client/src/main.jsx                       |  10 +-
 client/src/pages/Dashboard.jsx            | 267 ++++++++++++-------
 client/src/pages/Interview.jsx            | 306 +++++++++++++---------
 client/src/pages/Resources.jsx            |  74 +++++-
 client/src/routes.jsx                     |   8 +-
 server/index.js                           |   6 +
 server/models/InterviewModel.js           |  43 ++-
 server/models/UserModel.js                |  21 +-
 12 files changed, 578 insertions(+), 347 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 7ebc50c..ec0d3f6 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -17,12 +17,21 @@ import Header from "./components/Header";
 import Footer from "./components/Footer";
 import ScrollToTop from "./components/ScrollToTop";
 
+
 function App() {
   return (
     <div className="min-h-screen bg-white flex flex-col">
+      {/* Skip to content link for accessibility */}
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only absolute left-2 top-2 z-50 bg-blue-700 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400"
+        tabIndex={0}
+      >
+        Skip to main content
+      </a>
       <ScrollToTop />
       <Header />
-      <main className="flex-grow">
+      <main id="main-content" className="flex-grow focus:outline-none">
         <Outlet /> {/* This will render the current page */}
       </main>
       <Footer />
diff --git a/client/src/components/Footer.jsx b/client/src/components/Footer.jsx
index 89ce0e9..6ed0dbb 100644
--- a/client/src/components/Footer.jsx
+++ b/client/src/components/Footer.jsx
@@ -4,7 +4,7 @@ import { FaGithub, FaTwitter, FaLinkedin, FaEnvelope } from "react-icons/fa";
 
 export default function Footer() {
   return (
-    <footer className="bg-[#fafaf9] text-gray-900 border-t border-gray-100">
+    <footer className="bg-[#fafaf9] text-gray-900 border-t border-gray-100" role="contentinfo" aria-label="Footer">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
           {/* Brand Section */}
diff --git a/client/src/components/Header.jsx b/client/src/components/Header.jsx
index 0b00027..16dc3dd 100644
--- a/client/src/components/Header.jsx
+++ b/client/src/components/Header.jsx
@@ -1,10 +1,12 @@
 import { useState, useRef, useEffect } from "react"
+import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 import { FaUser, FaSignOutAlt, FaChevronDown, FaBars, FaTimes } from "react-icons/fa"
 import { useAuth } from "../context/AuthContext"
 import React from "react"
 
 export default function Header() {
+  const { t, i18n } = useTranslation();
   const { user, isLoggedIn, logout } = useAuth()
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
@@ -58,21 +60,30 @@ export default function Header() {
 
   const NavLinks = () => (
     <div className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8">
-      <Link to="/" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">Home</Link>
+      <Link to="/" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">{t('welcome', 'Home')}</Link>
       <Link to="/about" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">About</Link>
       {isLoggedIn && (
         <Link to="/interview/setup" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">Practice</Link>
       )}
       {isLoggedIn && (
-        <Link to="/dashboard" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">Dashboard</Link>
+        <Link to="/dashboard" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">{t('dashboard')}</Link>
+      )}
+      <Link to="/resources" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">{t('resources')}</Link>
+      {isLoggedIn && (
+        <Link to="/mock-interview" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">{t('mockInterview')}</Link>
+      )}
+      {isLoggedIn && (
+        <Link to="/community-qa" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">{t('communityQA')}</Link>
+      )}
+      {isLoggedIn && (
+        <Link to="/resume-review" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">{t('resumeReview')}</Link>
       )}
-      <Link to="/resources" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">Resources</Link>
     </div>
   )
 
   return (
     <>
-  <header className="sticky top-0 z-50 backdrop-blur-md bg-white/60 border-b border-white/30 shadow-sm transition-colors duration-300">
+  <header className="sticky top-0 z-50 backdrop-blur-md bg-white/60 border-b border-white/30 shadow-sm transition-colors duration-300" role="banner">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16">
             <div className="flex items-center">
@@ -82,7 +93,7 @@ export default function Header() {
               </Link>
             </div>
 
-            <nav className="hidden md:flex">
+            <nav className="hidden md:flex" aria-label="Main Navigation">
               <NavLinks />
             </nav>
 
@@ -90,22 +101,36 @@ export default function Header() {
               <button
                 onClick={toggleMobileMenu}
                 className="text-gray-700 hover:text-gray-900 focus:outline-none"
+                aria-label={isMobileMenuOpen ? "Close menu" : "Open menu"}
+                aria-expanded={isMobileMenuOpen}
+                aria-controls="mobile-menu"
               >
                 {isMobileMenuOpen ? <FaTimes size={20} /> : <FaBars size={20} />}
               </button>
             </div>
 
             <div className="hidden md:flex items-center space-x-4">
+              <button
+                onClick={() => i18n.changeLanguage(i18n.language === 'en' ? 'hi' : 'en')}
+                className="px-3 py-1 rounded bg-gray-200 text-gray-700 hover:bg-gray-300 mr-2"
+                aria-label="Switch language"
+              >
+                {i18n.language === 'en' ? 'हिंदी' : 'EN'}
+              </button>
               {!isLoggedIn ? (
                 <>
-                  <Link to="/login" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">Log in</Link>
-                  <Link to="/signup" className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md font-medium transition-colors">Sign up</Link>
+                  <Link to="/login" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">{t('login')}</Link>
+                  <Link to="/signup" className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md font-medium transition-colors">{t('signup')}</Link>
                 </>
               ) : (
                 <div className="relative" ref={dropdownRef}>
                   <button
                     onClick={toggleDropdown}
                     className="flex items-center space-x-2 p-2 rounded-lg hover:bg-white/40 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    aria-haspopup="true"
+                    aria-expanded={isDropdownOpen}
+                    aria-controls="user-menu"
+                    aria-label="User menu"
                   >
                     <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center overflow-hidden">
                       {user?.avatar ? (
@@ -118,18 +143,18 @@ export default function Header() {
                   </button>
 
                   {isDropdownOpen && (
-                    <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
+                    <div id="user-menu" role="menu" aria-label="User menu" className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
                       <div className="px-4 py-2 border-b border-gray-100">
                         <p className="text-sm font-medium text-gray-900">{user?.name}</p>
                         <p className="text-xs text-gray-500">{user?.email}</p>
                       </div>
 
                       <div className="py-1">
-                        <Link to="/profile" className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-white/40 transition-colors duration-300" onClick={() => setIsDropdownOpen(false)}>
+                        <Link to="/profile" className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-white/40 transition-colors duration-300" onClick={() => setIsDropdownOpen(false)} role="menuitem">
                           <FaUser className="w-4 h-4 mr-3 text-gray-400" />
                           Profile
                         </Link>
-                        <button onClick={handleLogout} className="w-full flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-white/40 transition-colors duration-300 text-left">
+                        <button onClick={handleLogout} className="w-full flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-white/40 transition-colors duration-300 text-left" role="menuitem">
                           <FaSignOutAlt className="w-4 h-4 mr-3 text-gray-400" />
                           Logout
                         </button>
@@ -142,17 +167,24 @@ export default function Header() {
           </div>
 
           {isMobileMenuOpen && (
-            <div className="md:hidden mt-2 space-y-2 pb-4">
+            <div id="mobile-menu" className="md:hidden mt-2 space-y-2 pb-4" role="menu" aria-label="Mobile Navigation">
+              <button
+                onClick={() => i18n.changeLanguage(i18n.language === 'en' ? 'hi' : 'en')}
+                className="px-3 py-1 rounded bg-gray-200 text-gray-700 hover:bg-gray-300 mb-2"
+                aria-label="Switch language"
+              >
+                {i18n.language === 'en' ? 'हिंदी' : 'EN'}
+              </button>
               <NavLinks />
               {!isLoggedIn ? (
                 <div className="space-y-2 pt-2">
-                  <Link to="/login" className="block px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">Log in</Link>
-                  <Link to="/signup" className="block px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Sign up</Link>
+                  <Link to="/login" className="block px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105" role="menuitem">{t('login')}</Link>
+                  <Link to="/signup" className="block px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600" role="menuitem">{t('signup')}</Link>
                 </div>
               ) : (
                 <div className="space-y-2 pt-2">
-                  <Link to="/profile" className="block px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">Profile</Link>
-                  <button onClick={handleLogout} className="w-full text-left px-4 py-2 rounded transition-colors duration-300 text-gray-700 hover:text-cyan-500 hover:bg-white/40">Logout</button>
+                  <Link to="/profile" className="block px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105" role="menuitem">Profile</Link>
+                  <button onClick={handleLogout} className="w-full text-left px-4 py-2 rounded transition-colors duration-300 text-gray-700 hover:text-cyan-500 hover:bg-white/40" role="menuitem">Logout</button>
                 </div>
               )}
             </div>
diff --git a/client/src/components/ScoreTrendChart.jsx b/client/src/components/ScoreTrendChart.jsx
index d0c5c36..f8c77f5 100644
--- a/client/src/components/ScoreTrendChart.jsx
+++ b/client/src/components/ScoreTrendChart.jsx
@@ -26,82 +26,47 @@ const CustomTooltip = ({ active, payload }) => {
 };
 
 export default function ScoreTrendChart({
-	chartData
+   chartData
 }) {
 
-	return (
-		<div className="bg-white rounded-lg border border-gray-200 p-6 mb-8">
-			<div className="mb-6">
-				<h3 className="text-lg font-semibold text-gray-900 mb-4">
-					Score Trend
-				</h3>
+   return (
+	   <section className="bg-white rounded-lg border border-gray-200 p-6 mb-8" aria-labelledby="score-trend-heading" role="region">
+		   <div className="mb-6">
+			   <h3 id="score-trend-heading" className="text-lg font-semibold text-gray-900 mb-4">
+				   Score Trend
+			   </h3>
+		   </div>
 
-				{/* <div className="flex space-x-1 bg-gray-100 rounded-lg p-1 w-fit">
-					{periods.map((period) => (
-						<button
-							key={period}
-							onClick={() => setSelectedPeriod(period)}
-							className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
-								selectedPeriod === period
-									? "bg-white text-gray-900 shadow-sm"
-									: "text-gray-600 hover:text-gray-900"
-							}`}
-						>
-							{period}
-						</button>
-					))}
-				</div> */}
-			</div>
-
-			{/* <div className="mb-6">
-				<div className="text-3xl font-bold text-gray-900 mb-1">
-					{currentScore}
-				</div>
-				<div className="text-sm text-gray-600">
-					{timeframe}{" "}
-					<span
-						className={`font-medium ${
-							percentageChange >= 0
-								? "text-green-600"
-								: "text-red-600"
-						}`}
-					>
-						{percentageChange >= 0 ? "+" : ""}
-						{percentageChange}%
-					</span>
-				</div>
-			</div> */}
-
-			<div className="h-64">
-				<ResponsiveContainer width="100%" height="100%">
-					<LineChart
-						data={chartData}
-						margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-					>
-						<CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
-						<YAxis
-							domain={["dataMin - 5", "dataMax + 7"]}
-							axisLine={false}
-							tickLine={false}
-							tick={{ fontSize: 12, fill: "#6b7280" }}
-						/>
-						<Tooltip content={<CustomTooltip />} />
-						<Line
-							type="monotone"
-							dataKey="score"
-							stroke="#6366f1"
-							strokeWidth={3}
-							dot={{ fill: "#6366f1", strokeWidth: 2, r: 4 }}
-							activeDot={{
-								r: 6,
-								stroke: "#6366f1",
-								strokeWidth: 2,
-								fill: "#ffffff",
-							}}
-						/>
-					</LineChart>
-				</ResponsiveContainer>
-			</div>
-		</div>
-	);
+		   <div className="h-64" role="img" aria-label="Line chart showing interview score trends over time">
+			   <ResponsiveContainer width="100%" height="100%">
+				   <LineChart
+					   data={chartData}
+					   margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+				   >
+					   <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
+					   <YAxis
+						   domain={["dataMin - 5", "dataMax + 7"]}
+						   axisLine={false}
+						   tickLine={false}
+						   tick={{ fontSize: 12, fill: "#6b7280" }}
+					   />
+					   <Tooltip content={<CustomTooltip />} wrapperStyle={{ outline: 'none' }} />
+					   <Line
+						   type="monotone"
+						   dataKey="score"
+						   stroke="#6366f1"
+						   strokeWidth={3}
+						   dot={{ fill: "#6366f1", strokeWidth: 2, r: 4 }}
+						   activeDot={{
+							   r: 6,
+							   stroke: "#6366f1",
+							   strokeWidth: 2,
+							   fill: "#ffffff",
+						   }}
+					   />
+				   </LineChart>
+			   </ResponsiveContainer>
+		   </div>
+	   </section>
+   );
 }
diff --git a/client/src/main.jsx b/client/src/main.jsx
index 7b0acbb..4305f4c 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -3,9 +3,13 @@ import { RouterProvider } from "react-router-dom";
 import router from "./routes";
 import "./styles/index.css";
 import { AuthProvider } from "./context/AuthContext";
+import { UserDataProvider } from "./context/UserDataContext";
+import "./i18n";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-	<AuthProvider>
-		<RouterProvider router={router} />
-	</AuthProvider>
+   <AuthProvider>
+	   <UserDataProvider>
+		   <RouterProvider router={router} />
+	   </UserDataProvider>
+   </AuthProvider>
 );
diff --git a/client/src/pages/Dashboard.jsx b/client/src/pages/Dashboard.jsx
index 4cd0126..2ab2a27 100644
--- a/client/src/pages/Dashboard.jsx
+++ b/client/src/pages/Dashboard.jsx
@@ -1,109 +1,182 @@
 import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import axios from "axios";
 import ScoreTrendChart from "../components/ScoreTrendChart";
 import SummaryCard from "../components/SummaryCard";
 import InterviewList from "../components/InterviewList";
+import Badges from "../components/Badges";
+import StreakCounter from "../components/StreakCounter";
+import Leaderboard from "../components/Leaderboard";
 import { useAuth } from "../context/AuthContext";
+import { useUserData } from "../context/UserDataContext";
+import { useState as useLocalState, useEffect as useLocalEffect } from "react";
 
-export default function Dashboard() {
 	const [interviews, setInterviews] = useState([]);
 	const [summaryData, setSummaryData] = useState([]);
 	const [chartData, setChartData] = useState([]);
+	const [leaderboard, setLeaderboard] = useState([]);
 	const { user } = useAuth();
+	const { userData } = useUserData();
+	// Personalized widgets
+	const [mockInterviews, setMockInterviews] = useLocalState([]);
+	const [recentActivity, setRecentActivity] = useLocalState([]);
+	const [recommendedResources, setRecommendedResources] = useLocalState([]);
 
-	useEffect(() => {
-		const fetchData = async () => {
-			try {
-				const token = await user.getIdToken();
-				const response = await axios.get(
-					`${import.meta.env.VITE_API_URL}/api/interview`,
-					{
-						headers: {
-							Authorization: `Bearer ${token}`,
-						},
-					}
-				);
-				setInterviews(response.data);
-
-				const reportResponse = await axios.get(
-					`${import.meta.env.VITE_API_URL}/api/report`,
-					{
-						headers: {
-							Authorization: `Bearer ${token}`,
-						},
-					}
-				);
-
-				const chartData = reportResponse.data.map((report) => ({
-					date: new Date(report.createdAt).toLocaleDateString(),
-					score: Number(report.finalScore) || 0,
-					interviewName: report.interviewId?.interview_name || "N/A",
-				}));
-				setChartData(chartData);
-
-				const bestScore = Math.max(
-					...reportResponse.data.map((i) => i.finalScore || 0)
-				);
-
-				const totalInterviews = response.data.length;
-				const roleCounts = response.data
-					.map((i) => i.role)
-					.reduce((acc, role) => {
-						acc[role] = (acc[role] || 0) + 1;
-						return acc;
-					}, {});
-				const mostCommonRole =
-					Object.entries(roleCounts).sort(
-						(a, b) => b[1] - a[1]
-					)[0]?.[0] || "N/A";
-
-				setSummaryData([
-					{ title: "Total Interviews", value: totalInterviews },
-					{ title: "Best Score", value: bestScore.toFixed(2) },
-					{ title: "Most Common Role", value: mostCommonRole },
-				]);
-			} catch (error) {
-				console.error("Failed to fetch interviews:", error);
-			}
-		};
-
-		fetchData();
-	}, [user]);
-
-	return (
-		<div className="min-h-screen bg-gray-50">
-
-			<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-				<div className="mb-8">
-					<h1 className="text-3xl font-bold text-gray-900">
-						Interview Performance Dashboard
-					</h1>
-				</div>
-
-				<ScoreTrendChart
-					chartData={chartData}
-				/>
-
-				<div className="mb-8">
-					<h2 className="text-lg font-semibold text-gray-900 mb-6">
-						Summary
-					</h2>
-					<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-						{summaryData.map((item, index) => (
-							<SummaryCard
-								key={index}
-								title={item.title}
-								value={item.value}
-							/>
-						))}
-					</div>
-				</div>
-
-				<div className="bg-white rounded-lg border border-gray-200 p-6">
-					<InterviewList interviews={interviews} itemsPerPage={3} />
-				</div>
-			</main>
-
-		</div>
-	);
-}
+		useEffect(() => {
+		   const fetchData = async () => {
+			   try {
+				   const token = await user.getIdToken();
+				   const response = await axios.get(
+					   `${import.meta.env.VITE_API_URL}/api/interview`,
+					   {
+						   headers: {
+							   Authorization: `Bearer ${token}`,
+						   },
+					   }
+				   );
+				   setInterviews(response.data);
+
+				   const reportResponse = await axios.get(
+					   `${import.meta.env.VITE_API_URL}/api/report`,
+					   {
+						   headers: {
+							   Authorization: `Bearer ${token}`,
+						   },
+					   }
+				   );
+
+				   const chartData = reportResponse.data.map((report) => ({
+					   date: new Date(report.createdAt).toLocaleDateString(),
+					   score: Number(report.finalScore) || 0,
+					   interviewName: report.interviewId?.interview_name || "N/A",
+				   }));
+				   setChartData(chartData);
+
+				   const bestScore = Math.max(
+					   ...reportResponse.data.map((i) => i.finalScore || 0)
+				   );
+
+				   const totalInterviews = response.data.length;
+				   const roleCounts = response.data
+					   .map((i) => i.role)
+					   .reduce((acc, role) => {
+						   acc[role] = (acc[role] || 0) + 1;
+						   return acc;
+					   }, {});
+				   const mostCommonRole =
+					   Object.entries(roleCounts).sort(
+						   (a, b) => b[1] - a[1]
+					   )[0]?.[0] || "N/A";
+
+				   setSummaryData([
+					   { title: "Total Interviews", value: totalInterviews },
+					   { title: "Best Score", value: bestScore.toFixed(2) },
+					   { title: "Most Common Role", value: mostCommonRole },
+				   ]);
+
+				   // Fetch leaderboard (top 5 users)
+				   const leaderboardRes = await axios.get(`${import.meta.env.VITE_API_URL}/api/user/leaderboard?limit=5`);
+				   setLeaderboard(leaderboardRes.data);
+			   } catch (error) {
+				   console.error("Failed to fetch interviews:", error);
+			   }
+		   };
+
+		   fetchData();
+	   }, [user]);
+
+		 // Fetch personalized widgets
+		 useLocalEffect(() => {
+			 const fetchWidgets = async () => {
+				 try {
+					 const [mockRes, activityRes, resourceRes] = await Promise.all([
+						 axios.get(`${import.meta.env.VITE_API_URL}/api/mock-interview?upcoming=1`),
+						 axios.get(`${import.meta.env.VITE_API_URL}/api/user/activity`),
+						 axios.get(`${import.meta.env.VITE_API_URL}/api/resources/recommended`),
+					 ]);
+					 setMockInterviews(mockRes.data);
+					 setRecentActivity(activityRes.data);
+					 setRecommendedResources(resourceRes.data);
+				 } catch {}
+			 };
+			 fetchWidgets();
+		 }, []);
+
+			 const { t } = useTranslation();
+			 return (
+				 <div className="min-h-screen bg-gray-50">
+					 <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+						 <div className="mb-8">
+							 <h1 className="text-3xl font-bold text-gray-900">
+								 {t('dashboardTitle', 'Interview Performance Dashboard')}
+							 </h1>
+							 {/* Gamification Widgets */}
+							 <div className="flex flex-wrap gap-6 items-center mt-4">
+								 {userData && <Badges badges={userData.badges} />}
+								 {userData && <StreakCounter streak={userData.streak} />}
+							 </div>
+						 </div>
+
+						 {/* Personalized Widgets */}
+						 <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+							 <div className="bg-white rounded-lg border border-gray-200 p-4">
+								 <h3 className="font-semibold mb-2">{t('upcomingMockInterviews', 'Upcoming Mock Interviews')}</h3>
+								 <ul>
+									 {mockInterviews.map((i) => (
+										 <li key={i._id} className="mb-2 text-sm">
+											 {new Date(i.scheduledAt).toLocaleString()} ({i.durationMinutes} min)
+											 {i.meetingLink && <a href={i.meetingLink} className="ml-2 text-blue-600 underline">{t('join', 'Join')}</a>}
+										 </li>
+									 ))}
+									 {!mockInterviews.length && <li className="text-gray-500">{t('noUpcomingInterviews', 'No upcoming interviews')}</li>}
+								 </ul>
+							 </div>
+							 <div className="bg-white rounded-lg border border-gray-200 p-4">
+								 <h3 className="font-semibold mb-2">{t('recentActivity', 'Recent Activity')}</h3>
+								 <ul>
+									 {recentActivity.map((a, idx) => (
+										 <li key={idx} className="mb-2 text-sm">{a}</li>
+									 ))}
+									 {!recentActivity.length && <li className="text-gray-500">{t('noRecentActivity', 'No recent activity')}</li>}
+								 </ul>
+							 </div>
+							 <div className="bg-white rounded-lg border border-gray-200 p-4">
+								 <h3 className="font-semibold mb-2">{t('recommendedResources', 'Recommended Resources')}</h3>
+								 <ul>
+									 {recommendedResources.map((r) => (
+										 <li key={r.id} className="mb-2 text-sm">
+											 <a href={r.link} className="text-blue-600 underline">{r.title}</a>
+										 </li>
+									 ))}
+									 {!recommendedResources.length && <li className="text-gray-500">{t('noRecommendations', 'No recommendations')}</li>}
+								 </ul>
+							 </div>
+						 </div>
+
+						 <ScoreTrendChart chartData={chartData} />
+
+						 <div className="mb-8">
+							 <h2 className="text-lg font-semibold text-gray-900 mb-6">
+								 {t('summary', 'Summary')}
+							 </h2>
+							 <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+								 {summaryData.map((item, index) => (
+									 <SummaryCard
+										 key={index}
+										 title={item.title}
+										 value={item.value}
+									 />
+								 ))}
+							 </div>
+						 </div>
+
+						 <div className="mb-8">
+							 <Leaderboard users={leaderboard} />
+						 </div>
+
+						 <div className="bg-white rounded-lg border border-gray-200 p-6">
+							 <InterviewList interviews={interviews} itemsPerPage={3} />
+						 </div>
+					 </main>
+				 </div>
+		 );
diff --git a/client/src/pages/Interview.jsx b/client/src/pages/Interview.jsx
index 926ccad..2d9945d 100644
--- a/client/src/pages/Interview.jsx
+++ b/client/src/pages/Interview.jsx
@@ -1,30 +1,29 @@
-import { useState, useEffect } from "react";
-import axios from "axios";
-import { useParams, useNavigate } from "react-router-dom";
-import Toast from "../components/Toast";
-import LoadingScreen from "../components/LoadingScreen";
-import { useAuth } from "../context/AuthContext";
 
+import TagFilter from "../components/TagFilter";
+import BookmarkButton from "../components/BookmarkButton";
+import { useUserData } from "../context/UserDataContext";
 import { FaMicrophone, FaArrowRight } from "react-icons/fa";
 
 const SpeechRecognition =
 	window.SpeechRecognition || window.webkitSpeechRecognition;
 const recognition = SpeechRecognition ? new SpeechRecognition() : null;
 
-export default function Interview() {
-	const { interviewId } = useParams();
-	const [questions, setQuestions] = useState([]);
-	const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
-	const [answer, setAnswer] = useState("");
-	const [totalTime, setTotalTime] = useState(0);
-	const [isRecording, setIsRecording] = useState(false);
-	const [toast, setToast] = useState({
-		show: false,
-		message: "",
-		type: "success",
-	});
-	const { loading, setLoading } = useAuth();
-	const navigate = useNavigate();
+   const { interviewId } = useParams();
+   const [questions, setQuestions] = useState([]);
+   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+   const [answer, setAnswer] = useState("");
+   const [totalTime, setTotalTime] = useState(0);
+   const [isRecording, setIsRecording] = useState(false);
+   const [toast, setToast] = useState({
+	   show: false,
+	   message: "",
+	   type: "success",
+   });
+   const [selectedTags, setSelectedTags] = useState([]);
+   const [filteredIndexes, setFilteredIndexes] = useState([]);
+   const { loading, setLoading } = useAuth();
+   const { userData, setUserData } = useUserData();
+   const navigate = useNavigate();
 
 	const showToast = (message, type) => {
 		setToast({ show: true, message, type });
@@ -39,24 +38,41 @@ export default function Interview() {
 		window.speechSynthesis.speak(utterance);
 	};
 
-	useEffect(() => {
-		const fetchQuestions = async () => {
-			try {
-				const res = await axios.get(
-					`${
-						import.meta.env.VITE_API_URL
-					}/api/interview/${interviewId}`
-				);
-				setQuestions(res.data.questions);
-				if (res.data.questions.length > 0) {
-					speakQuestion(res.data.questions[0].question);
-				}
-			} catch (err) {
-				showToast(err.message || "Failed to load questions.", "error");
-			}
-		};
-		fetchQuestions();
-	}, [interviewId]);
+	   useEffect(() => {
+		   const fetchQuestions = async () => {
+			   try {
+				   const res = await axios.get(
+					   `${import.meta.env.VITE_API_URL}/api/interview/${interviewId}`
+				   );
+				   setQuestions(res.data.questions);
+				   if (res.data.questions.length > 0) {
+					   speakQuestion(res.data.questions[0].question);
+				   }
+			   } catch (err) {
+				   showToast(err.message || "Failed to load questions.", "error");
+			   }
+		   };
+		   fetchQuestions();
+	   }, [interviewId]);
+
+	   // Tag filtering logic
+	   useEffect(() => {
+		   if (!selectedTags.length) {
+			   setFilteredIndexes(questions.map((_, idx) => idx));
+		   } else {
+			   setFilteredIndexes(
+				   questions
+					   .map((q, idx) =>
+						   selectedTags.every((tag) =>
+							   (q.topics || []).includes(tag) || (q.company_tags || []).includes(tag) || (q.difficulty === tag)
+						   )
+							   ? idx
+							   : null
+					   )
+					   .filter((idx) => idx !== null)
+			   );
+		   }
+	   }, [selectedTags, questions]);
 
 	useEffect(() => {
 		const totalTimer = setInterval(() => {
@@ -153,102 +169,140 @@ export default function Interview() {
 	};
 
 	const totalTimeFormatted = formatTotalTime(totalTime);
-	const currentQuestion = questions[currentQuestionIndex];
+		// Only show filtered questions
+		const filteredQuestions = filteredIndexes.map((i) => questions[i]);
+		const currentFilteredIndex = filteredIndexes.indexOf(currentQuestionIndex);
+		const currentQuestion = questions[currentQuestionIndex];
 
 	if (loading) {
 		return <LoadingScreen message="Analyzing your Answer..." showProgress />;
 	}
 
-	return (
-		<div className="min-h-screen bg-gray-50">
-			{toast.show && (
-				<Toast
-					message={toast.message}
-					type={toast.type}
-					onClose={hideToast}
-				/>
-			)}
-
-			<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-				<div className="text-center mb-8">
-					<h1 className="text-3xl font-bold text-gray-900 mb-2">
-						Interview
-					</h1>
-					<p className="text-gray-600">
-						Practice answering common interview questions in a
-						simulated environment
-					</p>
-				</div>
 
-				{currentQuestion && (
-					<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-8">
-						<div className="flex justify-between items-center mb-6">
-							<div className="text-sm font-medium text-gray-700">
-								Question {currentQuestionIndex + 1} of{" "}
-								{questions.length}
-							</div>
-						</div>
+	   return (
+		   <div className="min-h-screen bg-gray-50">
+			   {toast.show && (
+				   <Toast
+					   message={toast.message}
+					   type={toast.type}
+					   onClose={hideToast}
+				   />
+			   )}
 
-						<div className="mb-6">
-							<h2 className="text-xl font-medium text-gray-900 leading-relaxed">
-								{currentQuestion.question}
-							</h2>
-						</div>
+			   <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+				   <div className="text-center mb-8">
+					   <h1 className="text-3xl font-bold text-gray-900 mb-2">
+						   Interview
+					   </h1>
+					   <p className="text-gray-600">
+						   Practice answering common interview questions in a
+						   simulated environment
+					   </p>
+				   </div>
 
-						<div className="mb-6">
-							<textarea
-								value={answer}
-								onChange={(e) => setAnswer(e.target.value)}
-								placeholder="Type your answer here..."
-								className="w-full h-40 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent resize-none text-gray-700 placeholder-gray-400"
-							/>
-						</div>
+				   {/* Tag Filter UI */}
+				   <TagFilter
+					   tags={Array.from(new Set(questions.flatMap(q => [q.difficulty, ...(q.topics || []), ...(q.company_tags || [])]).filter(Boolean)))}
+					   selected={selectedTags}
+					   onChange={(tag) =>
+						   setSelectedTags((prev) =>
+							   prev.includes(tag)
+								   ? prev.filter((t) => t !== tag)
+								   : [...prev, tag]
+						   )
+					   }
+				   />
 
-						<div className="flex justify-between items-center">
-							<button
-								onClick={() => {
-                  if (isRecording) {
-                    recognition.stop();
-                  } else {
-                    startRecording();
-                  }
-                }}
-								className={`flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg transition-colors ${
-									isRecording
-										? "bg-red-50 border-red-300 text-red-700"
-										: "bg-white text-gray-700 hover:bg-gray-50"
-								}`}
-							>
-								<FaMicrophone
-									className={`w-4 h-4 ${
-										isRecording
-											? "text-red-500"
-											: "text-gray-400"
-									}`}
-								/>
-								<span>
-									{isRecording
-										? "Recording..."
-										: "Record Answer"}
-								</span>
-							</button>
-
-							<button
-								onClick={submitAnswer}
-								disabled={!answer.trim()}
-								className="flex items-center space-x-2 px-6 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-							>
-								<span>
-									{currentQuestionIndex >=
-									questions.length - 1
-										? "Finish"
-										: "Next Question"}
-								</span>
-								<FaArrowRight className="w-4 h-4" />
-							</button>
-						</div>
-					</div>
-				)}
+				   {currentQuestion && (
+					   <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-8">
+						   <div className="flex justify-between items-center mb-6">
+							   <div className="text-sm font-medium text-gray-700">
+								   Question {currentFilteredIndex + 1} of {filteredQuestions.length}
+							   </div>
+							   {/* Bookmark Button */}
+							   {userData && (
+								   <BookmarkButton
+									   bookmarked={userData.bookmarks?.includes(currentQuestion._id)}
+									   onClick={async () => {
+										   try {
+											   const token = await userData.firebase_user_id;
+											   // Replace with actual API call to bookmark/unbookmark
+											   // await axios.post(`/api/user/bookmark`, { id: currentQuestion._id });
+											   // For now, update local state
+											   setUserData((prev) => ({
+												   ...prev,
+												   bookmarks: prev.bookmarks?.includes(currentQuestion._id)
+													   ? prev.bookmarks.filter((id) => id !== currentQuestion._id)
+													   : [...(prev.bookmarks || []), currentQuestion._id],
+											   }));
+										   } catch (e) {
+											   showToast("Failed to update bookmark", "error");
+										   }
+									   }}
+								   />
+							   )}
+						   </div>
+
+						   <div className="mb-6">
+							   <h2 className="text-xl font-medium text-gray-900 leading-relaxed">
+								   {currentQuestion.question}
+							   </h2>
+						   </div>
+
+						   <div className="mb-6">
+							   <textarea
+								   value={answer}
+								   onChange={(e) => setAnswer(e.target.value)}
+								   placeholder="Type your answer here..."
+								   className="w-full h-40 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent resize-none text-gray-700 placeholder-gray-400"
+							   />
+						   </div>
+
+						   <div className="flex justify-between items-center">
+							   <button
+								   onClick={() => {
+									   if (isRecording) {
+										   recognition.stop();
+									   } else {
+										   startRecording();
+									   }
+								   }}
+								   className={`flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg transition-colors ${
+									   isRecording
+										   ? "bg-red-50 border-red-300 text-red-700"
+										   : "bg-white text-gray-700 hover:bg-gray-50"
+								   }`}
+							   >
+								   <FaMicrophone
+									   className={`w-4 h-4 ${
+										   isRecording
+											   ? "text-red-500"
+											   : "text-gray-400"
+									   }`}
+								   />
+								   <span>
+									   {isRecording
+										   ? "Recording..."
+										   : "Record Answer"}
+								   </span>
+							   </button>
+
+							   <button
+								   onClick={submitAnswer}
+								   disabled={!answer.trim()}
+								   className="flex items-center space-x-2 px-6 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+							   >
+								   <span>
+									   {currentQuestionIndex >=
+									   questions.length - 1
+										   ? "Finish"
+										   : "Next Question"}
+								   </span>
+								   <FaArrowRight className="w-4 h-4" />
+							   </button>
+						   </div>
+					   </div>
+				   )}
 
 				<div className="flex justify-center space-x-4">
 					<div className="bg-gray-200 rounded-lg px-6 py-4 text-center">
@@ -273,4 +327,4 @@ export default function Interview() {
 			</main>
 		</div>
 	);
-}
+
diff --git a/client/src/pages/Resources.jsx b/client/src/pages/Resources.jsx
index e015dd3..94ed0a0 100644
--- a/client/src/pages/Resources.jsx
+++ b/client/src/pages/Resources.jsx
@@ -2,10 +2,34 @@ import { Link } from "react-router-dom";
 import ResourceCard from "../components/ResourceCard";
 import resources from "../data/resourcesData";
 import featuredResources from "../data/featuredResourcesData";
+import TagFilter from "../components/TagFilter";
+import BookmarkButton from "../components/BookmarkButton";
+import { useUserData } from "../context/UserDataContext";
+import { useState } from "react";
 
 export default function HeroSection() {
-	return (
-		<div>
+   const { userData, setUserData } = useUserData();
+   const [selectedTags, setSelectedTags] = useState([]);
+
+   // Collect all unique tags from resources
+   const allTags = Array.from(new Set(resources.flatMap(r => [r.category, ...(r.topics || [])]).filter(Boolean)));
+
+   // Filter resources by selected tags
+   const filteredResources = selectedTags.length
+	   ? resources.filter(r => selectedTags.every(tag => (r.topics || []).includes(tag) || r.category === tag))
+	   : resources;
+
+   const handleBookmark = (id) => {
+	   setUserData((prev) => ({
+		   ...prev,
+		   bookmarks: prev.bookmarks?.includes(id)
+			   ? prev.bookmarks.filter((bid) => bid !== id)
+			   : [...(prev.bookmarks || []), id],
+	   }));
+   };
+
+   return (
+	   <div>
 			<section className="relative bg-gradient-to-br from-blue-500 via-green-500 to-emerald-600 overflow-hidden min-h-[600px]">
 				<div className="absolute inset-0">
 					<div className="absolute inset-0 bg-neutral-950 bg-opacity-10"></div>
@@ -165,18 +189,40 @@ export default function HeroSection() {
 				</div>
 			</section>
 
-			<section id="all-resources" className="py-16 bg-stone-50 -mb-20">
-				<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <div className="mb-12">
-                        <h2 className="text-3xl font-bold text-gray-900 mb-8">All Resources</h2>
-                    </div>
-					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-						{resources.map((resource) => (
-							<ResourceCard key={resource.id} {...resource} />
-						))}
-					</div>
-				</div>
-			</section>
+			   <section id="all-resources" className="py-16 bg-stone-50 -mb-20">
+				   <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+						<div className="mb-12">
+							<h2 className="text-3xl font-bold text-gray-900 mb-8">All Resources</h2>
+							{/* Tag Filter UI */}
+							<TagFilter
+								tags={allTags}
+								selected={selectedTags}
+								onChange={(tag) =>
+									setSelectedTags((prev) =>
+										prev.includes(tag)
+											? prev.filter((t) => t !== tag)
+											: [...prev, tag]
+									)
+								}
+							/>
+						</div>
+					   <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+						   {filteredResources.map((resource) => (
+							   <div key={resource.id} className="relative">
+								   <ResourceCard {...resource} />
+								   {userData && (
+									   <div className="absolute top-3 right-3 z-10">
+										   <BookmarkButton
+											   bookmarked={userData.bookmarks?.includes(resource.id)}
+											   onClick={() => handleBookmark(resource.id)}
+										   />
+									   </div>
+								   )}
+							   </div>
+						   ))}
+					   </div>
+				   </div>
+			   </section>
 		</div>
 	);
 }
diff --git a/client/src/routes.jsx b/client/src/routes.jsx
index 7e6702e..863cb4a 100644
--- a/client/src/routes.jsx
+++ b/client/src/routes.jsx
@@ -13,6 +13,9 @@ import Resources from "./pages/Resources";
 import About from "./pages/About";
 import Contact from "./pages/Contact";
 import Animated404 from "./pages/404";
+import ResumeReview from "./pages/ResumeReview";
+import MockInterview from "./pages/MockInterview";
+import CommunityQA from "./pages/CommunityQA";
 
 const router = createBrowserRouter([
   {
@@ -26,7 +29,10 @@ const router = createBrowserRouter([
       { path: "interview/:interviewId", element: <ProtectedRoute><Interview /></ProtectedRoute> },
       { path: "interview/report/:interviewId", element: <ProtectedRoute><InterviewReport /></ProtectedRoute> },
       { path: "dashboard", element: <ProtectedRoute><Dashboard /></ProtectedRoute> },
-      { path: "resources", element: <Resources /> },
+  { path: "resources", element: <Resources /> },
+  { path: "resume-review", element: <ProtectedRoute><ResumeReview /></ProtectedRoute> },
+  { path: "mock-interview", element: <ProtectedRoute><MockInterview /></ProtectedRoute> },
+  { path: "community-qa", element: <ProtectedRoute><CommunityQA /></ProtectedRoute> },
       { path: "about", element: <About /> },
       { path: "contact", element: <Contact /> },
       { path: "*", element: <Animated404 /> },
diff --git a/server/index.js b/server/index.js
index 016aa75..052f0ad 100644
--- a/server/index.js
+++ b/server/index.js
@@ -29,15 +29,21 @@ admin.initializeApp({
 });
 
 // Routing
+
 import authRoutes from "./routes/authRoutes.js";
 import interviewRoutes from "./routes/interviewRoutes.js";
 import reportRoutes from "./routes/reportRoutes.js";
 import contactRoutes from "./routes/contactRoutes.js";
+import mockInterviewRoutes from "./routes/mockInterviewRoutes.js";
+import communityQARoutes from "./routes/communityQARoutes.js";
+
 
 app.use("/api/auth", authRoutes);
 app.use("/api/interview", interviewRoutes);
 app.use("/api/report", reportRoutes);
 app.use("/api/contact", contactRoutes);
+app.use("/api/mock-interview", mockInterviewRoutes);
+app.use("/api/community-qa", communityQARoutes);
 
 // Starting the server
 const PORT = process.env.PORT || 5000;
diff --git a/server/models/InterviewModel.js b/server/models/InterviewModel.js
index dc9069e..58cc548 100644
--- a/server/models/InterviewModel.js
+++ b/server/models/InterviewModel.js
@@ -57,20 +57,37 @@ const interviewSchema = new mongoose.Schema({
 		trim: true,
 	},
 
-	questions: [
-		{
-			question: {
-				type: String,
-				required: true,
-				trim: true,
+		questions: [
+			{
+				question: {
+					type: String,
+					required: true,
+					trim: true,
+				},
+				preferred_answer: {
+					type: String,
+					required: true,
+					trim: true,
+				},
+				difficulty: {
+					type: String,
+					enum: ["easy", "medium", "hard"],
+					default: "medium",
+				},
+				topics: {
+					type: [String],
+					default: [],
+				},
+				company_tags: {
+					type: [String],
+					default: [],
+				},
+				bookmarkedBy: {
+					type: [String], // user IDs who bookmarked
+					default: [],
+				},
 			},
-			preferred_answer: {
-				type: String,
-				required: true,
-				trim: true,
-			},
-		},
-	],
+		],
 
 	created_at: {
 		type: Date,
diff --git a/server/models/UserModel.js b/server/models/UserModel.js
index 666849d..0abcf66 100644
--- a/server/models/UserModel.js
+++ b/server/models/UserModel.js
@@ -1,3 +1,4 @@
+
 import mongoose from 'mongoose';
 
 const userSchema = new mongoose.Schema({
@@ -24,11 +25,29 @@ const userSchema = new mongoose.Schema({
         default: 'basic',
         required: true
     },
+    badges: {
+        type: [String],
+        default: [],
+    },
+    streak: {
+        type: Number,
+        default: 0,
+    },
+    leaderboardPoints: {
+        type: Number,
+        default: 0,
+    },
+    bookmarks: {
+        type: [{
+            type: String, // Can be resource/question/interview ID
+        }],
+        default: [],
+    },
     created_at: {
         type: Date,
         default: Date.now
     },
-})
+});
 
 const User = mongoose.model('User', userSchema);
 export default User;
\ No newline at end of file

From 85db7be8d68183fc6d2e8500469c6d35b87cd5df Mon Sep 17 00:00:00 2001
From: Gupta-02 <Gupta-02@users.noreply.github.com>
Date: Wed, 10 Sep 2025 21:45:38 +0530
Subject: [PATCH 2/2] Add new files and changes

---
 client/src/components/Badges.jsx         | 14 +++++
 client/src/components/BookmarkButton.jsx | 14 +++++
 client/src/components/Leaderboard.jsx    | 18 ++++++
 client/src/components/StreakCounter.jsx  | 10 ++++
 client/src/components/TagFilter.jsx      | 18 ++++++
 client/src/context/UserDataContext.jsx   | 40 +++++++++++++
 client/src/i18n.js                       | 21 +++++++
 client/src/locales/en.json               | 19 ++++++
 client/src/locales/hi.json               | 19 ++++++
 client/src/pages/CommunityQA.jsx         | 57 ++++++++++++++++++
 client/src/pages/MockInterview.jsx       | 57 ++++++++++++++++++
 client/src/pages/ResumeReview.jsx        | 73 ++++++++++++++++++++++++
 server/middleware/authRequired.js        | 16 ++++++
 server/models/CommunityQuestionModel.js  | 19 ++++++
 server/models/MockInterviewModel.js      | 15 +++++
 server/routes/communityQARoutes.js       | 27 +++++++++
 server/routes/mockInterviewRoutes.js     | 28 +++++++++
 17 files changed, 465 insertions(+)
 create mode 100644 client/src/components/Badges.jsx
 create mode 100644 client/src/components/BookmarkButton.jsx
 create mode 100644 client/src/components/Leaderboard.jsx
 create mode 100644 client/src/components/StreakCounter.jsx
 create mode 100644 client/src/components/TagFilter.jsx
 create mode 100644 client/src/context/UserDataContext.jsx
 create mode 100644 client/src/i18n.js
 create mode 100644 client/src/locales/en.json
 create mode 100644 client/src/locales/hi.json
 create mode 100644 client/src/pages/CommunityQA.jsx
 create mode 100644 client/src/pages/MockInterview.jsx
 create mode 100644 client/src/pages/ResumeReview.jsx
 create mode 100644 server/middleware/authRequired.js
 create mode 100644 server/models/CommunityQuestionModel.js
 create mode 100644 server/models/MockInterviewModel.js
 create mode 100644 server/routes/communityQARoutes.js
 create mode 100644 server/routes/mockInterviewRoutes.js

diff --git a/client/src/components/Badges.jsx b/client/src/components/Badges.jsx
new file mode 100644
index 0000000..bf1daa5
--- /dev/null
+++ b/client/src/components/Badges.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+export default function Badges({ badges = [] }) {
+  if (!badges.length) return null;
+  return (
+    <div className="flex flex-wrap gap-2 my-2" aria-label="User Badges">
+      {badges.map((badge, idx) => (
+        <span key={idx} className="bg-yellow-200 text-yellow-800 px-3 py-1 rounded-full text-xs font-semibold" role="img" aria-label={badge}>
+          {badge}
+        </span>
+      ))}
+    </div>
+  );
+}
diff --git a/client/src/components/BookmarkButton.jsx b/client/src/components/BookmarkButton.jsx
new file mode 100644
index 0000000..4619a4a
--- /dev/null
+++ b/client/src/components/BookmarkButton.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+export default function BookmarkButton({ bookmarked, onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      aria-pressed={bookmarked}
+      aria-label={bookmarked ? "Remove Bookmark" : "Add Bookmark"}
+      className={`p-2 rounded-full border transition-colors ${bookmarked ? "bg-yellow-300 text-yellow-900" : "bg-gray-200 text-gray-600 hover:bg-yellow-100"}`}
+    >
+      {bookmarked ? "★" : "☆"}
+    </button>
+  );
+}
diff --git a/client/src/components/Leaderboard.jsx b/client/src/components/Leaderboard.jsx
new file mode 100644
index 0000000..b345b26
--- /dev/null
+++ b/client/src/components/Leaderboard.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function Leaderboard({ users = [] }) {
+  if (!users.length) return null;
+  return (
+    <div className="my-4" aria-label="Leaderboard">
+      <h3 className="font-bold text-lg mb-2">🏆 Leaderboard</h3>
+      <ol className="list-decimal pl-5">
+        {users.map((user, idx) => (
+          <li key={user.id || idx} className="mb-1 flex items-center gap-2">
+            <span className="font-semibold">{user.name}</span>
+            <span className="bg-blue-100 text-blue-700 px-2 py-0.5 rounded text-xs">{user.leaderboardPoints} pts</span>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}
diff --git a/client/src/components/StreakCounter.jsx b/client/src/components/StreakCounter.jsx
new file mode 100644
index 0000000..42da25e
--- /dev/null
+++ b/client/src/components/StreakCounter.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function StreakCounter({ streak = 0 }) {
+  return (
+    <div className="flex items-center space-x-2" aria-label="Practice Streak">
+      <span className="text-2xl" role="img" aria-label="fire">🔥</span>
+      <span className="font-bold text-lg">{streak} day streak</span>
+    </div>
+  );
+}
diff --git a/client/src/components/TagFilter.jsx b/client/src/components/TagFilter.jsx
new file mode 100644
index 0000000..43961bd
--- /dev/null
+++ b/client/src/components/TagFilter.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function TagFilter({ tags = [], selected = [], onChange }) {
+  return (
+    <div className="flex flex-wrap gap-2 my-2" aria-label="Tag Filter">
+      {tags.map((tag) => (
+        <button
+          key={tag}
+          className={`px-3 py-1 rounded-full border text-xs font-medium transition-colors ${selected.includes(tag) ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-700 hover:bg-blue-100"}`}
+          onClick={() => onChange(tag)}
+          aria-pressed={selected.includes(tag)}
+        >
+          {tag}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/client/src/context/UserDataContext.jsx b/client/src/context/UserDataContext.jsx
new file mode 100644
index 0000000..346672d
--- /dev/null
+++ b/client/src/context/UserDataContext.jsx
@@ -0,0 +1,40 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import axios from "axios";
+import { useAuth } from "./AuthContext";
+
+const UserDataContext = createContext();
+
+export const useUserData = () => useContext(UserDataContext);
+
+export const UserDataProvider = ({ children }) => {
+  const { user } = useAuth();
+  const [userData, setUserData] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchUserData = async () => {
+      if (!user) {
+        setUserData(null);
+        setLoading(false);
+        return;
+      }
+      try {
+        const token = await user.getIdToken();
+        const res = await axios.get(`${import.meta.env.VITE_API_URL}/api/user/me`, {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        setUserData(res.data);
+      } catch (err) {
+        setUserData(null);
+      }
+      setLoading(false);
+    };
+    fetchUserData();
+  }, [user]);
+
+  return (
+    <UserDataContext.Provider value={{ userData, setUserData, loading }}>
+      {children}
+    </UserDataContext.Provider>
+  );
+};
diff --git a/client/src/i18n.js b/client/src/i18n.js
new file mode 100644
index 0000000..b816d8b
--- /dev/null
+++ b/client/src/i18n.js
@@ -0,0 +1,21 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import en from './locales/en.json';
+import hi from './locales/hi.json';
+
+const resources = {
+  en: { translation: en },
+  hi: { translation: hi },
+};
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: 'en',
+    fallbackLng: 'en',
+    interpolation: { escapeValue: false },
+  });
+
+export default i18n;
diff --git a/client/src/locales/en.json b/client/src/locales/en.json
new file mode 100644
index 0000000..9bde057
--- /dev/null
+++ b/client/src/locales/en.json
@@ -0,0 +1,19 @@
+{
+  "welcome": "Welcome to PrepEdge AI!",
+  "dashboard": "Dashboard",
+  "resources": "Resources",
+  "mockInterview": "Mock Interview",
+  "communityQA": "Community Q&A",
+  "resumeReview": "Resume Review",
+  "login": "Log in",
+  "signup": "Sign up",
+  "dashboardTitle": "Interview Performance Dashboard",
+  "upcomingMockInterviews": "Upcoming Mock Interviews",
+  "join": "Join",
+  "noUpcomingInterviews": "No upcoming interviews",
+  "recentActivity": "Recent Activity",
+  "noRecentActivity": "No recent activity",
+  "recommendedResources": "Recommended Resources",
+  "noRecommendations": "No recommendations",
+  "summary": "Summary"
+}
diff --git a/client/src/locales/hi.json b/client/src/locales/hi.json
new file mode 100644
index 0000000..1a4350b
--- /dev/null
+++ b/client/src/locales/hi.json
@@ -0,0 +1,19 @@
+{
+  "welcome": "PrepEdge AI में आपका स्वागत है!",
+  "dashboard": "डैशबोर्ड",
+  "resources": "संसाधन",
+  "mockInterview": "मॉक इंटरव्यू",
+  "communityQA": "सामुदायिक प्रश्नोत्तर",
+  "resumeReview": "रिज़्यूमे समीक्षा",
+  "login": "लॉग इन करें",
+  "signup": "साइन अप करें",
+  "dashboardTitle": "इंटरव्यू प्रदर्शन डैशबोर्ड",
+  "upcomingMockInterviews": "आगामी मॉक इंटरव्यू",
+  "join": "जॉइन करें",
+  "noUpcomingInterviews": "कोई आगामी इंटरव्यू नहीं",
+  "recentActivity": "हाल की गतिविधि",
+  "noRecentActivity": "कोई हाल की गतिविधि नहीं",
+  "recommendedResources": "अनुशंसित संसाधन",
+  "noRecommendations": "कोई अनुशंसा नहीं",
+  "summary": "सारांश"
+}
diff --git a/client/src/pages/CommunityQA.jsx b/client/src/pages/CommunityQA.jsx
new file mode 100644
index 0000000..dd7d548
--- /dev/null
+++ b/client/src/pages/CommunityQA.jsx
@@ -0,0 +1,57 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+
+export default function CommunityQA() {
+  const [questions, setQuestions] = useState([]);
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [tags, setTags] = useState("");
+  const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    const fetchQuestions = async () => {
+      try {
+        const res = await axios.get(`${import.meta.env.VITE_API_URL}/api/community-qa`);
+        setQuestions(res.data);
+      } catch {}
+    };
+    fetchQuestions();
+  }, []);
+
+  const handlePost = async (e) => {
+    e.preventDefault();
+    try {
+      await axios.post(`${import.meta.env.VITE_API_URL}/api/community-qa`, {
+        title,
+        content,
+        tags: tags.split(",").map(t => t.trim()),
+      });
+      setMessage("Question posted!");
+    } catch {
+      setMessage("Failed to post question.");
+    }
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto py-8">
+      <h1 className="text-2xl font-bold mb-4">Community Q&amp;A</h1>
+      <form onSubmit={handlePost} className="mb-8 flex flex-col gap-4">
+        <input type="text" value={title} onChange={e => setTitle(e.target.value)} placeholder="Title" required className="border p-2 rounded" />
+        <textarea value={content} onChange={e => setContent(e.target.value)} placeholder="Your question..." required className="border p-2 rounded" />
+        <input type="text" value={tags} onChange={e => setTags(e.target.value)} placeholder="Tags (comma separated)" className="border p-2 rounded" />
+        <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded">Post Question</button>
+      </form>
+      {message && <div className="mb-4 text-green-700">{message}</div>}
+      <ul>
+        {questions.map((q) => (
+          <li key={q._id} className="mb-4 p-4 border rounded">
+            <h2 className="font-semibold">{q.title}</h2>
+            <div className="text-gray-700 mb-2">{q.content}</div>
+            <div className="text-xs text-gray-500 mb-2">Tags: {q.tags.join(", ")}</div>
+            <div className="text-sm text-gray-600">Answers: {q.answers.length}</div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/client/src/pages/MockInterview.jsx b/client/src/pages/MockInterview.jsx
new file mode 100644
index 0000000..0de9245
--- /dev/null
+++ b/client/src/pages/MockInterview.jsx
@@ -0,0 +1,57 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+import { useUserData } from "../context/UserDataContext";
+
+export default function MockInterview() {
+  const { userData } = useUserData();
+  const [interviews, setInterviews] = useState([]);
+  const [date, setDate] = useState("");
+  const [time, setTime] = useState("");
+  const [duration, setDuration] = useState(30);
+  const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    const fetchInterviews = async () => {
+      try {
+        const res = await axios.get(`${import.meta.env.VITE_API_URL}/api/mock-interview`);
+        setInterviews(res.data);
+      } catch {}
+    };
+    fetchInterviews();
+  }, []);
+
+  const handleSchedule = async (e) => {
+    e.preventDefault();
+    try {
+      await axios.post(`${import.meta.env.VITE_API_URL}/api/mock-interview`, {
+        scheduledAt: new Date(`${date}T${time}`),
+        durationMinutes: duration,
+      });
+      setMessage("Interview scheduled!");
+    } catch {
+      setMessage("Failed to schedule interview.");
+    }
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto py-8">
+      <h1 className="text-2xl font-bold mb-4">Schedule a Mock Interview</h1>
+      <form onSubmit={handleSchedule} className="mb-8 flex flex-col gap-4">
+        <input type="date" value={date} onChange={e => setDate(e.target.value)} required className="border p-2 rounded" />
+        <input type="time" value={time} onChange={e => setTime(e.target.value)} required className="border p-2 rounded" />
+        <input type="number" min={15} max={120} value={duration} onChange={e => setDuration(e.target.value)} className="border p-2 rounded" />
+        <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded">Schedule</button>
+      </form>
+      {message && <div className="mb-4 text-green-700">{message}</div>}
+      <h2 className="text-xl font-semibold mb-2">Upcoming Interviews</h2>
+      <ul>
+        {interviews.map((i) => (
+          <li key={i._id} className="mb-2 p-2 border rounded">
+            {new Date(i.scheduledAt).toLocaleString()} ({i.durationMinutes} min)
+            {i.meetingLink && <a href={i.meetingLink} className="ml-2 text-blue-600 underline">Join</a>}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/client/src/pages/ResumeReview.jsx b/client/src/pages/ResumeReview.jsx
new file mode 100644
index 0000000..35f2179
--- /dev/null
+++ b/client/src/pages/ResumeReview.jsx
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import axios from "axios";
+import LoadingScreen from "../components/LoadingScreen";
+
+export default function ResumeReview() {
+  const [file, setFile] = useState(null);
+  const [feedback, setFeedback] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleFileChange = (e) => {
+    setFile(e.target.files[0]);
+    setFeedback("");
+    setError("");
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!file) return;
+    setLoading(true);
+    setFeedback("");
+    setError("");
+    try {
+      const formData = new FormData();
+      formData.append("resume", file);
+      const res = await axios.post(`${import.meta.env.VITE_API_URL}/api/resume/review`, formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+      setFeedback(res.data.feedback || res.data.summary || "No feedback returned.");
+    } catch (err) {
+      setError(err.response?.data?.error || "Failed to analyze resume.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-8">
+        <h1 className="text-2xl font-bold mb-6 text-gray-900">AI-Powered Resume Review</h1>
+        <form onSubmit={handleSubmit} className="mb-6" aria-label="Resume Upload Form">
+          <input
+            type="file"
+            accept=".pdf,.doc,.docx"
+            onChange={handleFileChange}
+            className="mb-4 block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
+            aria-label="Upload your resume"
+          />
+          <button
+            type="submit"
+            disabled={!file || loading}
+            className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            aria-busy={loading}
+          >
+            {loading ? "Analyzing..." : "Get AI Feedback"}
+          </button>
+        </form>
+        {loading && <LoadingScreen message="Analyzing your resume..." showProgress />}
+        {feedback && (
+          <div className="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-900 whitespace-pre-line" aria-live="polite">
+            <h2 className="font-semibold mb-2">AI Feedback:</h2>
+            {feedback}
+          </div>
+        )}
+        {error && (
+          <div className="mt-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-900" aria-live="assertive">
+            {error}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/server/middleware/authRequired.js b/server/middleware/authRequired.js
new file mode 100644
index 0000000..89d31bd
--- /dev/null
+++ b/server/middleware/authRequired.js
@@ -0,0 +1,16 @@
+import admin from "firebase-admin";
+
+export default async function authRequired(req, res, next) {
+  const authHeader = req.headers.authorization;
+  if (!authHeader || !authHeader.startsWith("Bearer ")) {
+    return res.status(401).json({ error: "No token provided" });
+  }
+  const token = authHeader.split(" ")[1];
+  try {
+    const decoded = await admin.auth().verifyIdToken(token);
+    req.user = { id: decoded.uid };
+    next();
+  } catch {
+    return res.status(401).json({ error: "Invalid token" });
+  }
+}
diff --git a/server/models/CommunityQuestionModel.js b/server/models/CommunityQuestionModel.js
new file mode 100644
index 0000000..1198558
--- /dev/null
+++ b/server/models/CommunityQuestionModel.js
@@ -0,0 +1,19 @@
+import mongoose from "mongoose";
+
+const answerSchema = new mongoose.Schema({
+  user: { type: String, required: true }, // user id
+  content: { type: String, required: true },
+  createdAt: { type: Date, default: Date.now },
+});
+
+const questionSchema = new mongoose.Schema({
+  user: { type: String, required: true }, // user id
+  title: { type: String, required: true },
+  content: { type: String, required: true },
+  tags: [{ type: String }],
+  answers: [answerSchema],
+  createdAt: { type: Date, default: Date.now },
+});
+
+const CommunityQuestion = mongoose.model("CommunityQuestion", questionSchema);
+export default CommunityQuestion;
diff --git a/server/models/MockInterviewModel.js b/server/models/MockInterviewModel.js
new file mode 100644
index 0000000..67ed57c
--- /dev/null
+++ b/server/models/MockInterviewModel.js
@@ -0,0 +1,15 @@
+import mongoose from "mongoose";
+
+const mockInterviewSchema = new mongoose.Schema({
+  host: { type: String, required: true }, // user id
+  participants: [{ type: String }], // user ids
+  scheduledAt: { type: Date, required: true },
+  durationMinutes: { type: Number, default: 30 },
+  status: { type: String, enum: ["scheduled", "completed", "cancelled"], default: "scheduled" },
+  createdAt: { type: Date, default: Date.now },
+  meetingLink: { type: String },
+  notes: { type: String },
+});
+
+const MockInterview = mongoose.model("MockInterview", mockInterviewSchema);
+export default MockInterview;
diff --git a/server/routes/communityQARoutes.js b/server/routes/communityQARoutes.js
new file mode 100644
index 0000000..d7de29d
--- /dev/null
+++ b/server/routes/communityQARoutes.js
@@ -0,0 +1,27 @@
+import express from "express";
+import CommunityQuestion from "../models/CommunityQuestionModel.js";
+const router = express.Router();
+
+// List all questions
+router.get("/", async (req, res) => {
+  try {
+    const questions = await CommunityQuestion.find().sort({ createdAt: -1 });
+    res.json(questions);
+  } catch (err) {
+    res.status(500).json({ error: "Failed to fetch questions" });
+  }
+});
+
+// Post a new question
+router.post("/", async (req, res) => {
+  try {
+    const { title, content, tags } = req.body;
+    const user = req.user?.id || "demo-user";
+    const question = await CommunityQuestion.create({ user, title, content, tags });
+    res.json(question);
+  } catch (err) {
+    res.status(500).json({ error: "Failed to post question" });
+  }
+});
+
+export default router;
diff --git a/server/routes/mockInterviewRoutes.js b/server/routes/mockInterviewRoutes.js
new file mode 100644
index 0000000..c97765d
--- /dev/null
+++ b/server/routes/mockInterviewRoutes.js
@@ -0,0 +1,28 @@
+import express from "express";
+import MockInterview from "../models/MockInterviewModel.js";
+const router = express.Router();
+
+// List all or upcoming mock interviews
+router.get("/", async (req, res) => {
+  try {
+    const query = req.query.upcoming ? { scheduledAt: { $gte: new Date() } } : {};
+    const interviews = await MockInterview.find(query).sort({ scheduledAt: 1 });
+    res.json(interviews);
+  } catch (err) {
+    res.status(500).json({ error: "Failed to fetch interviews" });
+  }
+});
+
+// Schedule a new mock interview
+router.post("/", async (req, res) => {
+  try {
+    const { scheduledAt, durationMinutes } = req.body;
+    const host = req.user?.id || "demo-user";
+    const interview = await MockInterview.create({ host, scheduledAt, durationMinutes });
+    res.json(interview);
+  } catch (err) {
+    res.status(500).json({ error: "Failed to schedule interview" });
+  }
+});
+
+export default router;