live updates

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();