Derive backend URLs from VITE_BASE_URL instead of hardcoding localhost

frontend/src/Pages/ProsConsChallenge.tsx

@@ -3,6 +3,7 @@ import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
 import { getAuthToken } from "@/utils/auth";
+import { API_BASE_URL } from "@/constants/api";
 
 interface ArgumentEvaluation {
   score: number;
@@ -41,7 +42,7 @@ const ProsConsChallenge: React.FC = () => {
     setIsLoading(true);
     setError(null);
     try {
-      const response = await fetch("http://localhost:1313/coach/pros-cons/topic", {
+      const response = await fetch(`${API_BASE_URL}/coach/pros-cons/topic`, {
         method: "GET",
         headers: {
           Authorization: `Bearer ${token}`,
@@ -82,7 +83,7 @@ const ProsConsChallenge: React.FC = () => {
     setIsLoading(true);
     setError(null);
     try {
-      const response = await fetch("http://localhost:1313/coach/pros-cons/submit", {
+      const response = await fetch(`${API_BASE_URL}/coach/pros-cons/submit`, {
         method: "POST",
         headers: {
           Authorization: `Bearer ${token}`,

frontend/src/Pages/StrengthenArgument.tsx

@@ -8,6 +8,7 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { API_BASE_URL } from "@/constants/api";
 import {
   Dialog,
   DialogContent,
@@ -112,7 +113,7 @@ const StrengthenArgument: React.FC = () => {
     setError(null);
     setWeakStatement(null);
     try {
-      const url = `http://localhost:1313/coach/strengthen-argument/weak-statement?topic=${encodeURIComponent(topic)}&stance=${encodeURIComponent(stance)}`;
+      const url = `${API_BASE_URL}/coach/strengthen-argument/weak-statement?topic=${encodeURIComponent(topic)}&stance=${encodeURIComponent(stance)}`;
       const response = await fetch(url, {
         method: "GET",
         headers: {
@@ -152,7 +153,7 @@ const StrengthenArgument: React.FC = () => {
     setIsLoading(true);
     setError(null);
     try {
-      const response = await fetch("http://localhost:1313/coach/strengthen-argument/evaluate", {
+      const response = await fetch(`${API_BASE_URL}/coach/strengthen-argument/evaluate`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",

frontend/src/components/ChatRoom.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import clsx from 'clsx';
+import { WS_BASE_URL } from '../constants/api';
 
 const reactionsList = ['😂', '❤️', '❤️', '👍'];
 
@@ -45,7 +46,7 @@ const ChatRoom = () => {
     if (!token) return;
 
     wsRef.current = new WebSocket(
-      `ws://localhost:1313/chat/${roomId}?token=${token}`
+      `${WS_BASE_URL}/chat/${roomId}?token=${token}`
     );
 
     wsRef.current.onopen = () => {

frontend/src/components/DebatePopup.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { X } from 'lucide-react';
 import RoomBrowser from './RoomBrowser';
 import Matchmaking from './Matchmaking';
+import { API_BASE_URL } from '../constants/api';
 
 interface DebatePopupProps {
   onClose: () => void;
@@ -28,7 +29,7 @@ const DebatePopup: React.FC<DebatePopupProps> = ({ onClose }) => {
     try {
       // Sending a POST request to create a new room.
       // You might also send additional parameters (e.g., room type, settings).
-      const response = await fetch('http://localhost:1313/rooms', {
+      const response = await fetch(`${API_BASE_URL}/rooms`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',

frontend/src/components/Matchmaking.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Avatar from 'react-avatar';
 import { useUser } from '../hooks/useUser';
+import { WS_BASE_URL } from '../constants/api';
 
 interface MatchmakingPool {
   userId: string;
@@ -59,7 +60,7 @@ const Matchmaking: React.FC = () => {
 
     // Connect to WebSocket with authentication token
     const ws = new WebSocket(
-      `ws://localhost:1313/ws/matchmaking?token=${token}`
+      `${WS_BASE_URL}/ws/matchmaking?token=${token}`
     );
     wsRef.current = ws;
 

frontend/src/components/RoomBrowser.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { API_BASE_URL } from '../constants/api';
 
 interface Participant {
   id: string;
@@ -21,7 +22,7 @@ const RoomBrowser: React.FC = () => {
   const fetchRooms = async () => {
     const token = localStorage.getItem('token');
     try {
-      const response = await fetch('http://localhost:1313/rooms', {
+      const response = await fetch(`${API_BASE_URL}/rooms`, {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
@@ -61,7 +62,7 @@ const RoomBrowser: React.FC = () => {
     const token = localStorage.getItem('token');
     try {
       const response = await fetch(
-        `http://localhost:1313/rooms/${roomId}/join`,
+        `${API_BASE_URL}/rooms/${roomId}/join`,
         {
           method: 'POST',
           headers: {

frontend/src/constants/api.ts

@@ -0,0 +1,5 @@
+export const API_BASE_URL = (
+  import.meta.env.VITE_BASE_URL || "http://localhost:1313"
+).replace(/\/+$/, "");
+
+export const WS_BASE_URL = API_BASE_URL.replace(/^http/, "ws");