ProductScreen cartscreen not showing

these are my two problems. anytime i click on a product in the homescreen i get these error and i dnt see the product screen at all or even the cartscreen.

server.js
import express from 'express';
import data from './data';
 const app = express();
  app.get("/api/products/:id", async (req, res) => {
    const product = await product.findById(req.params.id);
    if (product) {
       res.send(product);
     } else {
       res.status(404).send ({ msg : "Product Not Found."}) 
     } 
});
 app.get("/api/products", (req, res) => {
    res.send(data.products);
});
 app.listen(5000, () => {console.log("Server started at http://localhost:5000") });
 productscreen
 import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { detailsProduct } from '../actions/productActions';
import { addToCart } from '../actions/cartActions';
import { useParams } from 'react-router-dom';
 function ProductScreen(props) {
    const { id } = useParams(); // get the id parameter from the URL
    const [qty, setQty] = useState(1);
  const productDetails = useSelector((state) => state.productDetails);
  const { product, loading, error } = productDetails;
  const dispatch = useDispatch();
   useEffect(() => {
    dispatch(detailsProduct(id));
  }, [dispatch, id]);
   const handleAddToCart = () => {
    props.history.push(`/cart/${id}?qty=${qty}`); // use template literals to include the id and qty in the URL
};
    if (!product) {
    return <></>;
  }
   return (
    <div>
      <div className='back-to-result'>
        <Link to='/'>Back to result</Link>
      </div>
      {loading ? (
        <div>loading...</div>
      ) : error ? (
        <div>{error}</div>
      ) : (
        <>
          <div className='details'>
            <div className='details-image'>
              <img src={product.image} alt={product.name}></img>
            </div>
            <div className='details-info'>
              <ul>
                <li>
                  <h4>{product.name}</h4>
                </li>
                <li>
                  {product.rating} Stars ({product.numReviews} Reviews)
                </li>
                <li>
                  Price: <b>{product.price}</b>
                </li>
                <li>
                  Description:
                  <div>{product.description}</div>
                </li>
              </ul>
            </div>
            <div className='details-action'>
              <ul>
                <li>Price: {product.price}</li>
                <li>
                  Status:{' '}
                  {product.countInStock > 0 ? 'In Stock' : 'Unavailable'}
                </li>
                <li>
                  Qty:
                  <select
                    value={qty}
                    onChange={(e) => {
                      setQty(e.target.value);
                    }}
                  >
                    {[...Array(product.countInStock).keys()].map((x) => (
                      <option key={x + 1} value={x + 1}>
                        {x + 1}
                      </option>
                    ))}
                  </select>
                </li>
                <li>
                  {product.countInStock > 0 && (
                    <button
                      onClick={handleAddToCart}
                      className='button primary'
                    >
                      Add to Cart
                    </button>
                  )}
                </li>
              </ul>
            </div>
          </div>
          <div className='details'></div>
        </>
      )}
    </div>
  );
}
 export default ProductScreen;
 store.js
 import {createStore, combineReducers, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import Cookie from 'js-cookie';
import { productListReducer,  productDetailsReducer} from './reducers/productReducers';
import {cartReducer} from './reducers/cartReducers';
 const cartItems = Cookie.getJSON("cartItems") || [] ;
 const initialState= {cart: { cartItems } };
 const reducer = combineReducers({
    productList: productListReducer,
    productDetails: productDetailsReducer,
    cart: cartReducer
})
const composeEnhancer =window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, initialState, composeEnhancer(applyMiddleware(thunk)));
 export default store;

1. Proxy error: Could not proxy request /api/products/9 from localhost:3000 to http://127.0.0.1:5000.
   See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
2. GET http://localhost:3000/api/products/9 500 (Internal Server Error)