From 6a144fb2fb81efa1cf58b075c4b77fcf90434430 Mon Sep 17 00:00:00 2001
From: Neeraj-code-beep <neerajmishra757944@gmail.com>
Date: Tue, 26 May 2026 23:11:54 +0530
Subject: [PATCH] fix api routes

---
 client/src/components/CommentSection.jsx      | 188 ++++----
 .../src/components/NotificationDropdown.jsx   | 174 ++++----
 client/src/components/QuestionCard.jsx        | 168 ++++---
 client/src/components/TagFilter.jsx           |  82 ++--
 client/src/contexts/AuthContext.jsx           | 192 ++++----
 client/src/contexts/SocketContext.jsx         | 122 +++---
 client/src/pages/AdminDashboard.jsx           | 398 +++++++++++------
 client/src/pages/AskQuestionPage.jsx          | 150 ++++---
 client/src/pages/QuestionDetailPage.jsx       | 333 +++++++-------
 client/src/pages/QuestionsFeed.jsx            | 182 ++++----
 client/src/pages/SettingsPage.jsx             | 411 +++++++++++-------
 client/src/pages/TagManagementPage.jsx        | 284 +++++++-----
 client/src/pages/UserProfilePage.jsx          | 223 ++++++----
 client/src/utils/api.js                       |  85 ++--
 14 files changed, 1744 insertions(+), 1248 deletions(-)

diff --git a/client/src/components/CommentSection.jsx b/client/src/components/CommentSection.jsx
index 61f713b..911157b 100644
--- a/client/src/components/CommentSection.jsx
+++ b/client/src/components/CommentSection.jsx
@@ -1,101 +1,107 @@
-import { useState } from 'react'
-import { useMutation, useQueryClient } from 'react-query'
-import { toast } from 'react-hot-toast'
-import { 
-  FiMessageSquare, 
-  FiUser, 
-  FiClock, 
-  FiEdit, 
+import { useState } from 'react';
+import { useMutation, useQueryClient } from 'react-query';
+import { toast } from 'react-hot-toast';
+import {
+  FiMessageSquare,
+  FiUser,
+  FiClock,
+  FiEdit,
   FiTrash2,
-  FiX
-} from 'react-icons/fi'
-import { useAuth } from '../contexts/AuthContext'
-import api from '../utils/api'
+  FiX,
+} from 'react-icons/fi';
+import { useAuth } from '../contexts/AuthContext';
+import api from '../utils/api';
 
 const CommentSection = ({ contentType, contentId, comments = [] }) => {
-  const [showForm, setShowForm] = useState(false)
-  const [commentText, setCommentText] = useState('')
-  const [editingComment, setEditingComment] = useState(null)
-  const { user } = useAuth()
-  const queryClient = useQueryClient()
+  const [showForm, setShowForm] = useState(false);
+  const [commentText, setCommentText] = useState('');
+  const [editingComment, setEditingComment] = useState(null);
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
 
   const addCommentMutation = useMutation(
-    (text) => api.post('/comments', { 
-      contentType, 
-      contentId, 
-      content: text 
-    }),
+    text =>
+      api.post('api/comments', {
+        contentType,
+        contentId,
+        content: text,
+      }),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['question', contentId])
-        setCommentText('')
-        setShowForm(false)
-        toast.success('Comment added successfully!')
+        queryClient.invalidateQueries(['question', contentId]);
+        setCommentText('');
+        setShowForm(false);
+        toast.success('Comment added successfully!');
+      },
+      onError: error => {
+        toast.error(error.response?.data?.message || 'Failed to add comment');
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to add comment')
-      }
     }
-  )
+  );
 
   const updateCommentMutation = useMutation(
-    ({ commentId, content }) => api.put(`/comments/${commentId}`, { content }),
+    ({ commentId, content }) =>
+      api.put(`api/comments/${commentId}`, { content }),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['question', contentId])
-        setEditingComment(null)
-        toast.success('Comment updated successfully!')
+        queryClient.invalidateQueries(['question', contentId]);
+        setEditingComment(null);
+        toast.success('Comment updated successfully!');
+      },
+      onError: error => {
+        toast.error(
+          error.response?.data?.message || 'Failed to update comment'
+        );
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to update comment')
-      }
     }
-  )
+  );
 
   const deleteCommentMutation = useMutation(
-    (commentId) => api.delete(`/comments/${commentId}`),
+    commentId => api.delete(`api/comments/${commentId}`),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['question', contentId])
-        toast.success('Comment deleted successfully!')
+        queryClient.invalidateQueries(['question', contentId]);
+        toast.success('Comment deleted successfully!');
+      },
+      onError: error => {
+        toast.error(
+          error.response?.data?.message || 'Failed to delete comment'
+        );
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to delete comment')
-      }
     }
-  )
+  );
 
   const handleSubmit = () => {
     if (!commentText.trim()) {
-      toast.error('Please enter a comment')
-      return
+      toast.error('Please enter a comment');
+      return;
     }
-    addCommentMutation.mutate(commentText)
-  }
+    addCommentMutation.mutate(commentText);
+  };
 
-  const handleUpdate = (commentId) => {
+  const handleUpdate = commentId => {
     if (!commentText.trim()) {
-      toast.error('Please enter a comment')
-      return
+      toast.error('Please enter a comment');
+      return;
     }
-    updateCommentMutation.mutate({ commentId, content: commentText })
-  }
+    updateCommentMutation.mutate({ commentId, content: commentText });
+  };
 
-  const handleDelete = (commentId) => {
+  const handleDelete = commentId => {
     if (window.confirm('Are you sure you want to delete this comment?')) {
-      deleteCommentMutation.mutate(commentId)
+      deleteCommentMutation.mutate(commentId);
     }
-  }
+  };
 
-  const startEditing = (comment) => {
-    setEditingComment(comment._id)
-    setCommentText(comment.content)
-  }
+  const startEditing = comment => {
+    setEditingComment(comment._id);
+    setCommentText(comment.content);
+  };
 
   const cancelEditing = () => {
-    setEditingComment(null)
-    setCommentText('')
-  }
+    setEditingComment(null);
+    setCommentText('');
+  };
 
   return (
     <div className="mt-6">
@@ -125,7 +131,7 @@ const CommentSection = ({ contentType, contentId, comments = [] }) => {
           </div>
           <textarea
             value={commentText}
-            onChange={(e) => setCommentText(e.target.value)}
+            onChange={e => setCommentText(e.target.value)}
             placeholder="Write your comment..."
             className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white resize-none"
             rows="3"
@@ -151,20 +157,20 @@ const CommentSection = ({ contentType, contentId, comments = [] }) => {
       {/* Comments list */}
       {comments.length > 0 && (
         <div className="space-y-3">
-          {comments.map((comment) => (
+          {comments.map(comment => (
             <div key={comment._id} className="flex space-x-3">
               <div className="flex-shrink-0">
                 <div className="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
                   <FiUser className="w-4 h-4 text-primary-600 dark:text-primary-400" />
                 </div>
               </div>
-              
+
               <div className="flex-1 min-w-0">
                 {editingComment === comment._id ? (
                   <div className="bg-navy-50 dark:bg-navy-800 rounded-lg p-3">
                     <textarea
                       value={commentText}
-                      onChange={(e) => setCommentText(e.target.value)}
+                      onChange={e => setCommentText(e.target.value)}
                       className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white resize-none"
                       rows="2"
                     />
@@ -180,7 +186,9 @@ const CommentSection = ({ contentType, contentId, comments = [] }) => {
                         disabled={updateCommentMutation.isLoading}
                         className="text-sm btn-primary px-3 py-1 disabled:opacity-50"
                       >
-                        {updateCommentMutation.isLoading ? 'Updating...' : 'Update'}
+                        {updateCommentMutation.isLoading
+                          ? 'Updating...'
+                          : 'Update'}
                       </button>
                     </div>
                   </div>
@@ -195,24 +203,26 @@ const CommentSection = ({ contentType, contentId, comments = [] }) => {
                           {new Date(comment.createdAt).toLocaleDateString()}
                         </span>
                       </div>
-                      
+
                       {/* Edit/Delete buttons */}
-                      {user && (user._id === comment.author._id || user.role === 'admin') && (
-                        <div className="flex items-center space-x-1">
-                          <button
-                            onClick={() => startEditing(comment)}
-                            className="text-xs text-navy-500 hover:text-primary-600 dark:hover:text-primary-400"
-                          >
-                            <FiEdit className="w-3 h-3" />
-                          </button>
-                          <button
-                            onClick={() => handleDelete(comment._id)}
-                            className="text-xs text-navy-500 hover:text-red-600 dark:hover:text-red-400"
-                          >
-                            <FiTrash2 className="w-3 h-3" />
-                          </button>
-                        </div>
-                      )}
+                      {user &&
+                        (user._id === comment.author._id ||
+                          user.role === 'admin') && (
+                          <div className="flex items-center space-x-1">
+                            <button
+                              onClick={() => startEditing(comment)}
+                              className="text-xs text-navy-500 hover:text-primary-600 dark:hover:text-primary-400"
+                            >
+                              <FiEdit className="w-3 h-3" />
+                            </button>
+                            <button
+                              onClick={() => handleDelete(comment._id)}
+                              className="text-xs text-navy-500 hover:text-red-600 dark:hover:text-red-400"
+                            >
+                              <FiTrash2 className="w-3 h-3" />
+                            </button>
+                          </div>
+                        )}
                     </div>
                     <p className="text-sm text-navy-700 dark:text-navy-300">
                       {comment.content}
@@ -225,7 +235,7 @@ const CommentSection = ({ contentType, contentId, comments = [] }) => {
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default CommentSection 
\ No newline at end of file
+export default CommentSection;
diff --git a/client/src/components/NotificationDropdown.jsx b/client/src/components/NotificationDropdown.jsx
index 246bc3f..920f8d9 100644
--- a/client/src/components/NotificationDropdown.jsx
+++ b/client/src/components/NotificationDropdown.jsx
@@ -1,141 +1,145 @@
-import { useState, useEffect } from 'react'
-import { useQuery, useMutation, useQueryClient } from 'react-query'
-import { Link } from 'react-router-dom'
-import { motion, AnimatePresence } from 'framer-motion'
-import { 
-  FiBell, 
-  FiCheck, 
-  FiTrash2, 
-  FiMessageSquare, 
-  FiThumbsUp, 
+import { useState, useEffect } from 'react';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { Link } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  FiBell,
+  FiCheck,
+  FiTrash2,
+  FiMessageSquare,
+  FiThumbsUp,
   FiThumbsDown,
-  FiX
-} from 'react-icons/fi'
-import { toast } from 'react-hot-toast'
-import api from '../utils/api'
-import { useAuth } from '../contexts/AuthContext'
+  FiX,
+} from 'react-icons/fi';
+import { toast } from 'react-hot-toast';
+import api from '../utils/api';
+import { useAuth } from '../contexts/AuthContext';
 
 const NotificationDropdown = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const { user } = useAuth()
-  const queryClient = useQueryClient()
+  const [isOpen, setIsOpen] = useState(false);
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
 
   // Fetch notifications
   const { data: notificationsData, isLoading } = useQuery(
     ['notifications'],
-    () => api.get('/notifications?limit=10').then(res => res.data),
+    () => api.get('api/notifications?limit=10').then(res => res.data),
     {
       refetchInterval: 10000, // Poll every 10 seconds
-      enabled: !!user
+      enabled: !!user,
     }
-  )
+  );
 
   // Fetch unread count
   const { data: unreadData } = useQuery(
     ['notifications', 'unread'],
-    () => api.get('/notifications/unread-count').then(res => res.data),
+    () => api.get('api/notifications/unread-count').then(res => res.data),
     {
       refetchInterval: 5000, // Poll every 5 seconds
-      enabled: !!user
+      enabled: !!user,
     }
-  )
+  );
 
-  const unreadCount = unreadData?.unreadCount || 0
-  const notifications = notificationsData?.notifications || []
+  const unreadCount = unreadData?.unreadCount || 0;
+  const notifications = notificationsData?.notifications || [];
 
   // Mark notification as read
   const markAsReadMutation = useMutation(
-    (notificationId) => api.put(`/notifications/${notificationId}/read`),
+    notificationId => api.put(`api/notifications/${notificationId}/read`),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['notifications'])
-        queryClient.invalidateQueries(['notifications', 'unread'])
-      }
+        queryClient.invalidateQueries(['notifications']);
+        queryClient.invalidateQueries(['notifications', 'unread']);
+      },
     }
-  )
+  );
 
   // Mark all as read
   const markAllAsReadMutation = useMutation(
-    () => api.put('/notifications/read-all'),
+    () => api.put('api/notifications/read-all'),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['notifications'])
-        queryClient.invalidateQueries(['notifications', 'unread'])
-        toast.success('All notifications marked as read')
+        queryClient.invalidateQueries(['notifications']);
+        queryClient.invalidateQueries(['notifications', 'unread']);
+        toast.success('All notifications marked as read');
+      },
+      onError: error => {
+        toast.error(
+          error.response?.data?.message || 'Failed to mark all as read'
+        );
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to mark all as read')
-      }
     }
-  )
+  );
 
   // Delete notification
   const deleteNotificationMutation = useMutation(
-    (notificationId) => api.delete(`/notifications/${notificationId}`),
+    notificationId => api.delete(`api/notifications/${notificationId}`),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['notifications'])
-        queryClient.invalidateQueries(['notifications', 'unread'])
-        toast.success('Notification deleted')
+        queryClient.invalidateQueries(['notifications']);
+        queryClient.invalidateQueries(['notifications', 'unread']);
+        toast.success('Notification deleted');
+      },
+      onError: error => {
+        toast.error(
+          error.response?.data?.message || 'Failed to delete notification'
+        );
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to delete notification')
-      }
     }
-  )
+  );
 
-  const handleNotificationClick = (notification) => {
+  const handleNotificationClick = notification => {
     if (!notification.read) {
-      markAsReadMutation.mutate(notification._id)
+      markAsReadMutation.mutate(notification._id);
     }
-    setIsOpen(false)
-  }
+    setIsOpen(false);
+  };
 
   const handleMarkAllAsRead = () => {
-    markAllAsReadMutation.mutate()
-  }
+    markAllAsReadMutation.mutate();
+  };
 
   const handleDeleteNotification = (e, notificationId) => {
-    e.stopPropagation()
-    deleteNotificationMutation.mutate(notificationId)
-  }
+    e.stopPropagation();
+    deleteNotificationMutation.mutate(notificationId);
+  };
 
-  const getNotificationIcon = (type) => {
+  const getNotificationIcon = type => {
     switch (type) {
       case 'comment':
-        return <FiMessageSquare className="w-4 h-4" />
+        return <FiMessageSquare className="w-4 h-4" />;
       case 'upvote':
-        return <FiThumbsUp className="w-4 h-4 text-green-600" />
+        return <FiThumbsUp className="w-4 h-4 text-green-600" />;
       case 'downvote':
-        return <FiThumbsDown className="w-4 h-4 text-red-600" />
+        return <FiThumbsDown className="w-4 h-4 text-red-600" />;
       case 'accepted':
-        return <FiCheck className="w-4 h-4 text-green-600" />
+        return <FiCheck className="w-4 h-4 text-green-600" />;
       default:
-        return <FiBell className="w-4 h-4" />
+        return <FiBell className="w-4 h-4" />;
     }
-  }
+  };
 
-  const getNotificationLink = (notification) => {
+  const getNotificationLink = notification => {
     if (notification.questionId) {
-      return `/questions/${notification.questionId}`
+      return `/questions/${notification.questionId}`;
     }
-    return '/notifications'
-  }
+    return '/notifications';
+  };
 
-  const formatTimeAgo = (date) => {
-    const now = new Date()
-    const diff = now - new Date(date)
-    const minutes = Math.floor(diff / 60000)
-    const hours = Math.floor(diff / 3600000)
-    const days = Math.floor(diff / 86400000)
+  const formatTimeAgo = date => {
+    const now = new Date();
+    const diff = now - new Date(date);
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    const days = Math.floor(diff / 86400000);
 
-    if (minutes < 1) return 'Just now'
-    if (minutes < 60) return `${minutes}m ago`
-    if (hours < 24) return `${hours}h ago`
-    return `${days}d ago`
-  }
+    if (minutes < 1) return 'Just now';
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    return `${days}d ago`;
+  };
 
-  if (!user) return null
+  if (!user) return null;
 
   return (
     <div className="relative">
@@ -196,7 +200,7 @@ const NotificationDropdown = () => {
                   No notifications yet
                 </div>
               ) : (
-                notifications.map((notification) => (
+                notifications.map(notification => (
                   <motion.div
                     key={notification._id}
                     initial={{ opacity: 0, x: -20 }}
@@ -220,7 +224,9 @@ const NotificationDropdown = () => {
                               {formatTimeAgo(notification.createdAt)}
                             </span>
                             <button
-                              onClick={(e) => handleDeleteNotification(e, notification._id)}
+                              onClick={e =>
+                                handleDeleteNotification(e, notification._id)
+                              }
                               className="text-navy-400 hover:text-red-600 dark:hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
                             >
                               <FiTrash2 className="w-3 h-3" />
@@ -256,7 +262,7 @@ const NotificationDropdown = () => {
         )}
       </AnimatePresence>
     </div>
-  )
-}
+  );
+};
 
-export default NotificationDropdown 
\ No newline at end of file
+export default NotificationDropdown;
diff --git a/client/src/components/QuestionCard.jsx b/client/src/components/QuestionCard.jsx
index 5ef4b50..88c7649 100644
--- a/client/src/components/QuestionCard.jsx
+++ b/client/src/components/QuestionCard.jsx
@@ -1,62 +1,68 @@
-import { Link } from 'react-router-dom'
-import { formatDistanceToNow } from 'date-fns'
-import { 
-  FiMessageSquare, 
-  FiEye, 
-  FiThumbsUp, 
+import { Link } from 'react-router-dom';
+import { formatDistanceToNow } from 'date-fns';
+import {
+  FiMessageSquare,
+  FiEye,
+  FiThumbsUp,
   FiClock,
   FiCheckCircle,
   FiUser,
   FiTrash2,
-  FiEdit
-} from 'react-icons/fi'
-import { useAuth } from '../contexts/AuthContext'
-import { useMutation, useQueryClient } from 'react-query'
-import { toast } from 'react-hot-toast'
-import api from '../utils/api'
+  FiEdit,
+} from 'react-icons/fi';
+import { useAuth } from '../contexts/AuthContext';
+import { useMutation, useQueryClient } from 'react-query';
+import { toast } from 'react-hot-toast';
+import api from '../utils/api';
 
 const QuestionCard = ({ question }) => {
-  const { user } = useAuth()
-  const queryClient = useQueryClient()
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
 
   const deleteMutation = useMutation(
-    (questionId) => api.delete(`/questions/${questionId}`),
+    questionId => api.delete(`api/questions/${questionId}`),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['questions'])
-        toast.success('Question deleted successfully')
+        queryClient.invalidateQueries(['questions']);
+        toast.success('Question deleted successfully');
+      },
+      onError: error => {
+        toast.error(
+          error.response?.data?.message || 'Failed to delete question'
+        );
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to delete question')
-      }
     }
-  )
+  );
 
-  const handleDelete = (questionId) => {
-    if (window.confirm('Are you sure you want to delete this question? This action cannot be undone.')) {
-      deleteMutation.mutate(questionId)
+  const handleDelete = questionId => {
+    if (
+      window.confirm(
+        'Are you sure you want to delete this question? This action cannot be undone.'
+      )
+    ) {
+      deleteMutation.mutate(questionId);
     }
-  }
+  };
 
   const getStatusColor = () => {
-    if (question.acceptedAnswer) return 'text-green-600 dark:text-green-400'
-    if (question.answerCount > 0) return 'text-blue-600 dark:text-blue-400'
-    return 'text-yellow-600 dark:text-yellow-400'
-  }
+    if (question.acceptedAnswer) return 'text-green-600 dark:text-green-400';
+    if (question.answerCount > 0) return 'text-blue-600 dark:text-blue-400';
+    return 'text-yellow-600 dark:text-yellow-400';
+  };
 
   const getStatusText = () => {
-    if (question.acceptedAnswer) return 'Accepted'
-    if (question.answerCount > 0) return 'Answered'
-    return 'Unanswered'
-  }
+    if (question.acceptedAnswer) return 'Accepted';
+    if (question.answerCount > 0) return 'Answered';
+    return 'Unanswered';
+  };
 
   const getStatusIcon = () => {
-    if (question.acceptedAnswer) return FiCheckCircle
-    if (question.answerCount > 0) return FiMessageSquare
-    return FiClock
-  }
+    if (question.acceptedAnswer) return FiCheckCircle;
+    if (question.answerCount > 0) return FiMessageSquare;
+    return FiClock;
+  };
 
-  const StatusIcon = getStatusIcon()
+  const StatusIcon = getStatusIcon();
 
   return (
     <div className="card p-6 hover:shadow-lg transition-shadow">
@@ -65,22 +71,30 @@ const QuestionCard = ({ question }) => {
         <div className="flex-shrink-0 flex flex-col items-center space-y-2 text-center">
           <div className="flex flex-col items-center">
             <span className="text-lg font-semibold text-navy-900 dark:text-white">
-              {typeof question.voteCount === 'number' ? question.voteCount : 
-               (question.votes?.upvotes?.length - question.votes?.downvotes?.length) || 0}
+              {typeof question.voteCount === 'number'
+                ? question.voteCount
+                : question.votes?.upvotes?.length -
+                    question.votes?.downvotes?.length || 0}
+            </span>
+            <span className="text-xs text-navy-500 dark:text-navy-400">
+              votes
             </span>
-            <span className="text-xs text-navy-500 dark:text-navy-400">votes</span>
           </div>
           <div className="flex flex-col items-center">
             <span className="text-lg font-semibold text-navy-900 dark:text-white">
               {question.answerCount}
             </span>
-            <span className="text-xs text-navy-500 dark:text-navy-400">answers</span>
+            <span className="text-xs text-navy-500 dark:text-navy-400">
+              answers
+            </span>
           </div>
           <div className="flex flex-col items-center">
             <span className="text-sm font-semibold text-navy-900 dark:text-white">
               {question.viewCount}
             </span>
-            <span className="text-xs text-navy-500 dark:text-navy-400">views</span>
+            <span className="text-xs text-navy-500 dark:text-navy-400">
+              views
+            </span>
           </div>
         </div>
 
@@ -93,7 +107,9 @@ const QuestionCard = ({ question }) => {
             >
               {question.title}
             </Link>
-            <div className={`flex items-center space-x-1 ml-4 ${getStatusColor()}`}>
+            <div
+              className={`flex items-center space-x-1 ml-4 ${getStatusColor()}`}
+            >
               <StatusIcon className="w-4 h-4" />
               <span className="text-sm font-medium">{getStatusText()}</span>
             </div>
@@ -106,7 +122,7 @@ const QuestionCard = ({ question }) => {
 
           {/* Tags */}
           <div className="flex flex-wrap gap-2 mb-4">
-            {question.tags.map((tag) => (
+            {question.tags.map(tag => (
               <Link
                 key={tag}
                 to={`/questions?tags=${tag}`}
@@ -131,11 +147,20 @@ const QuestionCard = ({ question }) => {
               </div>
               <div className="flex items-center space-x-1">
                 <FiClock className="w-4 h-4" />
-                <span>{formatDistanceToNow(new Date(question.createdAt), { addSuffix: true })}</span>
+                <span>
+                  {formatDistanceToNow(new Date(question.createdAt), {
+                    addSuffix: true,
+                  })}
+                </span>
               </div>
               {question.updatedAt !== question.createdAt && (
                 <div className="flex items-center space-x-1">
-                  <span>edited {formatDistanceToNow(new Date(question.updatedAt), { addSuffix: true })}</span>
+                  <span>
+                    edited{' '}
+                    {formatDistanceToNow(new Date(question.updatedAt), {
+                      addSuffix: true,
+                    })}
+                  </span>
                 </div>
               )}
             </div>
@@ -153,33 +178,36 @@ const QuestionCard = ({ question }) => {
                 <FiMessageSquare className="w-4 h-4" />
                 <span>Answer</span>
               </Link>
-              
+
               {/* Edit/Delete buttons - only show for author or admin */}
-              {user && (user._id === question.author._id || user.role === 'admin') && (
-                <>
-                  <Link
-                    to={`/questions/${question._id}/edit`}
-                    className="flex items-center space-x-1 text-navy-500 dark:text-navy-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
-                  >
-                    <FiEdit className="w-4 h-4" />
-                    <span>Edit</span>
-                  </Link>
-                  <button
-                    onClick={() => handleDelete(question._id)}
-                    disabled={deleteMutation.isLoading}
-                    className="flex items-center space-x-1 text-navy-500 dark:text-navy-400 hover:text-red-600 dark:hover:text-red-400 transition-colors disabled:opacity-50"
-                  >
-                    <FiTrash2 className="w-4 h-4" />
-                    <span>{deleteMutation.isLoading ? 'Deleting...' : 'Delete'}</span>
-                  </button>
-                </>
-              )}
+              {user &&
+                (user._id === question.author._id || user.role === 'admin') && (
+                  <>
+                    <Link
+                      to={`/questions/${question._id}/edit`}
+                      className="flex items-center space-x-1 text-navy-500 dark:text-navy-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+                    >
+                      <FiEdit className="w-4 h-4" />
+                      <span>Edit</span>
+                    </Link>
+                    <button
+                      onClick={() => handleDelete(question._id)}
+                      disabled={deleteMutation.isLoading}
+                      className="flex items-center space-x-1 text-navy-500 dark:text-navy-400 hover:text-red-600 dark:hover:text-red-400 transition-colors disabled:opacity-50"
+                    >
+                      <FiTrash2 className="w-4 h-4" />
+                      <span>
+                        {deleteMutation.isLoading ? 'Deleting...' : 'Delete'}
+                      </span>
+                    </button>
+                  </>
+                )}
             </div>
           </div>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default QuestionCard 
\ No newline at end of file
+export default QuestionCard;
diff --git a/client/src/components/TagFilter.jsx b/client/src/components/TagFilter.jsx
index 1580dde..b346d14 100644
--- a/client/src/components/TagFilter.jsx
+++ b/client/src/components/TagFilter.jsx
@@ -1,11 +1,11 @@
-import { useState, useEffect } from 'react'
-import { useQuery } from 'react-query'
-import { FiTag, FiX } from 'react-icons/fi'
-import api from '../utils/api'
+import { useState, useEffect } from 'react';
+import { useQuery } from 'react-query';
+import { FiTag, FiX } from 'react-icons/fi';
+import api from '../utils/api';
 
 const TagFilter = ({ selectedTags, onTagChange }) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [searchTerm, setSearchTerm] = useState('')
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
 
   const { data: tagsData, isLoading } = useQuery(
     ['tags', searchTerm],
@@ -13,32 +13,32 @@ const TagFilter = ({ selectedTags, onTagChange }) => {
     {
       staleTime: 300000, // 5 minutes
     }
-  )
+  );
 
   const fetchTags = async () => {
     const params = new URLSearchParams({
       search: searchTerm,
       limit: 20,
-    })
-    const response = await api.get(`/tags?${params}`)
-    return response.data
-  }
+    });
+    const response = await api.get(`api/tags?${params}`);
+    return response.data;
+  };
 
-  const handleTagToggle = (tag) => {
+  const handleTagToggle = tag => {
     const newTags = selectedTags.includes(tag)
       ? selectedTags.filter(t => t !== tag)
-      : [...selectedTags, tag]
-    onTagChange(newTags)
-  }
+      : [...selectedTags, tag];
+    onTagChange(newTags);
+  };
 
-  const removeTag = (tagToRemove) => {
-    const newTags = selectedTags.filter(tag => tag !== tagToRemove)
-    onTagChange(newTags)
-  }
+  const removeTag = tagToRemove => {
+    const newTags = selectedTags.filter(tag => tag !== tagToRemove);
+    onTagChange(newTags);
+  };
 
   const clearAllTags = () => {
-    onTagChange([])
-  }
+    onTagChange([]);
+  };
 
   return (
     <div className="mb-6">
@@ -48,7 +48,7 @@ const TagFilter = ({ selectedTags, onTagChange }) => {
           <span className="text-sm font-medium text-navy-700 dark:text-navy-300">
             Filtered by:
           </span>
-          {selectedTags.map((tag) => (
+          {selectedTags.map(tag => (
             <div
               key={tag}
               className="badge badge-primary flex items-center space-x-1"
@@ -85,7 +85,12 @@ const TagFilter = ({ selectedTags, onTagChange }) => {
             stroke="currentColor"
             viewBox="0 0 24 24"
           >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
           </svg>
         </button>
 
@@ -97,7 +102,7 @@ const TagFilter = ({ selectedTags, onTagChange }) => {
                 type="text"
                 placeholder="Search tags..."
                 value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
+                onChange={e => setSearchTerm(e.target.value)}
                 className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
               />
             </div>
@@ -110,7 +115,7 @@ const TagFilter = ({ selectedTags, onTagChange }) => {
                 </div>
               ) : tagsData?.tags?.length > 0 ? (
                 <div className="p-2">
-                  {tagsData.tags.map((tag) => (
+                  {tagsData.tags.map(tag => (
                     <button
                       key={tag.name}
                       onClick={() => handleTagToggle(tag.name)}
@@ -127,8 +132,16 @@ const TagFilter = ({ selectedTags, onTagChange }) => {
                         </span>
                       </div>
                       {selectedTags.includes(tag.name) && (
-                        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                        <svg
+                          className="w-4 h-4"
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clipRule="evenodd"
+                          />
                         </svg>
                       )}
                     </button>
@@ -148,7 +161,14 @@ const TagFilter = ({ selectedTags, onTagChange }) => {
                   Popular Tags
                 </h4>
                 <div className="flex flex-wrap gap-1">
-                  {['javascript', 'react', 'nodejs', 'python', 'css', 'html'].map((tag) => (
+                  {[
+                    'javascript',
+                    'react',
+                    'nodejs',
+                    'python',
+                    'css',
+                    'html',
+                  ].map(tag => (
                     <button
                       key={tag}
                       onClick={() => handleTagToggle(tag)}
@@ -168,7 +188,7 @@ const TagFilter = ({ selectedTags, onTagChange }) => {
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default TagFilter 
\ No newline at end of file
+export default TagFilter;
diff --git a/client/src/contexts/AuthContext.jsx b/client/src/contexts/AuthContext.jsx
index 1e6c778..fae078a 100644
--- a/client/src/contexts/AuthContext.jsx
+++ b/client/src/contexts/AuthContext.jsx
@@ -1,121 +1,141 @@
-import { createContext, useContext, useState, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { toast } from 'react-hot-toast'
-import api from '../utils/api'
+import { createContext, useContext, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-hot-toast';
+import api from '../utils/api';
 
-const AuthContext = createContext()
+const AuthContext = createContext();
 
 export const useAuth = () => {
-  const context = useContext(AuthContext)
+  const context = useContext(AuthContext);
   if (!context) {
-    throw new Error('useAuth must be used within an AuthProvider')
+    throw new Error('useAuth must be used within an AuthProvider');
   }
-  return context
-}
+  return context;
+};
 
 export const AuthProvider = ({ children }) => {
-  const [user, setUser] = useState(null)
-  const [loading, setLoading] = useState(true)
-  const navigate = useNavigate()
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
 
   useEffect(() => {
-    checkAuth()
-  }, [])
+    checkAuth();
+  }, []);
 
   const checkAuth = async () => {
     try {
-      const token = localStorage.getItem('token')
-      console.log('🔍 AuthContext Debug - Checking auth, token exists:', !!token)
-      
+      const token = localStorage.getItem('token');
+      console.log(
+        '🔍 AuthContext Debug - Checking auth, token exists:',
+        !!token
+      );
+
       if (token) {
-        api.defaults.headers.common['Authorization'] = `Bearer ${token}`
-        const response = await api.get('/auth/me')
-        console.log('🔍 AuthContext Debug - Auth check successful:', response.data.user.username)
-        setUser(response.data.user)
+        api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+        const response = await api.get('api/auth/me');
+        console.log(
+          '🔍 AuthContext Debug - Auth check successful:',
+          response.data.user.username
+        );
+        setUser(response.data.user);
       } else {
-        console.log('🔍 AuthContext Debug - No token found, user not authenticated')
+        console.log(
+          '🔍 AuthContext Debug - No token found, user not authenticated'
+        );
       }
     } catch (error) {
-      console.log('🔍 AuthContext Debug - Auth check failed:', error.response?.data?.message)
+      console.log(
+        '🔍 AuthContext Debug - Auth check failed:',
+        error.response?.data?.message
+      );
       // Only clear token if it's a token-related error
       if (error.response?.status === 401) {
-        const errorMessage = error.response?.data?.message || ''
-        if (errorMessage.includes('token') || errorMessage.includes('expired') || errorMessage.includes('Invalid')) {
-          console.log('🔍 AuthContext Debug - Token error, clearing localStorage')
-          localStorage.removeItem('token')
-          delete api.defaults.headers.common['Authorization']
+        const errorMessage = error.response?.data?.message || '';
+        if (
+          errorMessage.includes('token') ||
+          errorMessage.includes('expired') ||
+          errorMessage.includes('Invalid')
+        ) {
+          console.log(
+            '🔍 AuthContext Debug - Token error, clearing localStorage'
+          );
+          localStorage.removeItem('token');
+          delete api.defaults.headers.common['Authorization'];
         }
       }
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
   const login = async (email, password) => {
     try {
-      const response = await api.post('/auth/login', { email, password })
-      const { token, user } = response.data
-      
-      console.log('🔍 AuthContext Debug - Login response token:', token ? token.substring(0, 20) + '...' : 'No token')
-      console.log('🔍 AuthContext Debug - Login response user:', user.username)
-      
-      localStorage.setItem('token', token)
-      console.log('🔍 AuthContext Debug - Token saved to localStorage')
-      
-      api.defaults.headers.common['Authorization'] = `Bearer ${token}`
-      setUser(user)
-      
-      toast.success('Welcome back!')
-      navigate('/questions')
-      return { success: true }
+      const response = await api.post('api/auth/login', { email, password });
+      const { token, user } = response.data;
+
+      console.log(
+        '🔍 AuthContext Debug - Login response token:',
+        token ? token.substring(0, 20) + '...' : 'No token'
+      );
+      console.log('🔍 AuthContext Debug - Login response user:', user.username);
+
+      localStorage.setItem('token', token);
+      console.log('🔍 AuthContext Debug - Token saved to localStorage');
+
+      api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      setUser(user);
+
+      toast.success('Welcome back!');
+      navigate('/questions');
+      return { success: true };
     } catch (error) {
-      console.log('❌ AuthContext Debug - Login error:', error.response?.data)
-      const message = error.response?.data?.message || 'Login failed'
-      toast.error(message)
-      return { success: false, error: message }
+      console.log('❌ AuthContext Debug - Login error:', error.response?.data);
+      const message = error.response?.data?.message || 'Login failed';
+      toast.error(message);
+      return { success: false, error: message };
     }
-  }
+  };
 
-  const signup = async (userData) => {
+  const signup = async userData => {
     try {
-      const response = await api.post('/auth/signup', userData)
-      const { token, user } = response.data
-      
-      localStorage.setItem('token', token)
-      api.defaults.headers.common['Authorization'] = `Bearer ${token}`
-      setUser(user)
-      
-      toast.success('Account created successfully!')
-      navigate('/questions')
-      return { success: true }
+      const response = await api.post('api/auth/signup', userData);
+      const { token, user } = response.data;
+
+      localStorage.setItem('token', token);
+      api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      setUser(user);
+
+      toast.success('Account created successfully!');
+      navigate('/questions');
+      return { success: true };
     } catch (error) {
-      const message = error.response?.data?.message || 'Signup failed'
-      toast.error(message)
-      return { success: false, error: message }
+      const message = error.response?.data?.message || 'Signup failed';
+      toast.error(message);
+      return { success: false, error: message };
     }
-  }
+  };
 
   const logout = () => {
-    console.log('🔍 AuthContext Debug - Logging out user')
-    localStorage.removeItem('token')
-    delete api.defaults.headers.common['Authorization']
-    setUser(null)
-    toast.success('Logged out successfully')
-    navigate('/')
-  }
+    console.log('🔍 AuthContext Debug - Logging out user');
+    localStorage.removeItem('token');
+    delete api.defaults.headers.common['Authorization'];
+    setUser(null);
+    toast.success('Logged out successfully');
+    navigate('/');
+  };
 
-  const updateProfile = async (userData) => {
+  const updateProfile = async userData => {
     try {
-      const response = await api.put('/auth/profile', userData)
-      setUser(response.data.user)
-      toast.success('Profile updated successfully')
-      return { success: true }
+      const response = await api.put('api/auth/profile', userData);
+      setUser(response.data.user);
+      toast.success('Profile updated successfully');
+      return { success: true };
     } catch (error) {
-      const message = error.response?.data?.message || 'Update failed'
-      toast.error(message)
-      return { success: false, error: message }
+      const message = error.response?.data?.message || 'Update failed';
+      toast.error(message);
+      return { success: false, error: message };
     }
-  }
+  };
 
   const value = {
     user,
@@ -126,11 +146,7 @@ export const AuthProvider = ({ children }) => {
     updateProfile,
     isAuthenticated: !!user,
     isAdmin: user?.role === 'admin',
-  }
+  };
 
-  return (
-    <AuthContext.Provider value={value}>
-      {children}
-    </AuthContext.Provider>
-  )
-} 
\ No newline at end of file
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};
diff --git a/client/src/contexts/SocketContext.jsx b/client/src/contexts/SocketContext.jsx
index 803d793..d20953b 100644
--- a/client/src/contexts/SocketContext.jsx
+++ b/client/src/contexts/SocketContext.jsx
@@ -1,95 +1,93 @@
-import { createContext, useContext, useEffect, useState } from 'react'
-import { io } from 'socket.io-client'
-import { useAuth } from './AuthContext'
-import { toast } from 'react-hot-toast'
+import { createContext, useContext, useEffect, useState } from 'react';
+import { io } from 'socket.io-client';
+import { useAuth } from './AuthContext';
+import { toast } from 'react-hot-toast';
 
-const SocketContext = createContext()
+const SocketContext = createContext();
 
 export const useSocket = () => {
-  const context = useContext(SocketContext)
+  const context = useContext(SocketContext);
   if (!context) {
-    throw new Error('useSocket must be used within a SocketProvider')
+    throw new Error('useSocket must be used within a SocketProvider');
   }
-  return context
-}
+  return context;
+};
 
 export const SocketProvider = ({ children }) => {
-  const [socket, setSocket] = useState(null)
-  const [notifications, setNotifications] = useState([])
-  const [unreadCount, setUnreadCount] = useState(0)
-  const { user, isAuthenticated } = useAuth()
+  const [socket, setSocket] = useState(null);
+  const [notifications, setNotifications] = useState([]);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const { user, isAuthenticated } = useAuth();
 
   useEffect(() => {
     if (isAuthenticated && user) {
-      const newSocket = io('http://localhost:5000', {
+      const newSocket = io(import.meta.env.VITE_API_URL, {
         auth: {
-          token: localStorage.getItem('token')
-        }
-      })
+          token: localStorage.getItem('token'),
+        },
+      });
 
       newSocket.on('connect', () => {
-        console.log('Connected to server')
-      })
+        console.log('Connected to server');
+      });
 
       newSocket.on('disconnect', () => {
-        console.log('Disconnected from server')
-      })
+        console.log('Disconnected from server');
+      });
+
+      newSocket.on('notification', notification => {
+        setNotifications(prev => [notification, ...prev]);
+        setUnreadCount(prev => prev + 1);
 
-      newSocket.on('notification', (notification) => {
-        setNotifications(prev => [notification, ...prev])
-        setUnreadCount(prev => prev + 1)
-        
         // Show toast for new notifications
         if (notification.type === 'answer') {
-          toast.success(`New answer to your question: ${notification.questionTitle}`)
+          toast.success(
+            `New answer to your question: ${notification.questionTitle}`
+          );
         } else if (notification.type === 'comment') {
-          toast.success(`New comment on your ${notification.contentType}`)
+          toast.success(`New comment on your ${notification.contentType}`);
         } else if (notification.type === 'mention') {
-          toast.success(`You were mentioned in a ${notification.contentType}`)
+          toast.success(`You were mentioned in a ${notification.contentType}`);
         }
-      })
+      });
 
-      newSocket.on('answer', (data) => {
+      newSocket.on('answer', data => {
         // Handle real-time answer updates
-        console.log('New answer received:', data)
-      })
+        console.log('New answer received:', data);
+      });
 
-      newSocket.on('comment', (data) => {
+      newSocket.on('comment', data => {
         // Handle real-time comment updates
-        console.log('New comment received:', data)
-      })
+        console.log('New comment received:', data);
+      });
 
-      setSocket(newSocket)
+      setSocket(newSocket);
 
       return () => {
-        newSocket.close()
-      }
+        newSocket.close();
+      };
     }
-  }, [isAuthenticated, user])
-
-  const markAsRead = (notificationId) => {
-    setNotifications(prev => 
-      prev.map(notif => 
-        notif._id === notificationId 
-          ? { ...notif, read: true }
-          : notif
+  }, [isAuthenticated, user]);
+
+  const markAsRead = notificationId => {
+    setNotifications(prev =>
+      prev.map(notif =>
+        notif._id === notificationId ? { ...notif, read: true } : notif
       )
-    )
-    setUnreadCount(prev => Math.max(0, prev - 1))
-  }
+    );
+    setUnreadCount(prev => Math.max(0, prev - 1));
+  };
 
   const markAllAsRead = () => {
-    setNotifications(prev => 
-      prev.map(notif => ({ ...notif, read: true }))
-    )
-    setUnreadCount(0)
-  }
+    setNotifications(prev => prev.map(notif => ({ ...notif, read: true })));
+    setUnreadCount(0);
+  };
 
-  const sendNotification = (data) => {
+  const sendNotification = data => {
     if (socket) {
-      socket.emit('send-notification', data)
+      socket.emit('send-notification', data);
     }
-  }
+  };
 
   const value = {
     socket,
@@ -98,11 +96,9 @@ export const SocketProvider = ({ children }) => {
     markAsRead,
     markAllAsRead,
     sendNotification,
-  }
+  };
 
   return (
-    <SocketContext.Provider value={value}>
-      {children}
-    </SocketContext.Provider>
-  )
-} 
\ No newline at end of file
+    <SocketContext.Provider value={value}>{children}</SocketContext.Provider>
+  );
+};
diff --git a/client/src/pages/AdminDashboard.jsx b/client/src/pages/AdminDashboard.jsx
index 4a6de0e..30e3e6a 100644
--- a/client/src/pages/AdminDashboard.jsx
+++ b/client/src/pages/AdminDashboard.jsx
@@ -1,13 +1,13 @@
-import { useState, useEffect } from 'react'
-import { useQuery, useMutation, useQueryClient } from 'react-query'
-import { motion } from 'framer-motion'
-import { toast } from 'react-hot-toast'
-import { 
-  FiUsers, 
-  FiMessageSquare, 
-  FiFlag, 
-  FiCheck, 
-  FiX, 
+import { useState, useEffect } from 'react';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { motion } from 'framer-motion';
+import { toast } from 'react-hot-toast';
+import {
+  FiUsers,
+  FiMessageSquare,
+  FiFlag,
+  FiCheck,
+  FiX,
   FiEye,
   FiTrash2,
   FiShield,
@@ -19,80 +19,94 @@ import {
   FiCalendar,
   FiSettings,
   FiBarChart2,
-  FiActivity
-} from 'react-icons/fi'
-import api from '../utils/api'
-import { useAuth } from '../contexts/AuthContext'
+  FiActivity,
+} from 'react-icons/fi';
+import api from '../utils/api';
+import { useAuth } from '../contexts/AuthContext';
 
 const AdminDashboard = () => {
-  const { user } = useAuth()
-  const queryClient = useQueryClient()
-  const [activeTab, setActiveTab] = useState('overview')
-  const [selectedUser, setSelectedUser] = useState(null)
-  const [selectedContent, setSelectedContent] = useState(null)
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+  const [activeTab, setActiveTab] = useState('overview');
+  const [selectedUser, setSelectedUser] = useState(null);
+  const [selectedContent, setSelectedContent] = useState(null);
 
   // Fetch admin data
-  const { data: adminData, isLoading, error } = useQuery(
+  const {
+    data: adminData,
+    isLoading,
+    error,
+  } = useQuery(
     ['admin-dashboard'],
-    () => api.get('/admin/dashboard').then(res => res.data),
+    () => api.get('api/admin/dashboard').then(res => res.data),
     {
       staleTime: 60000, // 1 minute
       refetchOnWindowFocus: false,
     }
-  )
+  );
 
   // Mutations
   const approveContentMutation = useMutation(
-    ({ contentType, contentId }) => api.post(`/admin/${contentType}/${contentId}/approve`),
+    ({ contentType, contentId }) =>
+      api.post(`api/admin/${contentType}/${contentId}/approve`),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['admin-dashboard'])
-        toast.success('Content approved successfully!')
+        queryClient.invalidateQueries(['admin-dashboard']);
+        toast.success('Content approved successfully!');
+      },
+      onError: error => {
+        toast.error(
+          error.response?.data?.message || 'Failed to approve content'
+        );
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to approve content')
-      }
     }
-  )
+  );
 
   const rejectContentMutation = useMutation(
-    ({ contentType, contentId, reason }) => api.post(`/admin/${contentType}/${contentId}/reject`, { reason }),
+    ({ contentType, contentId, reason }) =>
+      api.post(`api/admin/${contentType}/${contentId}/reject`, { reason }),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['admin-dashboard'])
-        toast.success('Content rejected successfully!')
+        queryClient.invalidateQueries(['admin-dashboard']);
+        toast.success('Content rejected successfully!');
+      },
+      onError: error => {
+        toast.error(
+          error.response?.data?.message || 'Failed to reject content'
+        );
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to reject content')
-      }
     }
-  )
+  );
 
   const banUserMutation = useMutation(
-    ({ userId, reason, duration }) => api.post(`/admin/users/${userId}/ban`, { reason, duration }),
+    ({ userId, reason, duration }) =>
+      api.post(`api/admin/users/${userId}/ban`, { reason, duration }),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['admin-dashboard'])
-        toast.success('User banned successfully!')
+        queryClient.invalidateQueries(['admin-dashboard']);
+        toast.success('User banned successfully!');
+      },
+      onError: error => {
+        toast.error(error.response?.data?.message || 'Failed to ban user');
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to ban user')
-      }
     }
-  )
+  );
 
   const deleteContentMutation = useMutation(
-    ({ contentType, contentId }) => api.delete(`/admin/${contentType}/${contentId}`),
+    ({ contentType, contentId }) =>
+      api.delete(`api/admin/${contentType}/${contentId}`),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['admin-dashboard'])
-        toast.success('Content deleted successfully!')
+        queryClient.invalidateQueries(['admin-dashboard']);
+        toast.success('Content deleted successfully!');
+      },
+      onError: error => {
+        toast.error(
+          error.response?.data?.message || 'Failed to delete content'
+        );
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to delete content')
-      }
     }
-  )
+  );
 
   // Check if user is admin
   if (!user || user.role !== 'admin') {
@@ -106,7 +120,7 @@ const AdminDashboard = () => {
           You don't have permission to access the admin dashboard.
         </p>
       </div>
-    )
+    );
   }
 
   if (isLoading) {
@@ -116,12 +130,15 @@ const AdminDashboard = () => {
           <div className="h-8 bg-navy-200 dark:bg-navy-700 rounded w-1/4"></div>
           <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
             {[...Array(4)].map((_, i) => (
-              <div key={i} className="h-24 bg-navy-200 dark:bg-navy-700 rounded"></div>
+              <div
+                key={i}
+                className="h-24 bg-navy-200 dark:bg-navy-700 rounded"
+              ></div>
             ))}
           </div>
         </div>
       </div>
-    )
+    );
   }
 
   if (error) {
@@ -131,46 +148,56 @@ const AdminDashboard = () => {
           Error loading admin data: {error.message}
         </p>
       </div>
-    )
+    );
   }
 
-  const { stats, pendingContent, reportedContent, recentUsers, recentActivity } = adminData
+  const {
+    stats,
+    pendingContent,
+    reportedContent,
+    recentUsers,
+    recentActivity,
+  } = adminData;
 
   const tabs = [
     { id: 'overview', label: 'Overview', icon: FiBarChart2 },
     { id: 'moderation', label: 'Content Moderation', icon: FiShield },
     { id: 'users', label: 'User Management', icon: FiUsers },
     { id: 'reports', label: 'Reports', icon: FiFlag },
-    { id: 'activity', label: 'Recent Activity', icon: FiActivity }
-  ]
+    { id: 'activity', label: 'Recent Activity', icon: FiActivity },
+  ];
 
   const handleApprove = (contentType, contentId) => {
-    approveContentMutation.mutate({ contentType, contentId })
-  }
+    approveContentMutation.mutate({ contentType, contentId });
+  };
 
   const handleReject = (contentType, contentId, reason) => {
-    rejectContentMutation.mutate({ contentType, contentId, reason })
-  }
+    rejectContentMutation.mutate({ contentType, contentId, reason });
+  };
 
   const handleBanUser = (userId, reason, duration) => {
-    banUserMutation.mutate({ userId, reason, duration })
-  }
+    banUserMutation.mutate({ userId, reason, duration });
+  };
 
   const handleDeleteContent = (contentType, contentId) => {
-    if (window.confirm('Are you sure you want to delete this content? This action cannot be undone.')) {
-      deleteContentMutation.mutate({ contentType, contentId })
+    if (
+      window.confirm(
+        'Are you sure you want to delete this content? This action cannot be undone.'
+      )
+    ) {
+      deleteContentMutation.mutate({ contentType, contentId });
     }
-  }
+  };
 
-  const formatDate = (date) => {
+  const formatDate = date => {
     return new Date(date).toLocaleDateString('en-US', {
       year: 'numeric',
       month: 'short',
       day: 'numeric',
       hour: '2-digit',
-      minute: '2-digit'
-    })
-  }
+      minute: '2-digit',
+    });
+  };
 
   return (
     <div className="max-w-7xl mx-auto">
@@ -196,8 +223,12 @@ const AdminDashboard = () => {
               <FiUsers className="w-6 h-6 text-blue-600 dark:text-blue-400" />
             </div>
             <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">Total Users</p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">{stats.totalUsers}</p>
+              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
+                Total Users
+              </p>
+              <p className="text-2xl font-bold text-navy-900 dark:text-white">
+                {stats.totalUsers}
+              </p>
             </div>
           </div>
         </div>
@@ -208,8 +239,12 @@ const AdminDashboard = () => {
               <FiMessageSquare className="w-6 h-6 text-green-600 dark:text-green-400" />
             </div>
             <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">Total Questions</p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">{stats.totalQuestions}</p>
+              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
+                Total Questions
+              </p>
+              <p className="text-2xl font-bold text-navy-900 dark:text-white">
+                {stats.totalQuestions}
+              </p>
             </div>
           </div>
         </div>
@@ -220,8 +255,12 @@ const AdminDashboard = () => {
               <FiFlag className="w-6 h-6 text-yellow-600 dark:text-yellow-400" />
             </div>
             <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">Pending Review</p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">{pendingContent.length}</p>
+              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
+                Pending Review
+              </p>
+              <p className="text-2xl font-bold text-navy-900 dark:text-white">
+                {pendingContent.length}
+              </p>
             </div>
           </div>
         </div>
@@ -232,8 +271,12 @@ const AdminDashboard = () => {
               <FiAlertTriangle className="w-6 h-6 text-red-600 dark:text-red-400" />
             </div>
             <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">Reports</p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">{reportedContent.length}</p>
+              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
+                Reports
+              </p>
+              <p className="text-2xl font-bold text-navy-900 dark:text-white">
+                {reportedContent.length}
+              </p>
             </div>
           </div>
         </div>
@@ -248,8 +291,8 @@ const AdminDashboard = () => {
       >
         <div className="border-b border-navy-200 dark:border-navy-700">
           <nav className="flex space-x-8">
-            {tabs.map((tab) => {
-              const Icon = tab.icon
+            {tabs.map(tab => {
+              const Icon = tab.icon;
               return (
                 <button
                   key={tab.id}
@@ -263,7 +306,7 @@ const AdminDashboard = () => {
                   <Icon className="w-4 h-4" />
                   <span>{tab.label}</span>
                 </button>
-              )
+              );
             })}
           </nav>
         </div>
@@ -283,20 +326,31 @@ const AdminDashboard = () => {
                 Recent Users
               </h3>
               <div className="space-y-3">
-                {recentUsers.map((user) => (
-                  <div key={user._id} className="flex items-center justify-between p-3 bg-navy-50 dark:bg-navy-800 rounded-lg">
+                {recentUsers.map(user => (
+                  <div
+                    key={user._id}
+                    className="flex items-center justify-between p-3 bg-navy-50 dark:bg-navy-800 rounded-lg"
+                  >
                     <div className="flex items-center space-x-3">
                       <div className="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
                         <FiUser className="w-4 h-4 text-primary-600 dark:text-primary-400" />
                       </div>
                       <div>
-                        <p className="font-medium text-navy-900 dark:text-white">{user.username}</p>
-                        <p className="text-sm text-navy-500 dark:text-navy-400">{user.email}</p>
+                        <p className="font-medium text-navy-900 dark:text-white">
+                          {user.username}
+                        </p>
+                        <p className="text-sm text-navy-500 dark:text-navy-400">
+                          {user.email}
+                        </p>
                       </div>
                     </div>
                     <div className="text-right">
-                      <p className="text-sm font-medium text-navy-900 dark:text-white">{user.reputation}</p>
-                      <p className="text-xs text-navy-500 dark:text-navy-400">reputation</p>
+                      <p className="text-sm font-medium text-navy-900 dark:text-white">
+                        {user.reputation}
+                      </p>
+                      <p className="text-xs text-navy-500 dark:text-navy-400">
+                        reputation
+                      </p>
                     </div>
                   </div>
                 ))}
@@ -310,13 +364,20 @@ const AdminDashboard = () => {
               </h3>
               <div className="space-y-3">
                 {recentActivity.map((activity, index) => (
-                  <div key={index} className="flex items-center space-x-3 p-3 bg-navy-50 dark:bg-navy-800 rounded-lg">
+                  <div
+                    key={index}
+                    className="flex items-center space-x-3 p-3 bg-navy-50 dark:bg-navy-800 rounded-lg"
+                  >
                     <div className="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
                       <FiActivity className="w-4 h-4 text-primary-600 dark:text-primary-400" />
                     </div>
                     <div className="flex-1">
-                      <p className="text-sm text-navy-700 dark:text-navy-300">{activity.description}</p>
-                      <p className="text-xs text-navy-500 dark:text-navy-400">{formatDate(activity.date)}</p>
+                      <p className="text-sm text-navy-700 dark:text-navy-300">
+                        {activity.description}
+                      </p>
+                      <p className="text-xs text-navy-500 dark:text-navy-400">
+                        {formatDate(activity.date)}
+                      </p>
                     </div>
                   </div>
                 ))}
@@ -331,7 +392,7 @@ const AdminDashboard = () => {
               Pending Content Review
             </h3>
             {pendingContent.length > 0 ? (
-              pendingContent.map((content) => (
+              pendingContent.map(content => (
                 <div key={content._id} className="card p-6">
                   <div className="flex items-start justify-between">
                     <div className="flex-1">
@@ -346,32 +407,36 @@ const AdminDashboard = () => {
                           {formatDate(content.createdAt)}
                         </span>
                       </div>
-                      
+
                       {content.type === 'question' && (
                         <div>
                           <h4 className="font-semibold text-navy-900 dark:text-white mb-2">
                             {content.title}
                           </h4>
-                          <div 
+                          <div
                             className="prose prose-navy dark:prose-invert max-w-none mb-4"
-                            dangerouslySetInnerHTML={{ __html: content.content.substring(0, 300) + '...' }}
+                            dangerouslySetInnerHTML={{
+                              __html: content.content.substring(0, 300) + '...',
+                            }}
                           />
                         </div>
                       )}
-                      
+
                       {content.type === 'answer' && (
                         <div>
                           <h4 className="font-semibold text-navy-900 dark:text-white mb-2">
                             Answer to: {content.question.title}
                           </h4>
-                          <div 
+                          <div
                             className="prose prose-navy dark:prose-invert max-w-none mb-4"
-                            dangerouslySetInnerHTML={{ __html: content.content.substring(0, 300) + '...' }}
+                            dangerouslySetInnerHTML={{
+                              __html: content.content.substring(0, 300) + '...',
+                            }}
                           />
                         </div>
                       )}
                     </div>
-                    
+
                     <div className="flex space-x-2 ml-4">
                       <button
                         onClick={() => handleApprove(content.type, content._id)}
@@ -382,7 +447,13 @@ const AdminDashboard = () => {
                         Approve
                       </button>
                       <button
-                        onClick={() => handleReject(content.type, content._id, 'Inappropriate content')}
+                        onClick={() =>
+                          handleReject(
+                            content.type,
+                            content._id,
+                            'Inappropriate content'
+                          )
+                        }
                         disabled={rejectContentMutation.isLoading}
                         className="btn-danger btn-sm"
                       >
@@ -390,7 +461,9 @@ const AdminDashboard = () => {
                         Reject
                       </button>
                       <button
-                        onClick={() => handleDeleteContent(content.type, content._id)}
+                        onClick={() =>
+                          handleDeleteContent(content.type, content._id)
+                        }
                         className="btn-outline btn-sm"
                       >
                         <FiTrash2 className="w-4 h-4 mr-1" />
@@ -423,34 +496,59 @@ const AdminDashboard = () => {
               <table className="w-full">
                 <thead>
                   <tr className="border-b border-navy-200 dark:border-navy-700">
-                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">User</th>
-                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">Email</th>
-                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">Reputation</th>
-                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">Joined</th>
-                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">Status</th>
-                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">Actions</th>
+                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">
+                      User
+                    </th>
+                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">
+                      Email
+                    </th>
+                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">
+                      Reputation
+                    </th>
+                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">
+                      Joined
+                    </th>
+                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">
+                      Status
+                    </th>
+                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">
+                      Actions
+                    </th>
                   </tr>
                 </thead>
                 <tbody>
-                  {recentUsers.map((user) => (
-                    <tr key={user._id} className="border-b border-navy-100 dark:border-navy-800">
+                  {recentUsers.map(user => (
+                    <tr
+                      key={user._id}
+                      className="border-b border-navy-100 dark:border-navy-800"
+                    >
                       <td className="py-3 px-4">
                         <div className="flex items-center space-x-3">
                           <div className="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
                             <FiUser className="w-4 h-4 text-primary-600 dark:text-primary-400" />
                           </div>
-                          <span className="font-medium text-navy-900 dark:text-white">{user.username}</span>
+                          <span className="font-medium text-navy-900 dark:text-white">
+                            {user.username}
+                          </span>
                         </div>
                       </td>
-                      <td className="py-3 px-4 text-navy-600 dark:text-navy-400">{user.email}</td>
-                      <td className="py-3 px-4 text-navy-900 dark:text-white">{user.reputation}</td>
-                      <td className="py-3 px-4 text-navy-600 dark:text-navy-400">{formatDate(user.createdAt)}</td>
+                      <td className="py-3 px-4 text-navy-600 dark:text-navy-400">
+                        {user.email}
+                      </td>
+                      <td className="py-3 px-4 text-navy-900 dark:text-white">
+                        {user.reputation}
+                      </td>
+                      <td className="py-3 px-4 text-navy-600 dark:text-navy-400">
+                        {formatDate(user.createdAt)}
+                      </td>
                       <td className="py-3 px-4">
-                        <span className={`px-2 py-1 text-xs rounded-full ${
-                          user.isBanned 
-                            ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
-                            : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                        }`}>
+                        <span
+                          className={`px-2 py-1 text-xs rounded-full ${
+                            user.isBanned
+                              ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+                              : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+                          }`}
+                        >
                           {user.isBanned ? 'Banned' : 'Active'}
                         </span>
                       </td>
@@ -465,7 +563,13 @@ const AdminDashboard = () => {
                           </button>
                           {!user.isBanned && (
                             <button
-                              onClick={() => handleBanUser(user._id, 'Violation of community guidelines', '7d')}
+                              onClick={() =>
+                                handleBanUser(
+                                  user._id,
+                                  'Violation of community guidelines',
+                                  '7d'
+                                )
+                              }
                               className="btn-danger btn-sm"
                             >
                               <FiX className="w-4 h-4 mr-1" />
@@ -488,7 +592,7 @@ const AdminDashboard = () => {
               Reported Content
             </h3>
             {reportedContent.length > 0 ? (
-              reportedContent.map((report) => (
+              reportedContent.map(report => (
                 <div key={report._id} className="card p-6">
                   <div className="flex items-start justify-between">
                     <div className="flex-1">
@@ -503,32 +607,46 @@ const AdminDashboard = () => {
                           {formatDate(report.createdAt)}
                         </span>
                       </div>
-                      
+
                       <h4 className="font-semibold text-navy-900 dark:text-white mb-2">
                         Reason: {report.reason}
                       </h4>
-                      
+
                       <div className="bg-navy-50 dark:bg-navy-800 p-4 rounded-lg mb-4">
                         <h5 className="font-medium text-navy-900 dark:text-white mb-2">
                           Reported Content:
                         </h5>
-                        <div 
+                        <div
                           className="prose prose-navy dark:prose-invert max-w-none"
-                          dangerouslySetInnerHTML={{ __html: report.content.content.substring(0, 200) + '...' }}
+                          dangerouslySetInnerHTML={{
+                            __html:
+                              report.content.content.substring(0, 200) + '...',
+                          }}
                         />
                       </div>
                     </div>
-                    
+
                     <div className="flex space-x-2 ml-4">
                       <button
-                        onClick={() => handleDeleteContent(report.content.type, report.content._id)}
+                        onClick={() =>
+                          handleDeleteContent(
+                            report.content.type,
+                            report.content._id
+                          )
+                        }
                         className="btn-danger btn-sm"
                       >
                         <FiTrash2 className="w-4 h-4 mr-1" />
                         Delete Content
                       </button>
                       <button
-                        onClick={() => handleBanUser(report.content.author._id, 'Content violation', '30d')}
+                        onClick={() =>
+                          handleBanUser(
+                            report.content.author._id,
+                            'Content violation',
+                            '30d'
+                          )
+                        }
                         className="btn-outline btn-sm"
                       >
                         <FiX className="w-4 h-4 mr-1" />
@@ -565,15 +683,23 @@ const AdminDashboard = () => {
                       <FiActivity className="w-5 h-5 text-primary-600 dark:text-primary-400" />
                     </div>
                     <div className="flex-1">
-                      <p className="text-navy-900 dark:text-white">{activity.description}</p>
-                      <p className="text-sm text-navy-500 dark:text-navy-400">{formatDate(activity.date)}</p>
+                      <p className="text-navy-900 dark:text-white">
+                        {activity.description}
+                      </p>
+                      <p className="text-sm text-navy-500 dark:text-navy-400">
+                        {formatDate(activity.date)}
+                      </p>
                     </div>
                     <div className="text-right">
-                      <span className={`px-2 py-1 text-xs rounded-full ${
-                        activity.type === 'user' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' :
-                        activity.type === 'content' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' :
-                        'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
-                      }`}>
+                      <span
+                        className={`px-2 py-1 text-xs rounded-full ${
+                          activity.type === 'user'
+                            ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+                            : activity.type === 'content'
+                              ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+                              : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
+                        }`}
+                      >
                         {activity.type}
                       </span>
                     </div>
@@ -585,7 +711,7 @@ const AdminDashboard = () => {
         )}
       </motion.div>
     </div>
-  )
-}
+  );
+};
 
-export default AdminDashboard 
\ No newline at end of file
+export default AdminDashboard;
diff --git a/client/src/pages/AskQuestionPage.jsx b/client/src/pages/AskQuestionPage.jsx
index 150c765..47cfbfd 100644
--- a/client/src/pages/AskQuestionPage.jsx
+++ b/client/src/pages/AskQuestionPage.jsx
@@ -1,108 +1,115 @@
-import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
-import { motion } from 'framer-motion'
-import { toast } from 'react-hot-toast'
-import { FiTag, FiX, FiHelpCircle } from 'react-icons/fi'
-import ReactQuill from 'react-quill'
-import 'react-quill/dist/quill.snow.css'
-import api from '../utils/api'
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { useMutation, useQueryClient } from 'react-query';
+import { motion } from 'framer-motion';
+import { toast } from 'react-hot-toast';
+import { FiTag, FiX, FiHelpCircle } from 'react-icons/fi';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+import api from '../utils/api';
 
 const AskQuestionPage = () => {
-  const [tags, setTags] = useState([])
-  const [tagInput, setTagInput] = useState('')
-  const [content, setContent] = useState('')
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const navigate = useNavigate()
-  const queryClient = useQueryClient()
+  const [tags, setTags] = useState([]);
+  const [tagInput, setTagInput] = useState('');
+  const [content, setContent] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
   const {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm()
+  } = useForm();
 
   const createQuestionMutation = useMutation(
-    (questionData) => api.post('/questions', questionData),
+    questionData => api.post('api/questions', questionData),
     {
-      onSuccess: (data) => {
-        toast.success('Question posted successfully!')
-        queryClient.invalidateQueries(['questions'])
-        navigate(`/questions/${data.data.question._id}`)
+      onSuccess: data => {
+        toast.success('Question posted successfully!');
+        queryClient.invalidateQueries(['questions']);
+        navigate(`/questions/${data.data.question._id}`);
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to post question')
+      onError: error => {
+        toast.error(error.response?.data?.message || 'Failed to post question');
       },
     }
-  )
+  );
 
-  const handleTagInputChange = (e) => {
-    setTagInput(e.target.value)
-  }
+  const handleTagInputChange = e => {
+    setTagInput(e.target.value);
+  };
 
-  const handleTagInputKeyDown = (e) => {
+  const handleTagInputKeyDown = e => {
     if (e.key === 'Enter' || e.key === ',') {
-      e.preventDefault()
-      addTag()
+      e.preventDefault();
+      addTag();
     }
-  }
+  };
 
   const addTag = () => {
-    const tag = tagInput.trim().toLowerCase()
+    const tag = tagInput.trim().toLowerCase();
     if (tag && !tags.includes(tag) && tags.length < 5) {
-      setTags([...tags, tag])
-      setTagInput('')
+      setTags([...tags, tag]);
+      setTagInput('');
     }
-  }
+  };
 
-  const removeTag = (tagToRemove) => {
-    setTags(tags.filter(tag => tag !== tagToRemove))
-  }
+  const removeTag = tagToRemove => {
+    setTags(tags.filter(tag => tag !== tagToRemove));
+  };
 
-  const onSubmit = async (data) => {
+  const onSubmit = async data => {
     if (tags.length === 0) {
-      toast.error('Please add at least one tag')
-      return
+      toast.error('Please add at least one tag');
+      return;
     }
 
     if (content.trim().length < 20) {
-      toast.error('Question content must be at least 20 characters')
-      return
+      toast.error('Question content must be at least 20 characters');
+      return;
     }
 
-    setIsSubmitting(true)
+    setIsSubmitting(true);
     try {
       await createQuestionMutation.mutateAsync({
         title: data.title,
         content: content,
         tags: tags,
-      })
+      });
     } finally {
-      setIsSubmitting(false)
+      setIsSubmitting(false);
     }
-  }
+  };
 
   const quillModules = {
     toolbar: [
-      [{ 'header': [1, 2, 3, false] }],
+      [{ header: [1, 2, 3, false] }],
       ['bold', 'italic', 'underline', 'strike'],
-      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
-      [{ 'color': [] }, { 'background': [] }],
-      [{ 'align': [] }],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      [{ color: [] }, { background: [] }],
+      [{ align: [] }],
       ['link', 'image', 'code-block'],
-      ['clean']
+      ['clean'],
     ],
-  }
+  };
 
   const quillFormats = [
     'header',
-    'bold', 'italic', 'underline', 'strike',
-    'list', 'bullet',
-    'color', 'background',
+    'bold',
+    'italic',
+    'underline',
+    'strike',
+    'list',
+    'bullet',
+    'color',
+    'background',
     'align',
-    'link', 'image', 'code-block'
-  ]
+    'link',
+    'image',
+    'code-block',
+  ];
 
   return (
     <div className="max-w-4xl mx-auto">
@@ -124,7 +131,10 @@ const AskQuestionPage = () => {
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
           {/* Title */}
           <div>
-            <label htmlFor="title" className="block text-sm font-medium text-navy-700 dark:text-navy-300 mb-2">
+            <label
+              htmlFor="title"
+              className="block text-sm font-medium text-navy-700 dark:text-navy-300 mb-2"
+            >
               Title *
             </label>
             <input
@@ -206,7 +216,7 @@ const AskQuestionPage = () => {
               {/* Selected Tags */}
               {tags.length > 0 && (
                 <div className="flex flex-wrap gap-2">
-                  {tags.map((tag) => (
+                  {tags.map(tag => (
                     <div
                       key={tag}
                       className="badge badge-primary flex items-center space-x-1"
@@ -228,8 +238,12 @@ const AskQuestionPage = () => {
               <div className="flex items-start space-x-2 text-sm text-navy-500 dark:text-navy-400">
                 <FiHelpCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
                 <div>
-                  <p>Add up to 5 tags to describe what your question is about.</p>
-                  <p className="mt-1">Popular tags: javascript, react, nodejs, python, css, html</p>
+                  <p>
+                    Add up to 5 tags to describe what your question is about.
+                  </p>
+                  <p className="mt-1">
+                    Popular tags: javascript, react, nodejs, python, css, html
+                  </p>
                 </div>
               </div>
             </div>
@@ -260,7 +274,9 @@ const AskQuestionPage = () => {
             </button>
             <button
               type="submit"
-              disabled={isSubmitting || tags.length === 0 || content.trim().length < 20}
+              disabled={
+                isSubmitting || tags.length === 0 || content.trim().length < 20
+              }
               className="btn-primary px-8 py-3 disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {isSubmitting ? (
@@ -276,7 +292,7 @@ const AskQuestionPage = () => {
         </form>
       </motion.div>
     </div>
-  )
-}
+  );
+};
 
-export default AskQuestionPage 
\ No newline at end of file
+export default AskQuestionPage;
diff --git a/client/src/pages/QuestionDetailPage.jsx b/client/src/pages/QuestionDetailPage.jsx
index c2e11c6..e50d4f7 100644
--- a/client/src/pages/QuestionDetailPage.jsx
+++ b/client/src/pages/QuestionDetailPage.jsx
@@ -1,14 +1,14 @@
-import { useState, useEffect } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-import { useQuery, useMutation, useQueryClient } from 'react-query'
-import { motion } from 'framer-motion'
-import { toast } from 'react-hot-toast'
-import { 
-  FiThumbsUp, 
-  FiThumbsDown, 
-  FiCheck, 
-  FiMessageSquare, 
-  FiEdit, 
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { motion } from 'framer-motion';
+import { toast } from 'react-hot-toast';
+import {
+  FiThumbsUp,
+  FiThumbsDown,
+  FiCheck,
+  FiMessageSquare,
+  FiEdit,
   FiTrash2,
   FiFlag,
   FiShare,
@@ -17,175 +17,184 @@ import {
   FiEye,
   FiUser,
   FiTag,
-  FiArrowLeft
-} from 'react-icons/fi'
-import ReactQuill from 'react-quill'
-import 'react-quill/dist/quill.snow.css'
-import api from '../utils/api'
-import { useAuth } from '../contexts/AuthContext'
-import { useSocket } from '../contexts/SocketContext'
-import CommentSection from '../components/CommentSection'
+  FiArrowLeft,
+} from 'react-icons/fi';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+import api from '../utils/api';
+import { useAuth } from '../contexts/AuthContext';
+import { useSocket } from '../contexts/SocketContext';
+import CommentSection from '../components/CommentSection';
 
 const QuestionDetailPage = () => {
-  const { id } = useParams()
-  const navigate = useNavigate()
-  const { user } = useAuth()
-  const { socket } = useSocket()
-  const queryClient = useQueryClient()
-  
-  const [showAnswerForm, setShowAnswerForm] = useState(false)
-  const [answerContent, setAnswerContent] = useState('')
-  const [isSubmitting, setIsSubmitting] = useState(false)
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const { socket } = useSocket();
+  const queryClient = useQueryClient();
+
+  const [showAnswerForm, setShowAnswerForm] = useState(false);
+  const [answerContent, setAnswerContent] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Fetch question data
-  const { data: questionData, isLoading, error } = useQuery(
+  const {
+    data: questionData,
+    isLoading,
+    error,
+  } = useQuery(
     ['question', id],
     () => api.get(`/questions/${id}`).then(res => res.data),
     {
       staleTime: 30000,
       refetchOnWindowFocus: false,
     }
-  )
+  );
 
   // Join question room for real-time updates
   useEffect(() => {
     if (socket && id) {
-      socket.emit('join-question', id)
-      return () => socket.emit('leave-question', id)
+      socket.emit('join-question', id);
+      return () => socket.emit('leave-question', id);
     }
-  }, [socket, id])
+  }, [socket, id]);
 
   // Mutations
   const upvoteMutation = useMutation(
     ({ contentType, contentId }) => {
       if (contentType === 'answers') {
-        return api.post(`/answers/${contentId}/upvote`)
+        return api.post(`api/answers/${contentId}/upvote`);
       } else {
-        return api.post(`/questions/${contentId}/upvote`)
+        return api.post(`api/questions/${contentId}/upvote`);
       }
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['question', id])
-        toast.success('Upvoted successfully!')
+        queryClient.invalidateQueries(['question', id]);
+        toast.success('Upvoted successfully!');
+      },
+      onError: error => {
+        toast.error(error.response?.data?.message || 'Failed to upvote');
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to upvote')
-      }
     }
-  )
+  );
 
   const downvoteMutation = useMutation(
     ({ contentType, contentId }) => {
       if (contentType === 'answers') {
-        return api.post(`/answers/${contentId}/downvote`)
+        return api.post(`api/answers/${contentId}/downvote`);
       } else {
-        return api.post(`/questions/${contentId}/downvote`)
+        return api.post(`api/questions/${contentId}/downvote`);
       }
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['question', id])
-        toast.success('Downvoted successfully!')
+        queryClient.invalidateQueries(['question', id]);
+        toast.success('Downvoted successfully!');
+      },
+      onError: error => {
+        toast.error(error.response?.data?.message || 'Failed to downvote');
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to downvote')
-      }
     }
-  )
+  );
 
   const acceptAnswerMutation = useMutation(
-    (answerId) => api.post(`/questions/${id}/accept-answer`, { answerId }),
+    answerId => api.post(`api/questions/${id}/accept-answer`, { answerId }),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['question', id])
-        toast.success('Answer accepted successfully!')
+        queryClient.invalidateQueries(['question', id]);
+        toast.success('Answer accepted successfully!');
+      },
+      onError: error => {
+        toast.error(error.response?.data?.message || 'Failed to accept answer');
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to accept answer')
-      }
     }
-  )
+  );
 
   const submitAnswerMutation = useMutation(
-    (content) => {
+    content => {
       console.log('🔍 Frontend Debug - Submitting answer for question ID:', id);
       console.log('🔍 Frontend Debug - Answer content:', content);
       console.log('🔍 Frontend Debug - API call:', `/answers/${id}`);
-      return api.post(`/answers/${id}`, { content });
+      return api.post(`api/answers/${id}`, { content });
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['question', id])
-        setAnswerContent('')
-        setShowAnswerForm(false)
-        setIsSubmitting(false)
-        toast.success('Answer posted successfully!')
+        queryClient.invalidateQueries(['question', id]);
+        setAnswerContent('');
+        setShowAnswerForm(false);
+        setIsSubmitting(false);
+        toast.success('Answer posted successfully!');
+      },
+      onError: error => {
+        setIsSubmitting(false);
+        toast.error(error.response?.data?.message || 'Failed to post answer');
       },
-      onError: (error) => {
-        setIsSubmitting(false)
-        toast.error(error.response?.data?.message || 'Failed to post answer')
-      }
     }
-  )
+  );
 
   const deleteMutation = useMutation(
-    ({ contentType, contentId }) => api.delete(`/${contentType}/${contentId}`),
+    ({ contentType, contentId }) =>
+      api.delete(`api/${contentType}/${contentId}`),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['question', id])
-        toast.success('Content deleted successfully')
+        queryClient.invalidateQueries(['question', id]);
+        toast.success('Content deleted successfully');
+      },
+      onError: error => {
+        toast.error(error.response?.data?.message || 'Failed to delete');
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to delete')
-      }
     }
-  )
+  );
 
   // Handlers
   const handleVote = (type, contentType, contentId) => {
     if (!user) {
-      toast.error('Please log in to vote')
-      return
+      toast.error('Please log in to vote');
+      return;
     }
     if (type === 'upvote') {
-      upvoteMutation.mutate({ contentType, contentId })
+      upvoteMutation.mutate({ contentType, contentId });
     } else {
-      downvoteMutation.mutate({ contentType, contentId })
+      downvoteMutation.mutate({ contentType, contentId });
     }
-  }
+  };
 
-  const handleAcceptAnswer = (answerId) => {
+  const handleAcceptAnswer = answerId => {
     if (!user) {
-      toast.error('Please log in to accept answers')
-      return
+      toast.error('Please log in to accept answers');
+      return;
     }
-    acceptAnswerMutation.mutate(answerId)
-  }
+    acceptAnswerMutation.mutate(answerId);
+  };
 
   const handleSubmitAnswer = () => {
     if (!answerContent.trim()) {
-      toast.error('Please enter an answer')
-      return
+      toast.error('Please enter an answer');
+      return;
     }
-    setIsSubmitting(true)
-    submitAnswerMutation.mutate(answerContent)
-  }
+    setIsSubmitting(true);
+    submitAnswerMutation.mutate(answerContent);
+  };
 
   const handleDelete = (contentType, contentId) => {
     if (window.confirm('Are you sure you want to delete this?')) {
-      deleteMutation.mutate({ contentType, contentId })
+      deleteMutation.mutate({ contentType, contentId });
     }
-  }
+  };
 
   const getVoteStatus = (votes, userId) => {
-    if (!userId) return null
-    const upvoted = votes.upvotes.some(vote => vote.user === userId || vote.user?._id === userId)
-    const downvoted = votes.downvotes.some(vote => vote.user === userId || vote.user?._id === userId)
-    if (upvoted) return 'upvote'
-    if (downvoted) return 'downvote'
-    return null
-  }
+    if (!userId) return null;
+    const upvoted = votes.upvotes.some(
+      vote => vote.user === userId || vote.user?._id === userId
+    );
+    const downvoted = votes.downvotes.some(
+      vote => vote.user === userId || vote.user?._id === userId
+    );
+    if (upvoted) return 'upvote';
+    if (downvoted) return 'downvote';
+    return null;
+  };
 
   if (isLoading) {
     return (
@@ -198,7 +207,7 @@ const QuestionDetailPage = () => {
           </div>
         </div>
       </div>
-    )
+    );
   }
 
   if (error) {
@@ -211,10 +220,10 @@ const QuestionDetailPage = () => {
           Back to Questions
         </button>
       </div>
-    )
+    );
   }
 
-  const { question, answers } = questionData
+  const { question, answers } = questionData;
 
   return (
     <div className="max-w-4xl mx-auto">
@@ -281,14 +290,14 @@ const QuestionDetailPage = () => {
             </div>
 
             {/* Question body */}
-            <div 
+            <div
               className="prose prose-navy dark:prose-invert max-w-none mb-6"
               dangerouslySetInnerHTML={{ __html: question.content }}
             />
 
             {/* Tags */}
             <div className="flex flex-wrap gap-2 mb-6">
-              {question.tags.map((tag) => (
+              {question.tags.map(tag => (
                 <span key={tag} className="badge badge-primary">
                   <FiTag className="w-3 h-3 mr-1" />
                   {tag}
@@ -307,7 +316,9 @@ const QuestionDetailPage = () => {
                 </div>
                 <div className="flex items-center space-x-1">
                   <FiClock className="w-4 h-4" />
-                  <span>{new Date(question.createdAt).toLocaleDateString()}</span>
+                  <span>
+                    {new Date(question.createdAt).toLocaleDateString()}
+                  </span>
                 </div>
                 <div className="flex items-center space-x-1">
                   <FiEye className="w-4 h-4" />
@@ -316,27 +327,28 @@ const QuestionDetailPage = () => {
               </div>
 
               {/* Edit/Delete buttons */}
-              {user && (user._id === question.author._id || user.role === 'admin') && (
-                <div className="flex items-center space-x-2">
-                  <button className="flex items-center space-x-1 text-navy-500 hover:text-primary-600 dark:hover:text-primary-400">
-                    <FiEdit className="w-4 h-4" />
-                    <span>Edit</span>
-                  </button>
-                  <button 
-                    onClick={() => handleDelete('questions', question._id)}
-                    className="flex items-center space-x-1 text-navy-500 hover:text-red-600 dark:hover:text-red-400"
-                  >
-                    <FiTrash2 className="w-4 h-4" />
-                    <span>Delete</span>
-                  </button>
-                </div>
-              )}
+              {user &&
+                (user._id === question.author._id || user.role === 'admin') && (
+                  <div className="flex items-center space-x-2">
+                    <button className="flex items-center space-x-1 text-navy-500 hover:text-primary-600 dark:hover:text-primary-400">
+                      <FiEdit className="w-4 h-4" />
+                      <span>Edit</span>
+                    </button>
+                    <button
+                      onClick={() => handleDelete('questions', question._id)}
+                      className="flex items-center space-x-1 text-navy-500 hover:text-red-600 dark:hover:text-red-400"
+                    >
+                      <FiTrash2 className="w-4 h-4" />
+                      <span>Delete</span>
+                    </button>
+                  </div>
+                )}
             </div>
           </div>
         </div>
 
         {/* Comments */}
-        <CommentSection 
+        <CommentSection
           contentType="question"
           contentId={question._id}
           comments={question.comments || []}
@@ -406,7 +418,9 @@ const QuestionDetailPage = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: index * 0.1 }}
               className={`card p-6 ${
-                answer.isAccepted ? 'border-2 border-green-500 bg-green-50 dark:bg-green-900/20' : ''
+                answer.isAccepted
+                  ? 'border-2 border-green-500 bg-green-50 dark:bg-green-900/20'
+                  : ''
               }`}
             >
               <div className="flex space-x-4">
@@ -423,10 +437,13 @@ const QuestionDetailPage = () => {
                     <FiThumbsUp className="w-5 h-5" />
                   </button>
                   <span className="text-lg font-semibold text-navy-900 dark:text-white">
-                    {answer.votes.upvotes.length - answer.votes.downvotes.length}
+                    {answer.votes.upvotes.length -
+                      answer.votes.downvotes.length}
                   </span>
                   <button
-                    onClick={() => handleVote('downvote', 'answers', answer._id)}
+                    onClick={() =>
+                      handleVote('downvote', 'answers', answer._id)
+                    }
                     className={`p-2 rounded-lg transition-colors ${
                       getVoteStatus(answer.votes, user?._id) === 'downvote'
                         ? 'text-red-600 bg-red-100 dark:bg-red-900'
@@ -446,7 +463,7 @@ const QuestionDetailPage = () => {
                     </div>
                   )}
 
-                  <div 
+                  <div
                     className="prose prose-navy dark:prose-invert max-w-none mb-6"
                     dangerouslySetInnerHTML={{ __html: answer.content }}
                   />
@@ -462,43 +479,51 @@ const QuestionDetailPage = () => {
                       </div>
                       <div className="flex items-center space-x-1">
                         <FiClock className="w-4 h-4" />
-                        <span>{new Date(answer.createdAt).toLocaleDateString()}</span>
+                        <span>
+                          {new Date(answer.createdAt).toLocaleDateString()}
+                        </span>
                       </div>
                     </div>
 
                     <div className="flex items-center space-x-2">
                       {/* Accept answer button */}
-                      {user && user._id === question.author._id && !question.acceptedAnswer && (
-                        <button
-                          onClick={() => handleAcceptAnswer(answer._id)}
-                          className="flex items-center space-x-1 text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
-                        >
-                          <FiCheck className="w-4 h-4" />
-                          <span>Accept</span>
-                        </button>
-                      )}
-
-                      {/* Edit/Delete buttons */}
-                      {user && (user._id === answer.author._id || user.role === 'admin') && (
-                        <>
-                          <button className="flex items-center space-x-1 text-navy-500 hover:text-primary-600 dark:hover:text-primary-400">
-                            <FiEdit className="w-4 h-4" />
-                            <span>Edit</span>
-                          </button>
-                          <button 
-                            onClick={() => handleDelete('answers', answer._id)}
-                            className="flex items-center space-x-1 text-navy-500 hover:text-red-600 dark:hover:text-red-400"
+                      {user &&
+                        user._id === question.author._id &&
+                        !question.acceptedAnswer && (
+                          <button
+                            onClick={() => handleAcceptAnswer(answer._id)}
+                            className="flex items-center space-x-1 text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
                           >
-                            <FiTrash2 className="w-4 h-4" />
-                            <span>Delete</span>
+                            <FiCheck className="w-4 h-4" />
+                            <span>Accept</span>
                           </button>
-                        </>
-                      )}
+                        )}
+
+                      {/* Edit/Delete buttons */}
+                      {user &&
+                        (user._id === answer.author._id ||
+                          user.role === 'admin') && (
+                          <>
+                            <button className="flex items-center space-x-1 text-navy-500 hover:text-primary-600 dark:hover:text-primary-400">
+                              <FiEdit className="w-4 h-4" />
+                              <span>Edit</span>
+                            </button>
+                            <button
+                              onClick={() =>
+                                handleDelete('answers', answer._id)
+                              }
+                              className="flex items-center space-x-1 text-navy-500 hover:text-red-600 dark:hover:text-red-400"
+                            >
+                              <FiTrash2 className="w-4 h-4" />
+                              <span>Delete</span>
+                            </button>
+                          </>
+                        )}
                     </div>
                   </div>
 
                   {/* Comments */}
-                  <CommentSection 
+                  <CommentSection
                     contentType="answer"
                     contentId={answer._id}
                     comments={answer.comments || []}
@@ -531,7 +556,7 @@ const QuestionDetailPage = () => {
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default QuestionDetailPage 
\ No newline at end of file
+export default QuestionDetailPage;
diff --git a/client/src/pages/QuestionsFeed.jsx b/client/src/pages/QuestionsFeed.jsx
index efc9f8a..75d0b6b 100644
--- a/client/src/pages/QuestionsFeed.jsx
+++ b/client/src/pages/QuestionsFeed.jsx
@@ -1,39 +1,44 @@
-import { useState, useEffect } from 'react'
-import { Link } from 'react-router-dom'
-import { useQuery } from 'react-query'
-import { motion } from 'framer-motion'
-import { 
-  FiSearch, 
-  FiFilter, 
-  FiTrendingUp, 
-  FiClock, 
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { useQuery } from 'react-query';
+import { motion } from 'framer-motion';
+import {
+  FiSearch,
+  FiFilter,
+  FiTrendingUp,
+  FiClock,
   FiMessageSquare,
   FiThumbsUp,
   FiEye,
-  FiTag
-} from 'react-icons/fi'
-import api from '../utils/api'
-import QuestionCard from '../components/QuestionCard'
-import TagFilter from '../components/TagFilter'
+  FiTag,
+} from 'react-icons/fi';
+import api from '../utils/api';
+import QuestionCard from '../components/QuestionCard';
+import TagFilter from '../components/TagFilter';
 
 const QuestionsFeed = () => {
-  const [searchTerm, setSearchTerm] = useState('')
-  const [selectedTags, setSelectedTags] = useState([])
-  const [sortBy, setSortBy] = useState('newest')
-  const [currentPage, setCurrentPage] = useState(1)
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedTags, setSelectedTags] = useState([]);
+  const [sortBy, setSortBy] = useState('newest');
+  const [currentPage, setCurrentPage] = useState(1);
   const [filters, setFilters] = useState({
     status: 'all',
-    timeRange: 'all'
-  })
+    timeRange: 'all',
+  });
 
-  const { data: questionsData, isLoading, error, refetch } = useQuery(
+  const {
+    data: questionsData,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery(
     ['questions', searchTerm, selectedTags, sortBy, currentPage, filters],
     () => fetchQuestions(),
     {
       keepPreviousData: true,
       staleTime: 30000,
     }
-  )
+  );
 
   const fetchQuestions = async () => {
     const params = new URLSearchParams({
@@ -44,42 +49,44 @@ const QuestionsFeed = () => {
       tags: selectedTags.join(','),
       status: filters.status,
       timeRange: filters.timeRange,
-    })
+    });
 
-    const response = await api.get(`/questions?${params}`)
-    return response.data
-  }
+    const response = await api.get(`api/questions?${params}`);
+    return response.data;
+  };
 
-  const handleSearch = (e) => {
-    e.preventDefault()
-    setCurrentPage(1)
-    refetch()
-  }
+  const handleSearch = e => {
+    e.preventDefault();
+    setCurrentPage(1);
+    refetch();
+  };
 
-  const handleTagFilter = (tags) => {
-    setSelectedTags(tags)
-    setCurrentPage(1)
-  }
+  const handleTagFilter = tags => {
+    setSelectedTags(tags);
+    setCurrentPage(1);
+  };
 
-  const handleSortChange = (newSort) => {
-    setSortBy(newSort)
-    setCurrentPage(1)
-  }
+  const handleSortChange = newSort => {
+    setSortBy(newSort);
+    setCurrentPage(1);
+  };
 
-  const handleFilterChange = (newFilters) => {
-    setFilters(newFilters)
-    setCurrentPage(1)
-  }
+  const handleFilterChange = newFilters => {
+    setFilters(newFilters);
+    setCurrentPage(1);
+  };
 
   if (error) {
     return (
       <div className="text-center py-12">
-        <p className="text-red-600 dark:text-red-400">Error loading questions: {error.message}</p>
+        <p className="text-red-600 dark:text-red-400">
+          Error loading questions: {error.message}
+        </p>
         <button onClick={() => refetch()} className="btn-primary mt-4">
           Try again
         </button>
       </div>
-    )
+    );
   }
 
   return (
@@ -107,7 +114,7 @@ const QuestionsFeed = () => {
             <input
               type="text"
               value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
+              onChange={e => setSearchTerm(e.target.value)}
               placeholder="Search questions..."
               className="input-field pl-10 pr-4"
             />
@@ -123,16 +130,22 @@ const QuestionsFeed = () => {
         <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
           {/* Sort Options */}
           <div className="flex items-center space-x-4">
-            <span className="text-sm font-medium text-navy-700 dark:text-navy-300">Sort by:</span>
+            <span className="text-sm font-medium text-navy-700 dark:text-navy-300">
+              Sort by:
+            </span>
             <div className="flex space-x-2">
               {[
                 { value: 'newest', label: 'Newest', icon: FiClock },
                 { value: 'votes', label: 'Most Voted', icon: FiThumbsUp },
-                { value: 'answers', label: 'Most Answers', icon: FiMessageSquare },
+                {
+                  value: 'answers',
+                  label: 'Most Answers',
+                  icon: FiMessageSquare,
+                },
                 { value: 'views', label: 'Most Viewed', icon: FiEye },
                 { value: 'trending', label: 'Trending', icon: FiTrendingUp },
-              ].map((option) => {
-                const Icon = option.icon
+              ].map(option => {
+                const Icon = option.icon;
                 return (
                   <button
                     key={option.value}
@@ -146,17 +159,21 @@ const QuestionsFeed = () => {
                     <Icon className="w-4 h-4 mr-1" />
                     {option.label}
                   </button>
-                )
+                );
               })}
             </div>
           </div>
 
           {/* Filter Options */}
           <div className="flex items-center space-x-4">
-            <span className="text-sm font-medium text-navy-700 dark:text-navy-300">Filter:</span>
+            <span className="text-sm font-medium text-navy-700 dark:text-navy-300">
+              Filter:
+            </span>
             <select
               value={filters.status}
-              onChange={(e) => handleFilterChange({ ...filters, status: e.target.value })}
+              onChange={e =>
+                handleFilterChange({ ...filters, status: e.target.value })
+              }
               className="input-field py-1 px-3 text-sm"
             >
               <option value="all">All Questions</option>
@@ -166,7 +183,9 @@ const QuestionsFeed = () => {
             </select>
             <select
               value={filters.timeRange}
-              onChange={(e) => handleFilterChange({ ...filters, timeRange: e.target.value })}
+              onChange={e =>
+                handleFilterChange({ ...filters, timeRange: e.target.value })
+              }
               className="input-field py-1 px-3 text-sm"
             >
               <option value="all">All Time</option>
@@ -251,26 +270,33 @@ const QuestionsFeed = () => {
             >
               Previous
             </button>
-            
-            {Array.from({ length: Math.min(5, questionsData.totalPages) }, (_, i) => {
-              const page = i + 1
-              return (
-                <button
-                  key={page}
-                  onClick={() => setCurrentPage(page)}
-                  className={`px-3 py-2 rounded-lg font-medium transition-colors ${
-                    currentPage === page
-                      ? 'bg-primary-600 text-white'
-                      : 'btn-outline'
-                  }`}
-                >
-                  {page}
-                </button>
-              )
-            })}
-            
+
+            {Array.from(
+              { length: Math.min(5, questionsData.totalPages) },
+              (_, i) => {
+                const page = i + 1;
+                return (
+                  <button
+                    key={page}
+                    onClick={() => setCurrentPage(page)}
+                    className={`px-3 py-2 rounded-lg font-medium transition-colors ${
+                      currentPage === page
+                        ? 'bg-primary-600 text-white'
+                        : 'btn-outline'
+                    }`}
+                  >
+                    {page}
+                  </button>
+                );
+              }
+            )}
+
             <button
-              onClick={() => setCurrentPage(Math.min(questionsData.totalPages, currentPage + 1))}
+              onClick={() =>
+                setCurrentPage(
+                  Math.min(questionsData.totalPages, currentPage + 1)
+                )
+              }
               disabled={currentPage === questionsData.totalPages}
               className="btn-outline px-3 py-2 disabled:opacity-50 disabled:cursor-not-allowed"
             >
@@ -283,11 +309,13 @@ const QuestionsFeed = () => {
       {/* Results info */}
       {questionsData && (
         <div className="text-center mt-8 text-sm text-navy-500 dark:text-navy-400">
-          Showing {((currentPage - 1) * 10) + 1} to {Math.min(currentPage * 10, questionsData.total)} of {questionsData.total} questions
+          Showing {(currentPage - 1) * 10 + 1} to{' '}
+          {Math.min(currentPage * 10, questionsData.total)} of{' '}
+          {questionsData.total} questions
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default QuestionsFeed 
\ No newline at end of file
+export default QuestionsFeed;
diff --git a/client/src/pages/SettingsPage.jsx b/client/src/pages/SettingsPage.jsx
index 303bc0d..e8dfc4d 100644
--- a/client/src/pages/SettingsPage.jsx
+++ b/client/src/pages/SettingsPage.jsx
@@ -1,13 +1,13 @@
-import { useState, useEffect } from 'react'
-import { useQuery, useMutation, useQueryClient } from 'react-query'
-import { motion } from 'framer-motion'
-import { toast } from 'react-hot-toast'
-import { 
-  FiUser, 
-  FiMail, 
-  FiLock, 
-  FiBell, 
-  FiMoon, 
+import { useState, useEffect } from 'react';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { motion } from 'framer-motion';
+import { toast } from 'react-hot-toast';
+import {
+  FiUser,
+  FiMail,
+  FiLock,
+  FiBell,
+  FiMoon,
   FiSun,
   FiEye,
   FiEyeOff,
@@ -19,33 +19,33 @@ import {
   FiShield,
   FiKey,
   FiGlobe,
-  FiSmartphone
-} from 'react-icons/fi'
-import api from '../utils/api'
-import { useAuth } from '../contexts/AuthContext'
-import { useTheme } from '../contexts/ThemeContext'
+  FiSmartphone,
+} from 'react-icons/fi';
+import api from '../utils/api';
+import { useAuth } from '../contexts/AuthContext';
+import { useTheme } from '../contexts/ThemeContext';
 
 const SettingsPage = () => {
-  const { user, updateUser } = useAuth()
-  const { theme, toggleTheme } = useTheme()
-  const queryClient = useQueryClient()
-  const [activeTab, setActiveTab] = useState('profile')
-  const [showPasswordForm, setShowPasswordForm] = useState(false)
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const { user, updateUser } = useAuth();
+  const { theme, toggleTheme } = useTheme();
+  const queryClient = useQueryClient();
+  const [activeTab, setActiveTab] = useState('profile');
+  const [showPasswordForm, setShowPasswordForm] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
   // Form states
   const [profileData, setProfileData] = useState({
     username: '',
     email: '',
     bio: '',
-    avatar: null
-  })
+    avatar: null,
+  });
 
   const [passwordData, setPasswordData] = useState({
     currentPassword: '',
     newPassword: '',
-    confirmPassword: ''
-  })
+    confirmPassword: '',
+  });
 
   const [preferences, setPreferences] = useState({
     emailNotifications: true,
@@ -53,18 +53,18 @@ const SettingsPage = () => {
     weeklyDigest: false,
     mentionNotifications: true,
     answerNotifications: true,
-    voteNotifications: true
-  })
+    voteNotifications: true,
+  });
 
   // Fetch user data
   const { data: userData, isLoading } = useQuery(
     ['user-settings'],
-    () => api.get('/users/profile').then(res => res.data),
+    () => api.get('api/users/profile').then(res => res.data),
     {
       enabled: !!user,
       staleTime: 300000, // 5 minutes
     }
-  )
+  );
 
   // Initialize form data when user data is loaded
   useEffect(() => {
@@ -73,140 +73,162 @@ const SettingsPage = () => {
         username: userData.username || '',
         email: userData.email || '',
         bio: userData.bio || '',
-        avatar: null
-      })
+        avatar: null,
+      });
       setPreferences({
         emailNotifications: userData.preferences?.emailNotifications ?? true,
         pushNotifications: userData.preferences?.pushNotifications ?? true,
         weeklyDigest: userData.preferences?.weeklyDigest ?? false,
-        mentionNotifications: userData.preferences?.mentionNotifications ?? true,
+        mentionNotifications:
+          userData.preferences?.mentionNotifications ?? true,
         answerNotifications: userData.preferences?.answerNotifications ?? true,
-        voteNotifications: userData.preferences?.voteNotifications ?? true
-      })
+        voteNotifications: userData.preferences?.voteNotifications ?? true,
+      });
     }
-  }, [userData])
+  }, [userData]);
 
   // Mutations
   const updateProfileMutation = useMutation(
-    (data) => api.put('/users/profile', data),
+    data => api.put('api/users/profile', data),
     {
-      onSuccess: (data) => {
-        queryClient.invalidateQueries(['user-settings'])
-        updateUser(data.user)
-        toast.success('Profile updated successfully!')
+      onSuccess: data => {
+        queryClient.invalidateQueries(['user-settings']);
+        updateUser(data.user);
+        toast.success('Profile updated successfully!');
+      },
+      onError: error => {
+        toast.error(
+          error.response?.data?.message || 'Failed to update profile'
+        );
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to update profile')
-      }
     }
-  )
+  );
 
   const changePasswordMutation = useMutation(
-    (data) => api.put('/users/change-password', data),
+    data => api.put('api/users/change-password', data),
     {
       onSuccess: () => {
-        setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' })
-        setShowPasswordForm(false)
-        toast.success('Password changed successfully!')
+        setPasswordData({
+          currentPassword: '',
+          newPassword: '',
+          confirmPassword: '',
+        });
+        setShowPasswordForm(false);
+        toast.success('Password changed successfully!');
+      },
+      onError: error => {
+        toast.error(
+          error.response?.data?.message || 'Failed to change password'
+        );
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to change password')
-      }
     }
-  )
+  );
 
   const updatePreferencesMutation = useMutation(
-    (data) => api.put('/users/preferences', data),
+    data => api.put('api/users/preferences', data),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['user-settings'])
-        toast.success('Preferences updated successfully!')
+        queryClient.invalidateQueries(['user-settings']);
+        toast.success('Preferences updated successfully!');
+      },
+      onError: error => {
+        toast.error(
+          error.response?.data?.message || 'Failed to update preferences'
+        );
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to update preferences')
-      }
     }
-  )
+  );
 
   const deleteAccountMutation = useMutation(
-    () => api.delete('/users/account'),
+    () => api.delete('api/users/account'),
     {
       onSuccess: () => {
-        toast.success('Account deleted successfully')
+        toast.success('Account deleted successfully');
         // Redirect to logout
-        window.location.href = '/logout'
+        window.location.href = '/logout';
+      },
+      onError: error => {
+        toast.error(
+          error.response?.data?.message || 'Failed to delete account'
+        );
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to delete account')
-      }
     }
-  )
+  );
 
   const tabs = [
     { id: 'profile', label: 'Profile', icon: FiUser },
     { id: 'security', label: 'Security', icon: FiShield },
     { id: 'notifications', label: 'Notifications', icon: FiBell },
-    { id: 'appearance', label: 'Appearance', icon: theme === 'dark' ? FiMoon : FiSun },
-    { id: 'danger', label: 'Danger Zone', icon: FiTrash2 }
-  ]
-
-  const handleProfileSubmit = (e) => {
-    e.preventDefault()
+    {
+      id: 'appearance',
+      label: 'Appearance',
+      icon: theme === 'dark' ? FiMoon : FiSun,
+    },
+    { id: 'danger', label: 'Danger Zone', icon: FiTrash2 },
+  ];
+
+  const handleProfileSubmit = e => {
+    e.preventDefault();
     if (!profileData.username.trim()) {
-      toast.error('Username is required')
-      return
+      toast.error('Username is required');
+      return;
     }
-    
-    const formData = new FormData()
-    formData.append('username', profileData.username)
-    formData.append('email', profileData.email)
-    formData.append('bio', profileData.bio)
+
+    const formData = new FormData();
+    formData.append('username', profileData.username);
+    formData.append('email', profileData.email);
+    formData.append('bio', profileData.bio);
     if (profileData.avatar) {
-      formData.append('avatar', profileData.avatar)
+      formData.append('avatar', profileData.avatar);
     }
-    
-    updateProfileMutation.mutate(formData)
-  }
 
-  const handlePasswordSubmit = (e) => {
-    e.preventDefault()
+    updateProfileMutation.mutate(formData);
+  };
+
+  const handlePasswordSubmit = e => {
+    e.preventDefault();
     if (passwordData.newPassword !== passwordData.confirmPassword) {
-      toast.error('New passwords do not match')
-      return
+      toast.error('New passwords do not match');
+      return;
     }
     if (passwordData.newPassword.length < 6) {
-      toast.error('Password must be at least 6 characters long')
-      return
+      toast.error('Password must be at least 6 characters long');
+      return;
     }
-    
+
     changePasswordMutation.mutate({
       currentPassword: passwordData.currentPassword,
-      newPassword: passwordData.newPassword
-    })
-  }
+      newPassword: passwordData.newPassword,
+    });
+  };
 
   const handlePreferencesChange = (key, value) => {
-    const newPreferences = { ...preferences, [key]: value }
-    setPreferences(newPreferences)
-    updatePreferencesMutation.mutate(newPreferences)
-  }
+    const newPreferences = { ...preferences, [key]: value };
+    setPreferences(newPreferences);
+    updatePreferencesMutation.mutate(newPreferences);
+  };
 
   const handleDeleteAccount = () => {
-    if (window.confirm('Are you absolutely sure? This action cannot be undone and will permanently delete your account and all associated data.')) {
-      deleteAccountMutation.mutate()
+    if (
+      window.confirm(
+        'Are you absolutely sure? This action cannot be undone and will permanently delete your account and all associated data.'
+      )
+    ) {
+      deleteAccountMutation.mutate();
     }
-  }
+  };
 
-  const handleAvatarChange = (e) => {
-    const file = e.target.files[0]
+  const handleAvatarChange = e => {
+    const file = e.target.files[0];
     if (file) {
-      if (file.size > 5 * 1024 * 1024) { // 5MB limit
-        toast.error('Avatar file size must be less than 5MB')
-        return
+      if (file.size > 5 * 1024 * 1024) {
+        // 5MB limit
+        toast.error('Avatar file size must be less than 5MB');
+        return;
       }
-      setProfileData({ ...profileData, avatar: file })
+      setProfileData({ ...profileData, avatar: file });
     }
-  }
+  };
 
   if (isLoading) {
     return (
@@ -216,7 +238,7 @@ const SettingsPage = () => {
           <div className="h-64 bg-navy-200 dark:bg-navy-700 rounded"></div>
         </div>
       </div>
-    )
+    );
   }
 
   return (
@@ -239,8 +261,8 @@ const SettingsPage = () => {
           className="lg:w-64 flex-shrink-0"
         >
           <nav className="space-y-2">
-            {tabs.map((tab) => {
-              const Icon = tab.icon
+            {tabs.map(tab => {
+              const Icon = tab.icon;
               return (
                 <button
                   key={tab.id}
@@ -254,7 +276,7 @@ const SettingsPage = () => {
                   <Icon className="w-5 h-5" />
                   <span className="font-medium">{tab.label}</span>
                 </button>
-              )
+              );
             })}
           </nav>
         </motion.div>
@@ -270,7 +292,7 @@ const SettingsPage = () => {
               <h2 className="text-xl font-semibold text-navy-900 dark:text-white mb-6">
                 Profile Information
               </h2>
-              
+
               <form onSubmit={handleProfileSubmit} className="space-y-6">
                 {/* Avatar */}
                 <div className="flex items-center space-x-6">
@@ -306,7 +328,12 @@ const SettingsPage = () => {
                   <input
                     type="text"
                     value={profileData.username}
-                    onChange={(e) => setProfileData({ ...profileData, username: e.target.value })}
+                    onChange={e =>
+                      setProfileData({
+                        ...profileData,
+                        username: e.target.value,
+                      })
+                    }
                     className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
                     required
                   />
@@ -320,7 +347,9 @@ const SettingsPage = () => {
                   <input
                     type="email"
                     value={profileData.email}
-                    onChange={(e) => setProfileData({ ...profileData, email: e.target.value })}
+                    onChange={e =>
+                      setProfileData({ ...profileData, email: e.target.value })
+                    }
                     className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
                   />
                 </div>
@@ -332,7 +361,9 @@ const SettingsPage = () => {
                   </label>
                   <textarea
                     value={profileData.bio}
-                    onChange={(e) => setProfileData({ ...profileData, bio: e.target.value })}
+                    onChange={e =>
+                      setProfileData({ ...profileData, bio: e.target.value })
+                    }
                     rows="4"
                     placeholder="Tell us about yourself..."
                     className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white resize-none"
@@ -346,7 +377,9 @@ const SettingsPage = () => {
                     className="btn-primary disabled:opacity-50"
                   >
                     <FiSave className="w-4 h-4 mr-2" />
-                    {updateProfileMutation.isLoading ? 'Saving...' : 'Save Changes'}
+                    {updateProfileMutation.isLoading
+                      ? 'Saving...'
+                      : 'Save Changes'}
                   </button>
                 </div>
               </form>
@@ -358,7 +391,7 @@ const SettingsPage = () => {
               <h2 className="text-xl font-semibold text-navy-900 dark:text-white mb-6">
                 Security Settings
               </h2>
-              
+
               <div className="space-y-6">
                 {/* Change Password */}
                 <div>
@@ -381,7 +414,10 @@ const SettingsPage = () => {
                   </div>
 
                   {showPasswordForm && (
-                    <form onSubmit={handlePasswordSubmit} className="space-y-4 p-4 bg-navy-50 dark:bg-navy-800 rounded-lg">
+                    <form
+                      onSubmit={handlePasswordSubmit}
+                      className="space-y-4 p-4 bg-navy-50 dark:bg-navy-800 rounded-lg"
+                    >
                       <div>
                         <label className="block text-sm font-medium text-navy-700 dark:text-navy-300 mb-2">
                           Current Password
@@ -389,7 +425,12 @@ const SettingsPage = () => {
                         <input
                           type="password"
                           value={passwordData.currentPassword}
-                          onChange={(e) => setPasswordData({ ...passwordData, currentPassword: e.target.value })}
+                          onChange={e =>
+                            setPasswordData({
+                              ...passwordData,
+                              currentPassword: e.target.value,
+                            })
+                          }
                           className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
                           required
                         />
@@ -402,7 +443,12 @@ const SettingsPage = () => {
                         <input
                           type="password"
                           value={passwordData.newPassword}
-                          onChange={(e) => setPasswordData({ ...passwordData, newPassword: e.target.value })}
+                          onChange={e =>
+                            setPasswordData({
+                              ...passwordData,
+                              newPassword: e.target.value,
+                            })
+                          }
                           className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
                           required
                         />
@@ -415,7 +461,12 @@ const SettingsPage = () => {
                         <input
                           type="password"
                           value={passwordData.confirmPassword}
-                          onChange={(e) => setPasswordData({ ...passwordData, confirmPassword: e.target.value })}
+                          onChange={e =>
+                            setPasswordData({
+                              ...passwordData,
+                              confirmPassword: e.target.value,
+                            })
+                          }
                           className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
                           required
                         />
@@ -434,7 +485,9 @@ const SettingsPage = () => {
                           disabled={changePasswordMutation.isLoading}
                           className="btn-primary disabled:opacity-50"
                         >
-                          {changePasswordMutation.isLoading ? 'Changing...' : 'Change Password'}
+                          {changePasswordMutation.isLoading
+                            ? 'Changing...'
+                            : 'Change Password'}
                         </button>
                       </div>
                     </form>
@@ -467,19 +520,28 @@ const SettingsPage = () => {
               <h2 className="text-xl font-semibold text-navy-900 dark:text-white mb-6">
                 Notification Preferences
               </h2>
-              
+
               <div className="space-y-6">
                 <div className="space-y-4">
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="font-medium text-navy-900 dark:text-white">Email Notifications</h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">Receive notifications via email</p>
+                      <h3 className="font-medium text-navy-900 dark:text-white">
+                        Email Notifications
+                      </h3>
+                      <p className="text-sm text-navy-600 dark:text-navy-400">
+                        Receive notifications via email
+                      </p>
                     </div>
                     <label className="relative inline-flex items-center cursor-pointer">
                       <input
                         type="checkbox"
                         checked={preferences.emailNotifications}
-                        onChange={(e) => handlePreferencesChange('emailNotifications', e.target.checked)}
+                        onChange={e =>
+                          handlePreferencesChange(
+                            'emailNotifications',
+                            e.target.checked
+                          )
+                        }
                         className="sr-only peer"
                       />
                       <div className="w-11 h-6 bg-navy-200 dark:bg-navy-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-navy-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-navy-600 peer-checked:bg-primary-600"></div>
@@ -488,14 +550,23 @@ const SettingsPage = () => {
 
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="font-medium text-navy-900 dark:text-white">Push Notifications</h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">Receive browser push notifications</p>
+                      <h3 className="font-medium text-navy-900 dark:text-white">
+                        Push Notifications
+                      </h3>
+                      <p className="text-sm text-navy-600 dark:text-navy-400">
+                        Receive browser push notifications
+                      </p>
                     </div>
                     <label className="relative inline-flex items-center cursor-pointer">
                       <input
                         type="checkbox"
                         checked={preferences.pushNotifications}
-                        onChange={(e) => handlePreferencesChange('pushNotifications', e.target.checked)}
+                        onChange={e =>
+                          handlePreferencesChange(
+                            'pushNotifications',
+                            e.target.checked
+                          )
+                        }
                         className="sr-only peer"
                       />
                       <div className="w-11 h-6 bg-navy-200 dark:bg-navy-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-navy-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-navy-600 peer-checked:bg-primary-600"></div>
@@ -504,14 +575,23 @@ const SettingsPage = () => {
 
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="font-medium text-navy-900 dark:text-white">Weekly Digest</h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">Receive a weekly summary of activity</p>
+                      <h3 className="font-medium text-navy-900 dark:text-white">
+                        Weekly Digest
+                      </h3>
+                      <p className="text-sm text-navy-600 dark:text-navy-400">
+                        Receive a weekly summary of activity
+                      </p>
                     </div>
                     <label className="relative inline-flex items-center cursor-pointer">
                       <input
                         type="checkbox"
                         checked={preferences.weeklyDigest}
-                        onChange={(e) => handlePreferencesChange('weeklyDigest', e.target.checked)}
+                        onChange={e =>
+                          handlePreferencesChange(
+                            'weeklyDigest',
+                            e.target.checked
+                          )
+                        }
                         className="sr-only peer"
                       />
                       <div className="w-11 h-6 bg-navy-200 dark:bg-navy-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-navy-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-navy-600 peer-checked:bg-primary-600"></div>
@@ -520,14 +600,23 @@ const SettingsPage = () => {
 
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="font-medium text-navy-900 dark:text-white">Mention Notifications</h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">When someone mentions you</p>
+                      <h3 className="font-medium text-navy-900 dark:text-white">
+                        Mention Notifications
+                      </h3>
+                      <p className="text-sm text-navy-600 dark:text-navy-400">
+                        When someone mentions you
+                      </p>
                     </div>
                     <label className="relative inline-flex items-center cursor-pointer">
                       <input
                         type="checkbox"
                         checked={preferences.mentionNotifications}
-                        onChange={(e) => handlePreferencesChange('mentionNotifications', e.target.checked)}
+                        onChange={e =>
+                          handlePreferencesChange(
+                            'mentionNotifications',
+                            e.target.checked
+                          )
+                        }
                         className="sr-only peer"
                       />
                       <div className="w-11 h-6 bg-navy-200 dark:bg-navy-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-navy-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-navy-600 peer-checked:bg-primary-600"></div>
@@ -536,14 +625,23 @@ const SettingsPage = () => {
 
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="font-medium text-navy-900 dark:text-white">Answer Notifications</h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">When someone answers your question</p>
+                      <h3 className="font-medium text-navy-900 dark:text-white">
+                        Answer Notifications
+                      </h3>
+                      <p className="text-sm text-navy-600 dark:text-navy-400">
+                        When someone answers your question
+                      </p>
                     </div>
                     <label className="relative inline-flex items-center cursor-pointer">
                       <input
                         type="checkbox"
                         checked={preferences.answerNotifications}
-                        onChange={(e) => handlePreferencesChange('answerNotifications', e.target.checked)}
+                        onChange={e =>
+                          handlePreferencesChange(
+                            'answerNotifications',
+                            e.target.checked
+                          )
+                        }
                         className="sr-only peer"
                       />
                       <div className="w-11 h-6 bg-navy-200 dark:bg-navy-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-navy-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-navy-600 peer-checked:bg-primary-600"></div>
@@ -552,14 +650,23 @@ const SettingsPage = () => {
 
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="font-medium text-navy-900 dark:text-white">Vote Notifications</h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">When someone votes on your content</p>
+                      <h3 className="font-medium text-navy-900 dark:text-white">
+                        Vote Notifications
+                      </h3>
+                      <p className="text-sm text-navy-600 dark:text-navy-400">
+                        When someone votes on your content
+                      </p>
                     </div>
                     <label className="relative inline-flex items-center cursor-pointer">
                       <input
                         type="checkbox"
                         checked={preferences.voteNotifications}
-                        onChange={(e) => handlePreferencesChange('voteNotifications', e.target.checked)}
+                        onChange={e =>
+                          handlePreferencesChange(
+                            'voteNotifications',
+                            e.target.checked
+                          )
+                        }
                         className="sr-only peer"
                       />
                       <div className="w-11 h-6 bg-navy-200 dark:bg-navy-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-navy-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-navy-600 peer-checked:bg-primary-600"></div>
@@ -575,7 +682,7 @@ const SettingsPage = () => {
               <h2 className="text-xl font-semibold text-navy-900 dark:text-white mb-6">
                 Appearance Settings
               </h2>
-              
+
               <div className="space-y-6">
                 <div className="flex items-center justify-between">
                   <div>
@@ -586,10 +693,7 @@ const SettingsPage = () => {
                       Choose your preferred theme
                     </p>
                   </div>
-                  <button
-                    onClick={toggleTheme}
-                    className="btn-outline"
-                  >
+                  <button onClick={toggleTheme} className="btn-outline">
                     {theme === 'dark' ? (
                       <>
                         <FiSun className="w-4 h-4 mr-2" />
@@ -631,14 +735,15 @@ const SettingsPage = () => {
               <h2 className="text-xl font-semibold text-red-900 dark:text-red-100 mb-6">
                 Danger Zone
               </h2>
-              
+
               <div className="space-y-6">
                 <div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
                   <h3 className="text-lg font-medium text-red-900 dark:text-red-100 mb-2">
                     Delete Account
                   </h3>
                   <p className="text-sm text-red-700 dark:text-red-300 mb-4">
-                    Once you delete your account, there is no going back. Please be certain.
+                    Once you delete your account, there is no going back. Please
+                    be certain.
                   </p>
                   <button
                     onClick={handleDeleteAccount}
@@ -646,7 +751,9 @@ const SettingsPage = () => {
                     className="btn-danger disabled:opacity-50"
                   >
                     <FiTrash2 className="w-4 h-4 mr-2" />
-                    {deleteAccountMutation.isLoading ? 'Deleting...' : 'Delete Account'}
+                    {deleteAccountMutation.isLoading
+                      ? 'Deleting...'
+                      : 'Delete Account'}
                   </button>
                 </div>
               </div>
@@ -655,7 +762,7 @@ const SettingsPage = () => {
         </motion.div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default SettingsPage 
\ No newline at end of file
+export default SettingsPage;
diff --git a/client/src/pages/TagManagementPage.jsx b/client/src/pages/TagManagementPage.jsx
index ec3b779..42f29d0 100644
--- a/client/src/pages/TagManagementPage.jsx
+++ b/client/src/pages/TagManagementPage.jsx
@@ -1,88 +1,92 @@
-import { useState, useEffect } from 'react'
-import { useQuery, useMutation, useQueryClient } from 'react-query'
-import { motion } from 'framer-motion'
-import { toast } from 'react-hot-toast'
-import { 
-  FiTag, 
-  FiPlus, 
-  FiEdit, 
-  FiTrash2, 
+import { useState, useEffect } from 'react';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { motion } from 'framer-motion';
+import { toast } from 'react-hot-toast';
+import {
+  FiTag,
+  FiPlus,
+  FiEdit,
+  FiTrash2,
   FiSearch,
   FiTrendingUp,
   FiMessageSquare,
   FiUsers,
   FiEye,
   FiX,
-  FiCheck
-} from 'react-icons/fi'
-import api from '../utils/api'
-import { useAuth } from '../contexts/AuthContext'
+  FiCheck,
+} from 'react-icons/fi';
+import api from '../utils/api';
+import { useAuth } from '../contexts/AuthContext';
 
 const TagManagementPage = () => {
-  const { user } = useAuth()
-  const queryClient = useQueryClient()
-  const [searchTerm, setSearchTerm] = useState('')
-  const [showCreateForm, setShowCreateForm] = useState(false)
-  const [editingTag, setEditingTag] = useState(null)
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [editingTag, setEditingTag] = useState(null);
   const [formData, setFormData] = useState({
     name: '',
     description: '',
-    color: '#3B82F6'
-  })
+    color: '#3B82F6',
+  });
 
   // Fetch tags data
-  const { data: tagsData, isLoading, error } = useQuery(
+  const {
+    data: tagsData,
+    isLoading,
+    error,
+  } = useQuery(
     ['tags-management'],
-    () => api.get('/admin/tags').then(res => res.data),
+    () => api.get('api/admin/tags').then(res => res.data),
     {
       staleTime: 300000, // 5 minutes
       refetchOnWindowFocus: false,
     }
-  )
+  );
 
   // Mutations
   const createTagMutation = useMutation(
-    (tagData) => api.post('/admin/tags', tagData),
+    tagData => api.post('api/admin/tags', tagData),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['tags-management'])
-        setFormData({ name: '', description: '', color: '#3B82F6' })
-        setShowCreateForm(false)
-        toast.success('Tag created successfully!')
+        queryClient.invalidateQueries(['tags-management']);
+        setFormData({ name: '', description: '', color: '#3B82F6' });
+        setShowCreateForm(false);
+        toast.success('Tag created successfully!');
+      },
+      onError: error => {
+        toast.error(error.response?.data?.message || 'Failed to create tag');
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to create tag')
-      }
     }
-  )
+  );
 
   const updateTagMutation = useMutation(
-    ({ tagId, tagData }) => api.put(`/admin/tags/${tagId}`, tagData),
+    ({ tagId, tagData }) => api.put(`api/admin/tags/${tagId}`, tagData),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['tags-management'])
-        setEditingTag(null)
-        setFormData({ name: '', description: '', color: '#3B82F6' })
-        toast.success('Tag updated successfully!')
+        queryClient.invalidateQueries(['tags-management']);
+        setEditingTag(null);
+        setFormData({ name: '', description: '', color: '#3B82F6' });
+        toast.success('Tag updated successfully!');
+      },
+      onError: error => {
+        toast.error(error.response?.data?.message || 'Failed to update tag');
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to update tag')
-      }
     }
-  )
+  );
 
   const deleteTagMutation = useMutation(
-    (tagId) => api.delete(`/admin/tags/${tagId}`),
+    tagId => api.delete(`api/admin/tags/${tagId}`),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['tags-management'])
-        toast.success('Tag deleted successfully!')
+        queryClient.invalidateQueries(['tags-management']);
+        toast.success('Tag deleted successfully!');
+      },
+      onError: error => {
+        toast.error(error.response?.data?.message || 'Failed to delete tag');
       },
-      onError: (error) => {
-        toast.error(error.response?.data?.message || 'Failed to delete tag')
-      }
     }
-  )
+  );
 
   // Check if user is admin
   if (!user || user.role !== 'admin') {
@@ -96,7 +100,7 @@ const TagManagementPage = () => {
           You don't have permission to access tag management.
         </p>
       </div>
-    )
+    );
   }
 
   if (isLoading) {
@@ -106,12 +110,15 @@ const TagManagementPage = () => {
           <div className="h-8 bg-navy-200 dark:bg-navy-700 rounded w-1/4"></div>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
             {[...Array(6)].map((_, i) => (
-              <div key={i} className="h-32 bg-navy-200 dark:bg-navy-700 rounded"></div>
+              <div
+                key={i}
+                className="h-32 bg-navy-200 dark:bg-navy-700 rounded"
+              ></div>
             ))}
           </div>
         </div>
       </div>
-    )
+    );
   }
 
   if (error) {
@@ -121,56 +128,69 @@ const TagManagementPage = () => {
           Error loading tags: {error.message}
         </p>
       </div>
-    )
+    );
   }
 
-  const { tags, stats } = tagsData
+  const { tags, stats } = tagsData;
 
-  const filteredTags = tags.filter(tag =>
-    tag.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    tag.description.toLowerCase().includes(searchTerm.toLowerCase())
-  )
+  const filteredTags = tags.filter(
+    tag =>
+      tag.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      tag.description.toLowerCase().includes(searchTerm.toLowerCase())
+  );
 
-  const handleSubmit = (e) => {
-    e.preventDefault()
+  const handleSubmit = e => {
+    e.preventDefault();
     if (!formData.name.trim()) {
-      toast.error('Tag name is required')
-      return
+      toast.error('Tag name is required');
+      return;
     }
-    
+
     if (editingTag) {
-      updateTagMutation.mutate({ tagId: editingTag._id, tagData: formData })
+      updateTagMutation.mutate({ tagId: editingTag._id, tagData: formData });
     } else {
-      createTagMutation.mutate(formData)
+      createTagMutation.mutate(formData);
     }
-  }
+  };
 
-  const handleEdit = (tag) => {
-    setEditingTag(tag)
+  const handleEdit = tag => {
+    setEditingTag(tag);
     setFormData({
       name: tag.name,
       description: tag.description,
-      color: tag.color
-    })
-    setShowCreateForm(true)
-  }
+      color: tag.color,
+    });
+    setShowCreateForm(true);
+  };
 
-  const handleDelete = (tagId) => {
-    if (window.confirm('Are you sure you want to delete this tag? This action cannot be undone.')) {
-      deleteTagMutation.mutate(tagId)
+  const handleDelete = tagId => {
+    if (
+      window.confirm(
+        'Are you sure you want to delete this tag? This action cannot be undone.'
+      )
+    ) {
+      deleteTagMutation.mutate(tagId);
     }
-  }
+  };
 
   const handleCancel = () => {
-    setShowCreateForm(false)
-    setEditingTag(null)
-    setFormData({ name: '', description: '', color: '#3B82F6' })
-  }
+    setShowCreateForm(false);
+    setEditingTag(null);
+    setFormData({ name: '', description: '', color: '#3B82F6' });
+  };
 
   const colorOptions = [
-    '#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6',
-    '#06B6D4', '#84CC16', '#F97316', '#EC4899', '#6B7280'
-  ]
+    '#3B82F6',
+    '#10B981',
+    '#F59E0B',
+    '#EF4444',
+    '#8B5CF6',
+    '#06B6D4',
+    '#84CC16',
+    '#F97316',
+    '#EC4899',
+    '#6B7280',
+  ];
 
   return (
     <div className="max-w-6xl mx-auto">
@@ -196,8 +216,12 @@ const TagManagementPage = () => {
               <FiTag className="w-6 h-6 text-blue-600 dark:text-blue-400" />
             </div>
             <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">Total Tags</p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">{stats.totalTags}</p>
+              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
+                Total Tags
+              </p>
+              <p className="text-2xl font-bold text-navy-900 dark:text-white">
+                {stats.totalTags}
+              </p>
             </div>
           </div>
         </div>
@@ -208,8 +232,12 @@ const TagManagementPage = () => {
               <FiMessageSquare className="w-6 h-6 text-green-600 dark:text-green-400" />
             </div>
             <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">Tagged Questions</p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">{stats.taggedQuestions}</p>
+              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
+                Tagged Questions
+              </p>
+              <p className="text-2xl font-bold text-navy-900 dark:text-white">
+                {stats.taggedQuestions}
+              </p>
             </div>
           </div>
         </div>
@@ -220,8 +248,12 @@ const TagManagementPage = () => {
               <FiTrendingUp className="w-6 h-6 text-yellow-600 dark:text-yellow-400" />
             </div>
             <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">Most Popular</p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">{stats.mostPopularTag}</p>
+              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
+                Most Popular
+              </p>
+              <p className="text-2xl font-bold text-navy-900 dark:text-white">
+                {stats.mostPopularTag}
+              </p>
             </div>
           </div>
         </div>
@@ -232,8 +264,12 @@ const TagManagementPage = () => {
               <FiUsers className="w-6 h-6 text-purple-600 dark:text-purple-400" />
             </div>
             <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">Active Tags</p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">{stats.activeTags}</p>
+              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
+                Active Tags
+              </p>
+              <p className="text-2xl font-bold text-navy-900 dark:text-white">
+                {stats.activeTags}
+              </p>
             </div>
           </div>
         </div>
@@ -252,15 +288,12 @@ const TagManagementPage = () => {
             type="text"
             placeholder="Search tags..."
             value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
+            onChange={e => setSearchTerm(e.target.value)}
             className="w-full pl-10 pr-4 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
           />
         </div>
-        
-        <button
-          onClick={() => setShowCreateForm(true)}
-          className="btn-primary"
-        >
+
+        <button onClick={() => setShowCreateForm(true)} className="btn-primary">
           <FiPlus className="w-4 h-4 mr-2" />
           Create Tag
         </button>
@@ -277,7 +310,7 @@ const TagManagementPage = () => {
           <h3 className="text-lg font-semibold text-navy-900 dark:text-white mb-4">
             {editingTag ? 'Edit Tag' : 'Create New Tag'}
           </h3>
-          
+
           <form onSubmit={handleSubmit} className="space-y-4">
             <div>
               <label className="block text-sm font-medium text-navy-700 dark:text-navy-300 mb-2">
@@ -286,7 +319,9 @@ const TagManagementPage = () => {
               <input
                 type="text"
                 value={formData.name}
-                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                onChange={e =>
+                  setFormData({ ...formData, name: e.target.value })
+                }
                 placeholder="Enter tag name..."
                 className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
                 required
@@ -299,7 +334,9 @@ const TagManagementPage = () => {
               </label>
               <textarea
                 value={formData.description}
-                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                onChange={e =>
+                  setFormData({ ...formData, description: e.target.value })
+                }
                 placeholder="Enter tag description..."
                 rows="3"
                 className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white resize-none"
@@ -314,11 +351,13 @@ const TagManagementPage = () => {
                 <input
                   type="color"
                   value={formData.color}
-                  onChange={(e) => setFormData({ ...formData, color: e.target.value })}
+                  onChange={e =>
+                    setFormData({ ...formData, color: e.target.value })
+                  }
                   className="w-12 h-10 border border-navy-300 dark:border-navy-600 rounded-lg cursor-pointer"
                 />
                 <div className="flex space-x-2">
-                  {colorOptions.map((color) => (
+                  {colorOptions.map(color => (
                     <button
                       key={color}
                       type="button"
@@ -341,10 +380,16 @@ const TagManagementPage = () => {
               </button>
               <button
                 type="submit"
-                disabled={createTagMutation.isLoading || updateTagMutation.isLoading}
+                disabled={
+                  createTagMutation.isLoading || updateTagMutation.isLoading
+                }
                 className="btn-primary disabled:opacity-50"
               >
-                {createTagMutation.isLoading || updateTagMutation.isLoading ? 'Saving...' : (editingTag ? 'Update Tag' : 'Create Tag')}
+                {createTagMutation.isLoading || updateTagMutation.isLoading
+                  ? 'Saving...'
+                  : editingTag
+                    ? 'Update Tag'
+                    : 'Create Tag'}
               </button>
             </div>
           </form>
@@ -368,7 +413,7 @@ const TagManagementPage = () => {
           >
             <div className="flex items-start justify-between mb-4">
               <div className="flex items-center space-x-3">
-                <div 
+                <div
                   className="w-4 h-4 rounded-full"
                   style={{ backgroundColor: tag.color }}
                 />
@@ -376,7 +421,7 @@ const TagManagementPage = () => {
                   {tag.name}
                 </h3>
               </div>
-              
+
               <div className="flex items-center space-x-2">
                 <button
                   onClick={() => handleEdit(tag)}
@@ -410,7 +455,7 @@ const TagManagementPage = () => {
                   <span>{tag.viewCount} views</span>
                 </div>
               </div>
-              
+
               <div className="flex items-center space-x-1">
                 <FiTrendingUp className="w-4 h-4" />
                 <span>{tag.trendingScore}</span>
@@ -419,12 +464,16 @@ const TagManagementPage = () => {
 
             <div className="mt-4 pt-4 border-t border-navy-200 dark:border-navy-700">
               <div className="flex items-center justify-between text-xs text-navy-500 dark:text-navy-400">
-                <span>Created {new Date(tag.createdAt).toLocaleDateString()}</span>
-                <span className={`px-2 py-1 rounded-full ${
-                  tag.isActive 
-                    ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                    : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
-                }`}>
+                <span>
+                  Created {new Date(tag.createdAt).toLocaleDateString()}
+                </span>
+                <span
+                  className={`px-2 py-1 rounded-full ${
+                    tag.isActive
+                      ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+                      : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+                  }`}
+                >
                   {tag.isActive ? 'Active' : 'Inactive'}
                 </span>
               </div>
@@ -440,15 +489,14 @@ const TagManagementPage = () => {
             {searchTerm ? 'No tags found' : 'No tags yet'}
           </h3>
           <p className="text-navy-600 dark:text-navy-400">
-            {searchTerm 
+            {searchTerm
               ? 'Try adjusting your search terms'
-              : 'Create your first tag to get started'
-            }
+              : 'Create your first tag to get started'}
           </p>
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default TagManagementPage 
\ No newline at end of file
+export default TagManagementPage;
diff --git a/client/src/pages/UserProfilePage.jsx b/client/src/pages/UserProfilePage.jsx
index 05bba77..9ef1de5 100644
--- a/client/src/pages/UserProfilePage.jsx
+++ b/client/src/pages/UserProfilePage.jsx
@@ -1,13 +1,13 @@
-import { useState, useEffect } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-import { useQuery } from 'react-query'
-import { motion } from 'framer-motion'
-import { 
-  FiUser, 
-  FiMail, 
-  FiCalendar, 
-  FiAward, 
-  FiMessageSquare, 
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useQuery } from 'react-query';
+import { motion } from 'framer-motion';
+import {
+  FiUser,
+  FiMail,
+  FiCalendar,
+  FiAward,
+  FiMessageSquare,
   FiThumbsUp,
   FiEye,
   FiTag,
@@ -17,27 +17,31 @@ import {
   FiCheck,
   FiX,
   FiStar,
-  FiTrendingUp
-} from 'react-icons/fi'
-import api from '../utils/api'
-import { useAuth } from '../contexts/AuthContext'
-import QuestionCard from '../components/QuestionCard'
+  FiTrendingUp,
+} from 'react-icons/fi';
+import api from '../utils/api';
+import { useAuth } from '../contexts/AuthContext';
+import QuestionCard from '../components/QuestionCard';
 
 const UserProfilePage = () => {
-  const { username } = useParams()
-  const navigate = useNavigate()
-  const { user: currentUser } = useAuth()
-  const [activeTab, setActiveTab] = useState('questions')
+  const { username } = useParams();
+  const navigate = useNavigate();
+  const { user: currentUser } = useAuth();
+  const [activeTab, setActiveTab] = useState('questions');
 
   // Fetch user profile data
-  const { data: profileData, isLoading, error } = useQuery(
+  const {
+    data: profileData,
+    isLoading,
+    error,
+  } = useQuery(
     ['user-profile', username],
-    () => api.get(`/users/profile/${username}`).then(res => res.data),
+    () => api.get(`api/users/profile/${username}`).then(res => res.data),
     {
       staleTime: 300000, // 5 minutes
       refetchOnWindowFocus: false,
     }
-  )
+  );
 
   if (isLoading) {
     return (
@@ -51,7 +55,7 @@ const UserProfilePage = () => {
           </div>
         </div>
       </div>
-    )
+    );
   }
 
   if (error) {
@@ -64,39 +68,66 @@ const UserProfilePage = () => {
           Back to Questions
         </button>
       </div>
-    )
+    );
   }
 
-  const { user, questions, answers, stats } = profileData
-  const isOwnProfile = currentUser && currentUser._id === user._id
+  const { user, questions, answers, stats } = profileData;
+  const isOwnProfile = currentUser && currentUser._id === user._id;
 
   const tabs = [
-    { id: 'questions', label: 'Questions', count: questions.length, icon: FiMessageSquare },
+    {
+      id: 'questions',
+      label: 'Questions',
+      count: questions.length,
+      icon: FiMessageSquare,
+    },
     { id: 'answers', label: 'Answers', count: answers.length, icon: FiCheck },
-    { id: 'activity', label: 'Activity', count: stats.totalActivity, icon: FiTrendingUp }
-  ]
+    {
+      id: 'activity',
+      label: 'Activity',
+      count: stats.totalActivity,
+      icon: FiTrendingUp,
+    },
+  ];
 
-  const formatDate = (date) => {
+  const formatDate = date => {
     return new Date(date).toLocaleDateString('en-US', {
       year: 'numeric',
       month: 'long',
-      day: 'numeric'
-    })
-  }
+      day: 'numeric',
+    });
+  };
 
-  const getReputationColor = (reputation) => {
-    if (reputation >= 1000) return 'text-yellow-600 dark:text-yellow-400'
-    if (reputation >= 500) return 'text-green-600 dark:text-green-400'
-    if (reputation >= 100) return 'text-blue-600 dark:text-blue-400'
-    return 'text-navy-600 dark:text-navy-400'
-  }
+  const getReputationColor = reputation => {
+    if (reputation >= 1000) return 'text-yellow-600 dark:text-yellow-400';
+    if (reputation >= 500) return 'text-green-600 dark:text-green-400';
+    if (reputation >= 100) return 'text-blue-600 dark:text-blue-400';
+    return 'text-navy-600 dark:text-navy-400';
+  };
 
-  const getReputationBadge = (reputation) => {
-    if (reputation >= 1000) return { text: 'Expert', color: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' }
-    if (reputation >= 500) return { text: 'Contributor', color: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' }
-    if (reputation >= 100) return { text: 'Member', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' }
-    return { text: 'New User', color: 'bg-navy-100 text-navy-800 dark:bg-navy-900 dark:text-navy-200' }
-  }
+  const getReputationBadge = reputation => {
+    if (reputation >= 1000)
+      return {
+        text: 'Expert',
+        color:
+          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
+      };
+    if (reputation >= 500)
+      return {
+        text: 'Contributor',
+        color:
+          'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+      };
+    if (reputation >= 100)
+      return {
+        text: 'Member',
+        color: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
+      };
+    return {
+      text: 'New User',
+      color: 'bg-navy-100 text-navy-800 dark:bg-navy-900 dark:text-navy-200',
+    };
+  };
 
   return (
     <div className="max-w-6xl mx-auto">
@@ -121,12 +152,14 @@ const UserProfilePage = () => {
             <div className="w-32 h-32 bg-gradient-to-br from-primary-400 to-primary-600 rounded-full flex items-center justify-center mb-4">
               <FiUser className="w-16 h-16 text-white" />
             </div>
-            
+
             <div className="text-center lg:text-left">
               <h1 className="text-2xl font-bold text-navy-900 dark:text-white mb-2">
                 {user.username}
               </h1>
-              <div className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${getReputationBadge(user.reputation).color}`}>
+              <div
+                className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${getReputationBadge(user.reputation).color}`}
+              >
                 {getReputationBadge(user.reputation).text}
               </div>
             </div>
@@ -136,14 +169,16 @@ const UserProfilePage = () => {
           <div className="flex-1">
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
               <div className="text-center">
-                <div className={`text-3xl font-bold ${getReputationColor(user.reputation)}`}>
+                <div
+                  className={`text-3xl font-bold ${getReputationColor(user.reputation)}`}
+                >
                   {user.reputation}
                 </div>
                 <div className="text-sm text-navy-600 dark:text-navy-400">
                   Reputation
                 </div>
               </div>
-              
+
               <div className="text-center">
                 <div className="text-3xl font-bold text-navy-900 dark:text-white">
                   {questions.length}
@@ -152,7 +187,7 @@ const UserProfilePage = () => {
                   Questions
                 </div>
               </div>
-              
+
               <div className="text-center">
                 <div className="text-3xl font-bold text-navy-900 dark:text-white">
                   {answers.length}
@@ -171,7 +206,7 @@ const UserProfilePage = () => {
                   <span>{user.email}</span>
                 </div>
               )}
-              
+
               <div className="flex items-center text-navy-600 dark:text-navy-400">
                 <FiCalendar className="w-4 h-4 mr-2" />
                 <span>Joined {formatDate(user.createdAt)}</span>
@@ -211,28 +246,36 @@ const UserProfilePage = () => {
           <div className="text-2xl font-bold text-primary-600 dark:text-primary-400">
             {stats.totalViews}
           </div>
-          <div className="text-sm text-navy-600 dark:text-navy-400">Total Views</div>
+          <div className="text-sm text-navy-600 dark:text-navy-400">
+            Total Views
+          </div>
         </div>
-        
+
         <div className="card p-4 text-center">
           <div className="text-2xl font-bold text-green-600 dark:text-green-400">
             {stats.acceptedAnswers}
           </div>
-          <div className="text-sm text-navy-600 dark:text-navy-400">Accepted Answers</div>
+          <div className="text-sm text-navy-600 dark:text-navy-400">
+            Accepted Answers
+          </div>
         </div>
-        
+
         <div className="card p-4 text-center">
           <div className="text-2xl font-bold text-yellow-600 dark:text-yellow-400">
             {stats.totalVotes}
           </div>
-          <div className="text-sm text-navy-600 dark:text-navy-400">Total Votes</div>
+          <div className="text-sm text-navy-600 dark:text-navy-400">
+            Total Votes
+          </div>
         </div>
-        
+
         <div className="card p-4 text-center">
           <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
             {stats.questionsThisMonth}
           </div>
-          <div className="text-sm text-navy-600 dark:text-navy-400">This Month</div>
+          <div className="text-sm text-navy-600 dark:text-navy-400">
+            This Month
+          </div>
         </div>
       </motion.div>
 
@@ -245,8 +288,8 @@ const UserProfilePage = () => {
       >
         <div className="border-b border-navy-200 dark:border-navy-700">
           <nav className="flex space-x-8">
-            {tabs.map((tab) => {
-              const Icon = tab.icon
+            {tabs.map(tab => {
+              const Icon = tab.icon;
               return (
                 <button
                   key={tab.id}
@@ -263,7 +306,7 @@ const UserProfilePage = () => {
                     {tab.count}
                   </span>
                 </button>
-              )
+              );
             })}
           </nav>
         </div>
@@ -278,7 +321,7 @@ const UserProfilePage = () => {
         {activeTab === 'questions' && (
           <div className="space-y-6">
             {questions.length > 0 ? (
-              questions.map((question) => (
+              questions.map(question => (
                 <QuestionCard key={question._id} question={question} />
               ))
             ) : (
@@ -288,10 +331,9 @@ const UserProfilePage = () => {
                   No questions yet
                 </h3>
                 <p className="text-navy-600 dark:text-navy-400">
-                  {isOwnProfile 
+                  {isOwnProfile
                     ? "You haven't asked any questions yet. Start contributing to the community!"
-                    : "This user hasn't asked any questions yet."
-                  }
+                    : "This user hasn't asked any questions yet."}
                 </p>
                 {isOwnProfile && (
                   <button
@@ -309,7 +351,7 @@ const UserProfilePage = () => {
         {activeTab === 'answers' && (
           <div className="space-y-6">
             {answers.length > 0 ? (
-              answers.map((answer) => (
+              answers.map(answer => (
                 <div key={answer._id} className="card p-6">
                   <div className="flex items-start space-x-4">
                     <div className="flex flex-col items-center space-y-2">
@@ -317,17 +359,18 @@ const UserProfilePage = () => {
                         <FiThumbsUp className="w-5 h-5" />
                       </button>
                       <span className="text-lg font-semibold text-navy-900 dark:text-white">
-                        {answer.votes.upvotes.length - answer.votes.downvotes.length}
+                        {answer.votes.upvotes.length -
+                          answer.votes.downvotes.length}
                       </span>
                       <button className="p-2 text-navy-400 hover:text-red-600 dark:hover:text-red-400">
                         <FiThumbsUp className="w-5 h-5 transform rotate-180" />
                       </button>
                     </div>
-                    
+
                     <div className="flex-1">
                       <div className="flex items-center justify-between mb-3">
                         <h3 className="text-lg font-semibold text-navy-900 dark:text-white">
-                          <a 
+                          <a
                             href={`/questions/${answer.question._id}`}
                             className="hover:text-primary-600 dark:hover:text-primary-400"
                           >
@@ -337,16 +380,20 @@ const UserProfilePage = () => {
                         {answer.isAccepted && (
                           <div className="flex items-center text-green-600 dark:text-green-400">
                             <FiCheck className="w-4 h-4 mr-1" />
-                            <span className="text-sm font-medium">Accepted</span>
+                            <span className="text-sm font-medium">
+                              Accepted
+                            </span>
                           </div>
                         )}
                       </div>
-                      
-                      <div 
+
+                      <div
                         className="prose prose-navy dark:prose-invert max-w-none mb-4"
-                        dangerouslySetInnerHTML={{ __html: answer.content.substring(0, 200) + '...' }}
+                        dangerouslySetInnerHTML={{
+                          __html: answer.content.substring(0, 200) + '...',
+                        }}
                       />
-                      
+
                       <div className="flex items-center justify-between text-sm text-navy-500 dark:text-navy-400">
                         <div className="flex items-center space-x-4">
                           <div className="flex items-center space-x-1">
@@ -371,10 +418,9 @@ const UserProfilePage = () => {
                   No answers yet
                 </h3>
                 <p className="text-navy-600 dark:text-navy-400">
-                  {isOwnProfile 
+                  {isOwnProfile
                     ? "You haven't answered any questions yet. Start helping others!"
-                    : "This user hasn't answered any questions yet."
-                  }
+                    : "This user hasn't answered any questions yet."}
                 </p>
                 {isOwnProfile && (
                   <button
@@ -397,11 +443,20 @@ const UserProfilePage = () => {
               </h3>
               <div className="space-y-4">
                 {stats.recentActivity?.map((activity, index) => (
-                  <div key={index} className="flex items-center space-x-3 p-3 bg-navy-50 dark:bg-navy-800 rounded-lg">
+                  <div
+                    key={index}
+                    className="flex items-center space-x-3 p-3 bg-navy-50 dark:bg-navy-800 rounded-lg"
+                  >
                     <div className="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
-                      {activity.type === 'question' && <FiMessageSquare className="w-4 h-4 text-primary-600 dark:text-primary-400" />}
-                      {activity.type === 'answer' && <FiCheck className="w-4 h-4 text-green-600 dark:text-green-400" />}
-                      {activity.type === 'vote' && <FiThumbsUp className="w-4 h-4 text-yellow-600 dark:text-yellow-400" />}
+                      {activity.type === 'question' && (
+                        <FiMessageSquare className="w-4 h-4 text-primary-600 dark:text-primary-400" />
+                      )}
+                      {activity.type === 'answer' && (
+                        <FiCheck className="w-4 h-4 text-green-600 dark:text-green-400" />
+                      )}
+                      {activity.type === 'vote' && (
+                        <FiThumbsUp className="w-4 h-4 text-yellow-600 dark:text-yellow-400" />
+                      )}
                     </div>
                     <div className="flex-1">
                       <p className="text-sm text-navy-700 dark:text-navy-300">
@@ -419,7 +474,7 @@ const UserProfilePage = () => {
         )}
       </motion.div>
     </div>
-  )
-}
+  );
+};
 
-export default UserProfilePage 
\ No newline at end of file
+export default UserProfilePage;
diff --git a/client/src/utils/api.js b/client/src/utils/api.js
index 4d43f6e..f9279bb 100644
--- a/client/src/utils/api.js
+++ b/client/src/utils/api.js
@@ -1,61 +1,76 @@
-import axios from 'axios'
+import axios from 'axios';
 
 const api = axios.create({
-  baseURL: '/api',
+  baseURL: import.meta.env.VITE_API_URL,
+  withCredentials: true,
   headers: {
     'Content-Type': 'application/json',
   },
-})
+});
 
 // Request interceptor to add auth token
 api.interceptors.request.use(
-  (config) => {
-    const token = localStorage.getItem('token')
-    console.log('🔍 API Debug - Token exists:', !!token)
-    console.log('🔍 API Debug - Request URL:', config.url)
-    console.log('🔍 API Debug - Request method:', config.method)
-    
+  config => {
+    const token = localStorage.getItem('token');
+    console.log('🔍 API Debug - Token exists:', !!token);
+    console.log('🔍 API Debug - Request URL:', config.url);
+    console.log('🔍 API Debug - Request method:', config.method);
+
     if (token) {
-      config.headers.Authorization = `Bearer ${token}`
-      console.log('🔍 API Debug - Authorization header set:', `Bearer ${token.substring(0, 20)}...`)
+      config.headers.Authorization = `Bearer ${token}`;
+      console.log(
+        '🔍 API Debug - Authorization header set:',
+        `Bearer ${token.substring(0, 20)}...`
+      );
     } else {
-      console.log('⚠️ API Debug - No token found in localStorage')
+      console.log('⚠️ API Debug - No token found in localStorage');
     }
-    return config
+    return config;
   },
-  (error) => {
-    console.log('❌ API Debug - Request interceptor error:', error)
-    return Promise.reject(error)
+  error => {
+    console.log('❌ API Debug - Request interceptor error:', error);
+    return Promise.reject(error);
   }
-)
+);
 
 // Response interceptor to handle errors
 api.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    console.log('🔍 API Debug - Response error:', error.response?.status, error.response?.data)
-    
+  response => response,
+  error => {
+    console.log(
+      '🔍 API Debug - Response error:',
+      error.response?.status,
+      error.response?.data
+    );
+
     if (error.response?.status === 401) {
-      const errorMessage = error.response?.data?.message || 'Authentication failed'
-      console.log('🔍 API Debug - 401 error message:', errorMessage)
-      
+      const errorMessage =
+        error.response?.data?.message || 'Authentication failed';
+      console.log('🔍 API Debug - 401 error message:', errorMessage);
+
       // Only redirect if it's a token-related error, not other auth issues
-      if (errorMessage.includes('token') || errorMessage.includes('expired') || errorMessage.includes('Invalid')) {
-        console.log('🔍 API Debug - Token error detected, clearing localStorage and redirecting')
-        localStorage.removeItem('token')
-        
+      if (
+        errorMessage.includes('token') ||
+        errorMessage.includes('expired') ||
+        errorMessage.includes('Invalid')
+      ) {
+        console.log(
+          '🔍 API Debug - Token error detected, clearing localStorage and redirecting'
+        );
+        localStorage.removeItem('token');
+
         // Use a flag to prevent multiple redirects
         if (!window.isRedirecting) {
-          window.isRedirecting = true
+          window.isRedirecting = true;
           setTimeout(() => {
-            window.location.href = '/login'
-            window.isRedirecting = false
-          }, 100)
+            window.location.href = '/login';
+            window.isRedirecting = false;
+          }, 100);
         }
       }
     }
-    return Promise.reject(error)
+    return Promise.reject(error);
   }
-)
+);
 
-export default api 
\ No newline at end of file
+export default api;