abhi03241 · osctoss · May 29, 2026 · May 29, 2026 · May 29, 2026 · May 29, 2026
diff --git a/.gitignore b/.gitignore
@@ -32,7 +32,8 @@ CHANGELOG.md
 # yarn.lock
 
 # Uploads / media
-uploads/
+uploads/*
+!uploads/.gitkeep
 
 # Test coverage
 coverage/
diff --git a/CONTEXT.md b/CONTEXT.md
diff --git a/README.md b/README.md
diff --git a/README_for_reference.md b/README_for_reference.md
diff --git a/assets/PippaQ1.webp b/assets/PippaQ1.webp
diff --git a/assets/UI_Visuals/About_name.png b/assets/UI_Visuals/About_name.png
diff --git a/assets/UI_Visuals/Login.png b/assets/UI_Visuals/Login.png
diff --git a/assets/UI_Visuals/QP_history.png b/assets/UI_Visuals/QP_history.png
diff --git a/assets/UI_Visuals/about_icon.png b/assets/UI_Visuals/about_icon.png
diff --git a/assets/UI_Visuals/about_pages.png b/assets/UI_Visuals/about_pages.png
diff --git a/assets/UI_Visuals/about_qp.png b/assets/UI_Visuals/about_qp.png
diff --git a/assets/UI_Visuals/admin_access_request.png b/assets/UI_Visuals/admin_access_request.png
diff --git a/assets/UI_Visuals/admin_whitelist.png b/assets/UI_Visuals/admin_whitelist.png
diff --git a/assets/UI_Visuals/moderator_faq.png b/assets/UI_Visuals/moderator_faq.png
diff --git a/assets/UI_Visuals/moderator_rtq.png b/assets/UI_Visuals/moderator_rtq.png
diff --git a/assets/UI_Visuals/moderator_rtq_ops.png b/assets/UI_Visuals/moderator_rtq_ops.png
diff --git a/assets/UI_Visuals/moderator_rtq_to_faq_conversion_request.png b/assets/UI_Visuals/moderator_rtq_to_faq_conversion_request.png
diff --git a/assets/UI_Visuals/notification.png b/assets/UI_Visuals/notification.png
diff --git a/assets/UI_Visuals/peer_dashboard.png b/assets/UI_Visuals/peer_dashboard.png
diff --git a/assets/UI_Visuals/peer_duplicate_check.png b/assets/UI_Visuals/peer_duplicate_check.png
diff --git a/assets/UI_Visuals/peer_leaderboard.png b/assets/UI_Visuals/peer_leaderboard.png
diff --git a/assets/UI_Visuals/peer_rtq.png b/assets/UI_Visuals/peer_rtq.png
diff --git a/assets/UI_Visuals/peer_track_question.png b/assets/UI_Visuals/peer_track_question.png
diff --git a/assets/UI_Visuals/profile.png b/assets/UI_Visuals/profile.png
diff --git a/assets/UI_Visuals/request_approval.png b/assets/UI_Visuals/request_approval.png
diff --git a/assets/UI_Visuals/senior_add_question.png b/assets/UI_Visuals/senior_add_question.png
diff --git a/assets/UI_Visuals/senior_dashboard.png b/assets/UI_Visuals/senior_dashboard.png
diff --git a/assets/UI_Visuals/senior_faq.png b/assets/UI_Visuals/senior_faq.png
diff --git a/assets/UI_Visuals/senior_history.png b/assets/UI_Visuals/senior_history.png
diff --git a/assets/UI_Visuals/senior_leaderboard.png b/assets/UI_Visuals/senior_leaderboard.png
diff --git a/assets/UI_Visuals/senior_rtq.png b/assets/UI_Visuals/senior_rtq.png
diff --git a/assets/UI_Visuals/senior_rtq_ops.png b/assets/UI_Visuals/senior_rtq_ops.png
diff --git a/assets/UI_Visuals/sign_up.png b/assets/UI_Visuals/sign_up.png
diff --git a/assets/favicon_io/android-chrome-192x192.png b/assets/favicon_io/android-chrome-192x192.png
diff --git a/assets/favicon_io/android-chrome-512x512.png b/assets/favicon_io/android-chrome-512x512.png
diff --git a/assets/favicon_io/apple-touch-icon.png b/assets/favicon_io/apple-touch-icon.png
diff --git a/assets/favicon_io/favicon-16x16.png b/assets/favicon_io/favicon-16x16.png
diff --git a/assets/favicon_io/favicon-32x32.png b/assets/favicon_io/favicon-32x32.png
diff --git a/assets/favicon_io/favicon.ico b/assets/favicon_io/favicon.ico
diff --git a/assets/favicon_io/site.webmanifest b/assets/favicon_io/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/client/index.html b/client/index.html
@@ -3,8 +3,17 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Q&A Platform</title>
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐛</text></svg>" />
+    <meta name="description" content="PippaQ — A premium semantic Q&A platform with an intelligent FAQ knowledge base, community-driven answers, and a gamified QP reputation economy." />
+    <meta name="theme-color" content="#4f46e5" />
+    <title>PippaQ — Premium Q&A Platform</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Outfit:wght@100..900&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/public/PippaQ1.webp b/client/public/PippaQ1.webp
diff --git a/client/public/android-chrome-192x192.png b/client/public/android-chrome-192x192.png
diff --git a/client/public/android-chrome-512x512.png b/client/public/android-chrome-512x512.png
diff --git a/client/public/apple-touch-icon.png b/client/public/apple-touch-icon.png
diff --git a/client/public/favicon-16x16.png b/client/public/favicon-16x16.png
diff --git a/client/public/favicon-32x32.png b/client/public/favicon-32x32.png
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/site.webmanifest b/client/public/site.webmanifest
@@ -0,0 +1,11 @@
+{
+  "name": "PippaQ",
+  "short_name": "PippaQ",
+  "icons": [
+    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#4f46e5",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -1,26 +1,39 @@
 import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
+import { useState, useEffect } from 'react';
 import { useAuth } from './context/AuthContext';
 import Nav from './components/Nav';
+import ErrorBoundary from './components/ErrorBoundary';
+import { ToastProvider } from './components/Toast';
+import GlobalSearch from './components/GlobalSearch';
 
-// Pages
 import LoginPage from './pages/LoginPage';
 import SignupPage from './pages/SignupPage';
 import FAQPage from './pages/FAQPage';
+import FAQEditPage from './pages/FAQEditPage';
 import RTQPage from './pages/RTQPage';
+import RTQDetailPage from './pages/RTQDetailPage';
 import StudentDashboard from './pages/StudentDashboard';
 import SeniorDashboard from './pages/SeniorDashboard';
 import AddFAQPage from './pages/AddFAQPage';
 import RaiseQuestionPage from './pages/RaiseQuestionPage';
 import ProfilePage from './pages/ProfilePage';
 import UserListPage from './pages/UserListPage';
+import UserProfilePage from './pages/UserProfilePage';
 import TrackQuestionPage from './pages/TrackQuestionPage';
 import WorkingHistoryPage from './pages/WorkingHistoryPage';
 import NotificationsPage from './pages/NotificationsPage';
+import QPHistoryPage from './pages/QPHistoryPage';
+import AboutPage from './pages/AboutPage';
 
 function LoadingScreen() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-surface">
-      <div className="text-muted">Loading...</div>
+    <div className="min-h-screen flex items-center justify-center bg-mesh">
+      <div className="flex flex-col items-center gap-3">
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-accent to-violet-600 flex items-center justify-center animate-pulse">
+          <span className="text-white font-brand font-bold text-lg">P</span>
+        </div>
+        <div className="text-muted text-sm font-medium">Loading...</div>
+      </div>
     </div>
   );
 }
@@ -42,7 +55,6 @@ function PublicOnly({ children }) {
   return children;
 }
 
-// Dashboard renders correct page based on role
 function DashboardRoute() {
   const { user, loading } = useAuth();
   if (loading) return <LoadingScreen />;
@@ -51,41 +63,70 @@ function DashboardRoute() {
   return <StudentDashboard />;
 }
 
-const PUBLIC_PATHS = ['/login', '/signup'];
 
-export default function App() {
+// Scroll to top on route change
+function ScrollToTop() {
+  const { pathname } = useLocation();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+  return null;
+}
+
+function AppLayout() {
   const location = useLocation();
   const { user, refreshUser } = useAuth();
-  const isPublic = PUBLIC_PATHS.includes(location.pathname);
+  const [searchOpen, setSearchOpen] = useState(false);
+
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === '/' && !e.ctrlKey && !e.metaKey && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
+        e.preventDefault();
+        setSearchOpen(true);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
 
   return (
     <div className="min-h-screen bg-surface">
-      {user && !isPublic && <Nav refreshUser={refreshUser} />}
-      <Routes>
-        {/* Public */}
-        <Route path="/login"  element={<PublicOnly><LoginPage /></PublicOnly>} />
-        <Route path="/signup" element={<PublicOnly><SignupPage /></PublicOnly>} />
-
-        {/* Dashboard — role-aware */}
-        <Route path="/dashboard" element={<DashboardRoute />} />
-
-        {/* Protected — all authenticated users */}
-        <Route path="/faq"           element={<ProtectedRoute><FAQPage /></ProtectedRoute>} />
-        <Route path="/rtq"           element={<ProtectedRoute><RTQPage /></ProtectedRoute>} />
-        <Route path="/profile"       element={<ProtectedRoute><ProfilePage /></ProtectedRoute>} />
-        <Route path="/users"         element={<ProtectedRoute><UserListPage /></ProtectedRoute>} />
-        <Route path="/track"         element={<ProtectedRoute><TrackQuestionPage /></ProtectedRoute>} />
-        <Route path="/history"       element={<ProtectedRoute><WorkingHistoryPage /></ProtectedRoute>} />
-        <Route path="/notifications" element={<ProtectedRoute><NotificationsPage /></ProtectedRoute>} />
-
-        {/* Role-restricted */}
-        <Route path="/raise-question" element={<ProtectedRoute allowedRoles={['student', 'moderator']}><RaiseQuestionPage /></ProtectedRoute>} />
-        <Route path="/add-faq"        element={<ProtectedRoute allowedRoles={['senior', 'admin']}><AddFAQPage /></ProtectedRoute>} />
-
-        {/* Redirects */}
-        <Route path="/"  element={<Navigate to="/login" replace />} />
-        <Route path="*"  element={<Navigate to="/login" replace />} />
-      </Routes>
+      <ScrollToTop />
+      {user && !['/login', '/signup'].includes(location.pathname) && <Nav refreshUser={refreshUser} />}
+      {searchOpen && <GlobalSearch onClose={() => setSearchOpen(false)} />}
+      <div key={location.pathname} className="page-enter">
+        <Routes>
+          <Route path="/login" element={<PublicOnly><LoginPage /></PublicOnly>} />
+          <Route path="/signup" element={<PublicOnly><SignupPage /></PublicOnly>} />
+          <Route path="/dashboard" element={<DashboardRoute />} />
+          <Route path="/faq" element={<FAQPage />} />
+          <Route path="/about" element={<AboutPage />} />
+          <Route path="/faq/edit/:id" element={<ProtectedRoute allowedRoles={['senior', 'admin']}><FAQEditPage /></ProtectedRoute>} />
+          <Route path="/rtq" element={<ProtectedRoute><RTQPage /></ProtectedRoute>} />
+          <Route path="/rtq/:id" element={<ProtectedRoute><RTQDetailPage /></ProtectedRoute>} />
+          <Route path="/profile" element={<ProtectedRoute><ProfilePage /></ProtectedRoute>} />
+          <Route path="/users" element={<ProtectedRoute><UserListPage /></ProtectedRoute>} />
+          <Route path="/users/:id" element={<ProtectedRoute><UserProfilePage /></ProtectedRoute>} />
+          <Route path="/track" element={<ProtectedRoute allowedRoles={['student', 'moderator']}><TrackQuestionPage /></ProtectedRoute>} />
+          <Route path="/history" element={<ProtectedRoute><WorkingHistoryPage /></ProtectedRoute>} />
+          <Route path="/notifications" element={<ProtectedRoute><NotificationsPage /></ProtectedRoute>} />
+          <Route path="/qp-history" element={<ProtectedRoute><QPHistoryPage /></ProtectedRoute>} />
+          <Route path="/raise-question" element={<ProtectedRoute allowedRoles={['student', 'moderator']}><RaiseQuestionPage /></ProtectedRoute>} />
+          <Route path="/add-faq" element={<ProtectedRoute allowedRoles={['senior', 'admin']}><AddFAQPage /></ProtectedRoute>} />
+          <Route path="/" element={<Navigate to="/faq" replace />} />
+          <Route path="*" element={<Navigate to="/faq" replace />} />
+        </Routes>
+      </div>
     </div>
   );
-}
+}
+
+export default function App() {
+  return (
+    <ErrorBoundary>
+      <ToastProvider>
+        <AppLayout />
+      </ToastProvider>
+    </ErrorBoundary>
+  );
+}
diff --git a/client/src/components/AnswerCard.jsx b/client/src/components/AnswerCard.jsx
@@ -31,10 +31,13 @@ export default function AnswerCard({ answer, onUpvote, showModeratorControls = f
             <p className="text-xs text-muted">
               Answered by <span className="font-medium text-primary">{answer.userId.name}</span>
               {answer.userId?.role === 'moderator' && (
-                <span className="ml-1 text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">Moderator</span>
+                <span className="ml-1 text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">Moderator</span>
               )}
               {answer.userId?.role === 'senior' && (
-                <span className="ml-1 text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">Senior</span>
+                <span className="ml-1 text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">Senior</span>
+              )}
+              {answer.userId?.role === 'admin' && (
+                <span className="ml-1 text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">Admin</span>
               )}
             </p>
           )}

diff --git a/client/src/components/Avatar.jsx b/client/src/components/Avatar.jsx
@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+
+const ROLE_COLORS = {
+  student:   'bg-slate-500',
+  moderator: 'bg-blue-600',
+  senior:    'bg-purple-600',
+  admin:     'bg-violet-600',
+};
+
+const ROLE_GRADIENTS = {
+  student:   'from-slate-400 to-slate-600',
+  moderator: 'from-blue-500 to-blue-700',
+  senior:    'from-purple-500 to-violet-600',
+  admin:     'from-violet-500 to-purple-700',
+};
+
+const SIZE_CLASSES = {
+  xs:  'avatar-xs',
+  sm:  'avatar-sm',
+  md:  'avatar-md',
+  lg:  'avatar-lg',
+  xl:  'avatar-xl',
+};
+
+export default function Avatar({ name, role, size = 'md', className = '', gradient = false }) {
+  const initial = useMemo(() => {
+    if (!name) return '?';
+    return name.charAt(0).toUpperCase();
+  }, [name]);
+
+  const bgClass = gradient
+    ? `bg-gradient-to-br ${ROLE_GRADIENTS[role] || ROLE_GRADIENTS.student}`
+    : ROLE_COLORS[role] || ROLE_COLORS.student;
+
+  return (
+    <div
+      className={`${SIZE_CLASSES[size] || SIZE_CLASSES.md} ${bgClass} ${className}`}
+      title={name || 'User'}
+    >
+      {initial}
+    </div>
+  );
+}
diff --git a/client/src/components/BackToTop.jsx b/client/src/components/BackToTop.jsx
@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+import { ChevronUp } from 'lucide-react';
+
+export default function BackToTop() {
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => setShow(window.scrollY > 400);
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  if (!show) return null;
+
+  return (
+    <button
+      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+      className="fixed bottom-6 right-6 z-40 w-11 h-11 rounded-full shadow-card-elevated
+        bg-gradient-to-br from-accent to-violet-600 text-white
+        flex items-center justify-center
+        hover:shadow-glow-lg hover:scale-105
+        active:scale-95
+        transition-all duration-200
+        animate-slideUp"
+      title="Back to top"
+      aria-label="Back to top"
+    >
+      <ChevronUp className="w-5 h-5" />
+    </button>
+  );
+}
diff --git a/client/src/components/Badge.jsx b/client/src/components/Badge.jsx
@@ -0,0 +1,59 @@
+import { CheckCircle, XCircle, AlertTriangle, Clock, Circle } from 'lucide-react';
+
+export function StatusBadge({ status, role }) {
+  const map = {
+    resolved:       { label: 'Resolved',          icon: CheckCircle, className: 'badge-success' },
+    partially_resolved: { label: 'Partially Resolved', icon: Clock,       className: 'badge-warning' },
+    unresolved:     { label: 'Unresolved',         icon: Circle,      className: 'badge-danger' },
+    rejected:       { label: 'Rejected',           icon: XCircle,    className: 'badge-danger' },
+    trending:       { label: 'Trending',           icon: CheckCircle, className: 'badge-info' },
+    markedForReview:{ label: 'Flagged',            icon: AlertTriangle, className: 'badge-warning' },
+    approved:       { label: 'Approved',           icon: CheckCircle, className: 'badge-success' },
+    accepted:       { label: 'Accepted',           icon: CheckCircle, className: 'badge-info' },
+    pending:        { label: 'Pending',            icon: Clock,       className: 'badge-warning' },
+  };
+
+  const config = { ...(map[status] || { label: status, icon: Circle, className: 'badge-neutral' }) };
+  if (status === 'accepted' || status === 'approved') {
+    if (role === 'senior' || role === 'admin') {
+      config.className = 'badge-purple';
+    } else {
+      config.className = 'badge-info';
+    }
+  }
+  const Icon = config.icon;
+
+  return (
+    <span className={config.className}>
+      <Icon className="w-3 h-3" />
+      {config.label}
+    </span>
+  );
+}
+
+export function RoleBadge({ role }) {
+  const map = {
+    student:   { label: 'Student',   className: 'badge-student' },
+    moderator: { label: 'Moderator', className: 'badge-moderator' },
+    senior:    { label: 'Senior',    className: 'badge-senior' },
+    admin:     { label: 'Admin',     className: 'badge-admin' },
+  };
+
+  const config = map[role] || { label: role, className: 'badge-neutral' };
+  return <span className={config.className}>{config.label}</span>;
+}
+
+export function BoolBadge({ value, trueLabel = 'Yes', falseLabel = 'No' }) {
+  return value
+    ? <span className="badge-success">{trueLabel}</span>
+    : <span className="badge-neutral">{falseLabel}</span>;
+}
+
+export function CountBadge({ count, label }) {
+  if (!count && count !== 0) return null;
+  return (
+    <span className="badge-neutral">
+      {label ? `${count} ${label}` : count}
+    </span>
+  );
+}
diff --git a/client/src/components/Breadcrumb.jsx b/client/src/components/Breadcrumb.jsx
@@ -0,0 +1,24 @@
+import { ChevronRight, Home } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+export default function Breadcrumb({ items = [] }) {
+  return (
+    <nav className="flex items-center gap-1.5 text-sm text-muted mb-5" aria-label="Breadcrumb">
+      <Link to="/dashboard" className="hover:text-primary transition-colors p-0.5">
+        <Home className="w-3.5 h-3.5" />
+      </Link>
+      {items.map((item, i) => (
+        <span key={i} className="flex items-center gap-1.5">
+          <ChevronRight className="w-3.5 h-3.5 text-slate-300" />
+          {item.to ? (
+            <Link to={item.to} className="hover:text-primary transition-colors font-medium">
+              {item.label}
+            </Link>
+          ) : (
+            <span className="text-primary font-medium">{item.label}</span>
+          )}
+        </span>
+      ))}
+    </nav>
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}