feat: implements front end proxy using the /api/ route (#24)

src/main/frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useState} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 import {Button} from "@/components/ui/button";
 import {
     Table,
@@ -17,14 +17,14 @@ function App() {
     const navigate = useNavigate();
 
     const getFakeAccounts = useCallback(() => {
-        fetch("http://localhost:8080/accounts")
+        fetch("/api/accounts")
             .then(response => response.json())
             .then(data => setAccounts(data))
             .catch(error => console.error(error));
     }, [accounts]);
 
     const postFakeAccount = () => {
-        fetch("http://localhost:8080/account", {
+        fetch("/api/account", {
             method: "POST",
             headers: {
                 "Content-Type": "application/json"
@@ -42,6 +42,10 @@ function App() {
             .catch(error => console.error(error));
     };
 
+    useEffect(() => {
+        getFakeAccounts();
+    }, []);
+
     return (
         <div className={"flex flex-col items-center"}>
             <h1>Commerce Bank Frontend</h1>

src/main/frontend/src/routes/Login.tsx

@@ -36,7 +36,7 @@ function Login() {
     })
 
     const onSubmit = (data: z.infer<typeof formSchema>) => {
-        fetch("http://localhost:8080/login", {
+        fetch("/api/login", {
             method: "POST",
             headers: {
                 "Content-Type": "application/json",

src/main/frontend/vite.config.ts

@@ -6,6 +6,12 @@ export default defineConfig({
   plugins: [react()],
   server: {
     port: 3000,
+    proxy: {
+      "/api": {
+        target: "http://localhost:8080",
+        rewrite: (path) => path.replace(/^\/api/, ""), //removes /api prefix from the request path
+      },
+    },
   },
   resolve: {
     alias: {