docker-compose.yml

services:
  frontend:
    build:
      context: ./dashboardclient
      dockerfile: Dockerfile
    ports:
      - '5173:5173'
    networks:
      - app-network
    depends_on:
      - backend
    # volumes:
    #   - ./src:/app/src
    #   - /app/node_modules
    environment:
      CHOKIDAR_USEPOLLING: 'true'
    command: npm start

  backend:
    # environment:
    #   - MONGO_URI=mongodb+srv://mitemaemmanuel:GodsGoodness%[email protected]/?retryWrites=true&w=majority&appName=realtimedashboardcluster
    build:
      context: ./backend
      dockerfile: Dockerfile
    ports:
      - '5000:5000'
    networks:
      - app-network
    # volumes:
    #   - ./backend:/app
    #   - /usr/src/app/node_modules
    environment:
      - NODE_ENV=dev
      - MONGO_URI=mongodb+srv://mitemaemmanuel:GodsGoodness%[email protected]/?retryWrites=true&w=majority&appName=realtimedashboardcluster
    env_file:
      - ./backend/.env

networks:
  app-network:
    driver: bridge

DockerFile DashboardClient

FROM node:16 AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
# RUN npm run build
# Expose port for React development server
EXPOSE 5173

# Run the React development server
CMD ["npm", "start"]

DockerFile Backend

FROM node:18 AS build

WORKDIR /app

# Copy only package.json and package-lock.json first
COPY package*.json ./

# Install system dependencies for bcrypt to compile
RUN apt-get update && apt-get install -y build-essential python3

# Install dependencies fresh inside the container
RUN rm -rf node_modules
RUN npm install

# Rebuild bcrypt to ensure compatibility with the containers environment
RUN npm rebuild bcrypt --build-from-source 

# Copy the rest of the application code
COPY . .

EXPOSE 5000

# Dynamically set the environment-specific script to run
CMD ["sh", "-c", "npm run ${NODE_ENV}"]

frontend configuration file

const config = {
  // apiBaseUrl: 'http://localhost:5000', use without docker
  apiBaseUrl: 'http://backend:5000',
  localUrl: 'http://localhost:3000',
};

vite.config.ts

server: {
    // port: 3000, // Specify the port for the dev server
    // open: true, // Open the browser on server start
    host: '0.0.0.0', // Listen on all network interfaces
    port: 5173, // Specify the port
    strictPort: true, // Exit if the port is already in use
    proxy: {
      '/api': 'http://backend:5000', // Redirect API calls to the backend service
    },
  },

These are the details of all my file. I am not sure what file is causing the problem. It would be nice if someone can kindly point me in the right direction, or possibly show me what i have done wrong in the code.