The problem ended up being that I was using React-Router-Dom apparently if you use routing in your react file you need to add additional routing for it to work when it deploys. I ran into this same problem when I tried to deploy another react app to Netlify here Deploying from Github to Netlify This is good to know in general since Router is so nice to use in React, it seems anyone who tries to deploy using router in react is likely to run into a conflict unless they build in additional routing instructions. Here is one solution to this problems https://stackoverflow.com/questions/41772411/react-routing-works-in-local-machine-but-not-heroku I did not use that solution because I found that after I got help to solve my issue. I got help solving my problem and the solution I am using can be seen here https://github.com/JeanPeel/project-3/blob/master/server.js
function sendIndex(request, response) {
const indexPath = path.join(__dirname, 'client', 'build', 'index.html');
response.sendFile(indexPath);
}
app
.get("/Form", sendIndex)
.get("/Habits", sendIndex)
.get("/Leaderboard", sendIndex)
.get("/Login", sendIndex);
Basically that code is manually routing back to the main page.