added comprehensive ports for networking

backend/server.js

@@ -118,7 +118,7 @@ app.post("/api/updateUser", authenticate, async (req, res) => {
 });
 
 app.listen(port, () => {
-  console.log(`Express backend server is running at http://localhost:${port}`);
+  console.log(`Express backend server is running at Port: ${port}`);
 });
 
 // error handling code

docker-compose.yml

@@ -1,33 +1,42 @@
 services:
-  #  admin_react-frontend:
+  admin_react-frontend:
-  #    container_name: bikelane-frontend_react-admin
+    container_name: bikelane-frontend_react-admin
-  #    build: ./frontend_admin
+    build: ./frontend_admin
-  #    ports:
+    ports:
-  #      - "5001:5001"
+      - "5001:5001"
-  #    environment:
+    networks:
-  #      - CHOKIDAR_USEPOLLING=true
+      - proxynet
-  #    volumes:
+      - bikelane_network
-  #      - ./frontend_admin:/app
+    environment:
-  #      - /app/node_modules
+      - CHOKIDAR_USEPOLLING=true
-  #    restart: unless-stopped
+    volumes:
+      - ./frontend_admin:/app
+      - /app/node_modules
+    restart: unless-stopped
 
-  #  user_react-frontend:
+  user_react-frontend:
-  #    container_name: bikelane-frontend_react-user
+    container_name: bikelane-frontend_react-user
-  #    build: ./frontend_user
+    build: ./frontend_user
-  #    ports:
+    networks:
-  #      - "5003:5003"
+      - proxynet
-  #    environment:
+      - bikelane_network
-  #      - CHOKIDAR_USEPOLLING=true
+    ports:
-  #    volumes:
+      - "5003:5003"
-  #      - ./frontend_user:/app
+    environment:
-  #      - /app/node_modules
+      - CHOKIDAR_USEPOLLING=true
-  #    restart: unless-stopped
+    volumes:
+      - ./frontend_user:/app
+      - /app/node_modules
+    restart: unless-stopped
 
   bikelane-backend:
     container_name: bikelane-backend_express
     build: ./backend
     ports:
       - "5002:5002"
+    networks:
+      - proxynet
+      - bikelane_network
     environment:
       DB_HOST: mysql
       DB_USER: root
@@ -43,6 +52,8 @@ services:
     container_name: bikelane-mysql
     image: mysql:8.0
     restart: unless-stopped
+    networks:
+      - bikelane_network
     environment:
       MYSQL_ROOT_PASSWORD: D7Ze0lwV9hMrNQHdz1Q8yi0MIQuOO8
       MYSQL_DATABASE: bikelane
@@ -53,3 +64,9 @@ services:
 
 volumes:
   mysql-data:
+
+networks:
+  proxynet:
+    external: true
+  bikelane_network:
+    external: false

frontend_admin/src/components/LoginCard.tsx

@@ -18,7 +18,7 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose, changeAuth }) => {
     e.preventDefault();
     setError("");
     try {
-      const response = await fetch("http://localhost:5002/api/login", {
+      const response = await fetch("http://45.133.75.67/:5002/api/login", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ username, password }),

frontend_admin/src/utils/useUsers.ts

@@ -33,7 +33,7 @@ export function useUsers(): UserReturn {
 
   const fetchUsers = async () => {
     try {
-      const response = await fetch("http://localhost:5002/api/getAllUsers", {
+      const response = await fetch("http://45.133.75.67:5002/api/getAllUsers", {
         method: "GET",
         headers: headers,
       });
@@ -50,7 +50,7 @@ export function useUsers(): UserReturn {
   };
 
   const deleteUser = (id: number) => {
-    fetch("http://localhost:5002/api/deleteUser", {
+    fetch("http://45.133.75.67:5002/api/deleteUser", {
       method: "POST",
       body: JSON.stringify({ id: id }),
       headers: {
@@ -109,7 +109,7 @@ export function useUsers(): UserReturn {
     console.log("Sending user data:", userData);
 
     try {
-      const response = await fetch("http://localhost:5002/api/updateUser", {
+      const response = await fetch("http://45.133.75.67:5002/api/updateUser", {
         method: "POST",
         body: JSON.stringify(userData),
         headers: {

frontend_admin/src/utils/userHandler.ts

@@ -6,7 +6,7 @@ export const loginUser = async (
   password: string
 ): Promise<boolean> => {
   try {
-    const response = await fetch("http://localhost:5002/api/login", {
+    const response = await fetch("http://45.133.75.67:5002/api/login", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ username, password }),
@@ -31,7 +31,7 @@ export const logout = () => {
 };
 
 export const deleteUser = (id: number) => {
-  fetch("http://localhost:5002/api/deleteUser", {
+  fetch("http://45.133.75.67:5002/api/deleteUser", {
     method: "POST",
     body: JSON.stringify({ id: id }),
     headers: {
@@ -53,7 +53,7 @@ export const deleteUser = (id: number) => {
 
 export const replaceUsers = async () => {
   localStorage.removeItem("users");
-  await fetch("http://localhost:5002/api/getAllUsers", {
+  await fetch("http://45.133.75.67:5002/api/getAllUsers", {
     method: "GET",
     headers: {
       Authorization: `Bearer ${Cookies.get("token")}`,
@@ -104,7 +104,7 @@ export const updateUserFunc = async (userID: number) => {
   console.log("Sending user data:", userData);
 
   try {
-    const response = await fetch("http://localhost:5002/api/updateUser", {
+    const response = await fetch("http://45.133.75.67:5002/api/updateUser", {
       method: "POST",
       body: JSON.stringify(userData),
       headers: {