Getting server error when deploy a MERN app to Heroku

Question

Fail to load resource: server 503(service unavailable)

First thing, I am not sure whether I had set up the port correctly. My React frontend is running on localhost:3000 while my Express backend is running on localhost:3001

This is my .env file. enter image description here

This is my server.js. enter image description here

On the frontend side, whenever doing a HTTP request, I use Axios, the endpoint url is "http://localhost:3001/app/Member", something like that. I already had a MongoDB Atlas connected with the app, it is working perfectly on localhost:3001, but I have problem trying to deploy it to Heroku. Some people said there is connection problem between MongoDB Atlas and Heroku, they suggest using the MongoDB sandbox in Heroku to solve this problem, but I already have the database with all the data that I want to used with the app, is there any way that I can import the data from my database to the MongoDB sandbox?

I tried to use "heroku local" to test whether is working, the app is running on localhost:5000, I can see my signup and login page, but I am not able to signup or login with a user email and password like I did perfectly on development mode localhost:3000.

I deployed it to heroku live, it gave me a server 503 error(service unavailable). I logged out the error.enter image description here