add: create webservice for api handling

.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_BACKEND_URL=http://localhost:8080/

README.md

@@ -29,13 +29,21 @@ cd playground-web
 npm install
 ```
 
+## Environment Variables
+
+Before running the project, make sure to set up the necessary environment variables. Create a `.env.local` file in the root directory of the project and add the following variables:
+
+````bash
+# .env.local
+NEXT_PUBLIC_BACKEND_URL=http://localhost:8080/
+
 ## Development
 
 To start the development server, run:
 
 ```bash
 npm run dev
-```
+````
 
 This will launch the app on [http://localhost:3000](http://localhost:3000). The app will automatically reload if you make changes to the code.
 
@@ -71,6 +79,7 @@ docker-compose up
 ```
 
 ## Step-by-Step Setup for End-to-End Development with Docker
+
 We have added `Dockerfile.dev` which is for development purposes, ensuring your Next.js application supports hot reloading and reflects code changes without requiring image rebuilds.
 
 `docker-compose.dev.yml` configures Docker Compose to build and run your Next.js app in development mode.
@@ -79,7 +88,6 @@ We have added `Dockerfile.dev` which is for development purposes, ensuring your
 docker-compose -f docker-compose.dev.yml up --build
 ```
 
-
 ## Building for Production
 
 To create a production build:

package.json

@@ -15,6 +15,7 @@
     "@mui/icons-material": "^6.1.1",
     "@mui/material": "^6.1.1",
     "autoprefixer": "^10.4.20",
+    "axios": "^1.7.7",
     "lucide-react": "^0.446.0",
     "next": "14.2.13",
     "package.json": "^2.0.1",

src/lib/api.ts

@@ -1,32 +1,18 @@
 // src/lib/api.ts
-import { CLI_COMMAND_URL } from "@/shared/constants/apiEndpoints";
+import { WebService } from "@/services/webService";
 
 export const executeCLICommandOnServer = async (
   cmd: string,
   cmdOptions: object
-): Promise<string> => {
+) => {
   try {
-    const response = await fetch(`${CLI_COMMAND_URL}/${cmd}`, {
-      method: "POST",
-      body: JSON.stringify(cmdOptions),
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-
+    const response = await WebService.post(`/cli/${cmd}`, cmdOptions);
     // TODO: This needs to be looked at
-    const data = await response.json();
-    if (Object.prototype.hasOwnProperty.call(data, "data")) {
-      return data.data;
-    } else if (Object.prototype.hasOwnProperty.call(data, "error")) {
-      return data.error;
-    }
-
-    if (!response.ok) {
-      throw new Error("Network response was not ok");
+    if (response?.data) {
+      return response.data;
+    } else {
+      throw new Error("Unexpected response structure");
     }
-
-    return data;
   } catch (error: unknown) {
     console.error("Error executing command:", error);
     return `Error: ${error}`;

src/services/webService.ts

@@ -0,0 +1,15 @@
+import axios from "axios";
+let BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL;
+
+if (!BACKEND_URL) {
+  console.warn(
+    "Warning: NEXT_PUBLIC_BACKEND_URL is not defined. Defaulting to http://localhost:3000"
+  );
+  BACKEND_URL = "http://localhost:8080";
+}
+export const WebService = axios.create({
+  baseURL: BACKEND_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});

src/shared/constants/apiEndpoints.ts

@@ -1,2 +1,2 @@
 // This folder will contain or hold constants. For example in this particular file we can store the api endpoints as constants
-export const CLI_COMMAND_URL = "http://localhost:8080/cli";
+export const ROOT_URL = "http://localhost:8080/";