feat: add public user profiles

- Add GET /api/users/:username endpoint for public profiles
- Create PublicProfilePage component with user stats and info
- Add getUserByUsername function to API service
- Add /:username route to App.jsx
- Display user info: name, location, stats, WSDC ID, social links
- Only show public data (no email or sensitive information)
- Accessible only to authenticated users

Users can now view public profiles of other users by visiting
/<username>. The profile displays stats, location, WSDC ID, and
social media links.

frontend/src/App.jsx

@@ -11,6 +11,7 @@ import MatchChatPage from './pages/MatchChatPage';
 import RatePartnerPage from './pages/RatePartnerPage';
 import HistoryPage from './pages/HistoryPage';
 import ProfilePage from './pages/ProfilePage';
+import PublicProfilePage from './pages/PublicProfilePage';
 import VerificationBanner from './components/common/VerificationBanner';
 
 // Protected Route Component with Verification Banner
@@ -132,9 +133,18 @@ function App() {
             }
           />
 
+          {/* Public Profile - must be before default redirect */}
+          <Route
+            path="/:username"
+            element={
+              <ProtectedRoute>
+                <PublicProfilePage />
+              </ProtectedRoute>
+            }
+          />
+
           {/* Default redirect */}
           <Route path="/" element={<Navigate to="/events" replace />} />
-          <Route path="*" element={<Navigate to="/events" replace />} />
         </Routes>
       </AuthProvider>
     </BrowserRouter>

frontend/src/pages/PublicProfilePage.jsx

@@ -0,0 +1,211 @@
+import { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { authAPI } from '../services/api';
+import Layout from '../components/layout/Layout';
+import { User, MapPin, Globe, Hash, Youtube, Instagram, Facebook, Award, Users, Star, Calendar, Loader2, AlertCircle } from 'lucide-react';
+
+const PublicProfilePage = () => {
+  const { username } = useParams();
+  const [profile, setProfile] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    const fetchProfile = async () => {
+      try {
+        setLoading(true);
+        const data = await authAPI.getUserByUsername(username);
+        setProfile(data);
+      } catch (err) {
+        setError(err.data?.error || 'Failed to load profile');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProfile();
+  }, [username]);
+
+  if (loading) {
+    return (
+      <Layout>
+        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+          <div className="flex flex-col items-center gap-3">
+            <Loader2 className="w-12 h-12 animate-spin text-primary-600" />
+            <p className="text-gray-600">Loading profile...</p>
+          </div>
+        </div>
+      </Layout>
+    );
+  }
+
+  if (error) {
+    return (
+      <Layout>
+        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+          <div className="max-w-md w-full mx-4">
+            <div className="bg-white rounded-lg shadow-sm p-8 text-center">
+              <AlertCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
+              <h2 className="text-2xl font-bold text-gray-900 mb-2">User Not Found</h2>
+              <p className="text-gray-600 mb-6">{error}</p>
+              <Link
+                to="/events"
+                className="inline-block px-6 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700"
+              >
+                Back to Events
+              </Link>
+            </div>
+          </div>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-4xl mx-auto px-4">
+          {/* Profile Header */}
+          <div className="bg-white rounded-lg shadow-sm p-8 mb-6">
+            <div className="flex items-start gap-6">
+              <img
+                src={profile.avatar}
+                alt={profile.username}
+                className="w-32 h-32 rounded-full"
+              />
+              <div className="flex-1">
+                <h1 className="text-3xl font-bold text-gray-900 mb-1">
+                  {profile.firstName && profile.lastName
+                    ? `${profile.firstName} ${profile.lastName}`
+                    : profile.username}
+                </h1>
+                <p className="text-lg text-gray-600 mb-4">@{profile.username}</p>
+
+                {/* Location */}
+                {(profile.city || profile.country) && (
+                  <div className="flex items-center gap-4 text-gray-700 mb-4">
+                    {profile.city && (
+                      <div className="flex items-center gap-1">
+                        <MapPin className="w-4 h-4" />
+                        <span>{profile.city}</span>
+                      </div>
+                    )}
+                    {profile.country && (
+                      <div className="flex items-center gap-1">
+                        <Globe className="w-4 h-4" />
+                        <span>{profile.country}</span>
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {/* Stats */}
+                <div className="flex gap-6 mb-4">
+                  <div className="flex items-center gap-2">
+                    <Users className="w-5 h-5 text-primary-600" />
+                    <span className="font-semibold">{profile.stats.matchesCount}</span>
+                    <span className="text-gray-600">Matches</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Star className="w-5 h-5 text-yellow-500" />
+                    <span className="font-semibold">{profile.stats.rating}</span>
+                    <span className="text-gray-600">Rating</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Award className="w-5 h-5 text-purple-600" />
+                    <span className="font-semibold">{profile.stats.ratingsCount}</span>
+                    <span className="text-gray-600">Reviews</span>
+                  </div>
+                </div>
+
+                {/* Member since */}
+                <div className="flex items-center gap-2 text-gray-600 text-sm">
+                  <Calendar className="w-4 h-4" />
+                  <span>Member since {new Date(profile.createdAt).toLocaleDateString()}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* WSDC ID */}
+          {profile.wsdcId && (
+            <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
+              <h2 className="text-xl font-semibold mb-3 flex items-center gap-2">
+                <Hash className="w-5 h-5 text-primary-600" />
+                WSDC Profile
+              </h2>
+              <div className="flex items-center gap-2">
+                <span className="text-gray-600">WSDC ID:</span>
+                <a
+                  href={`https://www.worldsdc.com/member/${profile.wsdcId}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary-600 hover:underline font-medium"
+                >
+                  {profile.wsdcId}
+                </a>
+              </div>
+            </div>
+          )}
+
+          {/* Social Media Links */}
+          {(profile.youtubeUrl || profile.instagramUrl || profile.facebookUrl || profile.tiktokUrl) && (
+            <div className="bg-white rounded-lg shadow-sm p-6">
+              <h2 className="text-xl font-semibold mb-4">Social Media</h2>
+              <div className="flex flex-wrap gap-3">
+                {profile.youtubeUrl && (
+                  <a
+                    href={profile.youtubeUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-2 px-4 py-2 bg-red-50 text-red-700 rounded-md hover:bg-red-100 transition-colors"
+                  >
+                    <Youtube className="w-5 h-5" />
+                    YouTube
+                  </a>
+                )}
+                {profile.instagramUrl && (
+                  <a
+                    href={profile.instagramUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-2 px-4 py-2 bg-pink-50 text-pink-700 rounded-md hover:bg-pink-100 transition-colors"
+                  >
+                    <Instagram className="w-5 h-5" />
+                    Instagram
+                  </a>
+                )}
+                {profile.facebookUrl && (
+                  <a
+                    href={profile.facebookUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-2 px-4 py-2 bg-blue-50 text-blue-700 rounded-md hover:bg-blue-100 transition-colors"
+                  >
+                    <Facebook className="w-5 h-5" />
+                    Facebook
+                  </a>
+                )}
+                {profile.tiktokUrl && (
+                  <a
+                    href={profile.tiktokUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-2 px-4 py-2 bg-gray-50 text-gray-700 rounded-md hover:bg-gray-100 transition-colors"
+                  >
+                    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
+                    </svg>
+                    TikTok
+                  </a>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default PublicProfilePage;

frontend/src/services/api.js

@@ -160,6 +160,11 @@ export const authAPI = {
     return data;
   },
 
+  async getUserByUsername(username) {
+    const data = await fetchAPI(`/users/${username}`);
+    return data.data;
+  },
+
   logout() {
     localStorage.removeItem('token');
     localStorage.removeItem('user');