use env variable for api calls

client/src/components/task_form.tsx

@@ -43,7 +43,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
   const [availableTopics, setAvailableTopics] = useState<Topic[]>([]);
 
   useEffect(() => {
-    fetch("http://localhost:8000/api/planner/topic/")
+    fetch(process.env.NEXT_PUBLIC_BACKEND_URL + "planner/topic/")
       .then((res) => res.json())
       .then((data) => setAvailableTopics(data))
       .catch((err) => console.error("Failed to load topics:", err));
@@ -66,22 +66,25 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
       const new_topics = topics
         .filter((t) => t.type === "new")
         .map((t) => ({ name: t.name, color_hex: t.color_hex }));
-      const response = await fetch("http://localhost:8000/api/planner/tasks/", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
+      const response = await fetch(
+        process.env.NEXT_PUBLIC_BACKEND_URL + "planner/tasks/",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({
+            name: taskName,
+            description: description,
+            completed: false,
+            user_id: userId,
+            times: times,
+            existing_topic_ids: existing_topic_ids,
+            new_topics: new_topics,
+          }),
         },
-        body: JSON.stringify({
-          name: taskName,
-          description: description,
-          completed: false,
-          user_id: userId,
-          times: times,
-          existing_topic_ids: existing_topic_ids,
-          new_topics: new_topics,
-        }),
-      });
+      );
 
       if (!response.ok) {
         throw new Error("Failed to create task");

client/src/components/task_item.tsx

@@ -98,7 +98,7 @@ export function TaskItem({
         }));
 
       const response = await fetch(
-        `http://localhost:8000/api/planner/tasks/${item.id}/`,
+        process.env.NEXT_PUBLIC_BACKEND_URL + `planner/tasks/${item.id}/`,
         {
           method: "PUT",
           headers: {
@@ -234,7 +234,7 @@ export function TaskItem({
 
       <div className="task-edit flex gap-2">
         {isEditing ? (
-          <div className="flex w-full flex-row justify-center text-lg gap-2">
+          <div className="flex w-full flex-row justify-center gap-2 text-lg">
             <button
               className="rounded-full bg-indigo-400 px-3 py-1 hover:brightness-110"
               onClick={saveEdit}

client/src/pages/focus.tsx

@@ -52,7 +52,7 @@ const CountdownTimer = () => {
           return;
         }
         const auth = await fetch(
-          "http://localhost:8000/api/planner/protected/",
+          process.env.NEXT_PUBLIC_BACKEND_URL + "planner/protected/",
           {
             headers: {
               Authorization: `Bearer ${token}`,
@@ -64,7 +64,7 @@ const CountdownTimer = () => {
           return;
         }
         const tasksFetch = await fetch(
-          `http://localhost:8000/api/planner/tasks/`,
+          process.env.NEXT_PUBLIC_BACKEND_URL + "planner/tasks/",
           {
             headers: {
               Authorization: `Bearer ${token}`,

client/src/pages/login.tsx

@@ -13,17 +13,20 @@ export default function Login() {
 
     const formData = new FormData(e.currentTarget);
 
-    const res = await fetch("http://127.0.0.1:8000/api/auth/login/", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
+    const res = await fetch(
+      process.env.NEXT_PUBLIC_BACKEND_URL + "auth/login/",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          username: formData.get("username"),
+          email: formData.get("email"),
+          password: formData.get("password"),
+        }),
       },
-      body: JSON.stringify({
-        username: formData.get("username"),
-        email: formData.get("email"),
-        password: formData.get("password"),
-      }),
-    });
+    );
 
     const data = await res.json();
     if (!res.ok) {
@@ -37,7 +40,7 @@ export default function Login() {
     const token = localStorage.getItem("access");
 
     const userFetch = await fetch(
-      "http://127.0.0.1:8000/api/planner/protected",
+      process.env.NEXT_PUBLIC_BACKEND_URL + "planner/protected",
       {
         headers: {
           Authorization: `Bearer ${token}`,

client/src/pages/register.tsx

@@ -11,15 +11,18 @@ export default function Register() {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
 
-    const res = await fetch("http://127.0.0.1:8000/api/planner/register/", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        username: formData.get("username"),
-        email: formData.get("email"),
-        password: formData.get("password"),
-      }),
-    });
+    const res = await fetch(
+      process.env.NEXT_PUBLIC_BACKEND_URL + "planner/register/",
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          username: formData.get("username"),
+          email: formData.get("email"),
+          password: formData.get("password"),
+        }),
+      },
+    );
 
     const data = await res.json();
     if (!res.ok) {

client/src/pages/schedule.tsx

@@ -91,7 +91,7 @@ function Schedule() {
           return;
         }
         const auth = await fetch(
-          "http://localhost:8000/api/planner/protected/",
+          process.env.NEXT_PUBLIC_BACKEND_URL + "planner/protected/",
           {
             headers: {
               Authorization: `Bearer ${token}`,
@@ -103,7 +103,7 @@ function Schedule() {
           return;
         }
         const tasksFetch = await fetch(
-          `http://localhost:8000/api/planner/tasks/`,
+          process.env.NEXT_PUBLIC_BACKEND_URL + `planner/tasks/`,
           {
             headers: {
               Authorization: `Bearer ${token}`,

client/src/pages/tasks.tsx

@@ -49,7 +49,7 @@ export default function TasksPage() {
           return;
         }
         const auth = await fetch(
-          "http://localhost:8000/api/planner/protected/",
+          process.env.NEXT_PUBLIC_BACKEND_URL + "planner/protected/",
           {
             headers: {
               Authorization: `Bearer ${token}`,
@@ -64,7 +64,7 @@ export default function TasksPage() {
         const user = await auth.json();
         setUserId(user.user_id);
         const tasksFetch = await fetch(
-          `http://localhost:8000/api/planner/tasks/`,
+          process.env.NEXT_PUBLIC_BACKEND_URL + `planner/tasks/`,
           {
             headers: {
               Authorization: `Bearer ${token}`,
@@ -84,7 +84,7 @@ export default function TasksPage() {
   }, [router]);
 
   useEffect(() => {
-    fetch("http://localhost:8000/api/planner/topic/")
+    fetch(process.env.NEXT_PUBLIC_BACKEND_URL + "planner/topic/")
       .then((res) => res.json())
       .then((data) => setAvailableTopics(data))
       .catch((err) => console.error("Failed to load topics", err));
@@ -106,7 +106,8 @@ export default function TasksPage() {
 
     try {
       const response = await fetch(
-        `http://localhost:8000/api/planner/tasks/${id}/toggle_complete/`,
+        process.env.NEXT_PUBLIC_BACKEND_URL +
+          `planner/tasks/${id}/toggle_complete/`,
         {
           method: "PATCH",
           headers: {
@@ -142,7 +143,7 @@ export default function TasksPage() {
 
     try {
       const response = await fetch(
-        `http://localhost:8000/api/planner/tasks/${id}/`,
+        process.env.NEXT_PUBLIC_BACKEND_URL + `planner/tasks/${id}/`,
         {
           method: "DELETE",
           headers: {

docker-compose.prod.yml

@@ -12,7 +12,7 @@ services:
       retries: 5
 
   server:
-    image: ghcr.io/codersforcauses/django-nextjs-template-use_uv-prod-server:latest
+    image: ghcr.io/codersforcauses/intermediate_team_3-use_uv-prod-server:latest
     container_name: transplant_server
     restart: unless-stopped
     env_file: ./.env.prod
@@ -28,7 +28,7 @@ services:
       - db
 
   client:
-    image: ghcr.io/codersforcauses/django-nextjs-template-use_uv-prod-client:latest
+    image: ghcr.io/codersforcauses/intermediate_team_3-use_uv-prod-client:latest
     container_name: transplant_client
     restart: unless-stopped
     env_file: ./.env.prod