[BUG]: VITE_API_URL is never defined in .env.example — team, notification & spectator-WS features break in production

[RounakKumarAgarwal]

Bug Description

The frontend reads the backend location from two different environment variables:

• VITE_BASE_URL — documented in .env.example ✅
• VITE_API_URL — not defined anywhere in .env.example ❌

Because VITE_API_URL is undefined in any real deployment, the files that depend on it misbehave in production even when VITE_BASE_URL is set correctly.

Note: This is not covered by #399 / #394 (@shwetd19's hardcoded-URL refactor). That PR consolidates the VITE_BASE_URL call sites into constants/api.ts and treats VITE_API_URL fallbacks as "already env-configurable." They aren't — the variable is never defined, so these files stay broken after #399 merges.

Affected files & failure modes

Group A — silent localhost fallback (calls http://localhost:1313 in prod):

• src/services/teamService.ts
• src/services/notificationService.ts

Group B — falls back to window.location.host (spectator WebSocket connects to the frontend host instead of the backend):

• src/hooks/useDebateWS.ts
• src/Pages/ViewDebate.tsx

No build error is thrown — the failures are silent, so this only surfaces after deployment.

Steps to Reproduce

1. Configure only VITE_BASE_URL (as .env.example instructs), pointing at a deployed backend.
2. Build and deploy the frontend.
3. Observe: team/notification requests go to localhost:1313; the spectator WebSocket connects to the frontend host. All fail.

Logs and Screenshots

VITE_API_URL is referenced in 4 files but never defined in .env.example:

$ grep -rn "VITE_API_URL" frontend/src
frontend/src/hooks/useDebateWS.ts:68:    const apiUrl = import.meta.env.VITE_API_URL;
frontend/src/services/notificationService.ts:1:const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:1313';
frontend/src/services/teamService.ts:5:  import.meta.env.VITE_API_URL?.replace(/\/+$/, "") ?? "http://localhost:1313";
frontend/src/Pages/ViewDebate.tsx:84:    const apiUrl = import.meta.env.VITE_API_URL;

$ grep "VITE_" .env.example
VITE_GOOGLE_CLIENT_ID=your_google_client_id_here
VITE_BASE_URL=http://localhost:1313

Environment Details

• OS: Windows 11
• Browser: Chrome 120
• Node.js: v22.17.0
• Branch: main
• Frontend: Vite + React (frontend/)
• Config source: .env.example defines VITE_BASE_URL only; VITE_API_URL is undefined
• Note: only reproduces in a non-local deployment — local dev hides it because the fallback points at the local backend

Impact

High - Major feature is broken

Code of Conduct

• I have joined the Discord server and will post updates there
• I have searched existing issues to avoid duplicates

[RounakKumarAgarwal]

Hi @rixitgithub @bhavik-mangla, I found this while reviewing the URL handling around #399. It's a separate gap that @shwetd19's PR doesn't cover — VITE_API_URL is used in 4 files but never defined in .env.example, so those flows break in production.

I've traced all the call sites and have a fix ready that routes them through the same constants/api.ts config #399 introduces. Could you assign this to me? I'll open the PR once #399 is merged (or coordinate with @shwetd19 to avoid conflicts).