Problem Connecting Backend to UI with React

Question

It is my first time trying a fullstack project, and right now I am testing what can I do and how can I do. The code is for a basic auth system. My project uses react and my folder structure is like this:

--backend

--UI => components and pages

(both backend and UI folders are under src)

In pages folder I have a jsx file called "Login":

import { Link } from "react-router-dom";
import { useState } from "react";

function Login() {

    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const checkInformation = async () => {

        setEmail(document.getElementById("form-control-mail").value)
        setPassword(document.getElementById("form-control-password").value)

        if (email == "" || !(email.includes("@")) || email == "@") {
            alert("Please Fill an Actual E-mail")
        }

        else if (password == "") {
            alert("Please Fill an Actual Password")
        }

        else {
            alert("Nice")

            const data = {
                mail: email,
                password: password
            }
            
            const options = {
                method: 'POST', 
                headers: {
                  'Content-Type': 'application/json', 
                },
                body: JSON.stringify(data)
            }

            const sendRequest = async () => {
                try {
                    const response = await fetch("http://127.0.0.1:8080/login", options);

                    if (!response.ok) {
                        throw new Error(`HTTP error! Status: ${response.status}`);
                    }

                    const userCheck = await response.json();
                    console.log(userCheck);

                } catch (error) {
                    console.error(error);
                }
            };
            
            sendRequest();
            
        }
    };

    return (
        <>
            <nav>
                <div>
                    <Link to={'/sign-in'}>Chelly</Link>
                    <div>
                        <ul>
                            <li><Link to={'/sign-in'}>Login</Link></li>
                            <li><Link to={'/sign-up'}>Sign up</Link></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <form>
                <h3>Sign In</h3>

                <div className="email-input">
                    <label>Email address</label>
                    <input
                        type="email"
                        id="form-control-mail"
                        className="form-control-mail"
                        placeholder="Enter email"
                    />
                </div>
                <div className="password-input">
                    <label>Password</label>
                    <input
                        type="password"
                        id="form-control-pass"
                        className="form-control"
                        placeholder="Enter password"
                    />
                </div>
                <div className="submit-input">
                    <button type="submit" onClick={checkInformation}>Submit</button>
                </div>
                <p className="forgot-password">
                    Forgot <a href="/forgot-password">password?</a>
                </p>
            </form>
        </>
    )
}

export default Login;

right now you might ignore bad practices like encoding password or such because the important part in this code is the first part before return, where I have set up the logic for fetch method.

Here is the code for server in a file called "server.js" in backend folder:

import express from "express";
import bodyParser from "body-parser";
import cors from "cors"
import env from "dotenv"
env.config();

const app = express();

app.use(bodyParser.json());
app.use(cors())

app.listen(process.env.PORT, () => {
    console.log(`Listening on port ${process.env.PORT}`);
});

app.post("/login", (req, res) => {
    console.log("Connection Made")
})

(I am sure that dotenv returns the correct Port.)

The problem is when I try to make a post request in postman, the app gets stuck in sending request screen:

(Google Bard and ChatGPT told somethings about turning on and off the proxy, but nothing happened in both cases)

If I sounded stupid, I am sorry because I really didn't understand what is the problem. The problem might be about my understanding of the concept or a typo, but after hours of work, I wasn't able to solve the problem. I am open to any kind of responses. Also I have changed my package.json, so I can run the server and start react development server at the same time. Here it is

"dev": "vite & node ./src/backend/server.js",

Answer 1

in

app.post("/login", (req, res) => {
    console.log("Connection Made")
})

you need to return something (so you can see it in post man), for example:

app.post("/login", (req, res) => {
    console.log("Connection Made")
    res.json({isWorking: true})

})