added api prefix and axios error 4

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import "./App.css";
 import Todo from "./Todo";
 import axios from "axios";
+import { host } from "./constants";
 
 export type TodoDTO = {
   id: number;
@@ -10,6 +11,8 @@ export type TodoDTO = {
   done: boolean;
 };
 
+
+
 function App() {
   const [todos, setTodos] = useState<TodoDTO[]>([]);
   const [newTodo, setNewTodo] = useState<TodoDTO>({
@@ -20,7 +23,8 @@ function App() {
   });
 
   useEffect(() => {
-    axios.get("http://localhost:3000/todos").then((response) => {
+    console.log("HOST", host);
+    axios.get(`http://${host}:3000/api/todos`).then((response) => {
       setTodos(response.data);
     });
   }, []);
@@ -39,7 +43,7 @@ function App() {
   };
 
   const addTodo = () => {
-    axios.post("http://localhost:3000/todos", newTodo).then((response) => {
+    axios.post("http://localhost:3000/api/todos", newTodo).then((response) => {
       setTodos(response.data);
     });
   };

frontend/src/Todo.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { TodoDTO } from "./App";
 import axios from "axios";
 import { FaEdit, FaCheck } from "react-icons/fa";
+import { host } from "./constants";
 
 type Props = {
   todo: TodoDTO;
@@ -28,7 +29,7 @@ const Todo = ({ todo, updateTodos }: Props) => {
   const editTodo = (key: string, value: string | boolean) => {
     const updatedTodo = { ...todo, [key]: value };
     axios
-      .put(`http://localhost:3000/todos/${todo.id}`, {
+      .put(`http://${host}:3000/api/todos/${todo.id}`, {
         todo: updatedTodo,
       })
       .then((response) => {