HomeScreen.js:12 Uncaught (in promise) AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE'

Question

I have tried a method in here as stackoverflow was recommending it for me but it didn't work or i did not know how implement them properly so please help me here. one i tried was this Proper way to return JSON using node or Express. I have been stuck in this error for a whole day

this is the package json in the front end

{
  "name": "frontend",
  "proxy": "https://localhost:3000",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.2.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.6.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

this is the Homescreen.js

import { Link } from 'react-router-dom';
// import data from '../data';
import {useEffect, useState} from 'react';
import axios from 'axios';
function HomeScreen() {
 
  const [products,setProducts]=useState([]);
  useEffect(()=>{
    const fetchData=async()=>{
      const result=await axios.get('/api/products')
      setProducts(result.data) 
    }
    fetchData()
  })
  return (
    <div>
      <h1>Features Products </h1>
      <div className="products">
        {products.map((product) => (
          <div className="product" key={product.slug}>
            <Link to={`/product/${product.slug}`}>
              <img src={product.image} alt={product.name} />
            </Link>

            <div className="product-info">
              <Link to={`/product/${product.slug}`}>
                <p>{product.name}</p>
              </Link>
              <p>
                <strong>${product.price}</strong>
              </p>
              <button> Add To Cart</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default HomeScreen;

this is the server.js

import express from 'express';
import data from './data.js'; //we need to put .js in here
const app = express();
app.get('/api/products', (req, res) => {
  res.send(data.products); 
});


const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log(`server at http://localhost:${port}`)

});

from the server i am trying to get the products from the file data that is in the backend

const data = {
  products: [
    {
      name: 'Nike Slim Shirt',
      slug: 'Nike-slim-shirt4',
      category: 'Shirts',
      image: '/images/p1.jpg', //679px x 829px
      price: 120,
      countInStocks: 10,
      brand: 'Nike',
      rating: 4.5,
      numReviews: 10,
      description: 'High quality shirt',
    },
    {
      name: 'Nike Slim pant',
      slug: 'Nike-slim-pant3',
      category: 'Shirts',
      image: '/images/p3.jpg',
      price: 120,
      countInStocks: 10,
      brand: 'Nike',
      rating: 4.5,
      numReviews: 10,
      description: 'High quality shirt',
    },
    {
      name: 'Nike Slim pant',
      slug: 'Nike-slim-pant2',
      category: 'Shirts',
      image: '/images/p4.jpg',
      price: 120,
      countInStocks: 10,
      brand: 'Nike',
      rating: 4.5,
      numReviews: 10,
      description: 'High quality shirt',
    },
    {
      name: 'Nike Slim pant',
      slug: 'Nike-slim-pant1',
      category: 'Shirts',
      image: '/images/p2.jpg',
      price: 250,
      countInStocks: 10,
      brand: 'Nike',
      rating: 4.5,
      numReviews: 10,
      description: 'High quality shirt',
    },
  ],
};

export default data;

I have made sure that both the backend and the frontend are running together i am getting this error from the web

from this error i was able to conclude that it is on the server side

i am following this video https://www.youtube.com/watch?v=CDtPMR5y0QU at 1:10:30 i have made everything the same as the video please help me

this is his code in the homescreen