Add DRF API app and real-time draft management UI

- Created new `api` Django app with serializers, viewsets, and routers
  to expose draft sessions, participants, and movie data.
- Registered `api` app in settings and updated root URL configuration.
- Extended WebSocket consumers with `inform.draft_status` /
  `request.draft_status` to allow fetching current draft state.
- Updated `DraftSession` and related models to support reverse lookups
  for draft picks.
- Enhanced draft state manager to include `draft_order` in summaries.
- Added React WebSocket context provider, connection status component,
  and new admin/participant panels with phase and participant tracking.
- Updated SCSS for participant lists, phase indicators, and status badges.
- Modified Django templates to mount new React roots for admin and
  participant views.
- Updated Webpack dev server config to proxy WebSocket connections.

frontend/src/apps/draft/common/WebSocketStatus.jsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from "react";
+export const WebSocketStatus = ({ socket }) => {
+  const [isConnected, setIsConnected] = useState(false);
+
+  useEffect(() => {
+    console.log('socket changed', socket)
+    if (!socket) return;
+
+    const handleOpen = () => { console.log('socket open'); setIsConnected(true) };
+    const handleClose = () => { console.log('socket close'); setIsConnected(false) };
+    const handleError = () => { console.log('socket error'); setIsConnected(false) };
+
+    socket.addEventListener("open", handleOpen);
+    socket.addEventListener("close", handleClose);
+    socket.addEventListener("error", handleError);
+
+    // 🧹 Cleanup to remove listeners when component unmounts or socket changes
+    return () => {
+      socket.removeEventListener("open", handleOpen);
+      socket.removeEventListener("close", handleClose);
+      socket.removeEventListener("error", handleError);
+    };
+
+  }, [socket])
+  return (
+    <div className="d-flex align-items-center gap-2">
+      <span
+        className={`badge ${isConnected ? "text-bg-success" : "text-bg-danger"}`}
+      >
+        {isConnected ? "Connected" : "Disconnected"}
+      </span>
+    </div>
+  );
+};