MERN STACK Failed to load resource: net::ERR_CONNECTION_REFUSED

Question

I have been googling and cannot find a solution to my issue.

I AM NEW to the MERN stack, mostly do front end stuff.

This project is created using MongoDB ATLAS, React, Express and node.js

I have the app deployed to heroku, and the app is displaying but I cannot use it, i get the error Failed to load resource: net::ERR_CONNECTION_REFUSED. But i can see and interact with the front end of it, but the back-end is not working i'm assuming.. I can navigate pages etc.. But when I enter information and try to store it to the server, nothing happens, just the front end portion, but nothing connects or sends to the server, i keep getting that connection refused error. Then this error follows immediately after : Uncaught (in promise) Error: Network Error

I'm using mongoDB atlas, I'm not sure if that makes a difference there or not. I do believe I set it up to be accessed anywhere too, not just my IP.

Now when I run on my local machine it all works totally fine. IF I'M ON the heroku deployed version, WITH MY local machine server running, it works fine. But as soon as i shut my local server down, that errors comes back on the heroku deployed version.

This is my server.js file:

const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');
/* for heroku deployment */
const path = require('path');

require('dotenv').config();

const app = express();
const port = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());
/* for heroku deployment */
app.use(express.static(path.join(__dirname, "client", "build")));

const uri = process.env.ATLAS_URI;
mongoose.connect(uri, { useNewUrlParser: true, useCreateIndex: true });

const connection = mongoose.connection;
connection.once('open', () => {
    console.log("MongoDB database connection established successfully")
})

const exerciseRouter = require('./routes/exercises');
const userRouter = require('./routes/users');

app.use('/exercises', exerciseRouter);
app.use('/users', userRouter);
/* for heroku deployment */

if(process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  })
}

app.listen(port, () => {
    console.log(`Server is running on port: ${port}`)
});

I also tried:

app.get("*", (req, res) => {
   res.sendFile(path.join(__dirname, "client", "build", "index.html"));
})

Instead of the conditional.

This is my backend package.json file.

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },
  "engines": {
    "node": "10.15.3"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "mongoose": "^5.7.12"
  }
}

I also tried:

"heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"

here too.

This is my Front-end package.json file:

{
  "name": "mern-stack-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "react": "^16.12.0",
    "react-datepicker": "^2.10.1",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000",
  "eslintConfig": {
    "extends": "react-app"
  },
  "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 a link to the site deployed on heroku if you wish to see for yourself: https://full-stack-exercise-tracker.herokuapp.com/

If you need any more code files from me please just ask. Like I said this is my first ever MERN stack app and MERN stack deployment.

I appreciate any help, thank you!