feat: implement real-time websocket activity feed ( #860)

[Tusharkhadde]

⚡ Feature: Real-time WebSocket Activity Feed (Tier 3 Bounty)

This PR implements a real-time, live-updating activity feed using WebSockets across both the Frontend and Backend domains. #860

What was added:

• 🔌 Backend WebSocket Server

  • Scaffolded a lightweight FastAPI + python-socketio ASGI server inside the backend/ directory.
  • Added a coroutine that actively simulates and broadcasts live activity events (bounty postings, review submissions, completions) to all connected clients.

• 📡 Frontend Socket Hook (useSocket.ts)

  • Integrated socket.io-client with a robust connection manager.
  • Handles graceful reconnects (up to 10 retries) and automatically falls back to HTTP long-polling if necessary.

• 🎛️ Activity Feed UI (ActivityFeed.tsx)

  • Live Status Indicator: Replaced the static header with a real-time connection status pill (green pulse for active, red for offline).
  • Interactive Filters: Added a sleek Notification Preferences panel that allows users to instantly toggle off specific noise (e.g., hiding reviews to only see bounties).
  • Framer Motion Animations: New real-time events smoothly slide into the feed using popLayout without jittering. The feed is securely constrained to the 20 most recent events to prevent DOM bloat.

Verification:

• Tested Socket.io event broadcasting and reception.
• Verified filter toggles dynamically slice feed content.
• Verified fallback to polling and offline reconnection states.

Wallet - JDkFAXAaysAradjqQkCtpu2seJZR43F9qrfHZvgPYfvL