chore: configure API URL for deployment

example.env

@@ -1,3 +1,5 @@
 VITE_CLERK_PUBLISHABLE_KEY=
 
 VITE_CLOUDINARY_CLOUD_NAME=
+
+VITE_API_URL=

src/config/api.js

@@ -0,0 +1,4 @@
+const API_URL =
+  import.meta.env.VITE_API_URL || "http://localhost:3000";
+
+export default API_URL;

src/hooks/useSyncUser.js

@@ -1,5 +1,7 @@
 import { useEffect } from "react";
 import { useAuth } from "@clerk/react";
+import API_URL from "../config/api";
+
 
 // On sign-in, tell the backend to create / refresh this user's DB row
 export default function useSyncUser() {
@@ -12,7 +14,7 @@ export default function useSyncUser() {
     // Send the logged-in user to the backend to be saved
     const syncUser = async () => {
       const token = await getToken(); // Proves identity to the backend
-      await fetch("http://localhost:3000/api/me", {
+      await fetch(`${API_URL}/api/me`, {
         method: "POST",
         headers: { Authorization: `Bearer ${token}` }, // Attach the token
       }).catch((err) => console.error("User sync failed:", err));

src/messaging/apiConnection/listingApi.js

@@ -3,8 +3,11 @@
 // This function sends the data to the Express backend.
 // The backend will save it and send a response back.
 // Sends the user's Clerk token to the backend
+
+import API_URL from "../../config/api";
+
 export async function createListing(data, token) {
-  const response = await fetch("http://localhost:3000/api/listings", {
+  const response = await fetch(`${API_URL}/api/listings`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -22,7 +25,7 @@ export async function createListing(data, token) {
 
 // Get all listings from the backend/database
 export async function getListings() {
-  const response = await fetch("http://localhost:3000/api/listings");
+  const response = await fetch(`${API_URL}/api/listings`);
 
   if (!response.ok) {
     throw new Error("Failed to fetch listings");

src/messaging/apiConnection/threadApi.js

@@ -1,10 +1,13 @@
+import API_URL from "../../config/api";
+
+
 export async function getThreads() {
-	const response = await fetch('/api/threads');
+	const response = await fetch('${API_URL}/api/threads');
 	return response.json();
 }
 
 export async function createOrGetThread(data) {
-	const response = await fetch('/api/threads', {
+	const response = await fetch('${API_URL}/api/threads', {
 		method: 'POST',
 		headers: {
 			'Content-Type': 'application/json',
@@ -16,7 +19,7 @@ export async function createOrGetThread(data) {
 }
 
 export async function sendMessage(threadId, text) {
-	const response = await fetch(`/api/threads/${threadId}/messages`, {
+	const response = await fetch(`${API_URL}/api/threads/${threadId}/messages`, {
 		method: 'POST',
 		headers: {
 			'Content-Type': 'application/json',

src/pages/Browse.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { Text, Container, SimpleGrid, Stack, Title } from "@mantine/core";
 import { ListingSearchBar } from "../components/ListingSearchBar/ListingSearchBar";
 import { BrowserCard } from "../components/BrowserCard/BrowserCard";
+import API_URL from "../config/api";
 
 export default function Browse() {
   // Store listings returned from backend
@@ -27,7 +28,7 @@ export default function Browse() {
     }
 
     // Fetch filtered listing from Express backend
-    fetch(`http://localhost:3000/api/items?${queryParams.toString()}`)
+    fetch(`${API_URL}/api/items${queryParams.toString()}`)
       .then((response) => {
         console.log("Backend response", response);
         return response.json();

src/pages/Dashboard.jsx

@@ -13,6 +13,7 @@ import {
 } from "@mantine/core";
 import { useNavigate, Link } from "react-router-dom";
 import { useAuth } from "@clerk/react";
+import API_URL from "../config/api";
 
 function ListingCard({ item }) {
   const navigate = useNavigate();
@@ -87,7 +88,7 @@ export default function Dashboard() {
       try {
         const token = await getToken();
 
-        const response = await fetch("http://localhost:3000/api/my-listings", {
+        const response = await fetch(`${API_URL}/api/my-listings`, {
           headers: {
             Authorization: `Bearer ${token}`,
           },

src/pages/Listing.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import Map from "../components/Map/Map";
 import ListingCard from "../components/ListingCard/ListingCard";
+import API_URL from "../config/api";
 
 export default function Listing() {
   const { id } = useParams(); // the :id from /listing/:id
@@ -10,7 +11,7 @@ export default function Listing() {
 
   // Fetch the listing whenever the component mounts or the id changes
   useEffect(() => {
-    fetch(`http://localhost:3000/api/items/${id}`)
+    fetch(`${API_URL}/api/items/${id}`)
       .then((res) => {
         if (res.status === 404) {
           setStatus("notfound");

src/utils/uploadToCloudinary.js

@@ -1,8 +1,8 @@
-const BASE_URL = "http://localhost:3000";
+import API_URL from "../config/api";
 
 export async function uploadToCloudinary(file) {
   // Ask our backend for a signed signature
-  const sigRes = await fetch(`${BASE_URL}/api/cloudinary/signature`);
+  const sigRes = await fetch(`${API_URL}/api/cloudinary/signature`);
   if (!sigRes.ok) throw new Error("Could not get upload signature");
   const { timestamp, signature, apiKey, cloudName } = await sigRes.json();