feat(system): implement 404 page with activity logging and change profile route format

Backend Changes:
- Added public API endpoint /api/public/log-404 (no auth required)
- Created backend/src/routes/public.js for public endpoints
- Added ACTIONS.SYSTEM_404 and CATEGORIES.system to activity log service
- Registered public routes in app.js

Frontend Changes:
- Created NotFoundPage.jsx with standalone layout (no auth required)
- Added publicAPI.log404() to log 404 access attempts
- Logs both authenticated and anonymous users
- Changed profile route from /@:username to /u/:username
- Made profile route public (removed ProtectedRoute wrapper)
- Updated all profile links from /@${username} to /u/${username} in:
  - ChatMessage.jsx
  - DashboardMatchCard.jsx
  - MatchRequestCards.jsx
  - MatchCard.jsx
  - UserListItem.jsx
  - MatchChatPage.jsx
  - PublicProfilePage.jsx

Fixes:
- React Router doesn't support @ in path segments
- 404 page now accessible to non-authenticated users without redirect
- Profile route no longer catches all unmatched routes

backend/src/app.js

@@ -131,6 +131,9 @@ app.get('/api/debug/ip', (req, res) => {
 // Apply rate limiting to all API routes
 app.use('/api/', apiLimiter);
 
+// Public routes (no authentication required)
+app.use('/api/public', require('./routes/public'));
+
 // API routes
 app.use('/api/auth', require('./routes/auth'));
 app.use('/api/users', require('./routes/users'));

backend/src/routes/public.js

@@ -0,0 +1,49 @@
+const express = require('express');
+const { ACTIONS, log: activityLog } = require('../services/activityLog');
+const { getClientIP } = require('../utils/request');
+
+const router = express.Router();
+
+/**
+ * POST /api/public/log-404
+ * Log 404 page access (no authentication required)
+ * Logs both authenticated and unauthenticated users
+ */
+router.post('/log-404', async (req, res) => {
+  try {
+    const { path, search } = req.body;
+
+    // Get user info if authenticated (optional)
+    const userId = req.user?.id || null;
+    const username = req.user?.username || 'anonymous';
+
+    // Construct full path
+    const fullPath = search ? `${path}${search}` : path;
+
+    // Log to activity logs
+    activityLog({
+      userId,
+      username,
+      ipAddress: getClientIP(req),
+      action: ACTIONS.SYSTEM_404,
+      resource: fullPath,
+      method: 'GET',
+      path: fullPath,
+      metadata: {
+        requestedPath: path,
+        queryString: search || null,
+        userAgent: req.headers['user-agent'] || null,
+        referer: req.headers.referer || null,
+      },
+      success: true,
+    });
+
+    res.json({ success: true, logged: true });
+  } catch (error) {
+    console.error('Error logging 404:', error);
+    // Don't fail the request if logging fails
+    res.json({ success: true, logged: false });
+  }
+});
+
+module.exports = router;

backend/src/services/activityLog.js

@@ -34,6 +34,9 @@ const ACTIONS = {
   CHAT_MESSAGE: 'chat.message',
   CHAT_JOIN_ROOM: 'chat.join_room',
   CHAT_LEAVE_ROOM: 'chat.leave_room',
+
+  // System actions
+  SYSTEM_404: 'system.404',
 };
 
 // Category mapping from action
@@ -43,6 +46,7 @@ const CATEGORIES = {
   'match': 'match',
   'admin': 'admin',
   'chat': 'chat',
+  'system': 'system',
 };
 
 /**

frontend/src/App.jsx

@@ -19,6 +19,7 @@ import HistoryPage from './pages/HistoryPage';
 import ProfilePage from './pages/ProfilePage';
 import PublicProfilePage from './pages/PublicProfilePage';
 import ActivityLogsPage from './pages/admin/ActivityLogsPage';
+import NotFoundPage from './pages/NotFoundPage';
 import VerificationBanner from './components/common/VerificationBanner';
 import InstallPWA from './components/pwa/InstallPWA';
 
@@ -210,18 +211,15 @@ function App() {
             }
           />
 
-          {/* Public Profile - must be before home route */}
-          <Route
-            path="/:username"
-            element={
-              <ProtectedRoute>
-                <PublicProfilePage />
-              </ProtectedRoute>
-            }
-          />
 
           {/* Home Page */}
           <Route path="/" element={<HomePage />} />
+
+          {/* Public Profile - /u/username format (no auth required) */}
+          <Route path="/u/:username" element={<PublicProfilePage />} />
+
+          {/* 404 Not Found - Catch all unmatched routes */}
+          <Route path="*" element={<NotFoundPage />} />
         </Routes>
       </AuthProvider>
     </BrowserRouter>

frontend/src/components/chat/ChatMessage.jsx

@@ -119,7 +119,7 @@ const ChatMessage = ({ message, user, participant, isOwn, formatTime }) => {
                 </span>
               )}
               <Link
-                to={`/@${user.username}`}
+                to={`/u/${user.username}`}
                 className="hover:underline hover:text-primary-600"
               >
                 {user.username}

frontend/src/components/dashboard/DashboardMatchCard.jsx

@@ -57,7 +57,7 @@ const DashboardMatchCard = ({ match }) => {
     <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow">
       <div className="flex items-start gap-4">
         {/* Avatar */}
-        <Link to={`/@${partner.username}`} className="flex-shrink-0 relative">
+        <Link to={`/u/${partner.username}`} className="flex-shrink-0 relative">
           <img
             src={partner.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${partner.username}`}
             alt={partner.username}
@@ -74,7 +74,7 @@ const DashboardMatchCard = ({ match }) => {
         <div className="flex-1 min-w-0">
           <div className="flex items-start justify-between">
             <div>
-              <Link to={`/@${partner.username}`}>
+              <Link to={`/u/${partner.username}`}>
                 <h3 className="font-semibold text-gray-900 hover:text-primary-600 transition-colors">
                   {partner.firstName && partner.lastName
                     ? `${partner.firstName} ${partner.lastName}`

frontend/src/components/dashboard/MatchRequestCards.jsx

@@ -11,7 +11,7 @@ export const IncomingRequestCard = ({ request, onAccept, onReject, processing })
   return (
     <div className="bg-white rounded-lg shadow-sm border border-amber-200 p-4">
       <div className="flex items-start gap-4">
-        <Link to={`/@${requester.username}`} className="flex-shrink-0">
+        <Link to={`/u/${requester.username}`} className="flex-shrink-0">
           <img
             src={requester.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${requester.username}`}
             alt={requester.username}
@@ -20,7 +20,7 @@ export const IncomingRequestCard = ({ request, onAccept, onReject, processing })
         </Link>
 
         <div className="flex-1 min-w-0">
-          <Link to={`/@${requester.username}`}>
+          <Link to={`/u/${requester.username}`}>
             <h4 className="font-medium text-gray-900 hover:text-primary-600 transition-colors">
               {requester.firstName && requester.lastName
                 ? `${requester.firstName} ${requester.lastName}`
@@ -69,7 +69,7 @@ export const OutgoingRequestCard = ({ request, onCancel, processing }) => {
   return (
     <div className="bg-white rounded-lg shadow-sm border border-blue-200 p-4">
       <div className="flex items-start gap-4">
-        <Link to={`/@${recipient.username}`} className="flex-shrink-0">
+        <Link to={`/u/${recipient.username}`} className="flex-shrink-0">
           <img
             src={recipient.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${recipient.username}`}
             alt={recipient.username}
@@ -78,7 +78,7 @@ export const OutgoingRequestCard = ({ request, onCancel, processing }) => {
         </Link>
 
         <div className="flex-1 min-w-0">
-          <Link to={`/@${recipient.username}`}>
+          <Link to={`/u/${recipient.username}`}>
             <h4 className="font-medium text-gray-900 hover:text-primary-600 transition-colors">
               {recipient.firstName && recipient.lastName
                 ? `${recipient.firstName} ${recipient.lastName}`

frontend/src/components/matches/MatchCard.jsx

@@ -16,7 +16,7 @@ const MatchCard = ({ match, onAccept, onReject, onOpenChat, processing }) => {
       <div className="flex items-start justify-between">
         <div className="flex-1">
           <div className="flex items-center gap-3 mb-2">
-            <Link to={`/@${match.partner.username}`} className="flex-shrink-0">
+            <Link to={`/u/${match.partner.username}`} className="flex-shrink-0">
               <img
                 src={match.partner.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${match.partner.username}`}
                 alt={match.partner.username}
@@ -24,7 +24,7 @@ const MatchCard = ({ match, onAccept, onReject, onOpenChat, processing }) => {
               />
             </Link>
             <div>
-              <Link to={`/@${match.partner.username}`}>
+              <Link to={`/u/${match.partner.username}`}>
                 <h3 className="font-semibold text-gray-900 hover:text-primary-600 transition-colors">
                   {match.partner.firstName && match.partner.lastName
                     ? `${match.partner.firstName} ${match.partner.lastName}`

frontend/src/components/users/UserListItem.jsx

@@ -46,7 +46,7 @@ const UserListItem = ({
 
   const usernameContent = linkToProfile ? (
     <Link
-      to={`/@${user.username}`}
+      to={`/u/${user.username}`}
       className={`${usernameClasses} hover:text-primary-600`}
     >
       {user.username}

frontend/src/pages/MatchChatPage.jsx

@@ -219,7 +219,7 @@ const MatchChatPage = () => {
         <div className="bg-primary-600 text-white p-4">
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-4">
-                <Link to={`/@${partner.username}`} className="flex-shrink-0">
+                <Link to={`/u/${partner.username}`} className="flex-shrink-0">
                   <Avatar
                     src={partner.avatar}
                     username={partner.username}
@@ -229,7 +229,7 @@ const MatchChatPage = () => {
                   />
                 </Link>
                 <div>
-                  <Link to={`/@${partner.username}`}>
+                  <Link to={`/u/${partner.username}`}>
                     <h2 className="text-xl font-bold hover:text-primary-100 transition-colors">
                       {partner.firstName && partner.lastName
                         ? `${partner.firstName} ${partner.lastName}`

frontend/src/pages/NotFoundPage.jsx

@@ -0,0 +1,83 @@
+import { useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Home, ArrowLeft } from 'lucide-react';
+import { publicAPI } from '../services/api';
+
+export default function NotFoundPage() {
+  const location = useLocation();
+
+  useEffect(() => {
+    // Log 404 access to activity logs (works for both logged in and non-logged in users)
+    const log404 = async () => {
+      try {
+        await publicAPI.log404(location.pathname, location.search);
+      } catch (err) {
+        // Silently fail - logging should never break user experience
+        console.debug('Failed to log 404:', err);
+      }
+    };
+
+    log404();
+  }, [location.pathname, location.search]);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Simple header */}
+      <header className="bg-white shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <Link to="/" className="flex items-center gap-2 text-primary-600 hover:text-primary-700">
+            <Home size={24} />
+            <span className="text-xl font-bold">spotlight.cam</span>
+          </Link>
+        </div>
+      </header>
+
+      <div className="min-h-screen flex items-center justify-center px-4 -mt-16">
+        <div className="max-w-md w-full text-center">
+          {/* 404 Icon */}
+          <div className="mb-8">
+            <div className="text-9xl font-bold text-primary-600 mb-4">404</div>
+            <h1 className="text-3xl font-bold text-gray-900 mb-2">
+              Page Not Found
+            </h1>
+            <p className="text-gray-600">
+              The page you're looking for doesn't exist or has been moved.
+            </p>
+          </div>
+
+          {/* Current Path */}
+          <div className="mb-8 p-4 bg-gray-100 rounded-lg">
+            <p className="text-sm text-gray-500 mb-1">Requested URL:</p>
+            <code className="text-sm text-gray-800 break-all">
+              {location.pathname}
+              {location.search}
+            </code>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+            <button
+              onClick={() => window.history.back()}
+              className="inline-flex items-center justify-center gap-2 px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              <ArrowLeft size={20} />
+              Go Back
+            </button>
+            <Link
+              to="/"
+              className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+            >
+              <Home size={20} />
+              Go Home
+            </Link>
+          </div>
+
+          {/* Help Text */}
+          <div className="mt-8 text-sm text-gray-500">
+            <p>If you believe this is an error, please contact support.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/PublicProfilePage.jsx

@@ -267,7 +267,7 @@ const PublicProfilePage = () => {
                     <div key={rating.id} className="border-b pb-4 last:border-b-0">
                       <div className="flex items-start gap-4">
                         {/* Rater Info */}
-                        <Link to={`/@${rating.rater.username}`} className="flex-shrink-0">
+                        <Link to={`/u/${rating.rater.username}`} className="flex-shrink-0">
                           <Avatar
                             src={rating.rater.avatar}
                             username={rating.rater.username}
@@ -282,7 +282,7 @@ const PublicProfilePage = () => {
                           <div className="flex items-start justify-between mb-2">
                             <div>
                               <Link
-                                to={`/@${rating.rater.username}`}
+                                to={`/u/${rating.rater.username}`}
                                 className="font-semibold text-gray-900 hover:text-primary-600"
                               >
                                 {rating.rater.firstName && rating.rater.lastName

frontend/src/services/api.js

@@ -495,4 +495,16 @@ export const adminAPI = {
   },
 };
 
+// Public API (no authentication required)
+export const publicAPI = {
+  async log404(path, search) {
+    const data = await fetchAPI('/public/log-404', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path, search }),
+    });
+    return data;
+  },
+};
+
 export { ApiError };