live updates

frontend/package.json

@@ -11,7 +11,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.0",
-    "react-hot-toast": "^2.4.1"
+    "react-hot-toast": "^2.4.1",
+    "socket.io-client": "^4.6.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",

frontend/src/SocketContext.jsx

@@ -0,0 +1,91 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { io } from 'socket.io-client';
+import { useAuth } from './AuthContext';
+
+const SocketContext = createContext();
+
+export function useSocket() {
+  const context = useContext(SocketContext);
+  if (!context) {
+    throw new Error('useSocket must be used within SocketProvider');
+  }
+  return context;
+}
+
+export function SocketProvider({ children }) {
+  const [socket, setSocket] = useState(null);
+  const [connected, setConnected] = useState(false);
+  const { user, token } = useAuth();
+
+  useEffect(() => {
+    // Only connect if user is authenticated
+    if (!user || !token) {
+      if (socket) {
+        socket.disconnect();
+        setSocket(null);
+        setConnected(false);
+      }
+      return;
+    }
+
+    // Determine backend URL
+    const backendUrl = import.meta.env.VITE_API_URL || 
+      (import.meta.env.DEV ? 'http://localhost:4000' : window.location.origin);
+
+    // Create socket connection with JWT authentication
+    const newSocket = io(backendUrl, {
+      auth: {
+        token
+      },
+      reconnection: true,
+      reconnectionAttempts: 5,
+      reconnectionDelay: 1000
+    });
+
+    newSocket.on('connect', () => {
+      console.log('🔌 Socket connected');
+      setConnected(true);
+    });
+
+    newSocket.on('disconnect', () => {
+      console.log('❌ Socket disconnected');
+      setConnected(false);
+    });
+
+    newSocket.on('connect_error', (error) => {
+      console.error('Socket connection error:', error.message);
+    });
+
+    setSocket(newSocket);
+
+    // Cleanup on unmount
+    return () => {
+      newSocket.disconnect();
+    };
+  }, [user, token]);
+
+  const joinChallenge = (challengeId) => {
+    if (socket && connected) {
+      socket.emit('join:challenge', challengeId);
+    }
+  };
+
+  const leaveChallenge = (challengeId) => {
+    if (socket && connected) {
+      socket.emit('leave:challenge', challengeId);
+    }
+  };
+
+  const value = {
+    socket,
+    connected,
+    joinChallenge,
+    leaveChallenge
+  };
+
+  return (
+    <SocketContext.Provider value={value}>
+      {children}
+    </SocketContext.Provider>
+  );
+}

frontend/src/main.jsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Routes, Route, Navigate, Link } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 import { AuthProvider, useAuth } from './AuthContext';
+import { SocketProvider } from './SocketContext';
 import Login from './pages/Login';
 import Register from './pages/Register';
 import ChallengeList from './pages/ChallengeList';
@@ -55,40 +56,42 @@ function App() {
     <ErrorBoundary>
       <BrowserRouter>
         <AuthProvider>
-          <Toaster 
-            position="top-right"
-            toastOptions={{
-              duration: 3000,
-              style: {
-                background: '#1e293b',
-                color: '#f1f5f9',
-                border: '1px solid #334155',
-              },
-              success: {
-                iconTheme: {
-                  primary: '#10b981',
-                  secondary: '#f1f5f9',
+          <SocketProvider>
+            <Toaster 
+              position="top-right"
+              toastOptions={{
+                duration: 3000,
+                style: {
+                  background: '#1e293b',
+                  color: '#f1f5f9',
+                  border: '1px solid #334155',
                 },
-              },
-              error: {
-                iconTheme: {
-                  primary: '#ef4444',
-                  secondary: '#f1f5f9',
+                success: {
+                  iconTheme: {
+                    primary: '#10b981',
+                    secondary: '#f1f5f9',
+                  },
                 },
-              },
-            }}
-          />
-          <Header />
-          <Routes>
-            <Route path="/login" element={<Login />} />
-            <Route path="/register" element={<Register />} />
-            <Route path="/challenges" element={<ProtectedRoute><ChallengeList /></ProtectedRoute>} />
-            <Route path="/challenges/:id" element={<ProtectedRoute><ChallengeDetail /></ProtectedRoute>} />
-            <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
-            <Route path="/friends" element={<ProtectedRoute><Friends /></ProtectedRoute>} />
-            <Route path="/leaderboard" element={<ProtectedRoute><Leaderboard /></ProtectedRoute>} />
-            <Route path="/" element={<Navigate to="/challenges" />} />
-          </Routes>
+                error: {
+                  iconTheme: {
+                    primary: '#ef4444',
+                    secondary: '#f1f5f9',
+                  },
+                },
+              }}
+            />
+            <Header />
+            <Routes>
+              <Route path="/login" element={<Login />} />
+              <Route path="/register" element={<Register />} />
+              <Route path="/challenges" element={<ProtectedRoute><ChallengeList /></ProtectedRoute>} />
+              <Route path="/challenges/:id" element={<ProtectedRoute><ChallengeDetail /></ProtectedRoute>} />
+              <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
+              <Route path="/friends" element={<ProtectedRoute><Friends /></ProtectedRoute>} />
+              <Route path="/leaderboard" element={<ProtectedRoute><Leaderboard /></ProtectedRoute>} />
+              <Route path="/" element={<Navigate to="/challenges" />} />
+            </Routes>
+          </SocketProvider>
         </AuthProvider>
       </BrowserRouter>
     </ErrorBoundary>

frontend/src/pages/ChallengeDetail.jsx

@@ -2,12 +2,14 @@ import React, { useState, useEffect, useRef } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import toast from 'react-hot-toast';
 import { useAuth } from '../AuthContext';
+import { useSocket } from '../SocketContext';
 import api from '../api';
 import { useClickOutside } from '../hooks/useClickOutside';
 
 export default function ChallengeDetail() {
   const { id } = useParams();
   const { user } = useAuth();
+  const { socket, joinChallenge, leaveChallenge } = useSocket();
   const [challenge, setChallenge] = useState(null);
   const [predictions, setPredictions] = useState([]);
   const [leaderboard, setLeaderboard] = useState([]);
@@ -29,6 +31,59 @@ export default function ChallengeDetail() {
     loadLeaderboard();
   }, [id]);
 
+  // Join challenge room for real-time updates
+  useEffect(() => {
+    if (socket && id) {
+      joinChallenge(id);
+      
+      return () => {
+        leaveChallenge(id);
+      };
+    }
+  }, [socket, id]);
+
+  // Listen for real-time prediction events
+  useEffect(() => {
+    if (!socket) return;
+
+    const handlePredictionCreated = (prediction) => {
+      setPredictions(prev => [prediction, ...prev]);
+      toast.success(`New prediction from ${prediction.username}`);
+    };
+
+    const handlePredictionValidated = (prediction) => {
+      setPredictions(prev => 
+        prev.map(p => p.id === prediction.id ? prediction : p)
+      );
+      loadLeaderboard(); // Refresh leaderboard when points change
+      
+      if (prediction.user_id === user.id) {
+        toast.success(
+          prediction.status === 'validated' 
+            ? '🎉 Your prediction was validated!' 
+            : '❌ Your prediction was invalidated'
+        );
+      }
+    };
+
+    const handleInvitationResponse = (response) => {
+      if (response.status === 'accepted') {
+        toast.success(`${response.username} joined the challenge!`);
+        loadChallenge(); // Refresh participant list
+      }
+    };
+
+    socket.on('prediction:created', handlePredictionCreated);
+    socket.on('prediction:validated', handlePredictionValidated);
+    socket.on('challenge:invitation_response', handleInvitationResponse);
+
+    return () => {
+      socket.off('prediction:created', handlePredictionCreated);
+      socket.off('prediction:validated', handlePredictionValidated);
+      socket.off('challenge:invitation_response', handleInvitationResponse);
+    };
+  }, [socket, user]);
+
   const loadChallenge = async () => {
     try {
       const data = await api.getChallenge(id);

frontend/src/pages/ChallengeList.jsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import toast from 'react-hot-toast';
 import api from '../api';
 import { useClickOutside } from '../hooks/useClickOutside';
+import { useSocket } from '../SocketContext';
 
 export default function ChallengeList() {
   const [challenges, setChallenges] = useState([]);
@@ -13,6 +14,7 @@ export default function ChallengeList() {
   const [creating, setCreating] = useState(false);
   const [searchTimeout, setSearchTimeout] = useState(null);
   const [respondingTo, setRespondingTo] = useState(null);
+  const { socket } = useSocket();
   const searchRef = useRef(null);
 
   useClickOutside(searchRef, () => setShowResults([]));
@@ -21,6 +23,22 @@ export default function ChallengeList() {
     loadChallenges();
   }, []);
 
+  // Listen for real-time challenge invitations
+  useEffect(() => {
+    if (!socket) return;
+
+    const handleChallengeInvitation = (invitation) => {
+      toast.success(`📬 ${invitation.invited_by} invited you to "${invitation.challenge_title}"`);
+      loadChallenges(); // Refresh to show new invitation
+    };
+
+    socket.on('challenge:invitation', handleChallengeInvitation);
+
+    return () => {
+      socket.off('challenge:invitation', handleChallengeInvitation);
+    };
+  }, [socket]);
+
   const loadChallenges = async () => {
     try {
       const data = await api.getChallenges();

frontend/src/pages/Friends.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import toast from 'react-hot-toast';
 import api from '../api';
 import { useClickOutside } from '../hooks/useClickOutside';
+import { useSocket } from '../SocketContext';
 
 export default function Friends() {
   const [friends, setFriends] = useState([]);
@@ -13,6 +14,7 @@ export default function Friends() {
   const [searchTimeout, setSearchTimeout] = useState(null);
   const [responding, setResponding] = useState(null);
   const [sending, setSending] = useState(null);
+  const { socket } = useSocket();
   const searchRef = useRef(null);
 
   useClickOutside(searchRef, () => setSearchResults([]));
@@ -21,6 +23,33 @@ export default function Friends() {
     loadData();
   }, []);
 
+  // Listen for real-time friend request events
+  useEffect(() => {
+    if (!socket) return;
+
+    const handleFriendRequest = (request) => {
+      toast.success(`👋 ${request.from_username} sent you a friend request`);
+      loadData(); // Refresh to show new request
+    };
+
+    const handleFriendResponse = (response) => {
+      if (response.status === 'accepted') {
+        toast.success(`🎉 ${response.friend_username} accepted your friend request!`);
+        loadData(); // Refresh friends list
+      } else {
+        toast(`${response.friend_username} declined your friend request`);
+      }
+    };
+
+    socket.on('friend:request', handleFriendRequest);
+    socket.on('friend:response', handleFriendResponse);
+
+    return () => {
+      socket.off('friend:request', handleFriendRequest);
+      socket.off('friend:response', handleFriendResponse);
+    };
+  }, [socket]);
+
   const loadData = async () => {
     try {
       const [friendsData, requestsData] = await Promise.all([